Characters

5 characters with 4 emotion states each

CSS-Powered State System

Character emotions via CSS + SVG. Switch data-state attribute!

All Characters

5 characters

State Matrix

20 total states

Character	Idle	Happy	Celebrating	Thinking
eli
miko
lira
nova
ritmo

Implementation Details

How It Works

• Enhanced SVGs contain all state variants
• CSS shows/hides elements based on state
• CSS transforms animate movements

States Available

idle: Default resting state
happy: Smiling, eyes curved
celebrating: Arms up, bouncing
thinking: Head tilted

// Files

/components/characters/CharacterAvatar.tsx
/app/styles/character-states.css
/static/characters/{name}-enhanced.svg