3D Tilt Card

A 3D card that tilts toward the pointer with parallax depth and glare.

@spectrumui/tilt-card

Aurora Headphones

Studio sound with adaptive noise cancellation.

$249

Move the pointer across the card — layers lift at different depths

Installation

Usage

import { TiltCard, TiltCardItem } from "@/components/spectrumui/tilt-card"

<TiltCard className="max-w-sm p-6">
  <TiltCardItem depth={60}>Floats above the card</TiltCardItem>
  <TiltCardItem depth={30}>Floats a little less</TiltCardItem>
</TiltCard>

API Reference

TiltCard

The perspective container and card surface. Wrap any content; use TiltCardItem for pieces that should lift toward the viewer while hovered.

Prop	Type	Default	Description
`maxTilt`	`number`	`12`	Maximum rotation toward the pointer in degrees
`tiltReverse`	`boolean`	`false`	Invert the tilt so the card leans away from the pointer
`scale`	`number`	`1.02`	Scale applied to the card while hovered
`perspective`	`number`	`1000`	CSS perspective distance in pixels
`glare`	`boolean`	`true`	Show the pointer-following glare highlight
`glareColor`	`string`	`"rgba(255, 255, 255, 0.35)"`	Color at the center of the glare gradient
`containerClassName`	`string`	-	Classes for the outer perspective wrapper
`className`	`string`	-	Additional classes merged with the card surface styles

TiltCardItem

A depth layer inside the card. While the card is hovered it translates on the Z axis by depth pixels, creating the parallax pop-out effect.

Prop	Type	Default	Description
`depth`	`number`	`0`	Lift toward the viewer in pixels while the card is hovered
`className`	`string`	-	Additional classes for the layer element

Examples

Custom Tilt and Glare

Aggressive tilt

maxTilt 20° with a sky glare

Subtle tilt

maxTilt 8° with no glare