Marquee Strip

A responsive, pauseable content ribbon for statements, logos, and editorial details.

Design directionBuilt to shipSource owned

Customize

Adjust the live preview with the component's public props.

Duration28s

Direction

Props

NameTypeDefault

children

Content repeated in the strip.

ReactNodeRequired

duration

Loop duration in seconds.

number28

direction

Scroll direction.

"left" | "right""left"

repeat

Number of content copies.

number2

className

Optional wrapper classes.

string—

Install

Add the component directly to your configured component directory.

terminal

pnpm dlx shadcn@latest add https://awwwardedui.vercel.app
/r/marquee-strip.json

Usage

terminal

import { MarqueeStrip } from "@/components/ui/marquee-strip"

<MarqueeStrip duration={28} direction="left" repeat={2}>
  <span>Design direction</span>
  <span aria-hidden="true">✳</span>
  <span>Built to ship</span>
</MarqueeStrip>

Implementation prompt

A ready-to-use integration brief for a coding agent.

Install and integrate the Marquee Strip component from the AwwwardWinning UI shadcn registry.

Use the provided registry command and preserve the component inside the project's configured component directory.

Integration requirements:
- Replace the demo content with content already present in the application.
- Preserve the application's typography, colors, spacing, and border-radius tokens.
- Place the component inside an existing hero, client list, announcement, or section divider.
- Preserve semantic HTML and keyboard accessibility.
- Do not introduce global styles, fixed IDs, or unnecessary dependencies.
- Do not rebuild unrelated sections of the page.
- Keep the component responsive and respect reduced-motion preferences.
- Confirm the registry component installed successfully before integration.

Registry command:
pnpm dlx shadcn@latest add https://awwwardedui.vercel.app
/r/marquee-strip.json

Dependencies

None

Touch

full

Motion

Reduced-motion support