Team showcasePro
An image led team introduction with profiles that open in place.
- About or company pages that introduce the team with portraits.
- Sections that need one of four layouts: gallery, filmstrip, directory, or spotlight.
- Use team-directory for an internal, searchable people list.
- Use team-members for managing members and roles.
- Use testimonial-stage for quotes from customers.
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 { TeamShowcase } from 'animui/team-showcase';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 when people behind a product deserve a clear introduction. Supply accurate profiles, portraits, and destinations.
import { TeamShowcase } from "animui/team-showcase"; export function About() { return ( <TeamShowcase variant="spotlight" onPersonSelect={(person) => router.push("/team/" + person.id)} /> );}Directory layout
<TeamShowcase variant="directory" onPersonSelect={(person) => track("team_profile_open", { id: person.id })}/>API reference
2 parts. The first is the root.
TeamShowcase
An image-led team section in four layouts, with profiles that open in place and copyable sample contact details. People and portraits are sample data.
variant"gallery" | "filmstrip" | "directory" | "spotlight""gallery"Layout of the section.onPersonSelect(person: { id: string; name: string; role: string }) => void–Called when a person is chosen. Receives the full sample person object.TeamShowcaseReview
Demo wrapper with a SegmentedControl to switch variants. Use it for previews only.
No props.
- Selection buttons use aria-pressed; the directory rows use aria-expanded with aria-controls.
- Profile changes are announced in aria-live regions.
- Copy buttons are labeled per person, such as "Copy Maya's email".
- Profiles crossfade and expand in place when selection changes.
- Reduced motion removes offsets and height animation.
- It is a container query root, so layouts adapt to the section width, not the viewport.
- At 760px container width the header stacks and details move under the photos.
- At 440px the gallery and filmstrip become horizontal snap scrollers and spotlight stacks the photo under the copy.
- Portraits load through next/image with fill and per-layout sizes.
- The selected person is scrolled into view with a smooth scroll that becomes instant under reduced motion.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on an about or company page to introduce the team.
- Replace the people array and portraits; remove the demo contact details if they should not be public.
- Render TeamShowcase with a fixed variant; TeamShowcaseReview exists for the docs preview.
- Composes animui CopyButton and SegmentedControl.
The full library index for assistants is at /llms.txt.