# Tilt 3d

> Add tactile depth to a hero card or cover image: it tilts in 3D toward the pointer with a soft glare. Keep the max angle small (~10°) and reserve it for one or a few hero cards, not a grid. Flat under prefers-reduced-motion and on touch.

- Skill: `xpert-ai/tilt-3d` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/tilt-3d`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/tilt-3d/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/tilt-3d

---


# tilt-3d

A card that tilts in 3D toward the pointer. Part of
[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
popularized by vanilla-tilt.js, reimplemented dependency-free.

## When to use it
- A hero product card, cover image, or a few portfolio thumbnails where depth adds delight.

## When NOT to use it (restraint)
- Dense grids — many tilting cards feel chaotic and can induce motion sickness. **A few hero cards.**
- Text-heavy cards (tilt hurts readability); touch-only contexts (it stays flat automatically).

## How to apply
1. Copy `tilt-3d.css` and `tilt-3d.js` into the project, and link them.
2. Mark the card:
   ```html
   <div class="tilt" data-tilt-max="10"> … </div>
   ```
3. Auto-attaches to `.tilt`. Keep `data-tilt-max` small (8–10). Resets flat on `pointerleave`.

## Accessibility & performance
- Flat under `prefers-reduced-motion` and on `(hover: none)` touch devices.
- `transform: rotateX/rotateY` + a masked glare only — GPU-safe.

## Framework notes
- React: call `attachTilt(ref.current)` in `useEffect`, guarded by the same checks.