One clock
Every tile is a pure function of a single time value, t, from 0 to 8 seconds. Pause, scrub and speed act on all sixteen at once, and any frame can be reproduced exactly.
Sixteen motion graphics, designed and coded for this page, all running on one eight-second clock. Pause it, scrub it, slow it down, or open any tile to study it frame by frame.
Four decisions make sixteen animations behave as one piece.
Every tile is a pure function of a single time value, t, from 0 to 8 seconds. Pause, scrub and speed act on all sixteen at once, and any frame can be reproduced exactly.
Each effect is drawn live in Canvas 2D with plain JavaScript. There is no animation framework, no GIF and no video file; the whole board is one HTML page.
Effects build, hold and clear inside the eight seconds. Ambient motion uses whole-number frequencies, so the frame at 8.0 s is the frame at 0.
Only tiles on screen are drawn. When a visitor asks for reduced motion, the board opens paused on a finished frame and plays only when asked.
Launch films, product walkthroughs, data stories and brand stings, designed and built in-house by the team behind this observatory.
All figures shown in the animations are illustrative demo values, not real data.