UNTETHEREDCHAOS
ANIMATION

Matcha-chan makes a bowl of matcha.

Ten scenes, leaf to foam, in NES-era 8-bit. Every pixel — character, tea field, stone mill, steam, foam — is drawn procedurally in JavaScript at 12 frames a second. No sprite sheets, no image files, no fonts, no network. One HTML file, 83 seconds, then it loops.

CLICK THE PICTURE, THEN: SPACE PAUSE ← → SCENE R RESTART OPEN FULL SCREEN →

OR PLAY IT: THE TEN STEPS AS A ONE-BUTTON GAME →

THE CRAFT

The steps are the real ones

The story is the actual process, in order: shade the rows weeks before picking, pick the first flush, steam the leaves so they stay green, dry and de-stem them into tencha, grind that on a granite mill, sift the powder, warm the bowl and soak the whisk, scoop, then whisk.

Two details the cartoon refuses to get wrong: the water is about 80 °C (175 °F), not boiling — and the whisk traces a brisk W, never a circle. The foam builds in four visible stages as she does it.

TEN SCENES
  1. 01

    First Flush

    Plucking the youngest leaves from a shaded bush.

  2. 02

    Under the Shade

    The cloth rolls over the rows and the greens deepen a step.

  3. 03

    Steam Bath

    Steam puffs; the leaves lock in their colour.

  4. 04

    Dry & De-stem

    Fan-waving, stems flicked away — now it is tencha.

  5. 05

    The Stone Mill

    A granite wheel turns and a powder pile grows at the spout.

  6. 06

    Sift the Silk

    Tapping the sieve until there is not a single clump.

  7. 07

    Warm the Bowl

    Water swirls; the whisk tines soften and splay open.

  8. 08

    Two Scoops

    Dip, lift, tilt, tap. Twice.

  9. 09

    Whisk the W

    ~80 °C water, then the W motion and four stages of foam.

  10. 10

    Kampai

    A sip, a foam moustache, and a happy wiggle.

HOW IT WAS MADE

A written spec, a build, and a rubric that could fail it

The brief was written first as a build contract: a 16-colour NES-plausible palette, a 256×240 logical frame at integer scale only, a fixed 12 fps accumulator loop so a 120 Hz screen sees the same cartoon as a 60 Hz one, a seeded PRNG so every loop is identical, and a hand-rolled 5×7 bitmap font for the captions.

Cuteness was the part that needed a gate, so it got measured rather than admired — borrowed from how Sanrio's characters actually work. Head is 50% of total height. Eyes sit below the head's midline, so the forehead is the largest empty area of the face. Each eye is a plain dark oval with one white catchlight. She is mouthless in eight of the ten scenes, because a face you project onto beats a face that tells you how to feel; a mouth appears only to strain at the mill and to sip at the end. No neck, no elbows, no fingers — mittens. Permanent blush. Six colours on the whole character. And she is never still: a one-pixel breathing bob and an ear twitch run underneath everything.

She also keeps her signature in every frame of all ten scenes — a whisked foam-swirl cowlick and a tiny bamboo-whisk clip on her ear. That was checked the boring way: 39,840 pixel assertions across all 996 frames, zero misses.

← Projects Home The cartoon, on its own Email us