Stageshow

Was macht Stageshow?

Miniatur-Produkt-UI: eine glaubhafte Oberfläche in ihrem Raum eingefasst, entweder als Standbild oder als kurze Animation, in der genau eine Sache passiert. Der Betrachter erkennt den Bildschirm und sieht das Ereignis.

Die eine Idee

Es wirkt wie ein echtes Produkt, vereinfacht auf das Nötigste, mit Absicht eingerahmt, und jede Bewegung hat einen Grund.

Fünf Wege, wie es scheitert:

• Zu viel. Echte Texte in jeder Zeile, Zahlen überall, alles vollgepackt. Je mehr Details, desto mehr sieht es nach Generierung aus.
• Drahtmodell. Zwei graue Flecken und ein Button. Zu klein gebaut, oder es wurde entfernt, was es erkennbar gemacht hat.
• Eingekastet. Ein ganzes Fenster in eine Karte geschrumpft mit gleichmäßigen Rändern: wie ein eingefügter Screenshot, kein Produktbild.
• Flach. Jedes Objekt hat das gleiche Gewicht in derselben umrandeten Karte. Das Auge hat keinen Halt.
• Langweilig. Ein graues Fenster mit einem Cursor – egal, was das Briefing sagte. Der Look und die Energie des Briefings (ein Bauplan, Glas über Farbe, eine Dynamic Island, ein Maskottchen) sind der Punkt. Nimm, was verlangt wird, und baue es nach den Regeln, wie examples/hero-demo es mit seinem getypten Popup und Terminal-Satelliten tut (ein Satellit ist ein kleineres zweites Objekt – eine Quittung, ein Telefon oder eine Detailkarte – das den Rand des Hero überlappt).

Die Lösung: ein vollständiger, strukturierter Bildschirm in ruhigen Grautönen, echte Wörter nur dort, wo die Geschichte spielt, Platzhalterzeilen für den Rest, Raum zum Atmen, ein Beschnitt, der das Auge dorthin lenkt, wo die Geschichte ist. Vereinfache die Wörter, nicht den Kontext. Eine leere Ecke, eine Leere unter einer Liste, Zeilen aufgefächert, um eine Fläche zu füllen, ein Fenster auf einer Platte (ein Hintergrund oder getönter Bereich dahinter) schwebend: unfertig, nicht ruhig.

Dies sind erstellte Illustrationen, keine Browser-Automation: a.click() zeichnet den drückenden Cursor, a.set() ändert die Szene.

Wie viel Druck

Baue es so, wie ein Produktdesigner eine Launch-Seite baut, an der er gemessen wird. Die Goldbeispiele in examples/ sind die Messlatte, keine Referenz: Wenn deines neben dem nächsten Goldbeispiel das leerere, flachere oder kleinere ist, ist das der erste Fehler, der behoben werden muss. Dann betrachte den Rahmen so, wie es der akribischste Designer, den du kennst, tun würde – derjenige, der das eine falsche Detail per Screenshot markiert und „Was ist das?“ zurückschickt: ein Punkt, der nicht auf dem Avatar sitzt, eine Einheit in einer eigenen Zeile, ein Greifer unter der Insel, Text, der eine Karte berührt. Wenn du dir diesen Screenshot vorstellen kannst, hast du den nächsten Fehler gefunden.

Arbeitsablauf

Der Großteil der Qualität wird vor dem Code entschieden. Schreibe zuerst den Plan: wo es sitzt, das Fokusobjekt, die Aktion, der Nutzen, was weggelassen werden kann.

1. Medium und Platz. Standbild oder Animation (Schleife, einmal im Sichtfeld oder bei Hover). Die Seite, ihr Grund, ihre Breite. Gestalte in der Größe, in der es gesehen wird: etwa 720 × 340 für einen Hero neben Text (hero-demo), 900 bis 1100 breit für einen vollbreiten Hero (linear), 400 × 300 für eine Karte, im Maßstab 1:1 dargestellt; niemals unter etwa 320 Breite für eine Demo, obwohl eine Bento-Kachel oder eine Satellitenkarte kleiner sein kann. Jede Demo, die in eine Telefonspalte passt, liefert ein compact-Design in Spaltenbreite (358) – eine Neugestaltung, keine Quetschung (references/framing.md, Kleine Formate und die Seite). Ein Raster von Kacheln ist ein Satz: Plane es mit references/bento.md.
2. Look. Mit dem Code oder der Website des Produkts ordne seine Tokens dem Baukasten zu (references/looks.md); wenn der Entwickler eigene Komponenten wünscht, verwende sie innerhalb der Bühne anstelle der kleinen Teile des Baukastens. Sonst ein Theme (Light, Dark, Blueprint, Glass), eine Palette (Akzent, Mono) und ein Detaillierungsgrad: minimal ist nur Balken, standard ist Wörter, wo sie Bedeutung tragen und Balken woanders, realistic ist echte Inhalte überall. Standard: Light, Akzent, Standard; verwende realistic im Hero-Maßstab, für ein benanntes reales Produkt oder ein Standbild, dessen Motiv eine Liste oder Seite ist. Schreibe Fülltext einmal mit Text filler und der Detaillierungsgrad entscheidet. Die eigenen Icons des Produkts, seine echte Chromoberfläche, die Inhalte, die es erkennbar machen. Ein Briefing mit einem Stil (Kawaii, Papier, eine Posterfarbe) bekommt diesen Stil vollständig, immer noch gebaut nach diesen Regeln.
3. Die Geschichte. Ihre Form (references/motion.md, Story): wie es sich anfühlt, es zu nutzen, ein Ablauf, oder was das System tut. Drei bis fünf Beats und ein Nutzen, 10 bis 16 Sekunden. Keine Cursorbewegung, die du nicht erklären kannst. Daten spulen nie ohne Grund im Sichtfeld zurück. Zwischen einer reichhaltigeren Geschichte und einem ruhigeren Rahmen wähle den Rahmen.
4. Starte von einem Beispiel. Finde das nächste Goldbeispiel (die Goldtabelle unten) und nimm es auf (node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png; npm run dev startet die Vorschau). Kopiere seinen Ordner in dein Projekt als Ausgangspunkt; schreibe es nicht aus dem Gedächtnis neu. Der schnellste Ablauf: kopiere es nach examples/<yours>/ hierher, wo die Vorschau es erkennt und ?capture=<yours> es aufnimmt, dann verschiebe es in den Host, wenn es besteht, und korrigiere den Importpfad des Baukastens. Behalte seine Struktur: die Bühnengröße, den Beschnitt und Anschnitt, Zeilen- und Schriftgrößen, Abstände, die Beats des Skripts, die Bauteile des Baukastens. Lies jetzt references/craft.md vollständig: es ist kurz und enthält die Standbild-Regeln, die das Goldbeispiel dir nicht zeigen kann, die Fälle, die dein Goldbeispiel zufällig nicht enthält. Ersetze dann seinen Look und Inhalt mit dem Produkt des Briefings: die Tokens aus Schritt 2, die eigenen Icons, Chromoberfläche und Wörter des Produkts. Eine Kopie, die nur den Namen ändert, ist nicht fertig: sie sollte wie das Produkt des Briefings aussehen, nicht wie das Goldbeispiel. Wenn kein Goldbeispiel deine Geschichte erzählt, wähle in zwei Teilen: zuerst das Layout (wähle es aus der Tabelle in references/framing.md; jedes Layout benennt sein Beispiel) und kopiere dieses Beispiel, auch wenn seine Geschichte anders ist; leihe dann die Bewegung für deine Beats von dem Beispiel, dessen Geschichte am nächsten kommt, und baue, was keines hat, im gleichen Stil. Rahme es dann ein: beschneide auf das Panel, in dem die Geschichte spielt, beurteilt im endgültigen sichtbaren Beschnitt (references/framing.md enthält die Regeln und die Layouttabelle). Die Kurzform: ein Rinnsal, ein Vollrinnsal oder deutlich darüber; nur Fülltext läuft über; was sich öffnet, bleibt drin; Fenster behalten ihre Form; die Seite ist der Grund, also keine Platte unter einem Hero auf einer weißen oder dunklen Seite und kein Fenster ganz mit Luft auf allen vier Seiten; unframed nur, wenn der Entwickler es verlangt; keine toten Ecken. Nimm ein Standbild bei beiden Breiten neben dem Goldbeispiel auf; wenn deines leerer, flacher oder eingekastelter ist, korrigiere den Rahmen vor jeder Bewegung.
5. Der Bildschirm. Zähle die echten Zeichenfolgen, normalerweise 3 bis 7 (references/craft.md, Zurückhaltung): ein Budget für Wörter, nicht für Elemente. Baue mit den Tokens des Baukastens, Bar, Text und Row. Passe den Text jedes Bedienelements an, bevor es sich bewegt. Markiere, was der Cursor berührt, mit data-target und data-cursor; messe mit rect(), nie fest codieren.
6. Choreografiere. Die Act-API. Behalte, was eingeblendet ist, und schalte es um, damit Ausgänge animieren (Bubble und Fly übergeben explizit). Animieren die Beziehung, nicht nur das Objekt: eine neue Zeile trägt die Zeilen darunter, eine Oberfläche, die die Größe ändert, dehnt nie ihren Text. Beats überlappen sich, Gruppen staffeln sich, der Nutzen hält an, die Schleife endet, wo sie begann, oder setzt mit einem sichtbaren Grund zurück.
7. Probe. Setze zuerst poster: die meisten Leute sehen nur diesen Rahmen (ein Thumbnail, reduzierte Bewegung, ein Screenshot), also ist es der Beat, der die Geschichte allein erzählt, nie einer, der mitten in einer Änderung erwischt wird, mit dem Ergebnis auf dem Bildschirm, anstatt weggeräumt (references/motion.md, Story). Nimm dann die Schleife auf, nicht nur ein Standbild: die Kontaktabzüge in der gezeigten Breite und bei 390, und gehe jeden Druck, jedes Menü, jede Morph- und die Schleifennaht durch (references/rehearse.md). Ein Standbild kann keinen Pop zeigen. Lies jeden Rahmen, behebe den größten sichtbaren Fehler zuerst (Rahmung, dann Hierarchie, dann Bewegung, dann Politur), nimm erneut auf. Halte es dann neben das nächste Goldbeispiel und beantworte die Ganzkompositions- und Stilpaare in references/teaching.md als Fragen zu deinem Standbild (was sieht das Auge zuerst, und ist es das Ergebnis? führt ein Fenster, eine Kachel oder ein Gerät eindeutig?); jedes Nein ist der größte Fehler. film.mjs --gate endet mit rehearsal passed ist notwendig, nicht hinreichend. Führe dann den letzten Durchlauf in references/rehearse.md durch: eine Überprüfung mit frischem Auge (references/review.md) und REHEARSAL.md neben der Komponente (Vorlage in references/verify.md, Übergabe): das Goldbeispiel, das du kopiert hast, was du geändert hast, was du nicht überprüft hast.

Fehler, die jede Runde wiederkommen, jeder mit seiner Regel; überprüfe sie vor der Übergabe:

• Inhalt, der wechselt, statt sich zu bewegen (references/motion.md, Text und Werte ändern).
• Graue Balken, wo das Auge landet; Fülltext gehört an die Ränder (references/craft.md, Zurückhaltung).
• Eine Platte hinter dem Fenster oder ein schwebendes Fenster mit Luft auf allen vier Seiten; das Fenster oder Telefon füllt mindestens zwei Drittel der Bühne und läuft über eine Kante (references/framing.md, Regel 5 und Kleine Formate und die Seite).
• Leere Bänder, abgeschnittene Bedienelemente und Schatten (references/craft.md, Zurückhaltung; references/framing.md, Regel 4).
• Standard-KI und erfundene Logos: Glitzer, Lila, ein Buchstabe in einem farbigen Quadrat (references/craft.md, Icons und Logos).
• Überladene Zeilen und ungleichmäßige Einzüge (references/craft.md, Zurückhaltung und Abstände und Ausrichtung).
• Lange Haltepunkte und ein Reset ohne Grund (references/motion.md, Schleifen).
• Eine Auswahl, die nicht unter dem I‑Balken ist (references/motion.md, Zieh- und Auswahlvorgänge).
• Eine Statusleiste oder Home-Indikator von Hand gezeichnet; das Phone zeichnet beide (references/craft.md, Chromoberfläche und Geräte).
• Ein zentrierter Betrag mit seinem Vorzeichen zentriert (references/craft.md, Abstände und Ausrichtung).

Beispiele

Filme das nächste, bevor du beginnst (Schritt 4). Die Goldbeispiele sind die Qualitätsmesslatte; Produktstudien dienen zum Ausleihen einer Interaktion, niemals zur Identität eines anderen Produkts; Musterblätter sind Kataloge, keine Kompositionen. Führe alles mit npm install und npm run dev aus. teaching/ enthält schlechte/gute Paare (references/teaching.md) zur Diagnose eines Problems; die schlechten Hälften sind niemals Ausgangspunkte.

Gold

Bedarf	Beispiel	Was zu lernen ist
Standbild oder Feature-Karte	static-card	Ruhige Hierarchie, harter Beschnitt, ein Satellit, echte Wörter nur beim ausgewählten Kunden, seinen Nachbarn und der Summe
Dunkles Standbild	dark-bento	Ein Signal einmal genannt; Albumcover macht es zu einer Musik-App
Animated Hero, eine Geste	hero-demo	Fünf Beats, benannte Ziele, eine Anmerkung, ein Terminal, das nach vorne kommt
Choreografie, kein Cursor	payout-flow	Langsame überlappende Ankünfte, Lesezeit, ein Nutzen, der anhält
Inhalt, der sich an Ort und Stelle ändert	choreography	Behalte Spuren, weiche Masken, abhängiges Timing
KI-Antwort	ai-chat	Die gesendete Frage, Thinking, die Antwort mit ihrer Höhe hereingestreamt, Quellen zuletzt; kein Glitzer, kein Lila
KI mit Karten	ai-cards	Eine Multiple-Choice-Karte beantwortet und als Datensatz behalten, eine Karte mit Optionen im Thread geöffnet, über ihren eigenen Button gebucht
Formularvalidierung	form-error	Ein Fehler auf dem Feld, das ihn verursacht hat, behoben durch Korrektur, dann bestätigt der Button auf sich selbst
Ziehen zum Neuanordnen	reorder	Eine Zeile am Griff angehoben, die anderen machen Platz, in Position fallen gelassen
Diagramm-Scrub	chart-scrub	Ein Haarstrich und ein Punkt, die dem Zeiger folgen, der Überschriftwert rollt zum darunter liegenden Tag
Bearbeiten in einer Tabelle	table-edit	Eine Zelle an Ort und Stelle bearbeitet, dann die Summe, die sie speist, rollt einen Beat später
Laden zu Inhalt	loading	Ein Skelett in der eigenen Geometrie des Inhalts, Zeilen lösen von oben nach unten auf, echte Chromoberfläche durchgehend
Dunkler Hero	dark-hero	Tiefe durch Oberflächenstufen auf Schwarz, eine leuchtende Farbe, ein Status, der sich auf seiner eigenen Pille ändert
Live-Mitarbeiter	presence	Jede Person überall eine Farbe, Namen reiten auf ihren Cursorn, Arbeit in den eigenen Markierungen des Dokuments gezeigt
System-Geschichte	subscriptions	Ein Chip fliegt in eine Zeile, MRR rollt, eine zweite Szene ist der Reset
Nahaufnahme	close-up	Ein Bedienelement im Maßstab 1,4x mit der Chromoberfläche seines Fensters, die gesamte Zeile, ein großer Cursor passend
Viele von einer Sorte	many-of-one	Ein Raster von einem Ding über jede Kante, eine Kachel durch Tiefe fokussiert, die einzige mit Wörtern
Verblassender Beschnitt	fade-crop	Ein Fenster, das am Fuß über Fülltext ausblendet, anstatt über eine Kante zu laufen
Panel über Produkt	panel-annotation	Ein Einstellungen-Panel über dem Rand des Produkts, eine Führungslinie von der Einstellung zu dem, was sie geändert hat
Überlappende Fenster	overlap	Eine Karte vor einem Fenster, ihre Kante auf der Seitenleiste des Fensters
Gestapelte Karten	stacked-cards	Zwei Komponenten in einer Breite, ein kleiner Spalt, die untere am unteren Rand
Gegenüberliegende Ecken	opposite-corners	Eine Bento-Kachel: Text unten links, das Produkt hängt von der oberen rechten Ecke
Gekippter Stapel	tilted-stack	Ein loser Papierstapel, kleine abwechselnde Winkel, nur die oberste Karte hat Wörter
Ecken-Chip	corner-chip	Ein kleiner Chip zentriert auf einer Fensterecke, halb außerhalb
Monochrom	monochrome	Produkte anderer Unternehmen in einer Reihe, Graustufen, verblasst am Fuß
Fensterreihe	window-row	Sitzungen nebeneinander auf gleicher Höhe: Fokus durch Tiefe, Nachbarn durch die Bühne beschnitten, nur Fülltext zugeschnitten
Fenster und Telefon	device-pair	Ein Dashboard und ein Sperrbildschirm, die ein Ereignis erzählen; das Telefon überlappt den Rand, nie die Figur
Verwandte Objekte	story	Eine Rechnung, ein Plan, ein Verbinder, rollende Summen
Kalenderziehen	calendar	Eine gefüllte Woche, ein fokales Ereignis, ein gemessenes Aufnehmen
Freies Ziehen	freeform-drag	Greifversatz, ein gemessenes Raster, ein Ablagefeld, das einrastet
Telefon-App	phone-touch	Eine Karte öffnet sich in ihren Bildschirm als ein Objekt, und die Schleife faltet zurück
Dynamic Island	dynamic-island	Eine schwarze Form, ihr Inhalt eine separate Ebene
Nachrichten	messages	Editor, Tippen, Quittungen, Lebensdauer einer Blase
Cursor	cursors, cursor-morph, cursor-resize	Fünf Stile, elementgetriebene Arten, Größenänderungs-Ecken und -Kanten, gar kein Cursor
Anmerkungen	annotations	Führungslinien, Maße, Flüsse und ein bewegliches Ziel; references/annotations.md
Feature-Raster	bento	Ein Hero, ein Fenster, eine Statistik, ein Objekt, ein Diagramm
Dunkles liniertes Raster	ruled-bento	Gemeinsame Linien und technische Bilder
Verbraucher-Raster	staggered-bento	Versetzte Kacheln, Grafik, physische Objekte
Bildgeführter Hero-Raster	hero-grid	Unterschiedliche Hintergründe …

*[Fortsetzung des Markdown-Inhalts gekürzt für die Übersetzung]