component

Scroll card formation

Running live. Go ahead and touch it.

A tall section with a sticky card set that changes formation as the page scrolls.

See it in the design system

How it behaves

  • One formation per equal scroll segment
  • You choose the formations and their order
  • Changes are instant under reduced motion

Find more that moves like this

Kind
component
Blueprint
motion-kit 1.0.3
Moves by
scroll, 3d

Import

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

Props

PropWhat it does
itemsCards with id, label, color, and optional image
labelAccessible name for the group
formationsFormations in order. Defaults to all
aspectRatioDefaults to 1.6
springSpring preset
gridHeaderContent above the grid formation
captionText under the stage

Your agent builds it. You take the credit.

Scroll card formation ships inside the Motion Kit blueprint. These instructions tell your agent to take only this piece.

Version
1.0.3
Files
86
Dependencies
20
Assets
3

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.
  • Every value on this page is demo content that shows one component's behavior. The numbers are placeholders, not real figures.
website

Pallet Ross

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

component

Card formation

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

component

Preview coverflow

A center slot for a product preview, with tilted cards that pass behind it as an auto carousel.

component

Reveal

Seventeen entrance presets for a single element, from fade and blur to clips and flips.