Marquee
TickerInfinite scrolling strip for logos, quotes or tags in any direction.
every browseralwayshover
Logo Wall
A "trusted by" section: a heading, a strip of greyscale logos drifting past that colour up on hover, and optionally the same logos as a hairline grid revealed with a stagger. Pure CSS.
Live demo
Trusted by
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
align
columns
Measured
JavaScript of its own
0 B
CSS 11.4 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
Chrome 120 · Firefox 53 · Safari 15.4; needs mask-image.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/logo-wall---
import LogoWall from '@/components/moonarc/pro/LogoWall.astro';
---
<LogoWall heading="Used by" grid logos={[
{ src: '/logos/a.svg', alt: 'A', href: 'https://a.example' },
{ src: '/logos/b.svg', alt: 'B' },
]} />Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: marquee, reveal.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logos | { src, alt, href?, height? }[] | none | Logos; height in px, default 28. |
heading | string | 'Trusted by' | Kicker above the strip. |
grid | boolean | false | Also render the logos as a static hairline grid. |
duration | number | 40 | Seconds per loop of the strip. |
columns | 2 | 3 | 4 | auto-fit | Columns of the grid; by default as many 8 rem cells as fit. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
align | 'start' | 'center' | 'center' | Heading alignment. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-logo-wall.ma-logo-wall__aside.ma-logo-wall__grid.ma-logo-wall__heading.ma-logo-wall__strip
Slots
slot="headline"slot="aside"
Reduced motion
The strip stops and scrolls by hand; the grid fades in without stagger.
With ClientRouter
CSS-only; nothing to rebind.
Why it is built this way
- Greyscale at 70% until hovered: logos are proof, not decoration, and a wall of brand colours competes with the page.
- The strip pauses on hover so a logo can be clicked; the grid exists for the reader who wants to count.
- Duration ~1 s per 60 px of content keeps logos readable in motion.
Replaces: Logo clouds (Tailwind Plus) · LogoLoop (React Bits). See the migration table.
Related
Scroll Reveal
ScrollEntrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.
every browserscroll
A grid of integrations, tools or partners: cards with an icon, a name and a line, each lit by a spotlight that follows the cursor and lifting on hover, revealed with a tight stagger..
every browserscrollpointer
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown