Browse components
Facescape
A little face built from simple shapes that watches your cursor, lifts its brows and grins as you get close. Click to boop.
Installation
npx shadcn@latest add @glint-ui/facescapeFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/facescape.json
Usage
import { Facescape } from "@/components/ui/facescape";
<div className="relative grid h-96 place-items-center">
<Facescape size={280} faceColor="#ffd166" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 280 | Face size in px. |
| faceColor | string | "#ffd166" | Head color. |
| featureColor | string | "#1c1917" | Eyes, brows and mouth color. |
| cheekColor | string | "#ff8fab" | Blush color. |
| follow | number | 1 | How strongly the head turns toward the cursor. |
| blink | boolean | true | Blink every few seconds. |
| label | string | "Illustrated face that follows your cursor" | Accessible description. |
| className | string | — | Extra classes for the root element. |