Overview
Components
Text Animations
Fallback Avatar
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
20px
28px
36px
44px
Animated
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. |