Tilt Card
Mouse-tracked CSS 3D perspective tilt card with holographic rainbow sheen and glare.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | #6366f1 | Accent color used for glow, progress bars, and spectrum sheen |
| glareOpacity | number | 0.3 | Intensity of the holographic glare overlay (0–1) |
| maxTilt | number | 20 | Maximum tilt angle in degrees on each axis |
When to Use
Perfect for product feature cards, pricing cards, and any showcase where you want the card to feel physically present. The holographic sheen makes it feel premium and interactive.
Best Practices
Works best on dark backgrounds. Keep maxTilt between 12–25 degrees. Lower glareOpacity (0.15–0.2) for subtlety, higher (0.4+) for dramatic gloss. The spectrum sheen appears automatically on hover.
Why This Component Matters
Mouse-tracked tilt creates a sense of physicality that flat cards simply can't achieve. Used on premium SaaS sites like Linear and Stripe to communicate craftsmanship.
FAQ
QDoes it use any animation library?
No — it's pure CSS 3D transforms driven by mouse position with requestAnimationFrame. Zero dependencies.
QDoes the rainbow sheen color the content?
No — the sheen uses mix-blend-mode: color so it tints only the card surface without obscuring text or UI.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.