Overview
Components
Text Animations
A seeded avatar canvas that renders a deterministic color composition with hover-only animation and a built-in 2D fallback.
xxtomm
svelte
neo
Aidan
dheeraj
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/fallback-avatar.json
Copy the Source Code
Copy and paste the following code into your project:
fallback-avatar.svelte
index.ts
utils.ts
webgl.ts
Folder Structure
Folder Structure
Examples
Size
Use the same seeded avatar across multiple size values when you need tiny inline chips, default profile dots, or larger hero accents.
20px
28px
36px
44px
Animated
Compare hover-enabled rendering with a static variant when you want motion only in emphasis-heavy surfaces.
Animated
Hover to animate
Static
Animation disabled
Props
| Name | Type | Default | Description |
|---|---|---|---|
name | string | required | The seed used to derive the avatar composition, color palette, and motion anchors. |
size | number | 32 | Controls the rendered avatar size in CSS pixels. |
animated | boolean | true | Enables the hover-only animation loop for the avatar surface. |
class | ClassValue | undefined | Custom classes merged onto the root canvas element. |
style | string | undefined | Inline styles appended to the root canvas element. |