Cinematic Shot: inszeniere einen Launch-Film deiner echten UI

Kinematografischer Shot

Du bist der Regisseur und der Kameramann, nicht der Motion Designer. Der Film ist eine Abfolge von Hero-Shots. Jeder Shot zeigt ein echtes Stück der Produkt-UI aus einem steilen, niedrigen Winkel, so nah, dass die Schärfeebene nur eine oder zwei Textzeilen umfasst und alles andere in Schwarz zerlauft. Die Kamera driftet langsam dorthin, wo als Nächstes etwas passiert. Die UI erledigt die Arbeit von selbst: Dinge werden getippt, gestreamt, ausgewählt und geschrieben, während wir zusehen. Nichts erklärt sich durch Untertitel.

Diese Skill konzentriert sich auf Kamera, Bildausschnitt, Licht und Schnitt. Baue den Film mit jedem Rendering-Stack. Was auch immer du wählst, mach jeden Frame zu einer reinen Funktion der Zeit, sodass der Film deterministisch rendert und Bewegungsunschärfe aufnehmen kann.

Lies references/look.md für genaue Rezepte zu Kamera, Schärfentiefe, Licht, Enthüllung und Typografie. Lies references/shot-list-example.md für ein vollständiges Beispiel der Shot-Grammatik.

Der Look

Eine schwarze Leere. Das Produkt schwebt darin wie eine dunkle Platte, von der Kamera weggekippt, beleuchtet von einem weichen Lichtkegel, der dem folgt, was gerade wichtig ist, und alles andere ins Schwarz fallen lässt. Die Kamera ist tief und nah, sie blickt entlang der UI, nicht auf sie, sodass Textzeilen diagonal durch den Frame laufen und mit der Entfernung schrumpfen. Die Schärfeebene ist ein dünnes Band: Ein Steuerelement, eine Zeile Eingabe, eine Zeile einer Liste ist scharf, der Rest ist weiches Bokeh. Die Kamera driftet ständig und bewegt sich nie schnell. Die Shots sind lang genug, um etwas passieren zu sehen. Die einzige Farbe ist die des Produkts selbst. Zurückhaltung überall sonst.

1. Finde die Geschichte vor den Shots

Bevor du eine einzige Kamera planst, schreibe auf:

• Den Ablauf: Die 4–7 Dinge, die nacheinander auf dem Bildschirm passieren. Beispiele: Eine Ansicht öffnen, einen Tab auswählen, einen Prompt eingeben, zusehen, wie die Antwort eintrifft, zusehen, wie ein Dokument sich selbst schreibt, genehmigen.
• Den Höhepunkt: Der eine Moment, in dem das Produkt sichtbar etwas Bemerkenswertes tut. Der Film existiert, um diesen Frame zu erreichen.
• Die Demo-Inhalte: Konkrete, glaubwürdige Daten in der UI, z. B. Namen, IDs, Status, Code und kurzer, natürlich klingender Text. Realistische Dichte macht eine Nahaufnahme schön. Eine Liste von zwölf plausiblen Issues liest sich wie ein Produkt; drei graue Platzhalter lesen sich wie ein Mockup.
• Eine Zeile Text: Der Produkt- oder Feature-Name, gefolgt von einem Tagline mit höchstens fünf Wörtern.

2. Schreibe die Shot-Liste

Veröffentliche die Shot-Liste vor dem Bau, und mach dann weiter:

#	Schnitt bei	Länge	Motiv (was im Fokus ist)	Maßstab	Winkel	Bewegung	Aktion

Regeln:

• Länge: 45–55 s insgesamt, mit 8–10 UI-Shots, dann der Text und das Logo.
• Die Shot-Länge folgt der Aktion. Prozess-Shots (Tippen, Streamen, ein Dokument, das sich selbst schreibt, ein langer Diff) laufen 5–9 s. Interpunktions-Shots (ein Tab, ein Button, ein Navigationspunkt) laufen 2–3,5 s. Wechsle die beiden ab, sodass auf eine lange Betrachtung ein kurzer Akzent folgt. Median etwa 5 s.
• Schnitt auf die Aktion, nicht nach Metronom. Es gibt kein Beat-Gitter. Schneide herein, wenn das Motiv bereits im Bild ist oder kurz davor ist einzutreffen; die Aktion beginnt innerhalb von 0,3–0,8 s; halte das Ergebnis 0,5–1 s; schneide, während die Kamera sich noch bewegt.
• Eine Idee pro Shot. Ein Shot kann eine kurze Kette enthalten (Typ → Senden → die Antwort beginnt) nur, wenn die Kamera einem kontinuierlichen Faden folgt.
• Variiere den Maßstab wie ein Cutter. Extreme Makros und Makros dominieren. Halbtotale tragen den längeren Prozess. Halte dir die Totale (das ganze Fenster, nahezu frontal) für den Höhepunkt auf, wo sie wie eine Erlösung wirkt. Kehre danach zu einer Nahaufnahme zurück.
• Wechsle die Diagonale. Wenn der Text in einem Shot nach rechts oben steigt, fällt der Text im nächsten Shot nach rechts oben, oder die Ebene kippt andersherum. Jeder Schnitt sollte wie eine neue Kameraposition wirken.
• Kein durchgehender Cursor. Die UI agiert von selbst (siehe Abschnitt 4). Der Zuschauer muss nie einem Zeiger zwischen den Shots folgen.
• Getrennte Oberflächen erhalten getrennte Aufbauten. Wenn die Geschichte zu einer anderen Oberfläche wechselt (ein Terminal, ein Telefon, eine andere App), gib ihr eine eigene Platte in derselben schwarzen Leere und schneide hart darauf.

Shot-Maßstäbe

Miss den Maßstab als Vergrößerung der UI am Fokuspunkt, relativ zu ihrer nativen Größe:

Maßstab	Vergrößerung	Verwendung	Schärfentiefe
Extremes Makro	5–7×	Ein einzelner Tab, ein Button, ein Navigationspunkt, ein Status-Badge. Ein oder zwei Wörter füllen ein Drittel des Frames.	Nur das Motiv ist scharf. Alles andere ist schweres Bokeh.
Makro	2,5–4×	Ein Komponist mit einer Zeile Eingabe, ein paar Zeilen einer Liste, ein Code-Abschnitt	Ein Band von 2–4 Textzeilen Tiefe ist scharf
Halbtotale	1,5–2,5×	Ein Panel in Aktion: eine Liste, die eintrifft, ein Dokument, das sich selbst schreibt, ein Diff mit einer Seitenleiste	Ein breiteres Band ist scharf; die entfernte und die nahe Kante bleiben weich
Totale	0,8–1,1×	Nur der Höhepunkt: das ganze Fenster, nahezu frontal, mit scrollendem oder sich änderndem Inhalt	Größtenteils scharf; die Frames-Kanten werden immer noch weicher

Makro-Shots müssen knackscharf sein. Rasterisiere die UI in der Auflösung der Vergrößerung (z. B. 6×), bevor die Kamera sie skaliert. Skaliere niemals eine 1×-Bitmap hoch.

Kamerawinkel

Das ist das Markenzeichen des Looks. Außer bei der Totalen ist die Kamera tief und schräg, blickt über die UI-Ebene:

• Kippe die Ebene zurück um 30–50° (Neigung), sodass die ferne Seite der UI zurückweicht und die nahe Seite aufragt.
• Rotiere sie in der Ebene um 10–20°, bevor du sie kippst, sodass Textzeilen diagonal verlaufen. Kehre das Vorzeichen zwischen aufeinanderfolgenden Shots um.
• Füge eine kleine Gierbewegung hinzu, ±5–15°, sodass eine Seite des Frames näher ist als die andere.
• Verwende eine kurze Perspektive, sodass die perspektivische Verkürzung offensichtlich ist: Naher Text sollte etwa 1,4–1,8× so groß sein wie ferner Text im selben Frame. Eine perspektivische Distanz von etwa 0,6–0,75× der Frame-Breite funktioniert (1100–1400 px bei 1080p).
• Die Totale ist die Ausnahme: nahezu frontal, Neigung 8–12°, keine Rotation in der Ebene, Gier innerhalb von ±3°.
• Bildausschnitt: Beschneide aggressiv. Die Ränder der Platte laufen aus dem Bild oder verschwinden in Schwarz. Lasse großzügig Schwarz: ein Viertel bis die Hälfte des Frames ist oft die Leere oder UI, die so weit aus dem Fokus ist, dass sie wie Textur wirkt.

Kamerabewegung

Jeder Shot besteht aus einer einzigen kontinuierlichen Bewegung. Sie ist motiviert: Die Kamera driftet dorthin, wo als Nächstes etwas erscheinen wird.

• Fahre entlang der Leserichtung der Aktion: 3–10% der Frame-Breite über einen typischen Shot, bis zu 20–35% für einen langen Schwenk entlang eines Diffs oder eines Dokuments.
• Folge dem Inhalt, während er wächst: wenn eine Antwort nach unten strömt, driftet mit ihr nach unten; wenn eine Zeile getippt wird, driftet mit dem Cursor.
• Schiebe sanft, eine 1–5%ige Maßstabsänderung über den Shot. Herauszoomen ist selten.
• Drehe leicht, 0,5–4° Roll- oder Gieränderung über den Shot.
• Geschwindigkeit: konstante (lineare) Geschwindigkeit oder eine kurze Auslauf-Ankunft über das erste Drittel, die dann mit einer langsamen konstanten Drift fortgesetzt wird. Die Kamera kommt nie zu einem vollständigen Stillstand und bewegt sich noch am Schnitt. Kein Handkamera-Rauschen, kein Wackeln.
• Verändere den Fokus mit der Aktion: wenn die Aufmerksamkeit von der getippten Zeile zur Antwort wechselt oder von einem Titel zum Textkörper, schiebe dort das Schärfeband innerhalb von 0,4–0,8 s hin.

3. Licht und Grading: eine schwarze Leere

Jeder Shot muss so aussehen, als wäre er auf derselben Bühne gefilmt worden. Werte sind in references/look.md.

• Bühne: echtes Schwarz um das Produkt. Kein Farbverlauf-Hintergrund, keine bunten Dunst, kein Boden.
• Subjektlicht: ein weicher, neutraler Lichtkegel auf dem Subjekt, nicht dem Frame. Die UI fällt innerhalb von etwa einem Drittel der Frame-Breite vom Fokuspunkt aus ins Schwarz ab. Der Lichtkegel liegt auf der UI-Ebene, sodass die Neigung ihn perspektivisch verkürzt und die Rolle ihn entlang der Diagonale legt. Er ist länger entlang der Aktionslinie, hat einen Hotspot, der zu einer außermittigen Seite hin verschoben ist (die Seite des Schlüssellichts wechselt mit der Diagonale), und wird manchmal von einer Seite durch einen weichen Flag beschnitten. Er folgt dem Subjekt mit einem Schlag, gleitet bei einer Fokusveränderung mit und öffnet sich, wenn der Inhalt wächst und beim Höhepunkt. Es ist nie ein zentrierter Kreis, der in jedem Shot gleich aussieht. Es gibt kein farbiges Schlüssellicht.
• Low Key: Der durchschnittliche Frame ist sehr dunkel (etwa 7–10% Luminanz). Helle Pixel sind reserviert für scharfen Text und die farbige UI des Produkts. Alles Helle und Unscharfe wird abgedunkelt.
• Das Produkt ist eine dunkle Platte: seine eigenen Chrom-Elemente, abgerundete Ecken und eine leichte 1-Pixel-Kantenbeleuchtung an Panels. Halte die echte UI originalgetreu; passe sie nicht neu an.
• Farbe gehört dem Produkt: Status-Icons, Diff-Grün und -Rot, ein brandfarbener primärer Button. Füge keine eigenen Akzente hinzu: keine Linsenreflexe, keine Glüheffekte, keine Ringe, kein getöntes Licht.
• Finish: Bewegungsunschärfe (180°-Verschluss, 4+ Unterframes) und feines Filmkorn auf dem finalen Render. Zusammen mit der Schärfentiefe erledigen diese drei fast die gesamte Arbeit.

4. Bewegung innerhalb des Shots

• Kein Cursor. Die UI agiert von selbst. Ein Navigationspunkt wird hervorgehoben. Die Auswahl-Pille eines Tabs gleitet. Ein Button wird gedrückt. Ein Seitenleisten-Steuerelement erscheint auf einer Codezeile und die Zeile wird hervorgehoben. Wenn ein Klick lesbar sein muss, zeige es durch den eigenen gedrückten oder ausgewählten Zustand des Steuerelements.
• Tippen: 12–13 Zeichen pro Sekunde mit einem sichtbaren Cursor. Code-Identifikatoren und Dateiverweise werden während des Tippens in Inline-Chips umgewandelt. Beim Senden leert sich der Komponist und die Nachricht wandert in den Thread.
• Streaming: Generierter Text löst sich Zeile für Zeile von oben nach unten auf. Jede Zeile erscheint als feines Punktmuster, das sich über etwa 0,5 s zu festen Glyphen verdichtet, gestaffelt um etwa 0,1 s pro Zeile. Symbole und Avatare lösen sich auf die gleiche Weise auf.
• Schreiben: Dokumente und Diagramme bauen sich in der Reihenfolge auf: ein Titel, dann eine Überschrift, dann Absätze; Diagrammknoten, dann Verbindungen, die gezeichnet werden, dann Beschriftungen.
• Scrollen: In halbtotalen und totalen Einstellungen kann der Inhalt sanft unter einer driftenden Kamera scrollen. Dies ist die zweite Bewegungsebene und sollte sich wie Lesegeschwindigkeit anfühlen.
• Erscheinen: Neue Panels und Nachrichten blenden sich leicht ein und steigen leicht durch eine kleine Unschärfe mit einem Auslauf von 0,3–0,5 s. Nichts erscheint mit Überschwingen.
• Keine Aufpralleffekte. Der Höhepunkt wird durch den Maßstab (die Totale) und das Ausmaß der Änderung gezeigt, nicht durch Wackeln, Blitze oder Ringe.

5. Ende: Text, dann ein stilles Logo

1. Verlasse den letzten UI-Shot mit einem harten Schnitt auf Schwarz oder einem schnellen 0,4-s-Weichzeichner-und-Verdunkler in Schwarz.
2. Der Text: eine zentrierte Zeile auf Schwarz, etwa 80–100 px bei 1080p, Schriftstärke 500, Laufweite etwa −0,02em, weiß. Sie erscheint durch Entschärfen von etwa 16 px, während sie über 0,6–1 s einblendet. Setze entweder die ganze Zeile auf einmal oder setze zuerst den Produktnamen und hänge dann den Tagline in derselben Zeile an, sodass die Zeile sich beim Wachsen neu zentriert. Ein schwacher, weicher Glanz hinter der Schrift kann sich verflüchtigen, während sie schärfer wird; nichts streift darüber. Halte sie 3–5 s.
3. Das Logo: Schnitt oder kurze Überblendung (etwa 0,3 s) zum stillen Logo, entweder allein das Markenzeichen oder Marke und Wortmarke, etwa 110–120 px hoch bei 1080p, in einfachem Weiß. Es bewegt sich nicht, pulsiert nicht und glüht nicht. Halte es 4–5 s und beende den Film damit.

Füge keine CTA-Buttons, URL-Karten oder „Jetzt verfügbar“-Banner hinzu, es sei denn, es wird danach gefragt.

6. Ton

Es gibt keine Musik: keine Filmmusik, keinen Drohnton, keinen Beat, keine Anstiege, keine Braams und keine tonalen Stings. Der Soundtrack ist leises, taktiles Foley-Geräusch über fast lautloser Stille.

Jede sichtbare Aktion erhält ein akustisches Signal: ein leiser Tastenklick pro getipptem Zeichen, ein leises Klicken, wenn ein Tab oder Element ausgewählt wird, ein leises Whoosh beim Senden und ein schwaches körniges Zischen unter streamingendem Text. Der Höhepunkt erhält keinen Impact. Der Text und das Logo laufen über Stille.

Nicht tun

Diese Dinge lassen einen Film wie ein Tutorial oder eine Vorlage aussehen:

• Kaltstarts, Titel-„Introducing…“- und „New in…“-Bildschirme vor der Action.
• Tastenüberlagerungen, Untertitel, Pfeile oder Beschriftungen, die die UI erklären.
• Ein sichtbarer Mauszeiger, der die Aktion steuert, oder ein Cursor, der zwischen Zielen reist.
• Flache, frontale Nahaufnahmen. Außerhalb der weiten Höhepunkt-Aufnahme blickt die Kamera über die UI, nicht direkt darauf.
• Alles im Fokus. Wenn der Frame kein Bokeh hat, ist der Shot zu weit oder das Schärfeband zu tief.
• Überblendungen oder Abblenden auf Schwarz zwischen UI-Shots. Die UI-Shots verwenden nur harte Schnitte.
• Schnelle Bewegungen, langsame Umkreisungen, große 3D-Rotationen, schwebende Durchflüge, Kamera-Wackeln oder eine Kamera, die zum Stillstand ausläuft.
• Schnitt auf ein Raster. Zwei-Sekunden-Shots hintereinander lesen sich wie ein Sizzle-Reel; lass Prozess-Shots atmen.
• Die UI des Produkts neustylen, um sie „kinematografisch“ aussehen zu lassen. Halte die echte UI originalgetreu und hole die Kinematik aus der Kamera, dem Fokus und dem Licht.
• Anamorphe Linsenreflexe, Glühen, Akzentringe, farbiges Schlüssellicht oder jede Farbe, die das Produkt nicht bereits hat.
• Licht, das sich über den Frame bewegt: Glanzbänder, Streifen oder Lichtbalken, die über die UI wandern. Das Licht folgt dem Subjekt; es führt keine Performance auf.
• Ein Lichtkegel, der ein bildschirmzentrierter Kreis ist, in jedem Shot gleich. Er liest sich wie eine schwarze Überlagerung mit einem Loch, nicht wie Licht auf der Platte.
• Eine animierte Logo-Enthüllung.
• Musik jeglicher Art, einschließlich Filmmusik, einen Beat, einen Drohnton, Anstiege, Braams oder Glocken.

7. Überprüfe wie ein Kameramann

Rendere ein Standbild in der Mitte jedes Shots, am Höhepunkt jeder Aktion, am Höhepunkt und an den Text- und Logo-Frames. Beurteile jedes als Standbild aus einem Film:

• Es gibt genau ein scharfes Motiv, und das Auge landet in weniger als einer halben Sekunde darauf.
• Das Schärfeband ist dünn, mit sowohl nahem als auch fernem Bokeh, außer in der Totalen.
• Die Ebene wirkt geneigt: Text verläuft diagonal und schrumpft sichtbar in die Ferne.
• Text im Fokus ist bei halber Auflösung lesbar.
• Mindestens ein Viertel des Frames ist schwarz oder fast schwarz.
• Aufeinanderfolgende Shots unterscheiden sich im Maßstab oder in der Richtung der Diagonale.
• Jeder Frame teilt den gleichen Schwarzpegel, neutrales Licht und Korn, aber die Form des Lichtkegels ändert sich mit jeder Kamera: perspektivisch verkürzt, entlang der Aktion gestreckt und von einer Seite beleuchtet.
• Wähle den stärksten Frame als Poster.

Iteriere, bis jedes Standbild ein Screenshot in einem Launch-Beitrag sein könnte.