Client Logos
Social proof surfaces that build trust through named clients and measurable outcomes. A static grid for featured clients and an auto-scrolling slider for ambient reinforcement.
Minimalistic Client Logo Grid
P Purpose
Primary social proof layer. Displays 10 client logos in a clean 2×5 grid to establish credibility with mid-market visitors. Select clients have hover-activated popovers with outcome descriptions. A section-level "View all case studies" link below the grid captures intent — no CTA inside popovers to avoid hover-loss friction.
W When to Use
- Below hero or after a capabilities section on the homepage
- On services pages, between problem statement and methodology
- On the case studies index as a visual navigation surface
- Only use when you have at least 8 named clients — a sparse grid dilutes impact
L Layout Behaviour
Minimalistic. No borders, no boxes, no cell backgrounds. Logos sit in a clean 5 → 3 → 2 column grid that breathes. Cell height: 96px → 88px → 76px at responsive breakpoints. The section includes an eyebrow, headline, and supporting stat line to contextualise the grid. Hover effect is a clean colour transition — grey to ink — with no background change.
I Required Inputs
- Logo asset — SVG per client. Production:
filter: grayscale(1) opacity(0.4)default,filter: noneon hover. Wireframe uses text name - Company name — short display name (≤ 20 chars)
- Popover content — every cell needs: company name, industry tag, one-line outcome. Six cells also carry a "Case study" label beneath the logo
- Overline + headline — e.g. "Trusted by" / "20+ mid-market leaders ship with our agents"
- Section CTA — "View all case studies" link target below the grid
! Do Not
- Add borders, boxes, or cell backgrounds — the grid is intentionally borderless
- Show more than 10 logos — breaks the 2×5 rhythm and clutters the section
- Skip popover content for any cell — every logo must have a description ready
- Put a CTA inside a popover — hover zone collapses before click registers
- Mix SVG logos with text placeholders in the same deploy
- Use this grid as the only social proof on lightweight pages (blog, editorial) — use the slider instead
V Variants
- Standard — full section with eyebrow, headline, stat line, grid, and section CTA. The default
- Compact (Post-Hero) — reduced padding, no eyebrow/headline, only a small mono label above a tighter 72px grid. Place directly after the hero statement
F Typical Page Flow
- After: hero statement, capabilities section, or problem statement
- Before: case studies section, TriStorm methodology, or CTA ending
- Homepage: Hero → Logo Slider (inside hero) → Capabilities → Logo Grid → Case Studies → CTA
- Services: Hero → Problem → Logo Grid → TriStorm → FAQ → CTA
20+ mid-market leaders ship with our agents
Infinite-Scroll Logo Strip
P Purpose
Ambient social proof that reinforces credibility without demanding attention. The slow-scrolling logo strip creates a sense of momentum and breadth — suggesting a depth of client base beyond the featured grid. Hover pauses the scroll and reveals a contextual popover per logo.
W When to Use
- Between major content blocks as a visual breather
- Directly below the hero statement (minimal variant)
- When the client list exceeds the grid count or you need low-friction proof
- On lighter pages (about, blog) where the full grid would be too heavy
- Never place the slider above the logo grid — the grid is the primary surface
L Layout Behaviour
Full-bleed --v-snow background with subtle dot-grid texture. CSS-only infinite scroll at 55s duration. Fade edges via gradient mask at 8%/92%. Hover on the track pauses the entire animation. Individual item hover transitions logo name from grey to ink and reveals a popover above. No responsive breakpoints — scrolls identically on all viewports.
I Required Inputs
- Logo assets — SVG per client, same grayscale/colour treatment as the grid
- Company names — short display names for each slider item
- Popover content — company name, industry tag, one-line description per item
- Label — small mono label above the track, e.g. "Teams building with Vstorm"
! Do Not
- Set animation duration below
40s— fast scroll feels cheap and makes popovers unusable - Place the slider above the logo grid on any page
- Use as the sole social proof on high-intent pages (homepage, services) — pair with the grid
- Remove the fade-edge gradient masks — hard-cut entries look broken
- Use more than 12 unique logos — loop gets too long and items rarely surface
- End a page with the slider — always follow with content or a CTA
V Variants
- Standard — snow background, dot texture, popover on hover. Shown below
- Minimal — no background change, no dot texture, sits on
--v-white. Used inside the hero-statement component
F Typical Page Flow
- Homepage: Hero → Slider (minimal, inside hero) → Capabilities → Grid → CTA
- About page: Hero → Team → Slider (standard) → CTA
- Blog post: Content → Slider (standard) → CTA Minimal
- Never the last section — always follow with a CTA or content block