Which framework does this target?

React/TypeScript with framer-motion and utility styling. The supplied client implementation needs host integration; other frameworks require a deliberate port.

Does it call any external service?

The inspected code renders local image paths and performs no service calls. It explicitly does not fetch audio on hover. Portrait/font/audio files are absent from the ZIP; verify the completed host page separately.

Can I swap the imagery?

Yes. Use accurate local portraits and keep names/roles/quotes paired. The guide distinguishes portraits from ordinary photos and special abstract slots; this component’s main slots are portraits.

Will the audio field play a testimonial?

No. The current code has audio cleanup scaffolding but no code that creates or starts a clip. Real audio requires additional implementation and suitable local files.

Can phone or keyboard users open the quote?

The current selection uses mouse enter/leave only. Tap scaling does not reveal content, and wrappers are not keyboard controls. Add an accessible persistent selection path before using this as the only way to read testimonials.

Typed Testimonial Row

Previews from the publisher

Reveal a short customer quote in a speech bubble when a pointer hovers over its portrait. Text types at roughly one character every 50 milliseconds, with name and job title beneath; visited portraits retain a changed border. The React demo provides eight entries, but its audio fields do not play sound. This is a hover-driven display, not a canvas backdrop or a complete accessible review browser.

What you get

A React/TypeScript Component and an eight-entry usage example. Records include image, audio, text, name and jobtitle; the component renders portraits and hover quote bubbles. Copy and maintain the code in your project rather than installing a versioned block package.
A wrapping portrait row with hover/tap scaling, per-portrait visited state and a timed text reveal. The active bubble disappears and its typing resets when the pointer leaves. A fixed-height 96 px quote region clips overflow rather than expanding to every supplied text length.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. It specifies restrained motion and inline SVG interface icons with 1.5 px square-cap strokes; actual vendor marks should be monochrome and visibly named. Reconcile fixed source styles with those references instead of assuming one token controls every element.
Imagery/icon guidance, third-party notes and a source checker. Portraits, font files and the demo’s audio_1.mp 3-style clips are absent from the archive. React, framer-motion and the host’s utility/theme setup are requirements; custom blinking animation styling also needs host support.

Before you choose

Keep the complete customer statement available without requiring prolonged hover or waiting for typing. Use this interaction as an optional detail, and make touch, keyboard and reduced-motion reading equally clear before treating the section as finished.

Good fit

A supplementary desktop detail where readers can explore very short approved quotes through portrait hover.
A project wanting an editable portrait/name/role/quote relationship and a deliberate typewriter interaction.
A team prepared to add persistent touch/keyboard access and motion preferences before relying on it as its main testimonial presentation.

Not for

Audio testimonials, automatic transcription, text-to-speech or proof that supplying an audio path will play a clip.
Long quotes requiring guaranteed full reading, a keyboard/touch-complete review browser, or an actual canvas graphics effect.
A dependency-free/versioned block, automatic fit with a mature design system, or navigation/forms/authentication/checkout.

How to use

You say

/testimonial-typed-row Add the Typed Testimonial Row section to the landing page for [product name]. Use the quotes, names and portraits I provide; do not invent testimonials. Follow the existing page framework and styling.

Read the host framework and styling before copying the client component/demo. Resolve React and framer-motion and ensure suitable client boundaries/types. Other frameworks need a real port; standalone HTML is an optional explicit deliverable rather than a universal default.
Replace text, name and jobtitle with approved accurate content and match each local portrait to its person. Several sample filenames differ from displayed names. The claims about performance and engineering outcomes are illustrative, not measurements performed by the Skill.
Keep quotes very short and check the fixed bubble height. Typing takes about 0.05 seconds per character, yet overflow is hidden and leaving a portrait clears the text. For longer content, add an accessible complete-text or persistent reading alternative rather than merely speeding up the animation.
Supply local portraits/fonts and follow the guide’s person/abstract/photo slot rules and delivery sizing. The audio property is unused by the current playback path: no clip is created or fetched on hover. Add and test real user-controlled audio only if needed; listing MP 3 filenames alone provides no sound.
Apply the written token/type/icon contract and run node scripts/check-blocks.mjs TARGET, then build/test the page. Hover handlers are attached to non-focusable wrappers; whileTap changes scale but does not select a quote. Implement keyboard/focus and touch access, reduced-motion/full-text behavior, bubble viewport clearance and any cursor-blink style. The checker cannot prove usability, audio behavior or actual network isolation.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT