Micro-interactions
Tilt
A machined card that leans toward the pointer in 3D while a specular sheet slides across its face.
Install
bun add clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/tilt/tilt.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| maxTilt | number | 10 | Maximum lean at the card's edge. |
| perspective | number | 900 | Depth of the 3D projection — lower exaggerates it. |
| glare | number | 0.35 | Opacity of the specular sheet, matte → mirror. |
| glareSize | number | 0.9 | Glare radius as a fraction of card width. |
| hoverScale | number | 1.03 | Scale applied while the pointer is over the card. |
| smoothing | number | 0.28 | How long the card takes to catch up to the pointer. |
| glareColor | string (hex) | "#c4b5fd" | Tint of the specular sheet. |
What It Demonstrates
- 3D tilt / Flip
- Rotate in 3D space (rotateX / rotateY) to add depth.
- Perspective
- How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
- Transform origin
- The anchor point a scale or rotation grows or spins from.
- Hover effect
- Visual change when the cursor moves over an element.
- Asymmetric easing
- A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one.
- Hardware acceleration
- Animating transform and opacity lets the GPU keep motion smooth.
Related Components
Holofoil
Holographic trading-card foil over real content. The diffraction band travels against the tilt while the specular follows it, and the flake only lights where the rainbow currently falls — which is what stops the whole thing reading as one gradient sliding around.
Spotlight Shell
A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.
Pixel Transition
Reveal a second layer through a random pixelated dissolve on hover.
Border Glow
A cursor-proximity gradient border with an outer glow.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Magnetic Button
A button that leans into your cursor — caught in a magnetic field it slides toward the pointer while an amethyst aura swells with proximity, then snaps home on a spring and answers every click with a dark ripple bursting outward from the point of contact.