Infinite scroll — one tile, endless world

Make a seamless tile repeat, then slide the reading position (in shaders: the UV offset) by time. The tile below is generated in code, then scrolled forever at two speeds for instant cheap depth.

// generate one seamless 80x80 "cloudy" tile in code
function makeTile(hue) {
  const t = document.createElement("canvas");
  t.width = t.height = 80;
  const g = t.getContext("2d");
  for (let i = 0; i < 26; i++) {
    // seamless trick: draw each blob 4 times, wrapped
    const x = Math.random() * 80, y = Math.random() * 80;
    const rr = 8 + Math.random() * 14;
    g.fillStyle = "hsla(" + hue + ", 45%, 70%, 0.16)";
    [[0,0],[80,0],[0,80],[80,80]].forEach(([ox, oy]) => {
      g.beginPath();
      g.arc((x + ox) % 160 - 40, (y + oy) % 160 - 40, rr, 0, 7);
      g.fill();
    });
  }
  return t;
}
const skyTile  = makeTile(235);   // periwinkle clouds
const mistTile = makeTile(270);   // violet mist

const sky  = ctx.createPattern(skyTile,  "repeat");
const mist = ctx.createPattern(mistTile, "repeat");

function scrollLayer(pattern, speed, t) {
  const offset = (t * speed) % 80;      // ← the UV slide
  ctx.save();
  ctx.translate(-offset, 0);            // move the reading position…
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, W + 80, H);        // …draw one tile extra
  ctx.restore();
}

onFrame((dt, t) => {
  ctx.clearRect(0, 0, W, H);
  scrollLayer(sky,  12, t);   // slow = far
  scrollLayer(mist, 40, t);   // fast = near
});

The % 80 is the secret: after one tile-width, the offset resets and no one can tell. That's the whole "infinite."

Try tweaking: speeds 12/40 → 40/12 (near becomes far) · vertical scrolling: translate(0, -offset) and fillRect(0, 0, W, H + 80) · hues 235/270 → 10/30 for drifting embers-sky.

In Godot: a one-line shader — UV += vec2(TIME * 0.03, 0.0); (import the texture with Repeat on; download scroll_uv.gd + its shader). In Unity: material.mainTextureOffset += new Vector2(speed * Time.deltaTime, 0);. In Unreal: the material Panner node exists precisely for this. Chapter 04.