Tilt Card

Children marked data-depth float at different heights, so a title, an image and a badge separate as it tilts. A glare slides across.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add tilt-card

Example

import { TiltCard } from "@/components/galactrex/tilt-card";

<TiltCard><img data-depth="1" … /><h3 data-depth="2">Orbit</h3></TiltCard>

Installs to components/galactrex/tilt-card.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content; data-depth="1"–"3" lifts parts.
`tilt`	`number`	`10`	Largest tilt in degrees.
`glare`	`boolean`	`true`	Moving glare.
`className`	`string`	—	Extra classes for the outer element.