127 Components
Parallax Tilt Card
CardsMulti-depth 3D spatial card featuring three independent Z-planes that shift at graduated parallax ratios under pointer movement.
PLANE_02 // PARALLAX
±14° Coupled Tilt
Z-INDEX +26PX
Spatial Depth Plane
Three independent Z-planes translate at graduated ratios under pointer movement.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/parallax-tilt-card.json"
Props
TypeScript props supported by <ParallaxTiltCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Spatial Depth Plane" | Primary heading rendered on the foreground elevation plane. |
| subtitle | string | "Three independent Z-planes translate at graduated ratios..." | Supporting description text rendered below the title. |
| maxTilt | number | 14 | Peak 3D tilt angle in degrees along X and Y axes. |
| stiffness | number | 240 | Hooke's Law spring stiffness for tilt and plane parallax. |
| damping | number | 22 | Spring damping coefficient controlling settle oscillation. |
Key Features
- Three graduated parallax translation planes (±6px, ±16px, ±26px) coupled with ±14° 3D perspective rotation.
- Driven entirely by Framer Motion useTransform and useSpring with zero React state re-renders.
- Automatic spring return to neutral equilibrium on pointer leave.
Keyboard & Accessibility
- Marks decorative background dot matrix planes with aria-hidden='true'.
- Disables all 3D rotation and parallax plane displacement when prefers-reduced-motion is active.
- Preserves semantic heading and paragraph hierarchy for screen readers.