React Logo Grid with Morphing Customer Logos

Pro

Eight bordered cells, four across, each holding a company logo. Every few seconds half the cells swap their logo for another with a soft blur and slide, then the other half follow, so a grid of eight shows sixteen names without ever looking busy.

Twice the logos in the same space

Social Proof Section with Morphing Logo Grid is a React and Tailwind CSS logo grid in which each cell cycles between two logos with a morph animation, in alternating waves, so a compact grid can show a larger customer roster. It runs in Next.js or any React app with Framer Motion.

Logo walls work by recognition: visitors scan for a name they know. A static grid limits you to the logos that fit; a marquee shows more but keeps moving under the eye. Swapping logos in place, half the grid at a time, shows more names while each cell stays still most of the time.

The swap is designed not to jolt. Each pair of logos is matched by rendered width, so the grid never jumps, and hovering a cell pauses it for anyone who wants a closer look.

Grid mechanics

Eight cells

Two columns on phones and four from 640px, separated by hairline borders.

Two wave rhythm

Every 2.6 seconds one set of cells swaps, then the other, so only half the grid moves at a time.

Morph transition

The outgoing logo blurs and slides away as the incoming one sharpens into place.

Width matching

Logo pairs are sized to the same rendered width, keeping the layout steady.

Hover pause

Pointing at a cell stops its cycle until the pointer leaves.

Before you use it

Use it when

You want a logo section that holds still while someone reads it, unlike a scrolling marquee.
You have twelve to sixteen customer logos you have permission to show.
You want a logo wall that feels alive without a scrolling marquee.
A bordered, structured grid suits your design.
You can add your own SVG logos to the component.

Skip it when

Your customers are small or unknown companies. A logo grid works through recognition, so named quotes may persuade more.
You plan to ship the default logos. They are real companies and are not your customers.
You have fewer than eight logos.
Strict brand guidelines from customers forbid animating their marks.
You need the logos to link to case studies; cells are not links.

Add your logos, then choose the pairs

Logos are not passed as images. The component contains an SVG map of sixteen real company marks, and the cells prop picks pairs from those ids. To show your own customers, add their SVG marks to that map under new ids, remove the ones you are not entitled to use, and list your ids in cells, two per cell.

Change the headline too. Trusted Across Modern Enterprises next to famous logos is a claim that those companies use your product, and it must be true before it ships.

npx wensity@latest add social-proof-section-with-morphing-logo-grid --type block

page.tsx

import { MorphingLogoGridSocialProof } from "@/components/wensity/blocks/social-proof-section-with-morphing-logo-grid";

// After adding your customers' SVG marks to the logo map in the component:
export function Logos() {
  return (
    <MorphingLogoGridSocialProof
      headline="Teams that run on Northline"
      description="A few of the companies that closed their books with us this year."
      cells={[
        { pool: ["acme", "globex"] },
        { pool: ["initech", "umbrella"] },
        { pool: ["hooli", "vandelay"] },
        { pool: ["stark", "wayne"] },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`cells`	{ pool: LogoId[] }[]	8 cells of 2 logos	Each cell's pair of logo ids, chosen from the map inside the file.
`headline`	string	"Trusted Across Modern Enterprises"	Heading above the grid. Only claim what your customers would confirm.
`description`	string	-	Sentence under the heading.

Honesty and motion

Marks stay recognisable

Logos keep their brand colours, with black parts drawn in the current text colour so they invert in dark mode. Each mark is capped at about 11.5rem wide inside its cell.

Short transitions

Each swap lasts about half a second, so the grid is still for most of every cycle.

Real marks by default

The built in logos belong to sixteen well known companies. They are there to show the effect, and they imply endorsement if published.

Reduced motion

With reduced motion on, swapping stops and each cell keeps its first logo.

Readable names

Each cell has a hidden label with the current company name, since the logos are SVG drawings.

Timers

Two interval driven waves run while the section is mounted. They are cheap, but they do not stop when the grid is offscreen.

Block details

Social Proof Section With Morphing Logo Grid

Category: Social Proof Sections
Renders: JavaScript animation. Paints first, then animates
Theme: Follows the site theme in light and dark
Dependencies: clsxframer-motiontailwind-merge
Source: 512 lines, 78 KB in one file
Install: wensity add social-proof-section-with-morphing-logo-grid --type block
Tags: light, dark, logos, trust, grid, enterprise
Last updated: October 13, 2026