Everything, as it landed

A two-column timeline whose rail is drawn in as the list scrolls past, with a big sticky label holding each entry's date beside it while you read.

• Scroll the list — the rail draws in behind you and stops exactly as the last entry is reached.
• Each label sticks in its own column and gives way to the next one, so the year you are reading under is always the one on screen. Below `md` the two columns collapse and the label moves inline above the card.
• Turn the fill off and the rail is a plain line; nothing else changes.

A project gallery in two states with one morph between them: the hovered plate and the hovered title travel to the centre and become the detail view, rather than being replaced by it.

• Move down the list — the plate top-left swaps to whichever project you are on, and the marker follows.
• Click a title. It flies to the heading position while the plate flies to the centre; the copy arrives after they land.
• Drag the opened plate — it is thrown against a spring and settles back.
• Click the heading, the empty space around it, or press Escape. Everything travels back to where it came from.

A card presented as one frame of film: it turns to follow the cursor, a specular highlight rakes across it, and registration marks float above the image on their own Z plane.

• Move the cursor across the card: it turns toward the pointer and the highlight tracks under it.
• Leave the card — it springs back to flat rather than snapping.
• The registration marks fade in on hover and sit furthest off the plate; the parallax between them and the image is what sells the depth.

The segmented rail above a story: everything before is full, everything after empty, the current one filling — and it holds exactly where you pause it.

• Tap the right two-thirds for the next story, the left third to go back. At the first one, back restarts it.
• Press and hold anywhere — the segment freezes mid-fill and the chrome fades out of the way.
• Let go and it resumes from where it stopped rather than restarting the segment.

The dialog that covers a download while the real work happens — an eased bar over a log that only grows.

• Watch the tail — the bar slows as it fills rather than running linearly to the end.
• Run it again: the log replays one line at a time and never rewrites a line it has already printed.

Full-screen intro that rolls one word through every script it knows, then lifts away behind a curved edge.

• Watch the cadence — the first word holds long enough to read, the rest flick past.
• The word leaves ahead of the panel, and the curved bottom edge collapses rather than travelling with it.

Return-to-top button with the page's own scroll progress drawn around it as a ring.

• Scroll past the threshold and it fades up from below.
• Watch the ring — it fills with the document, so it answers how much is left at the same moment it offers to undo the scroll.

A fullscreen hero for a performance car marque: the same shot of the car dark and lit, stacked, with a cursor-tracked spotlight that reveals the lit plate through a feathered mask — and a button that latches the whole thing open for anyone without a cursor.

• Cursor-following spotlight written straight to the reveal layer as a CSS radial-gradient mask — no canvas, no per-frame PNG encode.
• Intensity easing that is separate from position easing, so the light fades in and out on pointer enter and leave rather than snapping.
• An ignition latch that opens the reveal completely, which is the whole effect on a touch device — not a desktop extra bolted onto the corner.
• Glass navigation with an absolutely centred pill, and a mobile sheet that hangs off the bar rather than covering the stage.

Cards of different widths on one track, rising in on a stagger, each holding a list, a set of tiles or whatever you put in it.

• Cards rise in on a stagger the first time the grid is scrolled into view, once.
• Hover a card: it lifts on a spring, its border brightens and the corner arrow fades in.
• Hover an entry inside a card for its own reveal — the nested groups are independent.

Sticky table of contents that follows the heading nearest the top and opens whichever section owns it.

• Scroll the panel — the marker follows the heading nearest the top, and the section holding it opens on its own.
• Click a chevron to open a group, or click the open one to shut it. Only one is ever open.