Logo Cloud Marquee

Component

About

Customer wordmarks drifting past, faded at both ends. Names are set in eight type voices so a row of words reads like a row of logos; pass images for real ones. Hover to pause. From the Midnight template.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Logo Cloud Marquee to your project and fits it to your theme.

Code

How Logo Cloud Marquee is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { CSSProperties } from "react"

import { LogoMarquee } from "@/components/ui/logo-marquee"

const fonts =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&family=Geist:wght@400..600&family=Geist+Mono:wght@400..500&display=swap');"

const settings = {
  label: "Trusted by product teams",
  duration: 132,
  reverse: false,
  background: "#f7f5f0",
  text: "#141a2e",
  muted: "#6b7186",
}

// Midnight by day as theme tokens: warm paper, night-blue ink, deep gold with white text on it,
// Fraunces for headings, Geist for text, Geist Mono for figures. The component itself only reads the tokens.
function day(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.background,
    foreground: s.text,
    "muted-foreground": s.muted,
  }
  return {
    ...Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])),
    "--font-display": "Fraunces, ui-serif, Georgia, serif",
    "--font-sans": "Geist, ui-sans-serif, system-ui, sans-serif",
    "--font-mono": "'Geist Mono', ui-monospace, Menlo, monospace",
  } as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div
      className="flex min-h-svh w-full flex-col justify-center overflow-x-clip py-16"
      style={{ ...day(s), fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif", background: s.background } as CSSProperties}
    >
      <style>{fonts}</style>
      <LogoMarquee label={s.label} duration={s.duration} reverse={s.reverse} logos={["Brightwell", "Coreline", "Halcyon", "Pinecrest", "Lumen", "Northwind", "Verity", "Tallow"]} />
      <LogoMarquee className="mt-12" duration={s.duration * 1.25} reverse={!s.reverse} logos={["Ashgrove", "Kestrel", "Marlowe", "Quarry", "Solace", "Tidewater", "Wren", "Ember"]} />
    </div>
  )
}