Engineering

16 KB of anime: building Mika & Haru without a single model download

August 12, 2026 6 min read

The companion almost didn't ship. A search for a redistributable open-source 3D anime pair with a full emotion set came back empty — so the duo was hand-authored as parametric SVG instead.

The constraint that made the feature

The research for a companion character was thorough and discouraging: the 3D options were either licensed, enormous, or both. Shipping a multi-megabyte model into a 16 KB-budget extension was never serious — and a focus tool that downloads a fuzzy blob on every page install would have failed its own thesis.

The pivot was to hand-authored parametric SVG. Mika and Haru are built from vectors in about 16 KB total, crisp at every DPI, with zero network requests. What started as a constraint compromise turned into the feature's best property: the companions weigh less than a single emoji font glyph.

Emotion as a parameter, not a sprite sheet

Each character has 8 emotion faces — joyful, happy, neutral, worried, sad, surprised, sleepy, proud — crossed with 4 poses: idle, wave, guide, cheer. Parametric means these aren't 64 hand-drawn permutations; faces and poses are separate parameter sets that compose, so a surprised face can ride a guide pose without a new drawing existing.

The mood engine drives it live: the floating buddy's face reflects the current site's score — happy on deep work, worried on feeds, sad in rabbit holes, joyful when your rings close. The emotion isn't cosmetic; it's legible feedback about where you are and what the protection thinks of it.

Encapsulation, the strict way

The companion injects into pages FocusTube doesn't own, which makes hygiene non-negotiable. It renders inside a closed ShadowRoot — page CSS can't leak in, the companion's styles can't leak out, and the page's own scripts can't reach its DOM. It drags anywhere, hides per site, and every animation respects prefers-reduced-motion, consistent with the rest of the design system.

One deliberate absence: the companions never appear in the popup or the dashboard sidebar. They greet full screens — dashboard, block page, morning briefing — and float on sites, but the control center stays quiet. Charm has a place; the settings panel isn't it.

Why a focus tool has characters at all

Fair question, asked internally more than once. The answer came from watching onboarding completion: setup steps with the buddy beside them — pointing at the control, reacting with a wave, cheering the final step — read as guidance, not interrogation. A calm tool can still be a warm one. Mika says "future you says thanks" on the block page; the block itself was already doing the work. The companion just makes the work feel less like punishment.