component

Marquee

Running live. Go ahead and touch it.

An infinite horizontal strip of anything, with a control to nudge it.

See it in the design system

How it behaves

  • Pauses on hover, focus, and off-screen
  • Can speed up with scrolling
  • A native scroller under reduced motion

Find more that moves like this

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

Import

import { Marquee } from "@/components/shared/animation/marquee";

Props

PropWhat it does
childrenThe strip's content
labelAccessible name for the group
speedDefaults to 60
directionDefaults to left
copiesDefaults to 4
pauseOnHoverDefaults to true
scrollBoostDefaults to 0
controlRefExposes nudge(pixels)

Your agent builds it. You take the credit.

Marquee 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.
component

Preview coverflow

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

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.

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.