Tilt Card

Pro

3D perspective tilt card with spring physics and glare layer on mouse move.

Cards · primitive · intermediate · framer-motion · framer-motion

tilt-card Cards·preview
BackgroundsPro

Aurora Background

Layered radial gradients drifting behind your hero. Ships with an ember preset and three color stops you control.

css only/zero deps/basic

tiltStrength={16} · glare on

Pro
R$9/month
  • Every component, every prompt
  • Tuned for v0, Cursor, Lovable
  • New drops every week

tiltStrength={8} · glare={false}

Tilt Card

3D perspective tilt card with spring physics and glare layer on mouse move.

Pro component

Join the waitlist to unlock all 14 components at launch.

Join the Pro waitlistor join free for 5 components at launch
Use it for
  • feature grid card
  • pricing tier highlight card
  • portfolio project card
  • product showcase card
Props
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.
FAQ
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)').