Studio perspectives
ProPortrait led editorial stories with a focused reading state.
Live block · sample data
- Testimonials or editorial stories where the person's portrait matters.
- Landing sections that rotate through a few quotes on demand.
- Use logo-marquee when logos are enough social proof.
- Use carousel for many short testimonials.
- Use team-showcase to introduce your own team.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to introduce the people behind a product or team. Use verified quotes and portrait permissions for a public site.
example.tsx
import { TestimonialStage } from "@/components/arc/blocks/testimonial-stage/testimonial-stage"; export function Stories() { return ( <TestimonialStage className="my-24" onPerspectiveChange={(p) => track("testimonial_view", p)} /> );}TestimonialStage
Portrait-led stories with a tab list of people and a quote panel. Quotes and portraits are sample data.
PropTypeDefaultDescription
classNamestring–Appended to the root section.onPerspectiveChange(perspective: { id: string; name: string }) => void–Called when the active person changes.- ArrowLeftorArrowRight
- Move to the previous or next person in the tab list, wrapping around, and focus it.
- People form a role="tablist" with role="tab" and aria-selected.
- The quote panel is a polite live region.
- Portrait and quote crossfade with a small directional shift.
- Reduced motion removes the shift and uses instant transitions.
- Below 800px the columns narrow; below 680px the portrait stacks above the quote.
- Below 350px padding and quote size shrink to keep the quote readable.
- Only the active portrait is mounted, via next/image, and the first one gets priority loading.
- There is no autoplay timer; changes happen only on tab, arrow, or key input.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for testimonials or editorial stories about people.
- Replace the perspectives array with verified quotes and portraits you have permission to use.
The full library index for assistants is at /llms.txt.
