Tilt Card

A modern, interactive React component that provides a 3D "tilt" effect as the user moves their mouse across the card, animating rotation for a tactile, playful experience. Perfect for showcasing product cards, interactive UI elements, hero sections, and dashboards. Inspired by clean motion-driven web UI patterns.

Live Preview

Installation

You can install the TiltCard component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/tilt-card.json

Import

To use the TiltCard component, import it in your code:

typescript-icon
1import { TiltCard } from '@/components/TiltCard';

Props

The TiltCard component accepts the following props:

PropTypeDefaultDescriptionRequired
childrenReact.ReactNode-The content to display inside the tilt card.Yes
typescript-icon
1
2export const TiltCard = ({ children }: { children: React.ReactNode }) => { ... }
3

Example usage

Basic usage

typescript-icon
1<TiltCard>
2  <div className="text-center">
3    <h2 className="text-xl font-bold">Tilt Me</h2>
4    <p>Move your mouse over me.</p>
5  </div>
6</TiltCard>

With custom content

typescript-icon
1<TiltCard>
2  <div className="flex flex-col items-center justify-center p-6 space-y-2">
3    <img src="https://avatars.githubusercontent.com/u/1?v=4" alt="github" className="w-14 h-14 rounded-full shadow" />
4    <h3 className="text-lg font-semibold">Profile Tilt</h3>
5    <p className="text-neutral-600 dark:text-neutral-300">Even avatars and stacked layouts can tilt in 3D!</p>
6  </div>
7</TiltCard>

Features

  • 3D tilt animation: Card moves in response to your mouse for a high-tactile feel.
  • Physics-based: Uses motion.dev and spring-based animation.
  • Composable: Accepts any child content—brand, UI, or marketing.
  • Theme-aware: Card appearance adapts to light and dark modes.

Customization

  • Adjust inner/outer card markup and styles for your brand or design system.
  • Change the tilt effect's angle/intensity by tuning the transform/spring.
  • Use with any React children for product cards, info blocks, or playful UI.

Troubleshooting

  • You must have motion.dev installed for animation support.
  • If the card doesn't tilt, check that your parent/container doesn't block pointer events.
  • Adjust or remove the h-96 w-72 classes to match your layout.
  • If you see odd clipping or shadow bugs, make sure overflow and Z stacking are correct and your children aren't absolutely positioned outside the card div.