Card Tilt

smooth card tilt that responds naturally to your cursor, giving the card a more polished, modern look.

Installation

npx shadcn@latest add @scrollxui/card-tilt

Usage

import { CardTilt, CardTiltContent } from '@/components/ui/card-tilt';

<CardTilt className='w-80' tiltMaxAngle={15} scale={1.05}>
  <CardTiltContent className='relative rounded-2xl bg-white p-6 shadow-xl'>
    <h2 className='text-lg font-semibold mb-2'>Interactive Tilt</h2>
    <p className='text-sm text-slate-600'>
      Move your cursor over this card to see the 3D tilt effect.
    </p>
  </CardTiltContent>
</CardTilt>

API Reference

Card Tilt

smooth card tilt that responds naturally to your cursor, giving the card a more polished, modern look.

Props

Property	Type	Default	Description
`children`	ReactNode	`—`	Content rendered inside the CardTilt container.
`className`	string	`—`	Optional class for custom styling.
`tiltMaxAngle`	number	`15`	Maximum rotation angle applied when tilting.
`tiltReverse`	boolean	`false`	Reverses the tilt direction when true.
`glareEnable`	boolean	`false`	Reserved for future glare effect support.
`scale`	number	`1.05`	Scale value applied on hover tilt interaction.
`ref`	React.Ref<HTMLDivElement>	`—`	Returns the container element reference.