WebPremium Verified

Orbiting Portrait Testimonials UI Block

A warm-neutral testimonial block with a framed focal quote, orbiting customer portraits, and quiet teal interaction cues. It helps launch pages and campaign sites turn social proof into a memorable, editable visual moment without sacrificing readability or responsive behavior.

What you get

  • A single responsive testimonials section with a framed focal quote
  • Three selectable portrait markers arranged on a restrained orbit
  • Warm cream, clay, charcoal, and teal visual tokens
  • Concise attribution patterns for names, roles, and outcomes
  • Reduced-motion and mobile fallback direction

Good fit

  • Product launches that need approachable proof near a conversion moment
  • Founder-led pages where customer voices should feel personal and credible
  • Campaign visuals that need motion without a busy carousel

Not for

  • Long-form case studies with extensive metrics and supporting media
  • Review walls that require search, ratings, sorting, or dozens of entries

What you provide

  • Two or three edited customer quotes with names and roles
  • Portrait images or a clear direction for fictional placeholder portraits
  • Page context, conversion goal, and preferred call-to-action

Requirements

  • A modern browser
  • Node.js 20+ for the validator

Running cost

No external services. Runs entirely on your agent.

Try this prompt

/sl-orbiting-portrait-testimonials-ui-block Create a responsive Fieldnote Flow testimonials section for teams evaluating the product, with three customer quotes, names and roles. Use the headline “Proof that stays close to the people”. Keep the strongest outcome in a cream-framed panel, with three warm portrait markers orbiting it; use charcoal text, teal active states and clay metadata, with keyboard-accessible selection and reduced motion.

Follow-up prompts

  • Make the active testimonial emphasize a measurable launch result while keeping the orbit calm and editorial.
  • Adapt the section for a narrow mobile viewport with portrait markers becoming a compact selectable row.
  • Create a higher-contrast version that keeps the warm-neutral palette and improves accessibility for muted text.

Verification

Verified

render-checkpass4.0 / 575s

FAQ

Can the orbit work without animated motion?

Yes. The layout includes a static fallback that places the portrait markers around the frame and keeps the active quote clear. Reduced-motion users receive the same content and interaction without continuous movement.

How many testimonials should the block include?

Three is the strongest default: one active quote and two orbiting alternatives. A fourth or fifth story can be supported, but only when each quote remains concise and meaningfully distinct.

Does this replace customer photography?

No. It provides an art direction and placement system for supplied portraits. Placeholder portraits should be replaced with approved customer images or intentionally fictional imagery before publishing.

Similar skills