Blooby

Inspiration

Every app with a mascot has the same problem. The character is a folder of exported clips: one for loading, one for success, one for error. An engineer then hand-wires each clip to app logic. Change the character and you redo all of it. We wanted the mascot to be a designed, living part of the product that reacts to what the app is doing, not a pile of files.

What it does

Blooby is an animation studio for app mascots. You build a character in the browser, animate its states (idle, thinking, generating, failed, completed), and connect them with a real dotLottie state machine. Your app never names an animation. It sets an input, and the mascot transitions with tweened morphs between poses.

One project exports to:

Lottie JSON
.lottie with the state machine inside (and it can be imported back)
GIF, MP4 and PNG
a generated React Native pack with a ready-made Mascot component

An AI copilot inspects the scene, edits it through defined tools, previews the same capabilities are exposed over MCP with OAuth, so other AI apps can drive the studio directly.

How we built it

Rig model: features like eyes and hands are placed by angle on a sphere, not pixels, so they arc naturally across the face when it turns.
Layers and motion: shapes, SVGs, curved text, rubber-hose limbs, particles, and procedural motion such as shake, float, jelly and walk.
Export: every timeline is baked into one composition, with real morph frames between poses, so the engine can tween between states.
Product: accounts, cloud projects, a community to publish and duplicate projects, an admin app for moderation, and dozens of presets from app-screen states to cinematic sequences.
Design: Material 3 Expressive in a warm apricot palette.

Challenges

The state machine was the hardest part. dotLottie's parser is all-or-nothing and silent. One field with the wrong type discards the whole machine, and the animation still autoplays looking roughly right. We wrote the engine's parser contract out field by field as tests. There is also no cross-composition morph, so every frame of the exported strip has to be avalid pose with the same layers throughout.

We also hit a performance wall on busy scenes. Panels re-rendering at 60fps made big projects stutter, so the panels now follow a throttled playhead, and a frame no longer scans every track per property.

What we learned

Verify against the real engine instead of trusting a mock. Make one table the source of truth (our animatable-properties table feeds the inspector, the timeline and the copilot). Treatevery store action as a capability that both humans and AI agents can use.

What's next

More mascot kits, deeper runtime support beyond React Native, and a public gallery of community mascots.