Two second 3D animations built to play once, then rest.
Motion Thumbnails Supercut
The Idea
Every case study and experiment entry on this site has a thumbnail animation. Not a GIF, not a static image. A two-second 3D render built in Blender, with a transparent background, played on scroll and settled on a final frame that stays.
The settling frame is the point. These don't loop. They play once, land somewhere considered and rest there. That final frame is what people spend time looking at.
One animation per piece. Each built to the same precise specification.
How It Works
- Each animation rendered from Blender as a PNG sequence at 60fps over two seconds, 120 frames total. First and last frames extracted as static PNGs.
- Two video files generated per animation: WebM with transparency for all browsers via terminal command, HEVC with transparency for Safari using Apple's built-in export tools.
- A custom React component handles playback with four media files: first frame PNG on preload, video fires on scroll (HEVC on Safari, WebM everywhere else), plays once and hands off to the final frame PNG. The final frame doubles as a poster across other components on the site.
What I Learned
Transparent video across every browser is harder than it sounds. HEVC with transparency is Safari-only and encodes differently. WebM handles transparency well but needs careful export settings to keep file sizes in check. The four-file approach came from necessity, not preference.
The two-second constraint changed how the animations were designed. No slow builds, no held poses. Every frame has to contribute. Each animation is almost entirely kinetic: it moves, settles and stops. The constraint made them better.
