hatch-that-world

Hatch that world 🐛→🦋

How the morning brief in morning-fairy (builder: plugins/morning-fairy/skills/morning-fairy/digest/build_digest.py) was built, written down so the next cute app starts from the method and not from scratch. Sister skills: cutify-that-tab, sparkle-that-page, pop-that-readme.

The idea in one line: the content stays plain data; one builder turns it into a drawn little world, and every look is a swappable world. The reader decides from the picture; the details sit one click away.

The shape of the app

Read references/world-anatomy.md before writing code. The short version:

• One builder, one self-contained HTML file. A Python (or Node) builder reads a content JSON and writes a single page with all CSS, JS and SVG inline. The content never sets colours, layout or motion; all design lives in the builder. That is what lets a new world change nothing about the content or the copy.
• A world = colour tokens + one scene function + one sound voice. Tokens on :root[data-world="x"] (light and dark), a SCENE.x() that draws the ground, sky, sun/moon, signposts and mascot spot as SVG, and an oscillator voice in the sound table. Adding a world touches only those three places plus the world picker and the whitelist that reads the saved choice. If you find yourself editing content or copy to add a world, stop.
• The scene is the data. Meetings lift the ground into hills by weight; the sun rides the clock and can be dragged; "now" is where the mascot stands. Make the drawing carry a real quantity, never decoration only.
• A mascot with moods derived from the data (sweat when something is overdue, starry when nothing waits, sleepy after 6 PM). Moods come from rules in the builder, not from the content.
• The drawing is clickable, but the drawing stays aria-hidden. Put an invisible layer of real <a href="#row"> links over it, placed from the drawing's geometry on every redraw. Each link opens the section holding its row, unfolds any <details>, scrolls and flashes the row. Keyboard order = time order, visible focus ring.
• Calm when asked. Every animation has a reduced-motion guard; with reduced motion nothing flies, bobs, wiggles or sparkles, and a finale becomes a still picture.