animations

TiltCard

Applies a 3D perspective tilt effect to its children on hover, with optional glare overlay.

v1.0.0react >=18next >=14tailwind >=4motion >=12

hover3dtiltperspectiveinteractivecard

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to render inside the tilting card
`maxTilt`	`number`	`15`	Maximum tilt angle in degrees
`perspective`	`number`	`1000`	CSS perspective value in pixels
`scale`	`number`	`1.02`	Scale factor on hover
`glare`	`boolean`	`false`	Show a reflective glare overlay on hover
`disabled`	`boolean`	`false`	Disable the tilt effect
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Card content that will be tilted in 3D space on hover

Layout

Display: block

Responsive: No

Wraps children in a perspective container. Inner content preserves 3D transforms. Takes full width of parent by default.

Examples

Basic tilt card

<TiltCard>
  <div className="rounded-xl bg-neutral-900 p-8">
    <h3 className="text-xl font-bold">Feature</h3>
    <p className="text-neutral-400">Hover to see the tilt effect</p>
  </div>
</TiltCard>

With glare effect

<TiltCard glare maxTilt={20}>
  <div className="rounded-xl bg-gradient-to-br from-neutral-800 to-neutral-900 p-8">
    <h3 className="text-xl font-bold">Premium Plan</h3>
    <p className="text-3xl font-bold mt-4">$49/mo</p>
  </div>
</TiltCard>

Subtle tilt for team cards

<TiltCard maxTilt={8} scale={1.01}>
  <div className="rounded-xl bg-neutral-900 p-6 text-center">
    <img src="/avatar.jpg" className="mx-auto h-20 w-20 rounded-full" alt="" />
    <p className="mt-4 font-semibold">Jane Doe</p>
    <p className="text-sm text-neutral-400">Lead Designer</p>
  </div>
</TiltCard>

High perspective depth

<TiltCard perspective={2000} maxTilt={25}>
  <div className="rounded-xl border border-neutral-700 p-8">
    <p>Deep perspective with dramatic tilt</p>
  </div>
</TiltCard>

AI Usage Hint

Use TiltCard for interactive cards on hover — pricing cards, team members, portfolio items. Adjust maxTilt (degrees) and perspective (depth). Enable glare for a reflective sheen effect.

Works Well With

GlowCardFadeUp