Engine showcase

Every part, running live.

Nothing on this page is a screenshot. Each block is the same component a client site uses, with the file that provides it printed beside it.

Quality tier: medium
WebGL: webgl2
Max DPR: 1
Reduced motion: Off

Text engine

Line, word and character reveals that keep the original string in the accessibility tree.

components/animation/*

Line mask · RevealText

Lines rise out of their own mask.

Word stagger · WordReveal

Words arrive one after another.

Character stagger · CharacterReveal

Character by character.

Clip path · MaskReveal

Any element, wiped open.

Every split element keeps its original string in an aria-label and marks the generated spans aria-hidden, so a screen reader hears one ordinary sentence.

Parallax

Scroll depth on scrubbed transforms, plus optional pointer depth. Reduced on mobile, removed under reduced motion.

components/animation/Parallax.tsx

Foreground layer

speed 0.25 · mouse 26px

speed 0.8

Interaction

Magnetic buttons, cursor states and counters — the layer that makes a page feel handled rather than generated.

components/animation/MagneticButton.tsx · system/CursorFollower.tsx

Magnetic buttons · desktop only

Pull

Nothing binds on touch devices or under reduced motion, so there is no dangling listener and no unexpected movement.

Cursor states · hover to change

defaulthoverlinkviewdragimage

Counters

480+99.4%

Scroll storytelling

A pinned section, a WebGL scene and a text layer driven by one normalized progress value.

components/cinematic/PinSection.tsx · ScrollScene.tsx · StorySequence.tsx

Beat one

A story is a list of beats.

Each beat owns a slice of scroll progress from 0 to 1.

Beat two

The engine interpolates between them.

Camera, object transform, lighting and colour all blend continuously.

Beat three

Nothing ever cuts.

Text cross-fades on its own ramp while the camera keeps travelling.

Cinematic camera

Named presets, interpolated by a damped rig with pointer parallax and idle drift. Click a preset — the camera travels, it never cuts.

components/three/CameraRig.tsx · lib/three/camera.ts

Image sequence

Canvas-rendered frames scrubbed by scroll, loaded sparse-first so the sequence is usable long before every frame has decoded.

components/media/ImageSequence.tsx

60 frames · scrubbed

0% decoded

3D models

This viewer is loading a real .glb — an original placeholder generated by npm run assets:model. Point it at a client model and nothing else changes; point it at a file that does not exist and the procedural subject takes over.

components/three/ModelViewer.tsx · GLTFModel.tsx

Horizontal scroll

Vertical scrolling drives horizontal travel, then hands scrolling back. On touch it becomes a native snap carousel.

components/animation/HorizontalScroll.tsx

Full wrap2025

Satin Graphite GT

Satin graphite over factory white, gloss-black roof, chrome delete.

Colour change2025

Ember Coupé

Two-stage candy over a metallic base, hand-finished edges.

PPF + ceramic2024

Ice Touring

Full-body protection film with ceramic top layer.

Commercial livery2024

Sand Overland

Expedition livery designed around roof rack and door geometry.

Custom design2024

Moss Estate

Deep green satin with a matte accent stripe over the shoulder line.

Visual effects

Grain, noise, vignette, glow, light sweep and velocity-driven displacement. Shown here at exaggerated intensity; production values are a fraction of this.

components/effects/*

Grain

Noise

Vignette

Glow

Light sweep

Distortion · scroll to displace

SCROLL

An SVG displacement filter driven by scroll velocity. High tier only — it settles back to zero the moment scrolling stops.

Section transitions

Scrubbed seams between acts, so the visitor controls the cut.

components/cinematic/SectionTransition.tsx

Same engine, five templates.

Everything above is shared infrastructure. A template only decides section order, density, motion budget and scene.

Browse templates Open the studio