Following Avatar

An illustrated portrait whose face turns to follow the pointer, each layer sliding a different distance for depth, and blinks now and then. One SVG, eased in time rather than per frame.

Loading preview…

Install

Steps for Next.js.

1
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-components
2
Load the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";
3
Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";

Props

Name	Type	Default	Description
label	string	—	The portrait's accessible name.
range	number	—	How far the pointer must be from the centre, in pixels, for the face to turn fully.
className	string	—	Classes for the root element.

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props