{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "logo-marquee",
"type": "registry:block",
"title": "Logo marquee",
"description": "A quiet, continuously moving row of brand marks with a pause control.",
"categories": [
"blocks"
],
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"https://irisui.dev/r/foundation.json",
"https://irisui.dev/r/button.json",
"https://irisui.dev/r/utils.json"
],
"files": [
{
"path": "src/registry/blocks/logo-marquee/logo-marquee.tsx",
"content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { Pause, Play } from \"lucide-react\";\nimport { Button } from \"../../button/button\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface LogoMarqueeBrand {\n name: string;\n /** Monochrome SVG, drawn as a mask in the text color. Pass an empty string for a name-only wordmark. */\n icon: string;\n /** Single brand color for the mark in color tone. Leave out for brands whose mark is black or white. */\n color?: string;\n /** Full color SVG for multicolor marks, used in color tone instead of `icon`. */\n colorIcon?: string;\n}\n\nexport type LogoMarqueeTone = \"color\" | \"mono\";\n\nexport interface LogoMarqueeProps {\n title?: string;\n description?: string;\n brands?: LogoMarqueeBrand[];\n /** `color` shows each mark in its official colors; `mono` draws every mark in the text color. */\n tone?: LogoMarqueeTone;\n}\n\nconst exampleBrands: LogoMarqueeBrand[] = [\n \"CapyDB\",\n \"notdocs\",\n \"MyRoomie\",\n \"ErmisAI\",\n \"Anasa\",\n \"Entrolytics\",\n \"OpsisID\",\n].map((name) => ({ name, icon: \"\" }));\n\n/* Below 640 px of container width the section tightens: one column intro, smaller type and marks. */\nconst markClass = \"block size-[22px] flex-none @max-[640px]/logos:size-5\";\n\nfunction BrandMark({ brand, tone }: { brand: LogoMarqueeBrand; tone: LogoMarqueeTone }) {\n if (!brand.icon && !brand.colorIcon) return null; // a name-only brand is its own wordmark\n if (tone === \"color\" && brand.colorIcon) {\n return (\n // oxlint-disable-next-line nextjs/no-img-element -- brand SVGs come from the consumer and may be on any origin, which next/image would reject\n \n );\n }\n return (\n \n );\n}\n\nfunction BrandList({\n brands,\n tone,\n duplicate = false,\n}: {\n brands: LogoMarqueeBrand[];\n tone: LogoMarqueeTone;\n duplicate?: boolean;\n}) {\n return (\n // Under reduced motion the row stops, so the copy that closes the loop goes away and the names wrap and centre.\n \n {brands.map((brand, index) => (\n // In color tone the marks carry the brand color and the names read at full contrast.\n \n \n \n {brand.name}\n \n \n ))}\n \n );\n}\n\nexport function LogoMarquee({\n title = \"Products from one studio\",\n description = \"From managed Postgres to a newsroom desk, each product has its own people and its own interface.\",\n brands = exampleBrands,\n tone = \"color\",\n}: LogoMarqueeProps) {\n const titleId = useId();\n const [paused, setPaused] = useState(false);\n\n return (\n \n
\n \n {title}\n \n
\n {description}\n
\n
\n\n \n {/* Hovering the row holds it still, so a name can be read. */}\n \n \n \n \n \n\n