TiltCard maps the cursor position inside the card to rotation angles: the offset from the card's center is normalized to [-0.5, 0.5] and multiplied by rotationFactor degrees, then smoothed through a spring so the card chases the cursor with inertia instead of sticking to it. The wrapper provides CSS perspective, and the card preserves 3D for its children — give a child transform: translateZ(...) to make it float above the surface.

Examples

Image Card

A subtle rotationFactor with isReverse gives an image card a heavy, physical feel — the hovered corner dips down as if pressed.

Glare

Enable glare to sweep a light reflection across the card as it tilts — the highlight tracks the cursor like light bouncing off a glossy surface.

Installation

Usage

import { TiltCard } from '@/components/sora-ui/effects/tilt-card';

export function Card() {
  return (
    <TiltCard className="w-[280px] rounded-xl border bg-zinc-50 p-6 dark:bg-zinc-900">
      <div style={{ transform: 'translateZ(40px)' }}>
        This content floats above the tilting surface.
      </div>
    </TiltCard>
  );
}

Props

When to Use

Use TiltCard for feature cards, product shots, pricing tiers, or gallery items that deserve a tactile, physical feel — it reads best on a handful of highlighted cards, not a whole grid tilting at once. Pair glare with dark or image-backed cards where the reflection has contrast, and add overflow-hidden plus a border radius on the card so the glare clips to its shape.

On touch devices mouse events don't fire, so the card simply renders static — no fallback needed.

Accessibility

The tilt is purely decorative: content stays in the normal document flow and keyboard focus is unaffected. When prefers-reduced-motion: reduce is set, the card ignores cursor movement entirely and renders static — 3D rotation is more vestibularly triggering than flat motion, so it is disabled rather than reduced. See Accessibility.

Credits

Inspired by motion-primitives.