Studio perspectivesPro
Portrait led editorial stories with a focused reading state.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { TestimonialStage } from 'animui/testimonial-stage';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this to introduce the people behind a product or team. Use verified quotes and portrait permissions for a public site.
import { TestimonialStage } from "animui/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.
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.
