Which framework does this target?

React/TypeScript with framer-motion, Lucide, cn and utility classes. Adapt to the existing host project; other-framework ports and standalone HTML require explicit implementation.

Does it call any external service?

The component renders local image paths and supplied text without a testimonial-service API. Portraits and fonts are absent from this archive. Supply local files and inspect the completed host page’s requests.

Can I swap the imagery?

Yes. Replace entries with accurate local portraits and meaningful alt text, keeping any named person/image relationship consistent. Choose other asset types only for appropriate newly added slots, following the guide.

Why does the phone show fewer portraits?

Visibility is fixed by position index. The mobile-only positions start at the twelfth entry; the twelve-entry demo populates only one of them. Revise the mapping or provide intended mobile entries and test it.

Can visitors select a portrait to read its quote?

No selection or quote content is implemented. Portraits enlarge on hover, while the central CTA can link to a separate story page once given a real destination.

Orbiting Portrait Testimonials

Previews from the publisher

Surround a central customer-story message and link with floating portrait tiles. Images enter with spring scaling, drift vertically and enlarge on hover, while the headline, support and CTA stay central. Despite the testimonial name, this React component accepts only image/alt entries: it does not display each person’s quote, name or role, and the portraits do not travel along orbital paths.

What you get

An AnimatedTestimonialGrid React/TypeScript component and twelve-portrait usage example. Props supply image entries, optional badge, React-node title/description, CTA label/destination and className. Copy and maintain the source rather than installing a versioned block package.
Fifteen authored image positions with breakpoint-specific visibility. The first eleven are tablet/desktop positions and the final four are mobile-only. The twelve-entry demo therefore shows only its twelfth portrait below the medium breakpoint; adding entries does not automatically redistribute the desktop set.
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, plus monochrome visibly named vendor marks. Reconcile fixed example styles with those references during integration; one token does not control every literal class or animation.
Icon/imagery guidance, third-party notes and a source checker. The archive contains no referenced portrait files or WOFF2 fonts. React, framer-motion, Lucide, cn and host utility/theme styling remain requirements.

Before you choose

Use the portraits to introduce genuine customer stories and make the onward link useful. Deliberately curate the mobile set and ensure the central message remains readable without hover or motion; a field of faces alone is not testimonial evidence.

Good fit

A customer-story introduction that links onward to real case material rather than showing every quote in place.
A page wanting a portrait-surrounded central message and an editable animation treatment.
A team willing to maintain source, deliberately choose breakpoint image sets and supply accurate local portrait material.

Not for

A quote carousel, per-person attribution/role display, verified customer roster or true orbital-motion simulation.
A dependency-free/versioned block or an automatic visual match with a mature design system.
Navigation, forms, authentication or checkout, or automatic responsive redistribution of an arbitrary number of portraits.

How to use

You say

/testimonial-orbiting-portraits Add the Orbiting Portrait Testimonials 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.

Inspect the host stack and copy the demo/component into its conventions, resolving React, framer-motion, Lucide and cn. Establish the needed client boundary for motion. Other frameworks need an actual port; standalone HTML is an optional standalone adaptation.
Write truthful badge/title/support text and point ctaHref to real success stories instead of #. Provide accurate image/alt entries; the current API has no quote, name or role fields. If individual endorsements matter, add a deliberate attribution design or use a different component.
Choose the visible portrait set at each breakpoint. Positions are assigned by index, not by an adaptive packing algorithm; only the first fifteen entries are considered. With the twelve-entry sample, one image appears below medium width, six at medium and eleven at large. Review or revise that mapping instead of assuming four mobile portraits are populated automatically.
Supply local portraits/fonts and preserve accurate person/image relationships wherever people are named. Follow the imagery guide’s slot rules and appropriate WebP sizing. Apply the written theme/icon contract to the spring entrances and repeated drift, and set a suitable section heading level when embedding the central h1.
Run node scripts/check-blocks.mjs TARGET, build and test CTA focus/destination, text clearance at every breakpoint, image loading and reduced-motion handling. Randomized drift duration/amplitude and spring entrances are continuous decorative behavior without a built-in preference branch. The checker does not verify roster authenticity, mobile layout or runtime network isolation.

Requirements and costs

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