Tilt Card

A 3D tilt wrapper that applies a perspective tilt effect on mouse movement. Inspired by Motion Primitives’ Tilt . Wrap any Card or element for interactive depth.

Installation

npx shadcn@latest add https://prismaui.com/components/tilt.json

Import


import { Tilt } from '@/components/ui/tilt';

Preview

Tilt Card

Hover to see the 3D tilt effect.

Wrap any element with the Tilt component for interactive depth.


<Tilt rotationFactor={15} springOptions={{ stiffness: 300, damping: 20 }}>
  <Card className='w-72'>
    <CardHeader>
      <CardTitle>Tilt Card</CardTitle>
      <CardDescription>Hover to see the 3D tilt effect.</CardDescription>
    </CardHeader>
    <CardContent>
      <p className='text-sm text-muted-foreground'>
        Wrap any element with the Tilt component for interactive depth.
      </p>
    </CardContent>
  </Card>
</Tilt>

Reversed Tilt

Reversed

Tilt moves opposite to cursor.

Use isReverse to invert the tilt direction.


<Tilt isReverse rotationFactor={20}>
  <Card>...</Card>
</Tilt>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content to tilt.
`className`	`string`	—	Additional CSS classes.
`style`	`MotionStyle`	—	Motion style overrides.
`rotationFactor`	`number`	`15`	Max rotation angle in degrees.
`isReverse`	`boolean`	`false`	Reverse the tilt direction.
`springOptions`	`SpringOptions`	—	Spring animation config.