Animation studies

Three pages,
three techniques.

Rebuilt from the reference videos in this repo. No framework, no build step, no npm install — open a file and it runs. Each one isolates a different way of moving things on a page, so you can lift the part you need.

01 — Scroll-scrubbed canvas

ZOI Ice Tea

A can frozen in ice shatters into 58 procedural glass shards as you scroll, then a deck of cards fans open in 3D. Every value is read from scroll position, so it plays backwards correctly.

Canvas 2D · sticky sections · zero dependencies

02 — Real 3D, drag to rotate

Astrea GT‑R

A glTF model on a sticky canvas. Swipe spins it with inertia, scrolling walks the camera around and lifts all 51 panels apart, then puts them back. Swap in your own .glb and it still works.

three.js · glTF + Draco · needs a local server

04 — 3D with no model file

Arena

A loot crate that hinges open on four panels and a rifle that runs a full reload — both built from three.js primitives. No .glb, no download, no licence: ~15 KB of geometry instead of 2.5 MB of asset.

three.js · procedural geometry · phone-safe

05 — Raymarched, no geometry at all

Flux

A chrome blob with no vertices. The shape is a distance function marched per pixel on the GPU; scrolling pulls the seven spheres apart until the smooth-minimum can no longer hold them together and a droplet separates.

GLSL · signed distance fields · one triangle

06 — Water you can disturb

Mirror

A reflection sitting in water that runs the real damped wave equation on the GPU. Move the pointer and ripples spread at a finite speed, interfere, bounce off the edges and die out — none of which a scrolling noise texture does.

GLSL · ping-pong buffers · pointer-driven

03 — Hand-projected particles

RAW Pressery

540 particles on a tilted ring, projected by hand and depth-sorted into two canvases — one behind the bottle, one in front. That split is what makes the juice orbit rather than sit on top.

Canvas 2D · painter's algorithm · zero dependencies