Tilt

Tilt wraps content in a surface that rotates in 3D toward the cursor as it moves across, then eases back flat when the pointer leaves. Cap the rotation with max (degrees) and add a hover lift with scale. It's a tactile accent for feature and pricing cards. The tilt is disabled entirely under prefers-reduced-motion.

Example

import { Tilt } from '@officina/ui';

<Tilt max={12} scale={1.03}>
  <div className="rounded-lg border p-6">Feature card</div>
</Tilt>;

API