Facescape

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

Community Heroes Who Supported ScrollX UI

AK
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
JR
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
SA
SE
KG
A
MJ
ML
S

Installation

npx shadcn@latest add https://scrollxui.dev/registry/facescape.json

Usage

import { Facescape } from "@/components/ui/facescape";
<Facescape
  variant="squircle"
  avatars={avatars}
  colorDuration={3000}
  className="max-w-4xl"
/>

Examples

Circle

AK
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
JR
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
SA
SE
KG
A
MJ
ML
S

Square

AK
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
JR
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
SA
SE
KG
A
MJ
ML
S

Squircle

AK
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
JR
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
MJ
ML
S
S
JP
SA
SE
KG
A
RM
CS
AL
DG
AP
SA
SE
KG
A
MJ
ML
S

API Reference

Facescape

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

Props

PropertyTypeDefaultDescription
avatarsAvatarData[]required
Array of avatar objects containing src, alt, fallback, and name.
classNamestringundefined
Additional Tailwind or custom classes applied to the container.
colorDurationnumber3000
Duration in ms for hover/autoAnimate color and scale transition.
variant"circle" | "square" | "squircle"squircle
Shape of the avatars. Determines border-radius styling.
refRef<HTMLDivElement>undefined
Optional ref for the Facescape container div.
autoAnimatebooleanfalse
Used internally by FacescapeItem to animate avatars on scroll visibility (mobile/tablet).
srcstringrequired
Image URL of the avatar. Required for FacescapeItem.
altstringrequired
Alt text for the avatar image. Required for FacescapeItem.
fallbackstringrequired
Fallback text displayed if the image fails to load. Required for FacescapeItem.
namestringrequired
Tooltip name displayed on hover. Required for FacescapeItem.

Built withby Ahdeetai.