Tilt Gallery

CardsVanilla JS · zero dependenciesone influence value per card

-- fps

prefers-reduced-motion detected — the cards are shown flat

X-ray · layers

Tiltthe nearest card faces the cursor in 3D (off = flat)

Neighbourscards around it react too, fanning out

Glossa specular sheen slides across the tilt

Parameters

Tilt angle18°

Lift20 px

Spread160 px

Ease0.18

your version · updates as you tinker

How this effect works

Every card computes one number: its influence, which is just how close the cursor is to it — 1 - distance / SPREAD, clamped to zero far away. That single value drives everything: the card lifts and scales by its influence, and it rotates to face the cursor by how far the cursor sits to its left or right. The card the cursor is over gets the most, the ones beside it get a little — which is what makes the row fan out like a hand of cards instead of one card popping alone.

Spread is the reach of that influence (small = only the hovered card moves, large = the whole row leans together); angle caps the 3D rotation; ease is the chase speed that gives the cards weight instead of snapping. The gloss is a highlight whose opacity follows the influence and whose position follows the rotation, so the light looks like it's really raking across a tilted surface. Turn neighbours off and only the nearest card ever reacts.

Production notes: respects prefers-reduced-motion (flat cards) · each card is one transformed element; no layout thrash · on touch, drag a finger across the row · the copied snippet is self-contained HTML + CSS + JS.