LogoMarquee

A titled section with a slowly scrolling row of brand names, each with an optional mark, plus a pause control.

When to use

• Social proof on a landing page: customers, partners or the tools your product connects to.
• When you have six or more marks; the row is duplicated to loop seamlessly, so short lists repeat visibly.
• Not for a static grid of three or four logos; lay those out yourself or use StatsBand for numbers instead of names.
• Not for real third-party logos you have no rights to show.

Usage

import { LogoMarquee } from "@/components/iris/blocks/logo-marquee/logo-marquee";

h(LogoMarquee, {
  title: "Products from one studio",
  description: "From managed Postgres to a newsroom desk, each product has its own people and its own interface.",
  tone: "mono",
  brands: [
    { name: "CapyDB", icon: "" }, // an empty icon renders the name as a text wordmark
    { name: "notdocs", icon: "/marks/notdocs.svg" },
    { name: "Anasa", icon: "/marks/anasa.svg", color: "var(--green)" },
  ],
});

Props

Prop	Type	Default	Description
title	string	"Products from one studio"	Section heading.
description	string	sample line	Supporting text beside the heading.
brands	LogoMarqueeBrand[]	7 product names	{ name, icon, color?, colorIcon? }. icon is the URL of a monochrome SVG (or '' for a name-only wordmark), drawn as a CSS mask in the text colour; color tints it in color tone; colorIcon is a full colour SVG shown as an image in color tone.
tone	"color" | "mono"	"color"	color shows each mark in its own colours; mono draws every mark in the text colour.

Notes

• The defaults are our own product names as text wordmarks (CapyDB, notdocs, MyRoomie, ErmisAI, Anasa, Entrolytics, OpsisID); a brand with no icon or colorIcon renders its name without a mark, as the preview does. Show only marks you have the rights to.
• Marks are 22 px; because icon is used as a mask, any opaque shape works and inherits currentColor.
• The motion pauses on hover (fine pointers) and with the Pause button, whose state is announced ("Motion paused"). Under reduced motion the row stops, the duplicate list is removed and the marks wrap and centre.
• The row is a region labelled "Brands"; the duplicate copy that closes the loop is aria-hidden.
• Reads the ink, ink-2, line, line-soft and surface tokens; the loop is the animate-logo-marquee-travel keyframe (39 s), and below 640 px of its own width the section tightens.