component

Preview coverflow

Running live. Go ahead and touch it.

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

See it in the design system

How it behaves

  • Two cards show on each side
  • Stops on hover, focus, and off-screen
  • Stays still under reduced motion

Find more that moves like this

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

Import

import { PreviewCoverflow } from "@/components/shared/animation/preview-coverflow";

Props

PropWhat it does
itemsCards with id, label, background, and optional image
labelAccessible name for the group
childrenThe center slot
autoPlayDefaults to true
autoPlayIntervalMilliseconds. Defaults to 2800
cardWidthPercentDefaults to 14
spreadDefaults to 1
stageClassNameMust give the stage a height
previewClassNameMust give the slot a width

Your agent builds it. You take the credit.

Preview coverflow 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

Testimonial wall

Frames hang around a headline while people slide through them; point at a card and it lifts and speaks.

component

Portrait arc rail

An endless strip of portrait cards folded alternately in 3D, with a name pill inside each one.

component

Tilt card

A card that tilts in 3D under the pointer, with optional glare.