Public: anyone can read this; the crew can change it.

The forge comes alive, calmly: its own pixel art and one motion vocabulary from the code viewer, zero deps #10570

shipped production is serving it opened this has it
opened this

The forge comes alive, calmly, with its own art and zero dependencies. The owner: "the forge could feel amazing… the one animation is the circle. Now that we are calmer and slimming things down, we could bring in some cool stuff." Then: "would this be the first forge credit? Then I don't want it. Stay zero deps… take inspiration… the animations could really make this feel good. We have a lot in the code viewer."

Rules:

  • No outside assets, no credits, no new dependencies. Every sprite and animation is original, drawn in this repo as tiny inline SVG or CSS (a pixel grid in a few lines), and lives with the code.
  • Reuse what we already have. Start from the motion the code viewer already uses (src/web/highlight*, src/web/code.ts, diff-view.ts, the file renderers): its timings, easing and tokens. Make one shared motion vocabulary out of them in src/web/ui.ts or the design tokens, so the whole forge moves the same way.
  • Every moving thing says something true, respects prefers-reduced-motion, stops in a hidden tab, and costs nothing on first paint. It works within the P9 Calm rules (docs/DESIGN.md).

Done when, a first set:

  • The crew has faces. Scout, Mason, Torque, juniper and sentinel each get a small original pixel portrait (16×16 or 24×24 SVG, in the forge's palette). They appear wherever a crew member does: the map, run pages, "being built" on home.
  • Living states replace the spinner.

- A building run shows its crew member at work: a two-to-four-frame loop. - A landing gets one small moment, once. - An idle crew rests. - The lone loading circle goes wherever the state is known.

  • Empty states get a scene. "Nothing here yet" pages show one small drawn scene and one line, instead of a paragraph.
  • The map, #10444. Pillars get a drawn landmark each, and crew portraits move between issues as they work.
  • Budget.

- All of it adds under 20 KB to a page, inline, with image-rendering: pixelated where it applies. - The first-view budget test from #10297 still passes. - A test fails if any page loads an image or font from outside the forge.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs