Isometric animation

Isometric Cube Wave

Isometric Cube Wave is a generative animation built from a grid of small isometric cubes. Each cube reads a height from a smooth, seamless noise field, so the whole surface breathes like a slow ocean swell that never repeats a hard seam and never stops.

What it is

It runs completely on your device. There is no server, no sign-up and nothing uploaded — the frames are computed live on a background thread and drawn to a canvas, so you can tune the grid density, wave amplitude, tile size, palette and camera angle and watch the motion change instantly.

The motion is deterministic: the same seed and settings always produce the same wave, and the loop closes cleanly at the chosen period. That makes it handy for looping backgrounds, header art, screen recordings, wallpapers and mood-board textures — export a still frame as a PNG whenever a moment looks right.

How it works

  1. 01 — Every tile in the grid samples a height from a smooth 4D noise field. Two of those dimensions trace a circle over time, so the field returns to where it started at the end of the loop — that is why the wave repeats with no visible seam.
  2. 02 — Each height becomes an isometric cube: the tile is projected to screen with the classic 2:1 isometric transform, then raised by its height. A perceptual OKLab color ramp maps low tiles to one end of the palette and tall tiles to the other.
  3. 03 — Cubes are drawn back-to-front — sorted by depth — so nearer cubes cleanly overdraw the ones behind them. Everything is plain 2D canvas: no WebGL, cheap enough to animate smoothly and deterministic enough to reproduce exactly from a seed.

What to use it for

  • Looping background video for a landing page hero or title card
  • Ambient motion for a stream overlay or screen recording
  • A still PNG frame for wallpapers, posters and social banners
  • Texture and mood-board material for design and game work