Content

Dual marquee

Two counter-scrolling, pause-on-hover marquee rows of customer wordmarks.

The teams shipping with Aurora

4,000+ product teams run their design systems on Aurora.

NorthwindVertexLuminaFathomPolaris

HalcyonDriftlineBasaltCascadeEmberly

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Logo cloud to your app with its source-owned dependencies.

bash

npx cronus-ui add logo-cloud

Manual

Install the Cronus UI packages, then paste the block below.

pnpm add @cronus-ui/ui @cronus-ui/tokens @cronus-ui/theme

Usage

Copy the source for Dual marquee. Every class is a semantic token, so it re-themes with your app.

tsx

import { Marquee } from "@cronus-ui/ui";
import {
  Aperture,
  Box,
  Command,
  Feather,
  Globe,
  Hexagon,
  Layers,
  Triangle,
  Waves,
  Zap,
} from "lucide-react";

const cloudLogos = [
  { name: "Northwind", icon: Hexagon },
  { name: "Vertex", icon: Triangle },
  { name: "Lumina", icon: Zap },
  { name: "Fathom", icon: Waves },
  { name: "Polaris", icon: Globe },
  { name: "Halcyon", icon: Feather },
  { name: "Driftline", icon: Layers },
  { name: "Basalt", icon: Box },
  { name: "Cascade", icon: Aperture },
  { name: "Emberly", icon: Command },
] as const;

const marqueeRowTop = cloudLogos.slice(0, 5);
const marqueeRowBottom = cloudLogos.slice(5);

export function LogoCloudMarqueeBlock() {
  return (
    <section
      aria-label="Customers"
      className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 py-8"
    >
      <div className="flex flex-col items-center gap-2 text-center">
        <h2 className="font-display text-2xl font-semibold tracking-tight text-fg">
          The teams shipping with Aurora
        </h2>
        <p className="text-sm text-fg-secondary">
          4,000+ product teams run their design systems on Aurora.
        </p>
      </div>
      <div className="flex w-full flex-col gap-5">
        <Marquee gap="3.5rem" repeat={3} speed={32}>
          {marqueeRowTop.map((logo) => (
            <span key={logo.name} className="flex items-center gap-2 text-fg-tertiary">
              <logo.icon className="size-5" aria-hidden="true" />
              <span className="font-display text-lg font-semibold tracking-tight">
                {logo.name}
              </span>
            </span>
          ))}
        </Marquee>
        <Marquee direction="right" gap="3.5rem" repeat={3} speed={26}>
          {marqueeRowBottom.map((logo) => (
            <span key={logo.name} className="flex items-center gap-2 text-fg-tertiary">
              <logo.icon className="size-5" aria-hidden="true" />
              <span className="font-display text-lg font-semibold tracking-tight">
                {logo.name}
              </span>
            </span>
          ))}
        </Marquee>
      </div>
    </section>
  );
}