SERIES STYLE · 02 — Pointer

Cursor-reactive motion · the pointer is a light source

Move the light.

Every surface here reads the pointer. The card below tilts toward you, a highlight tracks your cursor, and — the part that sells it — the shadow swings to the opposite side, exactly as if you were carrying the light.

live · tilt + dynamic shadow

Depth from light

rotateX / Ybox-shadow ← pointertranslateZ

↑ move your cursor across the card

§1

Tilt & shadow

the shadow offset is the opposite of the tilt — a fixed light at the cursor

01

Cast away

Pointer left → shadow right. The brain reads a light source and infers a raised slab.

02

Specular

A soft-light highlight sits under the cursor, so the shadow direction is justified, not arbitrary.

03

Layered Z

Title, body, and dot live on different translateZ planes, so the tilt reveals real parallax between them.

The trick: on pointermove, the card rotates toward the cursor while its box-shadow offset is set to the negative of that direction. Tie a highlight to the same coordinate and flat rectangles become lit, floating objects.
§2

Magnetic

the button leans into the pointer · the label leans further · spring back on exit

Parallax inside the press: the skin translates ~30% of the pointer offset, the label ~22%. The small internal mismatch is what makes it feel physical instead of slidey.
§3

Spotlight

a glow follows the cursor inside whichever cell it's over

A1

Index

A2

Catalog

A3

Register

B1

Ledger

B2

Archive

B3

Folio

§4

Dock

distance-based scale · the nearest tile rises most, neighbours follow

ABCDEF

macOS-style magnification — pure transform, driven by pointer distance