Tilt Card

3D perspective tilt with moving glare

A card that tilts toward the cursor with spring physics and a glare highlight that sweeps across the surface. Layer children with translateZ for parallax depth.

Preview

Member 00422026

Rohan P

Software engineer · designer

Cincinnatirohan.run

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/tilt-card.json

Usage

Import the component:

import { TiltCard } from "@/components/rohan/tilt-card"

Use it in your code:

<TiltCard>
  <div className="flex flex-col items-center p-6 text-center">
    <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-700">
      3D
    </span>
    <p className="mt-3 text-sm font-semibold">Tilt me</p>
    <p className="mt-1 max-w-[200px] text-xs text-zinc-400">
      Hover and move your cursor to see the perspective shift.
    </p>
  </div>
</TiltCard>

Props

Property	Type	Default	Description
maxTilt	number	10	Maximum tilt in degrees on each axis.
className	string	—	Optional CSS classes for the card wrapper.
children	ReactNode	—	Card content. Use transform: translateZ(px) to layer depth.

Components