Components
Avatar Reveal
Overlapping avatars that pop in with an elastic blur, then the caption slides in from the right.
A social-proof cluster: three stacked avatars scale and unblur in from the
left with elastic.out, then the caption slides in from the right. Driven
by GSAP.
2,000+ teams shipping faster this week.
Installation
pnpm dlx shadcn@latest add @tween-ui/avatar-revealUsage
app/page.tsx
import AvatarReveal from '@/components/tweenui/avatar/avatar-reveal';
export default function Page() {
return <AvatarReveal>2,000+ teams shipping faster this week.</AvatarReveal>;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
avatars | AvatarRevealItem[] | three Unsplash portraits | Faces to stack. Each has src + alt. |
children | ReactNode | 2,000+ teams shipping… | Caption beside the stack. |
className | string | — | Extra classes for the root. |
Accessibility
Under prefers-reduced-motion: reduce the avatars and caption appear in their
final state with no scale, blur, or slide. Each image has an alt label.