CardPro

transform-style: preserve-3d plus translateZ on the children is what gives the parallax.

A blurred conic gradient behind the card, turning slowly. The glow carries the colour because it is a copy of the gradient, not a shadow.

Two custom properties from pointermove. Here they animate so you can see it without a mouse.

One image clipped over another with a handle at the cut. clip-path moves, nothing is redrawn.

A 300 ms lift hands off to a 1.5 s oscillation. Two animations composed, not one.

The front card lifts away and parks at the back while the others move up. Each card runs the same animation at its own offset.

A masked backdrop-filter. The mask is what makes the blur ramp instead of cutting.

The page-corner fold. The crease is one gradient with four stops; nothing modern ships it.

A conic-gradient cone with a blurred bar at its mouth. The bar is what makes it a light source instead of a smudge.

60 cells, each with a staggered delay computed from its index. No randomness needed.

The only place a blank area is allowed to take its time.

A radial-gradient dot grid with a mask that fades it out at the edges. The mask is what keeps it from looking like graph paper.

A card thrown onto a table. Skew plus two rotations does what no 2D transform can.

backdrop-filter over a turning gradient, with a light inner edge. The edge is what makes it read as glass and not as a blur.

A phone shell with the screen content arriving line by line. The notch is a pseudo-element, not an image.

Kills the max-height hack. Chromium 129+ only; Firefox and Safari still open.

A flat grid rotated 62° on X with perspective. Scrolling it one cell fakes infinity.

Lines radiating from the centre with a rotated transform-origin, each scaling as it travels outward.

The recessed state. Eleven directions in the real set; this is the top edge.

The lifted card and the ghost slot it will drop into.

Letterbox bars slam in, hold for half the run, then release. The hold is the point.

The shadow lives on its own layer, so it can grow while the element rises. That separation is the trick.

Two identical halves; moving by exactly -50% loops with no seam.

A radial mask cut into the top layer reveals a second one underneath. Two custom properties from one pointermove.

Growing through the halfway point hides the paper-thin moment of a plain flip.

48 tiles over one gradient, each with a delay derived from its index.

Three blurred circles on mix-blend-mode: screen. No shader, no canvas.

feTurbulence as an inline data URI — the grain costs about 300 bytes.

Points drifting upward with per-particle size and delay. A glow comes from a box-shadow in the same colour.

A gradient border-box plus the same gradient blurred behind it — the glow is a copy, not a shadow.

Thin vertical gradients falling at different speeds. One property animated, one node per beam.

Concentric rings expanding from a single point at staggered delays. Good behind an empty state, where a static illustration would go stale.

A cover layer with a radial hole cut into its mask. Moving the hole is the whole interaction.

Streaks on a rotated track, each with its own delay and column. The tail is a pseudo-element, so a streak is one node.

Every list, grid and row set — sibling-index() replaces the hand-written nth-child delays shown here. One rule instead of twenty.

The skeleton has the shape of the content, so nothing jumps.

Six bands of one image sliding in from alternating sides. sibling-index() replaces the hand-set --i.

Each card parks under the next as it scrolls past. Sticky plus a view() timeline, no library.

Two SVG paths at different speeds and directions. Offsetting the speeds is what stops them reading as one shape.

Tiles wake in sequence: a tint, a small lift and a shadow, each on its own delay.

The ring trails the dot by 120 ms — that lag is the entire illusion of weight.