codepawl/machine-anatomy

Maschinenanatomie

Ein gemeinsames Kit: Eine neue Maschine schreibt nur ihr Modell, ihr Layout und ihre Zeichnung, ihre Live-Hooks und ihre Fakten. Das Kit besitzt die Seite, die Themen und Stile, den Zoomrahmen, die Explosionsansicht, die Wahrheitsprüfung, den Rekorder, den Sound und die Checks. Das ausgearbeitete Beispiel ist examples/edison-light-bulb/; kopiere seine Struktur.

1. Einmal fragen, dann bauen

Vor jeglichem Code frage den Benutzer die Aufnahmefragen in einer Runde mit dem Fragenwerkzeug des Hosts (AskUserQuestion in Claude Code), jede mit ihrer empfohlenen Vorgabe, überspringe alles, was sie bereits gesagt haben. Fahre dann ohne weitere Hürden fort. Fragen, Vorgaben und wie jede Antwort auf die Konfiguration abgebildet wird: references/intake.md.

2. Recherchieren, dann Fakten

Lies echte Quellen (Patent, Veröffentlichungen des Erfinders, Museumsseite, Enzyklopädie). Schreibe reference/notes.md mit URLs und Zitaten, dann facts.json: ein Eintrag pro Fakt mit text, source, quote oder note, und status (verified oder inferred). Regeln und was der Lint durchsetzt: references/truth-control.md. Liste jede Funktion der Maschine und ihrer Umgebung aus den Quellen in functions auf.

Sammle dann mindestens 3 echte Fotos oder Zeichnungen der Maschine und ihrer Umgebung in reference/images/ mit sources.json und öffne jedes vor dem Zeichnen; jede Baugruppe nennt die Bilder, nach denen sie gezeichnet wurde. Der Lint erzwingt dies und record schreibt shots/reference-compare.png zum Abgleich: references/reference-images.md.

3. Baue den Maschinenordner

node cli.mjs new <folder> --title "..." erstellt das Gerüst nach dem Edison-Beispiel. Ersetze in dieser Reihenfolge:

1. model.mjs – reines Modell, kein DOM; alles Verhalten und jede angezeigte Zahl. test-model.mjs testet es gegen reale Werte oder Invarianten. Tests sind Pflicht.
2. layout.mjs – Größen in Welteinheiten und berechnete Kurven (Pfade folgen echten Teilen, niemals Sehnen).
3. figure.mjs – drawFigure(draw): Zeichne die realen Teile als Elemente nummerierter Baugruppen mit den Helfern des Kits; gib label, defs, css, badge-Anker, Schrittpunkte und das Zoomziel zurück.
4. live.js – createMachineHooks(kit): Zustand, Zeichnung beweglicher Teile, Bedienelemente, Anzeige, Aktionen. Verwende kit.Motion für Federn, Trägheit und Gelenke: references/motion.md.
5. machine.mjs – Baugruppen mit Zerlegungsachsen und Herkunft, jeder sichtbare Text als { text, facts }, Anzeigevorlagen, Bedienelemente, Filmgeschichte, Sound-Stimmen.

Lies die passenden Dateien des Beispiels, bevor du jede einzelne schreibst; lies keine erstellten *.html-Dateien.

4. Anschauen

Thema und Renderstil sind unabhängige Schichten: references/themes-and-styles.md. Setze die Vorgaben in machine.mjs (theme, style); jede Seite schaltet mit ?theme= und ?style= um.

5. Film und Sound

Der Standardfilm ist die genehmigte 30-Sekunden-Form (zuerst funktionierend, eine Zoom-Geburt, ein langsamer beschrifteter Lauf, normaler Betrieb mit einem Kontrastmoment, gestaffeltes Auseinandernehmen, wieder zusammensetzen, Ende funktionierend): references/film.md. Sound sind leise Nahmikrofon-Klicks, keine Pieptöne, kein Limiter: references/sound.md. Untertitelregeln für das Veröffentlichen des Films: references/caption.md.

6. Befehle und Prüfungen (alle erforderlich vor der Übergabe)

node cli.mjs lint   <folder>     # Texte gebunden an Fakten, Quellen, Superlative, Herkunft
node cli.mjs test   <folder>     # Modelltests
node cli.mjs build  <folder> [--format 16:9,9:16,square]
node cli.mjs audit  <folder>     # Explosionsansicht-Malreihenfolge und Durchgang
node cli.mjs verify <folder>     # echte Seite in headless Chrome, jedes Thema und jeder Stil
node scripts/lines.mjs <folder>/<slug>-anatomy.html   # Texturlinien enden auf etwas
node cli.mjs record <folder> [--format 9:16] [--style dither] [--no-sound]
node cli.mjs remux  <folder>     # nur Sound-Änderung an den aufgenommenen Frames
npm test                         # Kit-Komponententests

Playwright ist nicht gebündelt: npm install --no-save playwright, oder setze MACHINE_ANATOMY_PLAYWRIGHT auf eine vorhandene Playwright index.mjs. Die Aufnahme läuft mit niedrigerer Priorität und ohne GPU.

Öffne dann shots/<variant>/video-sheet.png, drei Standbilder, die Verifizierungs-Screenshots und shots/reference-compare.png selbst; korrigiere Beschnitte, Überlappungen, unleserlichen Text, schwimmende Muster und jeden Unterschied zu den Referenzbildern, der keine deklarierte Vereinfachung ist.

Regeln des Besitzers (werden durchgesetzt, wo eine Prüfung existiert)

• Nichts bedeckt etwas: eine Kollisionsprüfung in record und verify (references/film.md); deklariere nur physikalisch reale Überlappung mit ihrem Grund in film.overlapAllowed.
• Zeige die Maschine in ihrer vollständigen realen Umgebung (Aufnahmefrage 10), mit Quellenangabe und Herkunft.
• Das Motiv füllt in jeder Phase mindestens 25 % der Bildhöhe und Schlüsselereignisse finden auf dem Bildschirm statt (minimum.subject, film.onScreen); eine sich bewegende Maschine steuert eine Kamera mit hooks.camera().
• Muster bleiben auf Oberflächen fixiert und schwimmen nicht; messe mit scripts/swim.mjs (references/themes-and-styles.md).
• Feuer, Dampf, Rauch und Leuchten kommen aus kit/effects.mjs, gesteuert vom Modell (references/motion.md).
• Jedes arbeitende Teil wird entweder arbeitend gezeigt oder hat einen angegebenen Grund; keine Bewegung ohne eine gezeichnete, aktive Ursache; komprimierte Zeit wird auf dem Bildschirm angezeigt (references/completeness-and-causality.md, lint and record).

Bericht

Pfade der Seite, des Veröffentlichungsfragments und der Filme; Lint-, Test-, Audit-, Verify- und Lines-Zahlen; Lautstärke, wahrer Spitzenwert und Spektrum des Films (sag, niemand hat zugehört); der Film-Zeitstrahl; jeder Bildunterschriften-Fakt mit seiner Quelle; was vereinfacht, abgeleitet oder unbestätigt ist.

Quellenangabe: Erbaut auf Anatomy von Ryan (github.com/wheresryan22/anatomy, MIT). Siehe THIRD_PARTY_NOTICES.md.