Account

Cards

Creative

Parallax Card

Each layer moves against the pointer by its own depth, so the card opens into space. For key art, destinations and album covers.

Install

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

Terminal
npx @galactrex/ui add parallax-card

Usage

Example
import { ParallaxCard } from "@/components/galactrex/parallax-card";

<ParallaxCard layers={[{ content: <Sky />, depth: 0.2 }, { content: <Hills />, depth: 0.8 }]} />

Source

Installs to components/galactrex/parallax-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.

See plans

Props

PropTypeDefaultDescription
layers{ content; depth }[]—Back to front; depth 0–1.
childrenReactNode—Foreground.
travelnumber18Largest travel in px.
classNamestring—Extra classes for the outer element.

Variants

  • Scene. Sky, mountains, moon.

Accessibility

  • Layers are aria-hidden; put meaning in children.

Motion and reduced motion

  • Spring transforms per layer.
  • Still on touch and reduced motion.