3D Tilt & Glare

Perspective tilt that follows the pointer, with a moving specular glare layer.

sketchMotionCSS

useMotionValue for pointer position → useTransform to rotateX/rotateY and to the glare gradient position via useMotionTemplate.

Pointer/drag values live in MotionValues — they update the DOM directly and never trigger a React render.

Tilt is disabled in reduced-motion mode; content remains fully legible flat.

Playgroundspring

settle 0.61sovershoot 5%ζ 0.95

Stiffness150

Damping18

Mass0.60

Initial velocity0.00

Max tilt14 °

Export

transition={{ type: 'spring', stiffness: 150, damping: 18, mass: 0.6 }}