Zentauri UI
Display

Infinite tickers for logos, launches, and live product signals

Marquee renders a seamless auto-scrolling rail from the content you already have. Use it for brand logo rows, launch banners, testimonial snippets, activity signals, status tickers, and compact vertical release feeds.

Deploys synced99.98% uptimeAlerts routedData replicatedPolicies enforcedLaunch queue live
Launch queue livePolicies enforcedData replicatedAlerts routed99.98% uptimeDeploys synced

Examples

Marquee creates infinite logo rails, status tickers, release banners, and compact vertical feeds with CSS-only animation and duplicated children for seamless loops.

AtlasNorthstarPulseKernelLedgerCourier

v1.7.8

Marquee primitive shipped

v1.7.7

CountUp examples refreshed

v1.7.6

Charts SEO expanded

v1.7.5

Rating variants added

Usage alertsBilling syncedIncidents clear

Marquee variants examples

Use Show output / Show code on each row. Snippets start with a Variant line naming the axis and token.

Appearance: DEFAULT

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: OUTLINE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GHOST

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: CARD

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: SEPARATED

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: SKY

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: ROSE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: PURPLE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: PINK

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: ORANGE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: YELLOW

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: TEAL

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: INDIGO

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: EMERALD

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-BLUE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-GREEN

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-RED

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-YELLOW

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-PURPLE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-TEAL

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-INDIGO

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-PINK

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Appearance: GRADIENT-ORANGE

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Size: SM

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Size: MD

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Size: LG

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Orientation: HORIZONTAL

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Orientation: VERTICAL

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Direction: LEFT

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Direction: RIGHT

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Direction: UP

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Direction: DOWN

Deploys syncedSecurity clearedSLO steadyLaunch-ready

Behavior: NO FADE, NO HOVER PAUSE

Deploys syncedSecurity clearedSLO steadyLaunch-ready
CSS variable overrides

Marquee CSS variables

Override these Marquee variables on :root, a theme selector, or a component wrapper.

68 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-marquee-bg: transparent;
  --zui-marquee-fg: oklch(20.8% 0.042 265.755);
  --zui-marquee-gap: 1rem;
  --zui-marquee-card-bg: #ffffff;
  --zui-marquee-card-border: oklch(92.9% 0.013 255.508);
  --zui-marquee-outline-border: oklch(86.9% 0.022 252.894);
  --zui-marquee-separated-border: oklch(86.9% 0.022 252.894);
  --zui-marquee-sky-border: oklch(62.3% 0.214 259.815 / 0.28);
  --zui-marquee-rose-border: oklch(58.6% 0.253 17.585 / 0.24);
  --zui-marquee-purple-border: oklch(62.7% 0.265 303.9 / 0.24);
  --zui-marquee-pink-border: oklch(65.6% 0.241 354.308 / 0.24);
  --zui-marquee-orange-border: oklch(70.5% 0.213 47.604 / 0.26);
  --zui-marquee-yellow-border: oklch(79.5% 0.184 86.047 / 0.3);
  --zui-marquee-teal-border: oklch(70.4% 0.14 182.503 / 0.28);
  --zui-marquee-indigo-border: oklch(58.5% 0.233 277.117 / 0.24);
  --zui-marquee-emerald-border: oklch(69.6% 0.17 162.48 / 0.28);
  --zui-marquee-gradient-blue-from: oklch(62.3% 0.214 259.815);
  --zui-marquee-gradient-blue-to: oklch(54.6% 0.245 262.881);
  --zui-marquee-gradient-green-from: oklch(72.3% 0.219 149.579);
  --zui-marquee-gradient-green-to: oklch(62.7% 0.194 149.214);
  --zui-marquee-gradient-red-from: oklch(63.7% 0.237 25.331);
  --zui-marquee-gradient-red-to: oklch(57.7% 0.245 27.325);
  --zui-marquee-gradient-yellow-from: oklch(85.2% 0.199 91.936);
  --zui-marquee-gradient-yellow-to: oklch(79.5% 0.184 86.047);
  --zui-marquee-gradient-purple-from: oklch(71.4% 0.203 305.504);
  --zui-marquee-gradient-purple-to: oklch(62.7% 0.265 303.9);
  --zui-marquee-gradient-teal-from: oklch(77.7% 0.152 181.912);
  --zui-marquee-gradient-teal-to: oklch(70.4% 0.14 182.503);
  --zui-marquee-gradient-indigo-from: oklch(67.3% 0.182 276.935);
  --zui-marquee-gradient-indigo-to: oklch(58.5% 0.233 277.117);
  --zui-marquee-gradient-pink-from: oklch(71.8% 0.202 349.761);
  --zui-marquee-gradient-pink-to: oklch(65.6% 0.241 354.308);
  --zui-marquee-gradient-orange-from: oklch(75% 0.183 55.934);
  --zui-marquee-gradient-orange-to: oklch(70.5% 0.213 47.604);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-marquee-card-bg-dark: oklch(20.8% 0.042 265.755 / 0.9);
  --zui-marquee-card-border-dark: oklch(37.2% 0.044 257.287);
  /* ...same variables with -dark at the end */
}

What it does

Marquee creates a continuous ticker by rendering two matching content groups and translating the track with CSS keyframes.

It supports horizontal and vertical movement, reverse directions, configurable gap and speed, optional fade masks, and pause-on-hover behavior.

Composition and API

Use Marquee as a wrapper around repeated items such as logo pills, cards, status badges, or testimonials. Configure appearance, size, orientation, direction, speed, gap, fade, and pauseOnHover from props while keeping the child markup fully yours.

Common use cases

  • Build continuous customer logo rails on marketing pages.
  • Show release notes, uptime signals, or status events without manual carousel controls.
  • Create compact testimonial or social-proof tickers.
  • Add vertical activity streams for product dashboards and changelogs.

Accessibility

Keep marquee content short and non-critical. If the ticker communicates important information, duplicate it elsewhere in static copy or provide an aria-label on the container that summarizes the purpose. Duplicate visual content is hidden from assistive technology.

Next.js integration notes

Marquee is a small client-safe component with no effects, timers, layout measurements, or browser APIs. It works well inside App Router pages while the surrounding SEO content remains server-rendered.

FAQ

Does Marquee require Framer Motion?

No. Marquee uses CSS keyframes and duplicated children, so it does not require Framer Motion or another animation dependency.

Can Marquee pause on hover?

Yes. Set pauseOnHover to pause the track when the user hovers the rail. Reduced-motion users also get a paused animation through motion-reduce styles.

Can Marquee scroll vertically?

Yes. Set orientation to vertical and use direction up or down. Provide a height with className when the default vertical height does not fit your layout.