Logo marquee
A quiet, continuously moving row of brand marks with a pause control.
npm install https://animui.stracture.net/__local/package.tgz- A customer or integration logo strip on a landing page.
- Social proof sections with a heading and a short supporting line.
- Use integrations when each logo needs a description or a connect action.
- Use testimonial-stage when quotes matter more than logos.
- Use carousel when people should browse items by hand.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { LogoMarquee } from 'animui/logo-marquee';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this to show a collection of organizations or tools. Replace the sample marks with brands you have permission to represent.
import { LogoMarquee } from "animui/logo-marquee"; export function Customers() { return ( <LogoMarquee title="Trusted by product teams" description="Teams of every size ship with us." brands={[{ name: "Acme", icon: "/logos/acme.svg" }, { name: "Globex", icon: "/logos/globex.svg" }]} /> );}Integration logos
<LogoMarquee title="Works with your stack" description="Connect the tools your team already uses." brands={[ { name: "Linear", icon: "/logos/linear.svg" }, { name: "Figma", icon: "/logos/figma.svg" }, { name: "Notion", icon: "/logos/notion.svg" }, ]}/>API reference
2 parts. The first is the root.
LogoMarquee
A heading, a looping row of brand marks, and a pause control.
titlestring"Good work moves between tools"Section heading.descriptionstring"From the first idea to the final handoff, a familiar set of tools stays close to the work."Supporting line under the heading.brandsLogoMarqueeBrand[]exampleBrandsMarks to show. Defaults to seven sample tool logos.tone"color" | "mono""color"Color shows each mark in its official brand colors; mono draws every mark in the text color for a quieter row.LogoMarqueeBrand
One brand entry.
nameRequiredstring–Visible brand name.iconRequiredstring–URL of a single-color SVG, applied as a CSS mask so it inherits the text color.colorstring–Official brand color for a single-color mark in color tone. Leave out for black or white marks such as GitHub, Notion, and Vercel so they follow the text.colorIconstring–URL of a full color SVG for multicolor marks such as Slack or Figma, used in color tone.- The duplicated loop copy is aria-hidden, so each brand is read once.
- The pause button uses aria-pressed and a live region announces the motion state.
- A CSS keyframe loop scrolls two copies of the list for a seamless track.
- Under prefers-reduced-motion the animation stops and the duplicate list is hidden.
- Below 700px the heading and description stack and the marks shrink.
- The track fades at both edges with a mask, so logos never hard-cut at narrow widths.
- The loop is a single CSS transform keyframe on one track, with no JavaScript animation.
- Two copies of the list are rendered for a seamless loop; under reduced motion the animation stops and the copy is hidden.
- Logos are CSS masks from SVG URLs, so use small single-color SVGs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a customer or integration logo strip on a landing page.
- Only pass brands you have permission to show; the defaults are illustrative.
- Composes animui Button for the pause control.
The full library index for assistants is at /llms.txt.
