Marquee

Use Marquee to create an infinite scrolling loop of icons, logos, cards, or any content. Works well for partner logos, feature highlights, or testimonial carousels.

Logo carousel

Scroll partner or integration logos using Image with relative paths from your public/ folder. Set a uniform height to keep all logos visually aligned; the width scales proportionally. Add disableZoom so clicking a scrolling logo does not open the zoom dialog.

1234567<Marquee duration={20} slowOnHover gap={24}>
  <Image src="/logos/vercel.svg" alt="Vercel" height="32" disableZoom />
  <Image src="/logos/stripe.svg" alt="Stripe" height="32" disableZoom />
  <Image src="/logos/github.svg" alt="GitHub" height="32" disableZoom />
  <Image src="/logos/cloudflare.svg" alt="Cloudflare" height="32" disableZoom />
  <Image src="/logos/linear.svg" alt="Linear" height="32" disableZoom />
</Marquee>

Images resolve relative to your project root, so /logos/vercel.svg maps to public/logos/vercel.svg. You can also use relative paths like ./assets/logo.png from the MDX file's directory.

Disable zoom inside Marquee

Holocron's Image is click-to-zoom by default. Inside a Marquee that is rarely the behavior you want, so pass disableZoom on each Image to keep it as a plain scrolling logo.

Dark mode with `dark:invert`

For black logos on a white background, add className="dark:invert" so they flip to white in dark mode.

12345<Marquee duration={20} slowOnHover gap={24}>
  <Image src="/logos/acme.svg" alt="ACME" height="32" className="dark:invert" disableZoom />
  <Image src="/logos/stripe.svg" alt="Stripe" height="32" className="dark:invert" disableZoom />
  <Image src="/logos/linear.svg" alt="Linear" height="32" className="dark:invert" disableZoom />
</Marquee>

Bare <img> tags inside Marquee are also automatically converted to Holocron's Image component at build time, preserving className and any extra props like disableZoom.

Icon marquee

Combine with Icon to scroll through icon sets.

123456<Marquee duration={15} slowOnHover gap={48}>
  <Icon icon="lucide:rocket" size={28} color="var(--muted-foreground)" />
  <Icon icon="lucide:zap" size={28} color="var(--muted-foreground)" />
  <Icon icon="lucide:shield" size={28} color="var(--muted-foreground)" />
  <Icon icon="lucide:database" size={28} color="var(--muted-foreground)" />
</Marquee>

Reverse direction

Scroll right instead of left.

1234<Marquee direction="right" duration={20}>
  <Icon icon="lucide:star" size={28} />
  <Icon icon="lucide:sparkles" size={28} />
</Marquee>

Pause on hover

Hover to pause the animation.

TypeScript

Fast builds

MDX

Vite

Deploy

Theming

OpenAPI

123456<Marquee slowOnHover duration={12}>
  <Badge color="blue">TypeScript</Badge>
  <Badge color="green">Fast builds</Badge>
  <Badge color="purple">MDX</Badge>
  <Badge color="orange">Vite</Badge>
</Marquee>

No fade

Disable edge fading with fade={false}.

Props

durationnumber

Time in seconds for one full scroll cycle. Controls perceived speed: duration={10} scrolls twice as fast as duration={20}. The actual pixel speed depends on how many children you have, since more items means more distance to cover in the same time.

slowOnHoverboolean

Pause the animation when the user hovers over the marquee.

direction"left" | "right" | "up" | "down"

Scroll direction. Use up or down for vertical marquees.

fadeboolean

Show a fade gradient at the edges.

fadeAmountnumber

Percentage of the container used for the fade gradient (0-100).

gapnumber

Gap between items in pixels.

classNamestring

Additional CSS classes applied to the outer container.

childrenReact.ReactNoderequired

Content to scroll. Each direct child becomes a marquee item.