Mr. Grummel Get the app
← All notes
PRODUCT 5 MIN READ DRAFT — AUGUST 2026

The teacher who watches your cursor

His mood on the landing page isn't random — it's a distance calculation run on every mouse move, with a deliberate escape hatch for anyone who can't see it move at all.

Move your cursor near the waiting-list button on the landing page and Mr. Grummel, drawn beside it, gets pleased. Drift away and he cools — stern, then annoyed, then, far enough off, visibly furious, steam and all. It reads as a character noticing you. Underneath, it's a plain distance formula run inside a requestAnimationFrame callback on every mouse move: pleased under 180 pixels from the button's centre, stern under 420, annoyed under 700, furious past that. No machine learning, no intent detection — a teacher's whole emotional range, collapsed into four numeric thresholds.

One rule that outranks the distance

The distance calculation has an escape clause: land the cursor directly on the button and he stops grading distance altogether and celebrates, and that beat holds until you leave. It has to outrank everything else, because the moment you're on the button is the moment his opinion of you stops being the point. A character who kept steaming while you were mid-click would be reading the wrong signal at the exact instant the signal stopped mattering.

The quiz on the page runs a related but separate mood system, keyed off answers instead of cursor position. A streak of two correct answers earns "pleased"; a wrong answer nudges an escalation counter up by one, capped at three, and each wrong answer also resets the streak to zero. Three wrong in a row and he's "furious," with a rattling paper and a screen tint that both track the same counter. Get one right afterward and the counter steps back down rather than resetting outright — a bad run costs you gradually, and a good run earns its way back the same way.

Four numbers, one cursor, one mood. The character isn't reading your intent — the code is reading your distance, and the character is just the part of that you're allowed to see.

The part that has to stay off

Tracking every mouse move to drive a continuously updating animation is exactly the kind of motion prefers-reduced-motion: reduce exists to switch off, so the cursor-following listener checks for that setting once, up front, and never attaches at all if it's set. That's a real trade-off, not a free one: someone with that preference on still gets the discrete moods — hover, focus, a wrong quiz answer all still land — they just lose the continuous "he's watching you get closer" version. We chose the version that respects the setting completely over one that waters the motion down and still ships some of it, because a setting that's honoured "mostly" is a setting that isn't honoured.

What we're still unsure about

A distance-to-a-button metaphor for "engagement" is a reasonable guess and nothing more — someone reading the page carefully with their cursor parked in a corner isn't disengaged, they're just not being tracked correctly by a formula that only knows about pixels. We haven't measured whether the mood system nudges anyone toward the waiting list or just gets noticed and smiled at once. Those are different outcomes, and right now we only have evidence for the second one.

None of this is curriculum — it's a note about how this marketing page is built, not something the app quizzes on. If distance formulas and event listeners are the kind of thing you'd rather be quizzed on than read about, the app's Computer Science subject covers the plainer building blocks underneath them, starting with Programming.

Draft — not published yet.
Try the pop quiz