Diorama

Diorama: eine kleine Welt, die sich bewegt

Für ausführliche narrative Miniaturen oder Szenen im Pixel-Finish verwende den separaten Skill diorama-worlds. Dieser Skill bleibt der abhängigkeitsfreie SVG-Illustrations-Workflow.

Du erstellst ein Diorama: eine Szene aus Blöcken auf einer abgerundeten Basis, gesehen aus einer isometrischen Kamera, mit ein paar Dingen, die sich von selbst bewegen und auf den Zeiger reagieren, gezeichnet in einem Thema. Das Standardthema, toy, besteht aus pastellfarbenen Blöcken, einer warmen Sonne, weichen Schatten – jedes Objekt eine Handvoll Boxen und Zylinder, nichts texturiert, fröhlich und auf einen Blick lesbar. Die gleiche Szenendatei zeichnet in soft (Creme, sanfter), mono (ein Akzent, der Rest Tuscheabstufungen), line (eine Haarstrich-Zeichnung: weiße Füllungen, Tuschekanten, keine Schatten), print (flache Töne pro Fläche und Tuschelinien, eine gedruckte Illustration) und night (Abenddämmerung, Lampen an). Jedes Themenfeld kann überschrieben werden: wobble zeichnet die Tusche von Hand, halo ist der weiche Schatten, den die Basis auf die Seite wirft, accent ist die Farbe des Motivs in jedem Thema. Die 18 Beispiele in examples/ sind der Maßstab, und sie sind im Format, das du schreiben wirst.

Du schreibst eines: die Figur, eine .js-Datei. Der Kernel (kit/diorama.js) und die Seite (bench.html) sind fest. Bearbeite sie nie, füge nie eine geänderte Kopie ein und schreibe nie neu, was der Kernel dir bereits gibt (eine Kamera, Lichter, Schatten, eine Schleife, die außerhalb des Bildschirms pausiert, einen Zeiger, Federn, Pfade, Requisiten).

Jede unten genannte Datei befindet sich im Ordner dieses Skills. Die Figur und die Seite werden im Arbeitsverzeichnis der Person geschrieben; führe scripts/build.mjs, scripts/validate.mjs und scripts/look.mjs von dort aus, mit ihrem Pfad in diesem Ordner.

1. Größe und Konzept

Entscheide zuerst die Größe, denn sie setzt das Budget fest:

Größe	Verwendung	Bühne	Teile	Zeilen	Bewegung
hero	Anfang einer Landingpage, einer README, einer Produkttour	3:2, volle Breite	150–400 Primitive	≤ 420	drei oder vier unabhängige Schleifen, immer etwas in Bewegung
card	eine Doks-Seite, ein Blogbeitrag, ein Feature-Abschnitt	4:3, ~500px	60–150	≤ 240	eine oder zwei Schleifen und eine Zeigerantwort
mini	jeder kleine Platz: ein leerer Zustand, ein Feature in einer Liste, ein 404, ein Einstellungsbereich	1:1, 160–240px	15–40	≤ 150	eine ruhige Umgebungsbewegung

Lies dann references/concepts.md und schreibe das Konzept in einer Zeile, mit dem Thema am Ende:

Name. Der Ort und was sich darin befindet. Was sich von selbst bewegt. Was der Zeiger tut. (Für eine Mini: was fehlt.) Thema.

Wähle den Ort aus der eigenen Welt des Produkts, nicht aus den Beispielen: Ein Hafen, eine Küche, ein Dach, ein Schreibtisch, ein Gewächshaus, ein Bahnsteig, eine Startrampe, eine Straßenecke – das alles sind Dioramen. Wähle dann das Thema danach aus, wo die Figur leben wird, nicht nach Geschmack: toy für eine Produktseite, die Wärme und Farbe möchte; soft für ein Editorial oder eine Cremefarbene Seite; mono für eine Produkt-UI mit eigenem Akzent (übergib ihn als accent), Doks oder alles neben dichtem Text; line für eine minimalistische oder technische Seite, eine Marke mit dunklem Text auf Weiß oder einen leeren Zustand, der flüstern soll; night für eine dunkle Seite. Wenn die Person eine Markenfarbe hat, kommt sie als accent, die das Motiv in jedem Thema einfärbt; eine zweite über palette. references/craft.md enthält die Regeln, die jedes Thema hinzufügt.

Schreibe dann die Teileliste, bevor irgendein Code geschrieben wird: fünf Zeilen, eine pro Gruppe, benenne jedes Objekt und die zwei oder drei Merkmale, die es zu dem machen, was es ist. Boden (die Platte, Zonen, Straßen, Wasser), Struktur (was steht: Gebäude, Regale, Bäume), Beweger (was fährt, geht, dreht oder hebt), Möbel (was die Ränder füllt: Lampen, Kegel, Kisten, Bänke, Zäune), Licht (was leuchtet: Fenster, Lampen, Leuchtfeuer). Jeder Teil sitzt auf einem anderen Teil; nichts schwebt. Eine Heldenliste umfasst bis zu dreißig Objekte, eine Karte bis zu zehn, eine Mini bis zu drei. Die Liste ist die Szene: Wenn sie dünn wirkt, wird es die Figur auch.

Biete zwei oder drei an, wenn es jemanden gibt, den man fragen kann, und warte. Wenn es niemanden gibt, der gefragt werden kann, nimm die mit dem stärksten Standbild und sag, welche du genommen hast. Ein Diorama, ein Ort, eine Geschichte. Eine Szene, die eine Bildunterschrift braucht, um verstanden zu werden, ist noch kein Konzept.

2. Bauen

1. Lies references/craft.md. Die zehn Regeln machen ein Diorama zu einem Ort und nicht zu einem Haufen Würfel; eine Figur, die eine davon bricht, ist nicht fertig.
2. Lies den Index am Anfang von kit/diorama.js (den Kommentar über var Diorama). Er listet alles auf, was du aufrufen darfst. Lies den Code darunter nicht.
3. Lies das Beispiel, das deiner Größe und deinem Thema am nächsten kommt: examples/town.js (hero, toy: eine ganze Stadt, aufgebaut aus kleinen Hilfsfunktionen, mehrere Runden, Lichter, die zyklisch laufen), examples/island.js (hero, toy: ein Ort mit Wasser, eine Runde mit einem Halt, Möwen und Wolken), examples/farm.js (hero, toy: Felder, Tiere, eine Runde mit einem Halt) oder examples/warehouse.js (hero, toy: ein Hof mit einem Shuttle und einem Dock) oder examples/harbour.js (hero, toy: ein Kai mit einem Kran, der Container in einem 18-s-Zyklus hebt, eine Traktorrunde mit einem Halt und einer Schranke, die sich hebt, ein Schlepper, ein Leuchtturm, ein Tipp, der einen Hub startet, eine Anzeige); examples/cafe.js (card, soft: Menschen und kleine Dinge), examples/kitchen.js (card, toy: ein Raum mit einer Rückwand und einem darauf gesetzten Fenster, ein Kühlschrank, der als Hülle gebaut ist und dessen Tür beim Überfahren geöffnet wird, ein Toaster, der bei einem Tipp aufspringt, eine Uhr), examples/launchpad.js (card, night: Lampen, ein seltenes Ereignis, eine Rakete, die sich unter dem Zeiger auseinandernimmt, ein Tipp, der sie startet, eine Anzeige, die herunterzählt), examples/server.js (card, mono mit einem Akzent: Lichter in Rhythmen, ein Überfahren, das eine ganze Gruppe beleuchtet) oder examples/rack.js (card, mono mit einem Akzent: ein leerer Zustand mit einer Zeigerantwort) oder examples/assembly.js (card, mono mit einem Akzent: ein Band von Aufgaben durch ein Tor, das ein Tipp hält, ein Stanzarm, eine Anzeige, die zählt); examples/mailbox.js (mini, toy), examples/seedling.js (mini, line: ein leerer Zustand, in Tusche gezeichnet), examples/observatory.js (mini, line mit wobble: eine Kuppel, die sich dreht, und ein Teleskop, das schaut), examples/desk.js (mini, line mit einem Akzent) oder examples/vending.js (mini, print: eine Maschine, die als Rahmen um eine Aussparung gebaut ist, blanke Spulen, ein Lüfter). Es sind nicht alle absichtlich Fabriken; ein Diorama ist jeder Ort.
4. Schreibe die Figur als <name>.js im Arbeitsverzeichnis, in der Form der Beispiele: ein Diorama.figure({ … })-Aufruf mit
   • name: klein geschrieben, ein Wort oder mit Bindestrich; size: hero | card | mini.
   • theme: ein Name oder { base: 'mono', accent: '#f2c230', shadows: false, … }, um jedes Feld zu überschreiben (palette, accent, lights, shadows, finish, tone, tint, edges, outline, stroke, strokeWidth, round, glow, halo, wobble). Einmal bauen; das Thema wird vom Kernel auf jedes Primitiv angewendet, sodass eine Figur niemals darauf verzweigt. Male das, was zählt, mit pal.accent: es ist die Farbe des Motivs in jedem Thema, die Farbe, die mono und line behalten, die eine Marken-Hex ersetzt und die die Farbfelder der Bank live umfärben. Füge für eine handgezeichnete line-Figur wobble: 1.4 hinzu (CSS-Px des Zitterns: 1.2 ein Stift, 2.5 ein Filzstift).
   • means: ein Satz, ≤ 140 Zeichen, der unter der Bühne angezeigt wird. Er sagt, was die Szene zeigt und was sich bewegt.
   • hint: eine Zeile, ≤ 90 Zeichen, was der Zeiger tut und was ein Tipp tut („Über die Rakete fahren, um ihre Stufen zu sehen; tippe auf den Kontrollraum, um jetzt zu starten“). Die Seite zeigt es, damit ein Besucher weiß, dass er spielen kann, und look.mjs drückt das, was es nennt.
   • title: der Name der Figur, den die Seite über der Bühne anzeigt. Die Worte, die die eigene UI der Person um die Figur setzt (eine Überschrift, eine Zeile, ein Button), sind ihre eigenen zu schreiben; die Szene trägt keine.
   • camera: { az, el, pad } in Grad. az 45 ist der isometrische Standard; 30–40 zeigt eine breite Basis in einem 3:2-Hero. Lasse el bei 35.264, es sei denn, die Szene ist hoch.
   • still: die Sekunde der Schleife, die reduzierte Bewegung und Miniaturansichten zeigen. Wähle einen Moment, in dem alles an einem aussagekräftigen Ort ist (der LKW am Dock, die Gabeln oben).
   • build({ D, pal }): baue die Szene einmal mit dem Toolkit und gib parts zurück: jede Gruppe und jedes Mesh, das tick bewegen wird, plus parts.hot, die Gruppen, die der Zeiger auswählen kann. Gib jeder heißen Gruppe einen .name (boat.name = 'boat'): die Seite zeigt ihn als Anzeige, während der Zeiger darauf ist.
   • tick(ctx): in jedem Frame posiere die Teile von ctx.t mit D.phase, D.pulse, D.wave, D.inOut, D.path und D.spring. Antworte dem Zeiger mit ctx.hover und einem Druck mit ctx.pressed oder ctx.active (ein Tipp ist, wie ein Telefon antwortet, also hat ein Hero oder eine Karte eine Sache zum Drücken: einen Schalter, einen Anruf oder den Zwilling des Hovers). D.apart nimmt ein Ding unter dem Zeiger auseinander und setzt es zurück. Setze ctx.read auf eine kurze Zeile, die sagt, was die Szene gerade tut ('LKW · am Dock'): die Seite zeigt es als Anzeige, und so lernt ein Besucher, dass die Szene ein funktionierendes Modell und keine Schleife ist. references/motion.md enthält die Muster.
5. Baue zusammen: node <skill>/scripts/build.mjs <name>.js schreibt diorama-<name>.html: die Bank, der Kernel und die Figur. Der Kernel zeichnet SVG so, wie ein Illustrator Tiefe vortäuscht (eine isometrische Projektion, ein flacher Ton pro Fläche, die Teile von hinten nach vorne gemalt, die Schatten als Formen auf den Boden geworfen), sodass die Seite keinen Renderer trägt, kein WebGL braucht und keine Netzwerkanfrage stellt; die Zeichnung ist Vektor, scharf in jeder Größe, und die Seite kann sie stylen.

3. Prüfen

1. node <skill>/scripts/look.mjs <name>.js. Es baut die Seite, validiert sie, öffnet sie in einem kopflosen Chromium und schreibt diorama-<name>-look.png: das Standbild, drei Momente der Schleife, die Antwort des Zeigers, die Kameraneigung, ein Druck, die Miniaturansicht und die gesamte Seite. Es gibt die Konsole, die Füllung, die Bewegung, die Antwort und den Druck als Zahlen aus. Behebe jedes FAIL und lies die Zeilen SMALL, STILL, FAINT und MUTE als Fragen, bis Exit-Code 0. Der Druck trifft auf die heiße Gruppe, die der Hinweis nach „tippe“, „klicke“ oder „drücke“ nennt (oder --press name oder --press x,y); MUTE bedeutet, der Hinweis hat einen Druck versprochen und nichts hat sich geändert. Füge --theme line (oder einen beliebigen Namen) hinzu, um dieselbe Figur in einem anderen Thema zu betrachten; eine Figur, die in toy und in line gut aussieht, ist richtig gebaut. Es gibt auch clash aus: sich bewegende Teile, die durch andere Teile hindurchgehen; ein Fahrzeug durch einen Baum oder ein Auto durch einen Bus ist ein zu behebender Fehler, Gabeln in einem Regal oder eine Fahne an ihrem Scharnier ist in Ordnung.
2. Lies references/look.md, dann das Blatt und beantworte seine Fragen. Behebe, was fehlschlägt, und gehe dann zurück zu 1.

look.mjs benötigt einen Browser; es findet Playwright oder installiert playwright-core einmal außerhalb dieses Ordners. Ohne Browser führe node <skill>/scripts/validate.mjs diorama-<name>.html nach jedem Build aus und führe die Prüfung wie unter „Ohne Browser“ in look.md beschrieben durch. Gib keine Seite ab, die der Validator ablehnt. Sag nicht, dass die Prüfung abgeschlossen ist, wenn du nicht geprüft hast.

4. Abgeben

Gib diorama-<name>.html so ab, wie die Person es verlangt hat: Wenn sie die Datei möchte, gib die Datei und sag, wo sie ist; andernfalls veröffentliche sie als Artefakt, wenn möglich. Dann sag, eine Zeile pro Punkt:

• das Konzept: der Ort, was sich bewegt, was der Zeiger und ein Tipp tun, und das Thema (und wie man es wechselt: theme: in der Figur, ?theme= und ?accent= auf der Seite, { theme } auf Diorama.mount; die Farbfelder der Bank färben das Motiv live um);
• das Standbild: welche Sekunde und warum dieser Moment;
• wo es leben soll (hero, card oder mini) und wie man es einbettet (references/react.md für React oder Next.js; ein einfaches <script> des Kerns plus der Figur und Diorama.mount(fig, { el }) überall sonst);
• alles, was du nicht überprüfen konntest (kein Node, kein Browser), offen.

5. Anpassen

Wenn die Person um eine Änderung bittet, bearbeite nur <name>.js, führe dann look.mjs erneut aus und lies das neue Blatt. Die zehnte Version wird an derselben Messlatte gemessen wie die erste.

Was schief gehen kann

Wenn du dich dabei erträgst	Tue stattdessen dies
nach three.js, einem Licht, einer Kamera, einer Canvas oder WebGL zu greifen	es gibt keins: der Kernel zeichnet SVG; verwende D.box, D.cyl, D.props.*, o.M für einen Vektor und ctx
requestAnimationFrame, setInterval oder eine CSS-Animation zu schreiben	posiere alles von ctx.t in tick (Regel 07)
ein Ding mit position.x += speed * dt zu bewegen	setze es auf einen D.path und lies seine Entfernung von D.phase(t, period), damit die Schleife nahtlos und das Standbild reproduzierbar ist (Regel 08)
ein Wort, eine Zahl oder einen Pfeil in die Szene zu schreiben	sag es mit dem Titel oder den means; die Szene trägt überhaupt keine Worte, nicht einmal ein Schild (Regel 10)
nach einer Textur, einem Farbverlauf, einem Leuchten oder einer 15. Farbe zu greifen	ein weiterer Block in einer Palettenfarbe; pal.* hat, was du brauchst (Regeln 03 und 04)
if (theme === 'line') in der Figur zu schreiben	der Kernel tönt, strichelt und beleuchtet jedes Primitiv nach Thema; eine Figur ist in allen fünf gleich
eine Markenfarbe auf zwanzig Teile geklebt oder das Motiv mit einem Palettennamen bemalt	male das Motiv mit pal.accent und setze die Marken-Hex in accent, einmal, in der Deklaration; palette: { cobalt: … } für eine zweite Farbe
eine Hover-Antwort und nichts für einen Finger	gib einem Ding einen Druck (ctx.pressed, ctx.active): Hover zeigt eine Vorschau, ein Tipp bestätigt (motion.md, „Der Druck“)
eine line-Figur, die wie ein CAD-Export wirkt	wobble: 1.4 im Thema: die Tusche biegt sich und überschwingt wie von Hand
halo auszuschalten, weil die Basis „schmutzig aussieht“	der Halo ist das, was das Diorama auf die Seite setzt; verringere ihn (.1) auf einem geschäftigen Hintergrund, behalte ihn
eine Anzeige, die dasselbe sagt wie der Titel	ctx.read ist die Uhr in Worten: die Phase, der Halt, die Zählung, vom selben T, das die Teile posiert
die Basis nach der Szene zu bauen oder gar nicht	D.slab zuerst: Die Schatten brauchen einen Ort, um zu landen (Regel 01)
eine Szene, die wie ein Gitter aus identischen Würfeln wirkt	gib jedem Objekt die zwei oder drei Merkmale, die es zu dem machen, was es ist (Regel 05)
eine Mini mit acht Dingen darin	ein Objekt, eine Umgebungsbewegung (concepts.md, „Eine Mini“)
einen Hero, in dem sich alles im gleichen Tempo bewegt	drei Schleifen mit unterschiedlichen Zeiträumen (Regel 09)
eine Szene mit einem unsichtbaren Teil, das sich bewegt	der Kernel kann einen Weg nicht zeichnen, wenn das Teil unsichtbar ist; setze seine Sichtbarkeit mit ctx.hover oder ctx.pressed zurück
eine .js-Datei, die nicht validiert	lies die Validierungsfehler, behebe sie und baue neu
einen Kernel, der wegen eines Syntaxfehlers oder eines fehlenden Felds stürzt	lies den Index von kit/diorama.js; die Figur übergibt alles, was figure erwartet
eine Figur, die nicht auf den Zeiger reagiert	look.mjs druckt die heißen Treffer; stelle sicher, dass die Gruppe in parts.hot ist und einen .name hat
eine Figur, die nicht wie ein Diorama aussieht	lies references/craft.md erneut; wenn du eine Regel nicht anwenden kannst, lies die Beispiele für die gleiche Größe und das gleiche Thema