EffectsAnimated
Tilt Card
A 3D card that tilts toward the pointer with a moving glare.
Tilt Card leans toward the pointer in 3D with a glare that follows across the surface, then settles back with an elastic release. It suits product cards, membership cards and showcases.
Preview
Cuelark · Member
4242 0042 1987 2026Ada Lovelace · 10/29
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/tilt-card.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/tilt-card.
Builds on: motion
Usage
import { TiltCard } from "@/components/ui/tilt-card";
<TiltCard className="p-6">…</TiltCard>Motion
How it moves
GSAP quickTo drives rotateX/rotateY and the glare position; release uses an elastic ease.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
TiltCard
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 10 | Maximum tilt in degrees. |
| glare | boolean | true | Pointer-following glare. |
Accessibility
- Purely visual; content and focus order are unchanged.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: 3d tilt card · react tilt effect · parallax card hover · glare card · hover 3d card