Floating Card

Drifts slowly with a slight sway; its ground shadow grows and shrinks with the height. Hover settles it.

Install

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

Terminal

npx @galactrex/ui add floating-card

Example

import { FloatingCard } from "@/components/galactrex/floating-card";

<FloatingCard phase={0.3}>…</FloatingCard>

Installs to components/galactrex/floating-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.
`float`	`number`	`10`	Drift in px.
`duration`	`number`	`5`	Seconds per drift.
`phase`	`number`	`0`	Offset, 0–1.
`className`	`string`	—	Extra classes for the outer element.