All components
Marquee
An infinitely scrolling strip with faded edges that pauses for reduced motion.
StyleXReactAstroBunTypeScriptVite
Install
zsh — marquee
1bunx stylexblocks add marqueeUsage — Ark UI
marquee.tsx
1234567891011121314151617181920212223242526272829import { Marquee } from "#components/ui/ark-ui/marquee.tsx";
const logos = ["StyleX", "React", "Astro", "Bun", "TypeScript"];
export function Example() { return ( // Content scrolls its children by -50%, so render the items TWICE (the // second copy aria-hidden) for a seamless loop; the edges fade the // strip and the animation pauses for prefers-reduced-motion. <Marquee.Root> <Marquee.Viewport> <Marquee.Content> {[0, 1].map((copy) => logos.map((name) => ( <Chip key={`${name}-${copy}`} aria-hidden={copy === 1 || undefined}> {name} </Chip> )), )} </Marquee.Content> </Marquee.Viewport> <Marquee.EdgeStart /> <Marquee.EdgeEnd /> </Marquee.Root> );}
// pace and fade are custom properties, overridable per instance:// <Marquee.Content style={styles.pace}> with { "--marquee-duration": "18s" }