Holo

A landscape identity card, 1.55 to 1 like a credit card, sits in the middle of a soft grey ground and reads "Wanderer, member since May 2023", with a small picture tile in its corner. It tilts toward the pointer in real 3D, up to 14 degrees, under an 1100px perspective. A holographic foil above the printed surface slides as it moves, its bands catching the light, a glare and a sheen ride across, and a faint heart pattern comes up on the side you turned while the other side presses into the print. With no pointer it wanders on its own, slowly, on two rates that never line up.

The lag is the effect. Two followers chase their targets at different weights: the card at 0.16 of the gap per frame and the foil at 0.09, so the surface catches up to the card a few frames late instead of moving with it, which is most of what separates this from a gradient following a cursor. The pointer takes the card with an eased pick-up from wherever it had drifted, gives it back with an eased release into the drift, and a flick on leave throws it a little past rest by the speed it left at.

All of it is CSS. The card is a stack of layers, a fixed print, two pattern passes, three foil slots, a velocity smear, a flare, grain, glare and sheen, the content, and the tile with its own nine layers. The loop writes a few dozen custom properties per frame, the rotation, each layer's offset, opacity and blend, the glare's position, and the stylesheet reads them; nothing in CSS animates. A material is the paint of the three foil slots, how far the sheet slides per unit of tilt and how hard it comes up off face-on; ten materials range from a sparkle field to a conic swirl to brushed metal.

The tile is a different material on purpose: a hard two-colour duotone with a highlight but no rainbow. Past a certain tilt the two colours trade places, swept across by a travelling mask over a negative copy, because a filter cannot invert part of an element. The picture is drawn as SVG, so nothing loads.

• Build the card as absolutely stacked layers inside an element with transform-style preserve-3d and rotateX and rotateY from custom properties, under a parent perspective of 1100px.
• Follow the target with two exponential followers, 0.16 for the card and 0.09 for the foil, and drive the foil from the foil follower so it arrives late.
• Untouched, set the target from sin and cos of a slow clock at two incommensurate rates; ease the target from the pointer back into that drift over about a second, and in from the drift to the pointer the same way.
• On leave, fire a decaying kick along the release velocity and add it on top of the target.
• Each frame, write the tilt, each foil layer's offset from the sheet times the material's parallax, the bloom off face-on, the glare position and the tile's flip as custom properties.
• Flip the tile's duotone past a tilt by sweeping a mask across a negative copy of the picture.
• Under reduced motion, lay the card flat with its foil at rest and never start the loop.

• CARD_NAME, CARD_LINE ("Wanderer", "member since May 2023"): What the card says.
• FOILS (ten materials, Holo first): The foil materials, in engine.ts: each one's layers, parallax, bloom and glare.
• MAX_TILT (14): The most the card turns, in degrees.
• TILE_IMAGE (a sun over two ridges and a lake): The picture on the tile, in tile-image.ts.
• GROUND (a soft grey fall-off): The card's surroundings.
• DESIGN_WIDTH (528): The card width the corners and type are tuned at; a wider card scales up.