Tilt Card
3D tilt with a specular glare and real depth — wrap children in <TiltLayer depth> to float them toward you.
pointer3dcss-vars4 files · 224 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/tilt-card.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs tilt-cardUsage
import { TiltCard, TiltLayer } from "@/components/opus/effects/tilt-card";
<TiltCard className="p-6">
<TiltLayer depth={40}>Floating title</TiltLayer>
</TiltCard>API
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 12 | Max tilt (deg). |
| scale | number | 1.03 | Hover lift. |
| glare | boolean | true | Pointer-following specular highlight. |
| perspective | number | 900 | Perspective (px) — lower is more dramatic. |
| TiltLayer.depth | number | 30 | translateZ for a child layer (px). |
Notes
- Pointer position is written to CSS variables from one rAF loop — React never re-renders while you move, and the loop sleeps when idle.