Websites that move, and the systems behind them

A swirl of green and teal ink gathers into crisp words, holds like a two-colour print, then bleeds back into ink.

ScriptSVG filters: feTurbulence, feDisplacementMap, feMorphology, eased every frame

A wave of weight rolls through the word, and letters near the pointer swell heavier and turn green.

ScriptVariable font weight axis (font-variation-settings), pointer falloff

Flaps clatter through random letters in a left to right stagger and land with a bounce on each word.

ScriptCSS 3D rotateX on split cards, seeded flip timing

A sentence lights word by word from faint and blurred to white as you scroll, and the key phrase gets a highlighter sweep.

ScriptScroll position, eased, written to each word

Letters flee the pointer, tumbling and changing colour, then spring back home.

ScriptSpring physics per letter, transforms only

Every few seconds the headline slices into bands that jump sideways with a red and teal split, then snaps back.

ScriptCSS clip-path bands, mix-blend-mode, seeded bursts

Hollow glass letters fill with green and teal liquid, waves and rising bubbles, then drain.

ScriptSVG text as a clip path, wave paths rebuilt every frame

Type in rippling liquid metal, reflecting a studio horizon and bands of colour.

Scriptthree.js shader, height map from canvas text, reflected environment

Line icons draw themselves one after another behind a glowing nib, then fill with colour and settle with a bounce.

ScriptSVG pathLength and stroke-dashoffset, getPointAtLength for the nib

One large icon melts from calendar to pin to star to chat, trailing ghost outlines and landing with a ripple.

ScriptSVG path sampling (getPointAtLength), aligned start points, spring easing

Glass app tiles swell, push each other aside and lean towards the pointer, with a reflection below.

ScriptDamped springs, transforms, CSS mask-image for the reflection

Coloured icon bubbles orbit a centre drop and merge like paint; tap one and it dives in.

ScriptSVG gooey filter: feGaussianBlur, then a feColorMatrix alpha threshold

Thick glossy badges turn towards the pointer, with a sliding glare, holographic foil and the icon floating off the face.

ScriptCSS 3D perspective and translateZ, color-dodge foil from CSS variables

A turning phone separates into its layers with labelled guide lines, then snaps shut. Hover or tap to hold it open.

ScriptCSS 3D: preserve-3d and translateZ layers

A wobbling drop of glass magnifies the photo wherever you point.

Scriptthree.js shader, barrel distortion, chromatic edge

The next photo arrives through a ring of water from where you tap.

Scriptthree.js shader, radial wave displacement, two textures

A photo sharpens out of big tiles of colour in a diagonal wave.

Scriptthree.js shader, power of two mosaic

A flat photo gains depth: the steel moves against the sky as you move.

Scriptthree.js shader, depth worked out from the photo, 2.5D parallax

A halftone print of a photo, with a lens that turns the dots back into the picture.

Scriptthree.js shader, rotated dot screen

A photo in brand duotone; a band of full colour sweeps in behind a glowing scan line as it reaches the middle of the screen.

ScriptSVG feColorMatrix and feComponentTransfer, clip-path from scroll position

Strips of the next photo drop and rise in turn behind a green light bar, then shift with the pointer like louvres.

ScriptTransforms on strip windows of one image, pointer depth

A living field of brand colour that swirls round the pointer. The top of this page uses it.

Scriptthree.js shader, domain-warped noise

Twelve thousand points flow from a sphere to a knot to a tower to our name.

Scriptthree.js Points, two shapes mixed in the vertex shader

A clear glass knot turns slowly and bends the type behind it.

Scriptthree.js physical material: transmission, iridescence

Scrolling builds a tower floor by floor while the camera climbs round it.

Scriptthree.js scene scrubbed by scroll position

A breathing contour map. The pointer raises a hill.

Scriptthree.js shader, noise height, contour lines with fwidth

Numbered cards slide sideways as you scroll down, the centre card facing you, giant type moving slower behind.

ScriptScroll position into translate3d and rotateY, perspective

A glowing route draws itself over a contour map as you scroll, lighting each stop as it arrives.

ScriptSVG pathLength and stroke-dashoffset from scroll position

The pointer is a torch that uncovers a blueprint traced over an aerial photo, with a live grid reference.

ScriptCSS mask-image, radial gradient at the pointer

Choose a photo card and it grows into its full story like a window opening, and back.

ScriptView Transitions API, document.startViewTransition

A drone flight at dusk towards a tower going up, playing forwards and back as you scroll. The footage was made with AI.

ScriptCanvas 2D, AI-generated footage cut into a WebP frame sequence, picked by scroll position

Walk a glass pavilion: the entrance, the atrium with an AI-generated scale model, the terrace. Point to look around.

Scriptthree.js scene, camera on a CatmullRom path, GLTF model