Back to Registry

Tilt Card

hero

3D perspective card that responds to cursor position.

Colorblue-500
Width
Shadow

Live Preview

3D Perspective

Move your cursor across the card to see it respond in 3D space.

Install via CLI
npx shadcn@latest add https://kinetik.dev/r/tilt-card.json

Requires shadcn CLI. Auto-installs deps and copies the component into your project.

Manual Install
npm add framer-motion lucide-react

Then copy the source code below into your project.

Usage
import { TiltCard } from '@/app/components/tilt-card';

Source

'use client';

export function TiltCard() {
  // copy from registry component source
}

Dependencies

framer-motionlucide-react