Logo Wall
block / marketing
A logo band in three layouts — row, grid or marquee — where each mark degrades from supplied image to inline path to typeset wordmark, and the set's label states the claim it is making.
- type
- block
- files
- 2
- registry deps
- @automindz/motion-primitives, @automindz/render-link
- npm deps
- none
installs
- lib/automindz/logos.ts
- components/automindz/logo-wall.tsx
- src falls back to inline path, wordmark, then name.
- Emphasis via opacity and colour, never a filter.
- Three logos and eleven both stay balanced.
Logos are data in lib/automindz/logos.ts. The default BUILT_WITH set is technologies, drawn as inline single-path Simple Icons geometry (CC0) filled with currentColor. A LogoSet carries its own label, which becomes the eyebrow: swap in client logos and change "Built with" too, since "Trusted by" is a claim about customers. Artwork degrades src → svgPath → wordmark → name. layout="marquee" needs styles/automindz-motion.css imported once.
Variations
one state per section
- 01Built with, the shipped default
- 02Eleven marks, four across
- 03Three logos
- 04Marquee
- 05Linked marks, focus visible
- 06Image marks, two failed
Built with, the shipped default
The default set: our mark, then seven real technology marks drawn from single Simple Icons paths and filled with currentColor, so they take the wall's colour instead of fighting it. The eyebrow comes from the set's own label.
Built with

- Next.js
- React
- TypeScript
- Tailwind CSS
- Node.js
- Stripe
- Vercel
Eleven marks, four across
Swap the set and the label moves with it. Eleven into a four-across grid leaves three centred on the last line, and Google Cloud Platform wraps rather than truncating. The label is Integrations, not Trusted by: the marks are real either way, but only the client can claim a company as a customer.
Integrations
What it plugs into
- Slack
- GitHub
- Google Cloud Platform
- Notion
- Linear
- Figma
- Sentry
- Cloudflare
- Twilio
- Supabase
Three logos
The balance case at the other end. Three marks in the row layout stay a deliberate centred group; nothing stretches to fill the frame or leaves a gap where the other eight would be.
Core integrations
- Slack
- GitHub
Marquee
Composes Marquee from @automindz/motion-primitives, which needs styles/automindz-motion.css imported once. It pauses on hover, and under prefers-reduced-motion it stops and becomes a row you scroll.
Built with

- Next.js
- React
- TypeScript
- Tailwind CSS
- Node.js
- Stripe
- Vercel
Linked marks, focus visible
Hover the marks in this one, then hover the marks in any other variant. Here every mark has an href, so each takes a ground and an interior edge under the pointer on top of the emphasis shift — colour and an inset shadow only, filling padding that was already reserved, so the mark beside it does not move a subpixel. Nowhere else on this page does a mark respond at all, because nowhere else is one a target. Tab through it for the identical state plus the focus ring, and note the accessible name is always the full company name, never the glyph or the abbreviation.
Built with
Stack documentation
Image marks, two failed
One real file loads. The Next.js and React entries point at paths that do not exist and fall back to their inline geometry; Sable Grid has no geometry and falls back to its wordmark. Nothing renders a broken-image glyph and the row keeps its rhythm.
Mark artwork supplied
