Holo Foil Card
Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically.
About This Effect
A card that behaves like real holographic foil. Move a pointer across it and five things answer the same gesture at once: the card tilts in 3D, a prismatic sheen slides across its face and shifts hue with the angle, a glitter layer twinkles on its own clock, the art and the type separate into depth, and a specular highlight tracks the light.
Read the full effect overview
Whip the pointer across it and the extreme state opens up: the sheen sweeps hard, the tilt overshoots past the pointer, and the glare blooms out to a blown highlight. Let go and it does not snap; it settles back to its resting pose with a single elastic overshoot.
The foil is CSS, not a filter: layered gradients under color-dodge, overlay and soft-light, positioned by custom properties that GSAP quickSetters write. Three recipes ship (rainbow prism, brushed chrome, cracked ice) and writing a fourth is one background rule.
What's Included
- Five channels on one input: 3D tilt, angle-dependent iridescent sheen, independently twinkling glitter, art-versus-type depth parallax, and a specular glare that blooms only near grazing angles
- Real material layering rather than a hue-rotate: prismatic gradients under color-dodge, a specular under overlay, a laminate bevel under soft-light, and a screen-blend bloom that stays shut until it is earned
- Whip response with velocity lead, so a hard flick makes the tilt overshoot past the pointer and the highlight blow out, then recover
- Elastic settle back to a per-card resting pose, defined in CSS so the card looks identically lit with JS, without JS, and under reduced motion
- Three shipped foil recipes (rainbow prism, brushed chrome, cracked ice), each a different material; a new one is a single background rule on a data-foil value
- Touch drag as a first-class channel with pointer capture and pan-y, so a phone visitor tilts the card and can still scroll the page
- Device orientation as an optional enhancement, with the iOS permission prompt behind a button that only appears where it is needed, and a silent fallback when it is denied or unavailable
- Attach to any card-shaped element with data-foil-card; tilt range, gloss strength and hue swing are per-card data attributes
- Keyboard accessible: a focused card plays the full sweep and arrow keys steer the tilt, with a focus ring that mirrors the hover lift
- Runs on GSAP core with no plugins, no canvas and no WebGL; the ticker only turns over while a card is actually being touched or settling
Perfect For
- Collectible, membership and loyalty cards where the card itself is the product
- Pricing and plan cards that want the premium tier to feel physically different from the others
- Ticket, pass and NFT-style reveals where a holographic finish signals rarity
- Music, film and game merch pages showing off a foil-stamped edition
- Portfolio and agency hero sections needing one tactile, clip-worthy object above the fold
How It Works
The card's whole material is CSS custom properties. A stack of absolutely positioned layers inside the card carries the prismatic grating, the glitter field, the specular and the bloom, each with its own blend mode, and every one of them is positioned or scaled by a variable. GSAP quickSetters write those variables plus the rotation, so a frame costs a handful of property writes and no style recalculation of the layout.
Pointer position sets the target tilt, but pointer velocity is added on top as a lead angle: the card aims past where the pointer actually is, in proportion to how fast it is travelling. When the flick stops, the lead collapses and the follow tween pulls the card back through centre, which is the overshoot. Speed also sets an energy value that decays on its own clock; energy is what opens the bloom, so a slow drag to the same angle never blows the highlight out.
The grating slides several times faster than the card turns and its hue rotates with the angle, which is what stops the foil reading as a picture printed on the card. The glitter parallaxes faster still through a masked band that drifts on an independent loop, so it twinkles even while the card is held still.
Release runs an elastic.out tween back to the resting angle, which is read from the CSS --rest-x and --rest-y properties rather than assumed to be flat. That is why a card composed at a tilt returns to exactly the pose the stylesheet drew, and why the no-JS and reduced-motion renders are the same composed, lit object.