Tilt Card
Pro3D perspective tilt card with spring physics and glare layer on mouse move.
Cards · primitive · intermediate · framer-motion · framer-motion
Aurora Background
Layered radial gradients drifting behind your hero. Ships with an ember preset and three color stops you control.
tiltStrength={16} · glare on
- Every component, every prompt
- Tuned for v0, Cursor, Lovable
- New drops every week
tiltStrength={8} · glare={false}
3D perspective tilt card with spring physics and glare layer on mouse move.
- feature grid card
- pricing tier highlight card
- portfolio project card
- product showcase card
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Card content rendered above the glare layer. |
className | string | — | Additional classes for padding, width, and background overrides. |
tiltStrength | number | 12 | Maximum rotation in degrees — 8 to 16 is a good range. |
glare | boolean | true | Shows a radial glare layer that tracks the cursor. |
Does Tilt Card work with Next.js App Router?
Yes. It's a "use client" React component built on Framer Motion, and works as a client component in the App Router.
Are there any dependencies to install?
Yes — it requires framer-motion (npm install framer-motion) for the spring-driven tilt and glare.
Is it responsive?
Yes. The tilt is pointer-driven, so it's inert on touch devices with no mousemove events; the card itself sizes with its container or className. Remember to set perspective on the parent grid.
Does it respect prefers-reduced-motion?
Not automatically. The rotateX/rotateY values are driven directly from live mouse-move coordinates rather than a declarative animation, so Framer Motion's reduced-motion handling doesn't apply. If you need to honor the preference, conditionally set tiltStrength={0} based on window.matchMedia('(prefers-reduced-motion: reduce)').