Product Demo Director

Was macht Product Demo Director?

Du führst Regie bei der schwierigsten Einstellung im Software-Marketing: Eine echte UI, die eine echte Sache tut, und zwar so, dass ein Fremder sie beim ersten Ansehen verstehen kann. Der typische Fehler ist eine rohe Bildschirmaufnahme in Echtgeschwindigkeit – der Cursor teleportiert, drei Dinge ändern sich gleichzeitig, und der Zuschauer weiß nie, wohin er schauen soll. Deine Aufgabe ist es, die Aufmerksamkeit zu choreografieren: eine Änderung nach der anderen, die Kamera darauf gerichtet, lange genug gehalten, um sie zu lesen.

Dies ist die Geschmacksebene. Die Grammatik wie sich Dinge bewegen (Easing-Kurven, Antizipation, die 12 Prinzipien) lebt in motion-design-principles; die Liste der Beats lebt in video-storyboard; Wortanimation lebt in kinetic-typography. Du entscheidest, was die Kamera und der Cursor über der UI tun und gibst das Ergebnis an diese Skills und das Build-Pack (remotion-compose, remotion-render) weiter.

Arbeite ein durchgängiges Beispiel durch: einen 12-Sekunden-Clip, der zeigt, wie ein Benutzer einen Feature-Flag in einem Settings-Dashboard aktiviert und zusieht, wie eine Metrik-Kachel aufleuchtet.

Workflow

Führe diese Schritte in der angegebenen Reihenfolge aus. Beginne nicht mit der Cursor-Choreografie, bevor du dich für „Aufnehmen vs. Nachbilden“ entschieden hast – die Entscheidung ändert alles nachgelagert.

Schritt 1 – Entscheide: Bildschirmaufnahme oder UI nachbilden

Dies ist die Gabelung. Triff die Entscheidung vor jeder anderen Arbeit.

• Bildschirmaufnahme, wenn die UI real und stabil ist und die Glaubwürdigkeit der Demo davon abhängt, dass „dies das tatsächliche Produkt ist“. Am schnellsten zu erfassen; du gibst Kontrolle ab. Du kannst keinen ruckeligen Cursor, einen langsamen Netzwerk-Spinner, echte Kundendaten oder eine Schriftart, die beim Zoomen schlecht anti-aliast, reparieren. Nimm in der 2-fachen Endauflösung auf, damit du genug Spielraum für Nahaufnahmen hast, ohne dass es matschig wird.
• Die UI nachbilden (die relevanten Bildschirme als Komponenten neu erstellen), wenn du einen sauberen Cursor-Pfad, deterministisches Timing, ehrlich-fiktive Daten, teilweise Produktzustände, die es noch nicht gibt, oder pixelgenaues Zoomen benötigst. Mehr Arbeit; totale Kontrolle. Dies ist der Pfad, der zu remotion-compose führt, wo jeder Bildschirm zu einer Komponente und der Cursor zu einer animierten Ebene wird.
• Hybrid (häufig und unterschätzt): Nimm die Textur des Bildschirms auf (echtes Scrollen, echtes Video, das in der App abgespielt wird), füge dann nachgebildete Callouts, Cursor und Hervorhebungen darüber ein, sodass die Choreografie immer noch gestaltet ist. Verwende dies, wenn das Produkt echt ist, die Rohaufnahme aber zu chaotisch ist, um Regie zu führen.

Schreibe die Entscheidung mit ihrer Begründung auf. Siehe references/record-vs-recreate für die vollständige Tabelle mit den Vor- und Nachteilen.

Schritt 2 – Reduziere auf eine Änderung pro Beat

Eine Demo ist nur dann lesbar, wenn sich genau eine Sache gleichzeitig ändert und der Zuschauer zum Zeitpunkt der Änderung darauf schaut. Liste jeden Zustandswechsel im Ablauf auf (Fokus bewegt sich, ein Feld wird ausgefüllt, ein Schalter wird umgelegt, eine Kachel aktualisiert sich, ein Toast erscheint). Wenn zwei Änderungen im selben Frame auftreten, musst du sie entweder zeitlich trennen oder die eine unterordnen (abdunkeln, aus dem Zoombereich schieben). „Den Flag einschalten“ ist nicht ein Beat – es ist: Cursor erreicht Schalter → Schalter wird umgelegt → Metrik-Kachel neu berechnen → Bestätigungs-Toast. Vier Beats, vier gehaltene Lesevorgänge.

Schritt 3 – Choreografiere den Cursor

Der Cursor ist der Erzähler. Behandle ihn wie einen Schauspieler, nicht wie ein Mausprotokoll.

1. Bewege dich mit Absicht, mache einen leichten Bogen. Niemals teleportieren, niemals zittern. Der Cursor beschleunigt aus dem Stillstand und bremst in das Ziel hinein (Ease-In-Out – die Kurve aus motion-design-principles entlehnen). Ein leichter Bogen wirkt zielgerichteter als eine Lineal-gerade Linie.
2. Setze dich, bevor du handelst. Ankommen, etwa 6-10 Frames pausieren, dann klicken. Die Pause ist der „Ich bin im Begriff, dies zu tun“-Beat, den das Auge braucht.
3. Zeige den Klick. Ein echter Klick ist unsichtbar. Füge eine sichtbare Affordanz hinzu: eine schnelle Verkleinerung/Vergrößerung des Cursors, eine radiale Welle am Klickpunkt oder einen kurzen gedrückten Zustand des Ziels. Eins von diesen, nicht alle drei.
4. Ein Cursor, ein Pfad. Wenn der Ablauf den Cursor an zwei Orten benötigt, schneide – peitsche ihn nicht über den Frame. Ein harter Schnitt wirkt sauberer als ein 4-Frame-Ritt.
5. Ziehe den Cursor zurück, wenn er nicht das Subjekt ist. Wenn eine Kachel gerade aktualisiert wird und der Cursor nur herumsteht, blende ihn aus oder bewege ihn aus dem Zoombereich. Ein statischer Cursor, der mit dem eigentlichen Subjekt konkurriert, teilt die Aufmerksamkeit.

Schritt 4 – Führe die Kamera: Zoomen, Schwenken, Callouts

Der Frame ist eine Kamera über der UI. Verwende eine konsistente Bewegungssprache, damit der Zuschauer deine Sprache lernt:

• Hereinzoomen (Push) um sich auf eine Region festzulegen, bevor die Änderung stattfindet – erreiche den Schalter bevor er umkippt. Der Push ist die Antizipation; die Änderung ist die Auszahlung.
• Schwenken/Verfolgen (Pan/Track) um dem Cursor zwischen zwei Regionen zu folgen, die zu weit auseinander liegen, um in einem Frame zu halten. Halte Schwenks langsam und durch den Cursor motiviert – die Kamera folgt dem Schauspieler.
• Herauszoomen (Pull) um nach einem detaillierten Beat den Kontext wiederherzustellen, damit der Zuschauer sich vor der nächsten Region neu orientieren kann.
• Callouts (ein Hervorhebungsring, eine Beschriftung, eine Verbindungslinie, ein Spotlight, das alles andere abdunkelt) zeigen auf das, was Wörter sonst benennen müssten. Bevorzuge einen Callout gegenüber einer Erzählung, wenn das UI-Element auf dem Bildschirm sichtbar ist.

Regel: Die Kamera sollte bereits auf das Element schauen, bevor es sich ändert. Wenn der Schalter umkippt und dann du hereinzoomst, hast du den Moment verpasst.

Schritt 5 – Mache die Zustandsänderung lesbar

Die gesamte Demo existiert für die Zustandsänderungen. Jede erhält eine bewusste Behandlung:

• Verlangsame die Welt bei der Schlüsseländerung. Halte ein normales Tempo durch die Navigation, dehne dann den eigentlichen Wechsel/Update auf etwa das 1,3- bis 1,6-fache seiner realen Dauer, damit das Auge Ursache→Wirkung registriert. Geschwindigkeitsrampe danach wieder hoch.
• Hebe das Vorher/Nachher-Delta hervor. Lasse das geänderte Element pulsieren (ein Leuchten, eine kurze Farbwäsche, ein Größenbuckel). Wenn sich eine Zahl ändert, zähle sie hoch, anstatt den Wert hart zu schneiden – die Bewegung ist die Botschaft.
• Ziehe den Fokus (Focus Pull). Wenn die Metrik-Kachel aktualisiert wird, dunkle oder unscharf für etwa 10 Frames alles andere ab, damit die Kachel eindeutig das Subjekt ist, und bringe dann den Raum zurück.
• Sequenziere Ursache und Wirkung mit einem Beat dazwischen. Schalter wird umgelegt (halten), dann Kachel wird aktualisiert (halten). Wenn sie im selben Frame ausgelöst werden, kann der Zuschauer nicht erkennen, dass der Schalter die Kachel verursacht hat.

Schritt 6 – Überprüfe die Shot-Liste, dann übergib

Führe den Linter (unten) auf deiner Beat-Liste aus, um die klassischen Lesbarkeitsfehler zu erkennen – überlappende Änderungen, fehlende Haltezeiten, Cursor-Teleportationen, eine Kamera, die zu spät kommt. Behebe jeden Flag. Übergib dann die inszenierte Shot-Liste nachgelagert: Timing-/Easing-Details an motion-design-principles, die Beat-Reihenfolge an video-storyboard und die eigentliche Implementierung (Cursor-Ebene, Zoom-Transformationen, Komponenten-Bildschirme) an remotion-compose für den Build und remotion-render für die Iterationsschleife.

Qualitätsstandard

Die Demo ist nur dann erstklassig, wenn alles zusammenhält:

• Die Entscheidung „Aufnehmen vs. Nachbilden“ ist mit ihrer Begründung schriftlich festgehalten, und die Produktion hält sich daran (keine ruckelige Rohaufnahme, die in einen „sauberen“ Nachbau geschmuggelt wird).
• Genau eine Änderung ist pro Beat das Subjekt; jede gleichzeitige Änderung ist bewusst untergeordnet (abgedunkelt oder außerhalb des Frames), niemals zufällig.
• Jeder Klick zeigt eine sichtbare Affordanz, und der Cursor setzt sich ab, bevor er handelt – keine Teleportationen, kein Zittern, keine Peitschenschwenks.
• Die Kamera ist bereits auf jedes Element vor dessen Änderung eingestellt.
• Jede Zustandsänderung erhält mindestens eine Lesbarkeitsbehandlung (Verlangsamung, Hervorhebung, Fokus-Pull oder Hochzählen) und eine gehaltene Lesezeit danach.
• Die Shot-Liste besteht den Linter mit null Flags.

NICHT

• Liefere keine rohe Echtzeit-Bildschirmaufnahme als Demo aus – inszeniere sie, oder es ist Filmmaterial, keine Demo.
• Lasse keine zwei Zustandsänderungen im selben Frame landen; der Zuschauer kann Ursache und Wirkung nicht zuordnen.
• Teleportiere, zittere oder peitsche den Cursor nicht; wenn er an zwei Orten sein muss, schneide.
• Zoome nicht zu einem Element, nachdem es sich geändert hat – die Kamera kommt immer zuerst an.
• Erzähle nicht, worauf ein Callout auf dem Bildschirm zeigen könnte.
• Gib hier keine genauen Easing-Kurven oder Frame-für-Frame-Timings an – das ist motion-design-principles; schreibe die Beat-Reihenfolge nicht von Grund auf neu – das ist video-storyboard; animiere hier keine Bildschirmtexte – das ist kinetic-typography; schreibe keinen React/Remotion-Code und rendere nicht – das ist remotion-compose und remotion-render.

Linter

Eigenständiges Node-Skript. Speichere als demo_lint.js und führe es aus mit node demo_lint.js. Keine Abhängigkeiten. Beschreibe deine Demo als geordnete Liste von Beats; der Linter erkennt die klassischen Lesbarkeitsfehler aus dem Workflow. Bearbeite das beats-Array für deine Demo.

// Product-demo Shot-List-Linter. Ausführen: node demo_lint.js
// Jeder Beat ist ein Moment auf der Zeitachse. Felder:
//   t          Startzeit in Sekunden (geordnet, aufsteigend)
//   dur        Wie lange der Beat gehalten wird, in Sekunden
//   changes    UI-Zustandsänderungen, die in diesem Beat auftreten (0, 1 oder mehr)
//   camera     'push' | 'pan' | 'pull' | 'hold'  (Kamerabewegung in diesen Beat)
//   framedOn   Das Element, auf das die Kamera zu Beat-Beginn gerichtet ist
//   cursorTo   Wohin sich der Cursor in diesem Beat bewegt (null = bleibt / ist nicht das Subjekt)
//   click      True, wenn in diesem Beat ein Klick erfolgt
//   clickAffordance  True, wenn der Klick sichtbar gemacht wird (Welle/Drücken/Skalieren)
//   legibility 'slowdown' | 'highlight' | 'focuspull' | 'countup' | null
const beats = [
  { t: 0.0, dur: 1.2, changes: [],               camera: 'push', framedOn: 'settings-panel', cursorTo: 'toggle',     click: false, clickAffordance: false, legibility: null },
  { t: 1.2, dur: 0.5, changes: [],               camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: true,  clickAffordance: true,  legibility: null },
  { t: 1.7, dur: 1.0, changes: ['toggle-on'],    camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: false, clickAffordance: false, legibility: 'slowdown' },
  { t: 2.7, dur: 1.4, changes: ['tile-update'],  camera: 'pan',  framedOn: 'metric-tile',    cursorTo: null,         click: false, clickAffordance: false, legibility: 'countup' },
  { t: 4.1, dur: 0.8, changes: ['toast','badge'],camera: 'hold', framedOn: 'metric-tile',    cursorTo: 'export-btn', click: false, clickAffordance: false, legibility: null },
]

const HOLD_MIN = 0.4 // Eine Zustandsänderung braucht mindestens so lange zum Lesen
const flags = []
for (let i = 0; i < beats.length; i++) {
  const b = beats[i]
  const id = `Beat ${i + 1} (t=${b.t}s)`
  // 1. Eine Änderung pro Beat.
  if (b.changes.length > 1)
    flags.push(`${id}: ${b.changes.length} Änderungen gleichzeitig (${b.changes.join(', ')}) - teile auf oder ordne alle bis auf eine unter`)
  // 2. Jede Änderung erhält eine gehaltene Lesezeit.
  if (b.changes.length === 1 && b.dur < HOLD_MIN)
    flags.push(`${id}: Änderung "${b.changes[0]}" nur ${b.dur}s gehalten - halte >= ${HOLD_MIN}s, damit sie gelesen werden kann`)
  // 3. Jede Änderung erhält eine Lesbarkeitsbehandlung.
  if (b.changes.length >= 1 && !b.legibility)
    flags.push(`${id}: Änderung "${b.changes[0]}" hat keine Lesbarkeitsbehandlung (slowdown/highlight/focuspull/countup)`)
  // 4. Klicks müssen sichtbar sein.
  if (b.click && !b.clickAffordance)
    flags.push(`${id}: Klick hat keine sichtbare Affordanz - füge eine Welle/Drücken/Skalierung hinzu`)
  // 5. Kamera rahmt das Element EHER es sich ändert, nicht im Änderungs-Beat.
  if (b.changes.length >= 1 && (b.camera === 'push' || b.camera === 'pan'))
    flags.push(`${id}: Kamera bewegt sich (${b.camera}) im selben Beat, in dem die Änderung stattfindet - komme zuerst an, ändere dann`)
  // 6. Kein Cursor-Teleport: Ein Klick-Beat, dessen Cursor gerade erst angekommen ist, hat keinen Halt.
  if (b.click && b.cursorTo)
    flags.push(`${id}: Cursor bewegt sich UND klickt im selben Beat - halte (~6-10 Frames) an, bevor du klickst`)
}

if (flags.length === 0) console.log('BESTANDEN - Shot-List ist lesbar.')
else {
  console.log(`${flags.length} Flag(s):`)
  for (const f of flags) console.log('  - ' + f)
}

Ausgabe des durchgängigen Beispiels

Mit den obigen Beats gibt das Skript aus:

3 Flag(s):
  - Beat 4 (t=2.7s): Kamera bewegt sich (pan) im selben Beat, in dem die Änderung stattfindet - komme zuerst an, ändere dann
  - Beat 5 (t=4.1s): 2 Änderungen gleichzeitig (toast, badge) - teile auf oder ordne alle bis auf eine unter
  - Beat 5 (t=4.1s): Änderung "toast" hat keine Lesbarkeitsbehandlung (slowdown/highlight/focuspull/countup)

Interpretation: Der Schalter-Klick (Beats 2-3) ist sauber – der Cursor hält an, der Klick hat eine Welle, der Wechsel wird verlangsamt und gehalten. Aber Beat 4 schwenkt zur Metrik-Kachel, während sie sich aktualisiert, sodass die Kamera zu spät zur Auszahlung kommt; behebe es, indem du während der Haltezeit von Beat 3 schwenkst, damit die Kachel eingerahmt ist, bevor sie neu berechnet wird. Und Beat 5 macht zwei falsche Dinge gleichzeitig: Er feuert einen Toast und ein Badge im selben Frame, und der Toast hat keine Lesbarkeitsbehandlung. Ordne das Badge unter (blende es ab oder schiebe es aus dem Zoombereich), damit der Toast das einzige Subjekt ist, und gib dem Toast eine Hervorhebung oder einen Halt. Behebe alle drei, und der Linter besteht.

Vorlage: Demo-Shot-Card

Kopiere dies, fülle die FILL-Felder aus und füttere das Ergebnis in den Linter, dann an die nachgelagerten Skills weiter.

PRODUKT DEMO SHOT CARD. [FILL: Feature-Name] - [FILL: Länge]s

PRODUKTIONSENTSCHEIDUNG
  Aufnahme / Nachbildung / Hybrid:   [FILL]
  Grund:                             [FILL: warum dieser Pfad]
  Aufnahmeauflösung:                 [FILL: 2x Endauflösung bei Aufnahme]

SUBJEKT DES CLIPS (ein Satz, den der Zuschauer mitnehmen soll)
  [FILL]

BEAT-BLATT (eine Änderung pro Zeile; Kamera kommt vor der Änderung an)
  #  ZEIT   KAMERA   EINGERICHTET AUF   CURSOR               ÄNDERUNG           LESBARKEIT        HALT
  1  [FILL] [push]   [FILL]              [bewegt sich zu FILL] -                  -                 [FILL]s
  2  [FILL] [hold]   [FILL]              [hält an + klickt]   -                  -                 [FILL]s
  3  [FILL] [hold]   [FILL]              [geparkt/ausblenden] [FILL: der Wechsel] [slowdown]        [FILL]s
  4  [FILL] [pan]    [FILL]              [außerhalb des Frames][FILL: der Effekt] [countup/glow]    [FILL]s
  (füge Zeilen hinzu; niemals zwei Änderungen in einer Zeile)

CALLOUT-SPRACHE (konsistent im gesamten Clip)
  Hervorhebungsstil:            [FILL: ring / spotlight-dim / connector]
  Klick-Affordanz:              [FILL: ripple / press / cursor-scale]
  Fokus-Pull-Behandlung:        [FILL: andere abdunkeln / andere unscharf]

ÜBERGABE
  Easing + Timing-Detail ->      motion-design-principles
  Beat-Reihenfolge / Storybogen ->video-storyboard
  Bildschirmtexte ->             kinetic-typography
  Farbe + Licht von Hervorhebungen ->motion-color-and-light
  Sounddesign ->                 film-sound-design

(Vollständige SKILL.md wird für die Übersetzung geliefert; die obige Übersetzung deckt den verfügbaren Inhalt ab.)