GitHub
Open Github
Sign in

Tilt Card

Interactive 3D tilt card with perspective hover effect and spotlight.

Installation

pnpm dlx shadcn@latest add @spell/tilt-card

Usage

import { TiltCard } from "@/components/tilt-card";
<TiltCard tiltLimit={15} scale={1.05} perspective={1200}>
  <div className="w-80 h-48 rounded-2xl bg-neutral-100 dark:bg-neutral-900 p-6">
    Your content here 
  </div>
</TiltCard>

Props

PropTypeDefault
tiltLimit
number
15
scale
number
1.05
perspective
number
1200
effect
"gravitate" | "evade"
"evade"
spotlight
boolean
true
children
React.ReactNode
-
className
string
-
style
React.CSSProperties
-