Avala Design
← Components/domain/animations

Marquee

domain/animationsstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Marquee } from "@avala/design";

<Marquee>Marquee</Marquee>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

domain-animations-marquee--defaultOpen in Storybook →

When to use

  • Marketing-site logo strips ("trusted by …"), customer testimonials, ticker rows.
  • Infinite-scrolling marquee inside a hero or stats section.
  • Any continuous-motion ambient row where the content is decorative or pre-known.

When not to use

  • A celebratory one-shot — use `Confetti`.
  • A controlled carousel with discrete slides — use a slider/carousel pattern, not Marquee.
  • Anything inside an interactive form / data list — the constant motion fights focus and attention.