🎬 Avatar Animations

Animation Frames

Add ?frame= parameter to request specific animation frames:

<!-- Emotes -->
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=happy" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=sad" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=surprised" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=angry" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=bored" />

<!-- Idle animation frames -->
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=idle_0" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=idle_1" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=idle_2" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=idle_3" />

<!-- Vowel mouth shapes for lip-sync -->
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=vowel_A" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=vowel_E" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=vowel_I" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=vowel_O" />
<img src="https://avatar.2389.dev/avatar/user@email.com.svg?frame=vowel_U" />

JavaScript Animation Loop

// Cycle through idle frames at 4 FPS
const frames = ['idle_0', 'idle_1', 'idle_2', 'idle_3'];
let index = 0;
const img = document.getElementById('avatar');

setInterval(() => {
  img.src = `/avatar/user@email.com.svg?frame=${frames[index]}`;
  index = (index + 1) % frames.length;
}, 250);

🎬 Live Animation Demo