Premium & Brand

Marquee

Seamless infinite scroller for logos, testimonials, or a ticker.

Import

tsx

import { Marquee } from "@cronus-ui/ui";

bash

npx cronus-ui add marquee

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component MarqueeDefault layout:inline style:marquee {
  aria-label:"Logos"
  label "Logos"
  text "Acme"
  text "Globex"
}

page "/audit/marquee/default" type:custom {
  use MarqueeDefault
}

API Reference

Generated from the component's exported types.

MarqueeProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`children`*	`ReactNode`	—	The items to scroll — logos, cards, testimonials, or a text ticker.
`direction`	`"left" \| "right"`	`"left"`	Scroll direction. Horizontal: `"left"` (default) \| `"right"`. When is set, the same prop reads as `"up"` (default) \| `"down"` — i.e. `"left"`/`"up"` share the forward sense and `"right"`/`"down"` the reverse, so one prop covers both axes.
`vertical`	`boolean`	`false`	Scroll the marquee on the vertical axis instead of the horizontal one.
`speed`	`number`	`DEFAULT_SPEED`	Travel speed in pixels per second — resolution-independent and stable across content widths (the loop duration is derived from the measured track size). Defaults to `40` (a tasteful, slow drift).
`pauseOnHover`	`boolean`	`true`	Pause the scroll while the pointer is over the marquee. Defaults to `true`.
`fade`	`boolean`	`true`	Fade the leading and trailing edges into the background with a gradient `mask-image`, so items dissolve rather than clip. Defaults to `true`.
`gap`	`string`	`DEFAULT_GAP`	Spacing between repeated items. Accepts any CSS length. Defaults to `"1rem"`.
`repeat`	`number`	`DEFAULT_REPEAT`	How many copies of are rendered back-to-back. The track translates by exactly one copy, so any count ≥ 2 loops seamlessly. Defaults to `2`; raise it when a single copy cannot fill wide viewports (leaving a visible gap before the loop point).
`motionPreference`	`MarqueeMotionPreference`	`"respect"`	Whether the marquee scrolls vs. honours `prefers-reduced-motion`: `"respect"` (default), `"always"` (force motion), or `"never"` (force static). Defaults to `"respect"`.
`groupClassName`	`string`	—	Class applied to each repeated copy (the flex row/column of items).
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

Logo ticker

A seamless, constant-velocity strip for a wall of customer logos. The edges fade into the background and the scroll pauses on hover. Reduced-motion visitors get a single static, fully-legible row.

stripevercellinearnotionsupabaseraycast

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add marquee

tsx

<Marquee pauseOnHover speed={32} className="py-2">
  {["stripe", "vercel", "linear", "notion", "supabase", "raycast"].map((brand) => (
    <span
      key={brand}
      className="mx-8 text-2xl font-semibold tracking-tight text-fg-secondary"
    >
      {brand}
    </span>
  ))}
</Marquee>

Testimonial wall

Two rows scrolling in opposite directions for a lively social-proof band. Each card is full content; hovering anywhere pauses both rows so a quote can be read.

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add marquee

tsx

<div className="flex flex-col gap-4">
  <Marquee pauseOnHover speed={24}>
    {testimonials.map((t) => (
      <Card key={t.name} className="mx-3 w-80 shrink-0">
        <CardContent className="flex flex-col gap-4 pt-6">
          <p className="text-sm leading-relaxed text-fg">"{t.quote}"</p>
          <div className="flex items-center gap-3">
            <span className="grid size-9 place-items-center rounded-full bg-surface-overlay text-xs font-medium text-fg-secondary">
              {t.initials}
            </span>
            <div className="text-sm">
              <p className="font-medium text-fg">{t.name}</p>
              <p className="text-fg-tertiary">{t.role}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    ))}
  </Marquee>
  <Marquee pauseOnHover direction="right" speed={24}>
    {testimonials.map((t) => ( /* …same card… */ ))}
  </Marquee>
</div>

Logo ticker

A seamless, constant-velocity strip for a wall of customer logos. The edges fade into the background and the scroll pauses on hover. Reduced-motion visitors get a single static, fully-legible row.

stripevercellinearnotionsupabaseraycast

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add marquee

tsx

<Marquee pauseOnHover speed={32} className="py-2">
  {["stripe", "vercel", "linear", "notion", "supabase", "raycast"].map((brand) => (
    <span
      key={brand}
      className="mx-8 text-2xl font-semibold tracking-tight text-fg-secondary"
    >
      {brand}
    </span>
  ))}
</Marquee>

Testimonial wall

Two rows scrolling in opposite directions for a lively social-proof band. Each card is full content; hovering anywhere pauses both rows so a quote can be read.

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

"We shipped a polished, on-brand UI in a weekend. The theming alone paid for itself."

Ana Ribeiro

Head of Design, Northwind

"Every component is accessible out of the box — our axe audit went green on the first pass."

Marcus Lee

Staff Engineer, Atlas

"The motion is tasteful and respects reduced-motion. It feels premium without trying hard."

Priya Nair

Product Lead, Lumen

"Drop-in registry, zero lock-in. We own the code and still get updates when we want them."

Tomás Costa

Founder, Brava

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cronus-ui add marquee

tsx

<div className="flex flex-col gap-4">
  <Marquee pauseOnHover speed={24}>
    {testimonials.map((t) => (
      <Card key={t.name} className="mx-3 w-80 shrink-0">
        <CardContent className="flex flex-col gap-4 pt-6">
          <p className="text-sm leading-relaxed text-fg">"{t.quote}"</p>
          <div className="flex items-center gap-3">
            <span className="grid size-9 place-items-center rounded-full bg-surface-overlay text-xs font-medium text-fg-secondary">
              {t.initials}
            </span>
            <div className="text-sm">
              <p className="font-medium text-fg">{t.name}</p>
              <p className="text-fg-tertiary">{t.role}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    ))}
  </Marquee>
  <Marquee pauseOnHover direction="right" speed={24}>
    {testimonials.map((t) => ( /* …same card… */ ))}
  </Marquee>
</div>