Card Tilt

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

WEB - 28

Urgent

Modify Content for Homepage

New Homepage

Due to: Nov 23, 25

Nov 18, 2025

Installation

npx shadcn@latest add https://scrollxui.dev/registry/card-tilt.json

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.