Tilt 3d

tilt-3d

A card that tilts in 3D toward the pointer. Part of motion-anything; obeys MOTION-SPEC.md. Technique popularized by vanilla-tilt.js, reimplemented dependency-free.

When to use it

• A hero product card, cover image, or a few portfolio thumbnails where depth adds delight.

When NOT to use it (restraint)

• Dense grids — many tilting cards feel chaotic and can induce motion sickness. A few hero cards.
• Text-heavy cards (tilt hurts readability); touch-only contexts (it stays flat automatically).

How to apply

1. Copy tilt-3d.css and tilt-3d.js into the project, and link them.
2. Mark the card:

   <div class="tilt" data-tilt-max="10"> … </div>
   

3. Auto-attaches to .tilt. Keep data-tilt-max small (8–10). Resets flat on pointerleave.

Accessibility & performance

• Flat under prefers-reduced-motion and on (hover: none) touch devices.
• transform: rotateX/rotateY + a masked glare only — GPU-safe.

Framework notes

• React: call attachTilt(ref.current) in useEffect, guarded by the same checks.