01
Shape
Start with a body that already feels like a character — a soft sphere, a raindrop, a gem, a moth with wings. The face lives on that surface, so when the body turns, the eyes turn with it.
Avatar studio
Free to use
A character you can take anywhere
Make a tiny friend that feels like yours.
Avatar Studio is where you shape a simple character — body, face, color, and the way it looks around — then download one file you can reuse in your product. No timeline software. No sprite sheets. Just a living little presence that blinks and glances on its own.
Open Avatar Studio
Free forever. Downloads included.
02
Face
Widen the eyes, pinch them, tilt the head, glance left. Small changes make a big personality shift. Everything is relative to a calm neutral look, so the same face still works when you swap bodies.
03
Color
Body and eyes are yours to recolor. Ice cyan, copper, electric magenta — whatever matches the mood. Pale eyes on a dark body, dark eyes on a bright body: both read cleanly.
04
Animation
Make your avatar personally yours. String glances into an idle loop, a curious listen, a sleepy blink. Choose how long each look holds, how soft the move feels, and whether it loops forever or plays once.
05
Life
Blinks come built in. Add a little drift or a tiny eye flick if you want it to feel awake even when “still.” Reduced motion is respected — it snaps to the next look instead of sliding.
06
Take it with you
Download one .avatar.json. Drop it into your app with the Avatar component and hit play. Same character in the studio, on your site, and anywhere else that can render those paths.
How people use it
01Pick someone from the roster
Open Studio and try the ready-made cast. Each one already has a shape, color, and idle glance. Use them as-is, or as a starting point.
02Tune until it feels right
Drag the stage to turn the body. Flip through expressions. Build a short animation from the looks you like. Name it something memorable.
03Export and drop in
Download the JSON, import it, and render with defaultAnimation set to idle — or whatever timeline you authored. Pause, play, and swap expressions from your own UI.
In your app
After you download name.avatar.json, drop the Avatar component in and let it idle — or drive expressions yourself when something happens in your UI.
<Avatar
definition={avatar}
defaultAnimation="idle"
size={240}
/>Try it in Studio