Hero sections
Hero - Tilt card
A product card that tilts in 3D toward the cursor with a glare highlight that tracks the pointer.
- 3D rotation
- Cursor tracking
- Moving glare
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A product card rotates in 3D toward the cursor: the pointer position maps to rotation on two axes so the card appears to lean and face wherever you point. A glare highlight tracks the same pointer position across the card surface, mimicking light catching a physical object as it tilts.
When to use it
- A hero that showcases a single product, app, or pricing card as the centerpiece
- A landing page where you want a tactile, hands-on feel for a physical or premium product
- Any section where an interactive 3D object invites the visitor to engage
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 4-28deg
tiltMax tilt
Related components
Using this block
Buy it, then copy components/blocks/hero-tilt-card/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.