Hero Sections
Above-the-fold openers — a launch hero with a shared torn-paper horizon, a cinematic wasteland image sequence, an illustrated river escape, a scroll-driven botanical study, an interactive desktop, a botanical negative, a decoding ASCII sculpture, a sculpted blob kid, scattered media, cursor spotlights, gradient meshes and curtain reveals.
12 demos · hover a stage to interact · press Replay to re-run
Horizon launch — a shared curved horizon
A launch-page hero template. A torn paper collage, a planet's limb at sunrise and a macro study of gills are bent onto one curved horizon. Scroll inside the stage: the torn prints pull back, the name rises out from behind the horizon along its curve, then the date and contents settle in. Every word is a prop.
- WebGL2
- polar horizon mapping
- torn-paper shader
- SVG text on an arc
- scroll-scrubbed
Darwin Motion 2
September 23, 2026
Ashen eclipse — the awakening
A thirty-frame image sequence scrubbed by scroll: an armored hand breaks the ground of a ruined wasteland, rises before a green eclipse, then lowers and grips the earth. Scroll inside the scene, or focus it and use arrow keys or Page Down.
- 30-frame sequence
- scroll-scrubbed
- windowed decoding
- Canvas 2D
Beneath the surface — an illustrated escape
A sunlit river painted in turquoise and ink. Water ripples around two moving figures as catfish glide gently, aquatic plants sway and bubbles rise through the scene.
- original illustration
- water refraction
- living underwater scene
- WebGL
No. 001 — Take it slow
There’s another world down here.
BENEATH
THE SURFACE
Lilium — a botanical study
Thirteen scroll-driven frames turn a red lily into a digital specimen: registration grids, pixel silhouettes, negative scans, surface tracking, anatomy cards, and living geometry. Scroll inside the stage or use the timeline to explore.
- scroll choreography
- 13 frames
- pixel transitions
- botanical analysis
Lilium — a botanical study in thirteen frames
Desktop — a space for ideas
A macOS-inspired portfolio over slowly flowing blue surfaces with luminous edges. Click folders to open page windows, drag them around, or minimize them to the frosted dock.
- desktop interface
- folder navigation
- draggable windows
- application dock
Make yourself
at home.
A few projects, a few thoughts.
Open a folder. Stay a little.
Vector handwriting — botanical negative
A supplied handwriting vector becomes a growing negative-image mask and hands directly into an ivory welcome screen, where letters carve into the blank surface before black ink blooms from scattered points with irregular, spreading edges.
- custom SVG handwriting
- negative mask
- zoom-through transition
- scattered ink reveal
Welcome. You made it. Nothing particularly exciting happens here, but we felt like a welcome screen would make the whole thing look more professional. Click something, or don’t. Honestly, we’re just happy the page loaded.
ASCII decoding field
A dark sculptural ribbon twists through a character grid while oversized red type decodes into place. Move your pointer to shift the form.
- Canvas 2D
- character decoding
- pixel deformation
- pointer parallax
Blob kid
A softly sculpted character with seven possibilities. Choose a form and watch it melt, flow, and reform in a pastel studio. Drag to orbit, or inspect the silhouette from every side.
- WebGL2
- liquid transformations
- 7 forms
- no dependencies
An experiment in becoming
Blob kid.
Warming up the studio…
A little being. Endless possibilities.
Scattered media constellation
Thumbnails ring a centred wordmark, drifting on idle and swinging on pointer parallax at three different depths.
- useSpring
- depth parallax
- layered transforms
Minifolio
Cursor spotlight
A radial gradient tracks the pointer over a masked grid while the headline rises into place.
- useMotionValue
- useMotionTemplate
- mask-image
Design in
motion.
Move your cursor across the stage — the light follows.
Gradient mesh
Three blurred blobs on independent loops behind a frosted glass panel.
- keyframes
- blur
- backdrop-filter
Ship interfaces that breathe
Three blurred blobs on independent loops. Cheap to render, impossible to spot the repeat.
Split curtain reveal
Two panels retract from the centre seam, then the headline scales down into focus.
- transform
- staggered delay
- cubic-bezier
Split reveal
Curtains driven by transform, not width — no layout thrash.