Marquee

An infinite scrolling strip for text, images, or cards. Tune speed and spacing with --duration and --gap. Install also injects the marquee keyframes into your theme CSS.

Default

Two horizontal rows — one forward, one reverse — with pauseOnHover and edge fades.

Loading…

Installation

CLI

npx @sonojs/ui@latest add marquee

Usage

marquee.tsx

import { Marquee } from "@/components/ui/marquee"

export function Example() {
  return (
    <Marquee pauseOnHover className="[--duration:20s]">
      <span>Next.js</span>
      <span>React</span>
      <span>TypeScript</span>
      <span>Tailwind CSS</span>
    </Marquee>
  )
}

Props

Prop	Type	Default	Description
reverse	boolean	false	Reverse animation direction. Horizontal marquees also flip for RTL.
pauseOnHover	boolean	false	Pause the animation while the pointer is over the strip.
vertical	boolean	false	Scroll along the vertical axis instead of horizontal.
repeat	number	4	How many times to duplicate children for a seamless loop.
className	string	—	Merge classes; set `[--duration:20s]` or `[--gap:1rem]` for timing and spacing.