React Testimonials Section with Inline Avatar Quotes

Pro

Five short testimonials set as a single flowing paragraph, each sentence carrying a small round face in the line of text. Hover or tab to a sentence and the speaker's name and role rise above their avatar in orange, while every other sentence blurs and fades so that one voice stands alone.

Testimonials that read like prose

Social Proof Section with Inline Avatar Quotes is a React and Tailwind CSS testimonials section that merges several short quotes into one paragraph, with an inline avatar per sentence and a focus effect that reveals the speaker and blurs the rest. It works in Next.js or any React app with Framer Motion.

Testimonial grids repeat the same card shape until the eye stops reading them. Writing the quotes as continuous prose turns them into something people actually read from start to finish, and the faces in the line remind them that each sentence comes from a different person.

The interaction works for everyone. Each sentence is a real button, so keyboard users reveal names with Tab, touch users with a tap, and screen readers hear the name and role without any interaction at all.

How the paragraph is built

Sentence buttons

Each quote is an inline button containing an avatar and its text, flowing with the rest of the paragraph.

Inline avatars

Round photos 40px across by default, sitting in the text line.

Focus reveal

On hover or focus, the speaker's name and role slide in above the avatar in the accent colour, and other sentences blur by 5px and fade to 25 percent.

Resting rhythm

Alternate sentences sit at 70 percent opacity at rest, so the paragraph has a visible beat even before interaction.

Hidden attribution

A visually hidden name and role inside every button, plus aria-pressed for the selected state.

When inline quotes work

Use it when

You have four to six very short quotes, one sentence each.
Editorial, design led sites that want proof without cards.
Your quotes read naturally side by side, like a chorus.
You want a testimonial section that is fully keyboard accessible.

Skip it when

Quotes are longer than a sentence or two.
You need company logos next to names.
Visitors should see every name without interacting.
Your accent colour is not orange and you do not want to set it.

Write quotes that flow

quotes takes an id, text, name, role and avatar. Write or trim each quote so it ends cleanly and the next one can follow, since they are read as one paragraph. Ask the customer before shortening their words.

Order matters more than usual. Put the most specific, outcome led sentence first, because people read the paragraph top to bottom and many stop after the first line or two.

Tune the effect with blurAmount, blurOpacity and alternateOpacity, and set accentColor to your brand. avatarSize changes the faces in the line; keep it close to the text height so lines do not open up.

npx wensity@latest add social-proof-section-with-inline-avatar-quotes --type block

page.tsx

import { InlineAvatarQuotesSocialProof } from "@/components/wensity/blocks/social-proof-section-with-inline-avatar-quotes";

export function Voices() {
  return (
    <InlineAvatarQuotesSocialProof
      headline="Heard on the shop floor"
      accentColor="#2563eb"
      quotes={[
        { id: "1", text: "Stock counts finally match.", name: "Rui Costa", role: "Warehouse lead", avatar: "/people/rui.jpg" },
        { id: "2", text: "I trained the night shift in ten minutes.", name: "Jo Park", role: "Shift manager", avatar: "/people/jo.jpg" },
        { id: "3", text: "Returns stopped piling up by the door.", name: "Sam Okafor", role: "Ops director", avatar: "/people/sam.jpg" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`quotes`	{ id; text; name; role; avatar }[]	-	The sentences, in reading order.
`accentColor`	string	"#f97316"	Colour of the revealed name and role.
`blurAmount`	number	5	Blur in pixels on sentences that are not selected.
`blurOpacity`	number	0.25	Opacity of sentences that step back.
`alternateOpacity`	number	0.7	Resting opacity of every other sentence.
`avatarSize`	number	40	Diameter of the inline avatars in pixels.

Accessibility details

Reading width

The paragraph is capped at 880px and sized between 1.15rem and about 1.9rem, a comfortable measure for prose at any width.

Neutral backdrop

Off white in light mode and near black in dark mode, so the accent colour on the revealed name is the only colour in the section.

Works without a mouse

Focus and click trigger the same reveal as hover, and aria-pressed reports which sentence is selected.

Names always available

Hidden text inside each button gives screen readers the speaker's name and role without any interaction.

Reduced motion

The blur and the label slide are removed for visitors who prefer reduced motion; opacity changes remain.

Blur cost

Blurring text is a GPU filter on a handful of spans, cheap at this size.

Block details

Social Proof Section With Inline Avatar Quotes

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: 255 lines, 7 KB in one file
Install: wensity add social-proof-section-with-inline-avatar-quotes --type block
Tags: light, dark, testimonials, inline, hover, quotes
Last updated: October 13, 2026