Perihelion · motion card

A foil collector card: 3D tilt, trailing specular light, parallax layers and a spring return.

Browsers: Chromium ✓WebKit ✓Firefox not verified
Input: Pointer and touch tilt the card. Click, tap or Enter changes the edition. The range sets the foil.
Motion: With reduced motion, tilt, parallax and sweeps stop. Light, foil and editions still respond.

/* what it uses */

mouse(local)The pointer position inside the card drives the tilt and where the light falls.

element()Reads the card’s own size, so the tilt is the same at every card width.

:on(pointerenter)Entering the card lifts it and brings up the foil. Leaving releases it into its spring return.

cycle()Each click steps through three editions: Aurora, Gilt, Nocturne.

:changed()A light sweep crosses the card once whenever the edition changes.

event()The foil range writes its value into the stage’s state, so the foil and glitter follow it.

The full stylesheet and markup are in the repository folder. Paste the stylesheet into the Playground to inspect each state as it changes.