Tilt Card

3D perspective tilt card with cursor-tracked glare highlight. Pure CSS transforms, no dependencies.

Hover to tilt

High

intensity 20

No Glare

glare off

Installation

Run the CLI

$npx particleui-cli add tilt-card

Usage

TSX

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

export default function Example() {
  return (
    <TiltCard className="w-64 rounded-xl border border-border bg-surface-1 p-6">
      <h3 className="font-semibold">Hover me</h3>
      <p className="text-sm text-text-3 mt-1">Tilt effect on mouse move.</p>
    </TiltCard>
  )
}

Props

Prop	Type	Default	Required
intensity	number	`12`	no
glare	boolean	`true`	no
scale	number	`1.02`	no

Details

Source filecomponents/ui/tilt-card.tsx

Typeui

Categoriescards, particles

npm dependencies

Registry deps

Claude skill—