Tilt

Mild 3D media tilt toward the pointer — rotationFactor ≤6–8°.

Preview

npx shadcn@latest add @atroui/tilt

Mild ≤6° tilt. Imageory sky — never Button / Menu chrome.

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/tilt

Source lands in your repo. Installation · Registry

Usage

Opt-in on media / PreviewCard only. Tween settle on leave; reduced motion skips tilt.

tsx

import { Tilt } from "@/components/ui/tilt"
import { IMAGEORY } from "@/lib/imageory"

<Tilt rotationFactor={6}>
  <img src={IMAGEORY.sky} alt="" />
</Tilt>

import { Tilt } from "@/components/ui/tilt"
import { IMAGEORY } from "@/lib/imageory"

<Tilt rotationFactor={6}>
  <img src={IMAGEORY.sky} alt="" />
</Tilt>

API reference

Prop	Type	Default	Description
rotationFactor	number	6	Max rotate in degrees. Clamped ≤8.
perspective	number	800	CSS perspective in px.