Lab / 03
Motion Hero Library
“Eleven hero sections, each built around one motion idea.”
Interaction · 11 live heroes · films 1920 × 1080 · 60 fps · 202601Liquid FieldOpen live A pool of liquid chrome with the headline suspended beneath its surface.
02Particle GravityOpen live A single cloud of points that keeps becoming something: nebula, wordmark, planet, nebula.
03Kinetic GridOpen live A Swiss-print grid that behaves like fabric: it dents, folds into walls and turns on its axis.
04Orbital SystemOpen live A horological orrery: product modules ride inclined orbits around a luminous core.
05Type MachineOpen live Giant variable type run like machinery: strips, reels, pistons and slices.
06Chromatic GlassOpen live Frosted interface slabs floating over a living gradient, splitting the light that passes through them.
07Signal NetworkOpen live A field of devices routes light along circuit traces into one product object at the centre.
08Geometric BloomOpen live An ink-drawn mandala that breathes, blooms and changes its symmetry — six, eight, twelve, six.
09UI DimensionOpen live A real interface pulled apart in 3D space — surface, grid, components, content, interaction.
10Generative WorldOpen live A flight over an endless procedural dune sea, toward a colossal ring standing on the horizon at dusk.
11Tree of LifeOpen live A sacred fig grows from a single glowing seed in a misty forest clearing — bark, leaves and light, breathing as one.
About the experiment
Eleven heroes, one shared motion system.
Each runs live in the browser and renders to a ten-second film from the same scene code, through an AI-assisted workflow with human art direction, iteration and final QA.
- Format
- 11 interactive heroes · films 10s · 1920 × 1080 · 60 fps
- Built with
- WebGL2, GLSL, Canvas, CSS 3D, GSAP, React, Remotion
- Material
- Original code throughout. Every brand, interface and line of copy is fictional demo content.
In the library
- 01
Liquid Field
Pointer presses a dimple into the surface; its lag behind the cursor carves a wake.
- 02
Particle Gravity
The cursor is a gravity well: nearby points fall in and orbit it.
- 03
Kinetic Grid
The cursor is a weight on the sheet: a dent follows it, ray-cast onto the plane.
- 04
Orbital System
Pointer tilts the whole instrument in 3D; the bezel turns against it.
- 05
Type Machine
Letters near the cursor swell in width and weight — the type leans into the hand.
- 06
Chromatic Glass
A clear lens trails the cursor and magnifies whatever it crosses.
- 07
Signal Network
Nodes near the cursor wake: they glow, ring and fire extra signals home.
- 08
Geometric Bloom
The cursor's bearing tunes the figure: layers turn toward it at different ratios.
- 09
UI Dimension
Pointer orbits the camera around the stack.
- 10
Generative World
Pointer steers the camera's gaze across the horizon.
- 11
Tree of Life
Branches near the cursor lean away and open; warm light gathers on the bark it passes.