Facescape

Interactive, animated user avatars with hover effects and responsive layout.

Installation

npx shadcn@latest add @scrollxui/facescape

import { Facescape } from "@/components/ui/facescape";

<Facescape
  variant="squircle"
  avatars={avatars}
  colorDuration={3000}
  className="max-w-4xl"
/>

Interactive, animated user avatars with hover effects and responsive layout.

Property	Type	Default	Description
`avatars`	AvatarData[]	`required`	Array of avatar objects containing src, alt, fallback, and name.
`className`	string	`undefined`	Additional Tailwind or custom classes applied to the container.
`colorDuration`	number	`3000`	Duration in ms for hover/autoAnimate color and scale transition.
`variant`	"circle" \| "square" \| "squircle"	`squircle`	Shape of the avatars. Determines border-radius styling.
`ref`	Ref<HTMLDivElement>	`undefined`	Optional ref for the Facescape container div.
`autoAnimate`	boolean	`false`	Used internally by FacescapeItem to animate avatars on scroll visibility (mobile/tablet).
`src`	string	`required`	Image URL of the avatar. Required for FacescapeItem.
`alt`	string	`required`	Alt text for the avatar image. Required for FacescapeItem.
`fallback`	string	`required`	Fallback text displayed if the image fails to load. Required for FacescapeItem.
`name`	string	`required`	Tooltip name displayed on hover. Required for FacescapeItem.