React Logo Cloud with Morphing Wordmarks

Pro

An open row of five company wordmarks with no boxes around them. Every 2.8 seconds the first, third and fifth swap to a different name with a soft morph, then the second and fourth, so ten names pass through five places while the row stays calm.

A logo cloud without the lattice

Social Proof Section with Morphing Wordmarks is a React and Tailwind CSS logo cloud that places five wordmarks in an open row and morphs each one into another on a staggered timer, doubling the names shown without borders or a marquee. It works in Next.js or any React app with Framer Motion.

Bordered logo grids look like spreadsheets on light, airy pages. A borderless row lets wordmarks sit in open space under a hero, the way a magazine lists its contributors, and the swapping keeps it from feeling static.

Each slot draws from its own pool, and the pools never overlap, so the same mark can never appear twice in the row at once.

Row mechanics

Wrapping row

The slots sit in a centred, wrapping flex row inside a 1080px container, so on phones the five marks wrap onto two or three lines rather than shrinking.

Quiet header

A centred heading and one sentence, capped at about 38rem, above the row.

Five open slots

No cell borders or backgrounds; wordmarks sit directly on the section.

Staggered waves

Slots one, three and five swap together, then slots two and four, every 2.8 seconds.

Disjoint pools

Each slot has its own list of marks with no overlap, which rules out duplicates on screen.

Morph

The outgoing wordmark blurs out as the next one resolves in place.

Where a wordmark row fits

Use it when

Consumer apps and media brands whose partners are household names in wordmark form.
Directly under a hero as a light trust line.
You have around ten customer wordmarks with permission to show them.
Airy, minimal pages where borders would feel heavy.
You can add your own SVG marks to the component.

Skip it when

Pages where the logo row sits beside dense text, since even a gentle swap draws the eye away from reading.
You want to show logos in a fixed order of importance; the swaps reshuffle what appears where.
You intend to use the default marks, which are real companies.
Your customers' marks are square icons rather than wordmarks.
You need a dense grid of many logos.
Animated logos clash with your brand rules or theirs.

Your marks, your pools

Like the logo grid, this block draws marks from an SVG map inside the file. Add your customers' wordmarks to the map, delete the built in ten, and set slots so each slot's pool lists two of your ids, keeping pools separate so nothing repeats.

Wordmarks of similar visual weight make the calmest row. A heavy, blocky mark next to a thin script one makes every swap look like a jump, even though the slots never move.

Rewrite the headline and description as well. The default copy talks about real company wordmarks, which only makes sense when they are yours to show.

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

page.tsx

import { MorphingWordmarksSocialProof } from "@/components/wensity/blocks/social-proof-section-with-morphing-wordmarks";

// After adding your customers' wordmarks to the map in the component:
export function TrustRow() {
  return (
    <MorphingWordmarksSocialProof
      headline="In use at"
      description="Studios and publishers who build with Fieldnote."
      slots={[
        { pool: ["acme", "globex"] },
        { pool: ["initech", "hooli"] },
        { pool: ["vandelay", "stark"] },
        { pool: ["wayne", "umbrella"] },
        { pool: ["tyrell", "cyberdyne"] },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`slots`	{ pool: WordmarkId[] }[]	5 slots of 2 marks	Each slot's rotation, using ids from the map inside the file. Keep pools disjoint.
`headline`	string	"Trusted on every home screen"	Heading above the row.
`description`	string	-	Sentence under the heading.

Behaviour and caveats

Brief swaps

Each morph takes half a second, so the row spends most of its time still.

Warm background

The section sits on a warm off white in light mode and near black in dark mode; pass a className to match your page if it differs.

Endorsement risk

Ten real wordmarks ship as defaults to demonstrate the effect. Publishing them implies those companies are customers.

Reduced motion

Each slot shows its first mark and never swaps for visitors who prefer reduced motion.

Running timers

The waves keep cycling while mounted, including offscreen. The work per tick is tiny.

Brand colours kept

The marks keep their own brand colours, with only their black parts drawn in the current text colour so they flip with the theme. Check each of your marks on both backgrounds.

Block details

Social Proof Section With Morphing Wordmarks

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: 345 lines, 39 KB in one file
Install: wensity add social-proof-section-with-morphing-wordmarks --type block
Tags: light, dark, logos, trust, wordmarks, cloud
Last updated: October 13, 2026