Marquee

A seamless infinite ticker that pauses on hover and stands still for reduced motion.

Live — this one is real

Cycle — 12s

SurfacesMotionTypographySystemsThemesPatterns

Usage

import { Marquee } from "mizu-ui";

export function Ticker() {
  return (
    <Marquee duration={30} label="Disciplines">
      <span>Surfaces</span>
      <span>Motion</span>
    </Marquee>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect motion/Marquee.tsx

Source is included in the npm package under src/motion/Marquee.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
duration	number	42	Seconds per full cycle.
pauseOnHover	boolean	true	Pause the cycle while hovered.
separator	boolean	true	Diamond separator between items.
label	string	—	Accessible name for the marquee region.

Accessibility

The second copy is aria-hidden and inert. Hover/focus pauses, and a visible Pause/Play button gives explicit control.

Motion

Linear transform loop — GPU-friendly, no layout thrash.

Works alongside

MaskLine Reveal Magnetic PageWipe