component

Card formation

Running live. Go ahead and touch it.

One set of color cards that springs between nine layouts, including arc, fan, deck, and grid.

See it in the design system

How it behaves

  • Arrow keys and swipe change the front card
  • Cards tilt under the pointer
  • Formations change instantly under reduced motion

Find more that moves like this

Kind
component
Blueprint
atelier 1.0.5
Moves by
scroll, hover, swipe, 3d

You can see this at work in Pallet Ross.

Import

import { CardFormation } from "@/components/shared/animation/card-formation";

Props

PropWhat it does
itemsCards with id, label, color, and optional image and tag
labelAccessible name for the group
configFormation type, spring, and stagger. Defaults to arc
activeIndexCard in the front slot. Defaults to the last
aspectRatioStage shape. Defaults to 1.6
showTagsShow card tags. Defaults to true
gridHeaderContent above the grid formation
onCardSelectMakes cards buttons

Your agent builds it. You take the credit.

Card formation ships inside the Pallet Ross blueprint. These instructions tell your agent to take only this piece.

Version
1.0.5
Files
190
Dependencies
20
Assets
34

Paste this into Claude Code, Codex, Cursor, or whichever agent you trust today.

  • Building a blueprint runs its code, so use an isolated environment.
  • License: UNLICENSED.
  • Logo names and the spotlight profile name come from a design reference and are not real endorsements. Replace them before any public release.
  • The design and some images derive from a third-party reference. Confirm the rights to the design and images before any public release.
  • Buttons and navigation links have no destinations yet; they are presentational in the original too.
website

Pallet Ross

A creative network landing page where one set of cards travels through pinned scroll stages, from arc to cascade to grid.

website

Sixpay

A fintech homepage with detail panels in the navbar, a phone between tilted photos, rotating feature tabs, and a looping carousel of customer stories.

component

Card rail

A scroll-snapping row of cards in four forms, with captions that open on hover and an optional auto mode.

website

Artify AI

A dark AI image generator homepage with a floating navbar, a staircase of images that climbs and separates on scroll, and a drifting row of partner logos.