6space7/autozoom-demo-scenes

AutoZoom-Demo-Videos

Du befindest dich im Projekt des Benutzers. Lies den echten Code des Features, baue seinen Bildschirm als React-Komponente in einem Remotion-Projekt nach und filme ihn so, wie AutoZoom eine Bildschirmaufnahme filmt: Die Kamera zoomt automatisch auf jede Aktion. Codebasierte Bildschirme sind Screenshots überlegen: Text tippt sich in echte Eingabefelder, Zeilen gleiten herein, Buttons ändern ihren Zustand, und alles bleibt bei jedem Zoom scharf.

Dateien in diesem Skill:

• scripts/setup.mjs erstellt das Remotion-Projekt und installiert es (Remotion + React).
• assets/remotion-template/ wird kopiert: die AutoZoom-Kamera, das Fenster, der Cursor, Spotlights, Overlays sowie ein Beispiel-Bildschirm und eine Story. Nur src/story.tsx und src/screens/* ändern sich pro Demo.
• references/story-api.md dokumentiert jedes Story-Feld, die Bildschirm-Hooks und wie man Positionen misst. Lies es, bevor du eine Story schreibst.
• references/style.md ist der AutoZoom-Look: Rahmen, Bewegung und Overlays.

Arbeitsablauf

1. Die Story festlegen

Vereinbare einen einzigen Punkt, den der Zuschauer lernen soll, in einem Satz (z. B. „Suche eine beliebige Metrik und teile sie mit einem Klick“). Halte die Dauer bei 6–15 Sekunden und 2–4 Szenen. Eine Idee pro Video: Wenn es zwei Features gibt, erstelle zwei Videos. Frage nur nach, wenn das zu zeigende Feature unklar ist; wähle ansonsten den beeindruckendsten Ablauf.

2. Das Projekt lesen

Finde, was die Demo zeigt:

• die Route, Seite oder Komponente und ihre Kindelemente;
• Design-Tokens: Tailwind-Konfiguration, CSS-Variablen, Theme-Dateien;
• Schriftarten, die Icon-Bibliothek, das Logo;
• realistische Beispieldaten: Fixtures, Seeds, Storybook-Stories, Mocks, Tests.

Erfinde niemals ein anderes Aussehen. Die Demo muss wie ihr Produkt aussehen.

3. Remotion einrichten

node <skill-verzeichnis>/scripts/setup.mjs demo     # erstellt ./demo und installiert es

Ein erneutes Ausführen ist sicher. Füge demo/ zum Arbeitsbereich des Projekts hinzu oder lasse es eigenständig.

4. Den Bildschirm bauen (demo/src/screens/<Name>.tsx)

Zeichne ihn im Story-Viewport (Standard 1440 × 900, wie ein Browserfenster). Wähle die Route, die zum Projekt passt:

• A. Echte Komponenten importieren (React-Projekte). Beste Originaltreue. Funktioniert, wenn die Komponenten präsentativ sind. Gib ihnen statische Props und Daten und umhülle sie mit allen benötigten Providern (Theme, Router, Query-Client, i18n) mit Platzhalterwerten. Lass sie niemals aus dem Netz laden oder die Authentifizierung lesen. Stelle sicher, dass Aliase aufgelöst werden und ihre Styles geladen werden; siehe references/story-api.md › „Eigene Komponenten des Projekts verwenden“.
• B. Nachbauen (beliebiger Stack: Svelte, Vue, Angular, nativ oder React mit schweren Runtime-Abhängigkeiten). Portiere die Seite nach React mit derselben Struktur, Klassennamen oder Werten, Farben, Radien, Abständen, Schriftarten, Icons und Texten, direkt aus der Quelle. Füge nur das ein, was auf dem Bildschirm sichtbar ist.

In beiden Fällen:

• Verwende realistische Daten aus dem Projekt (Namen, Zahlen, Status), niemals Lorem Ipsum.
• Gib den Elementen, auf die die Story abzielt, bekannte Positionen. Ordne sie so an, dass du ihre Boxen angeben oder mit dem Debug-Gitter (Schritt 6) messen kannst.
• Lass den Bildschirm sich selbst animieren mit den Hooks in src/lib/hooks.ts (useTyped, useAfter, useProgress, usePop, useCount). Übergib Bildnummern als Props aus der Story, sodass die Zeitlinie an einem Ort lebt. src/screens/MockDashboard.tsx ist das durchgearbeitete Beispiel.

5. Die Story schreiben (demo/src/story.tsx)

Beginne mit der Zeitlinie als Kommentar in Bildern (fps 60):

0–60     Überblick; Cursor bewegt sich zur Suche, klickt (58)
60–130   Kamera zoomt auf die Suche
140–260  Suchbegriff tippt sich selbst; Untertitel 1
268      ↵; Ergebnisse aktualisieren
280–345  Kamera zoomt zurück zum Ergebnis
...      Kamera + Cursor Bewegung → Klick → Ergebnis → Toast; Untertitel 2
520–600  Kamera gleitet wieder heraus

Fülle dann camera, cursor, clicks, keys, captions, toasts und spotlights aus, alle in Bildschirm-Pixeln. Lasse rec aus: Overlays in den Ecken liegen über der App, wenn gezoomt wird. Die Feldreferenz findest du in references/story-api.md.

6. Standbilder prüfen, dann rendern

cd demo
npx remotion still Demo out/f.png --frame=150    # wichtige Bildpunkte ansehen (PNG lesen)
npm run studio                                   # Live-Vorschau für den Benutzer
npm run render                                   # → out/demo.mp4

Setze debug: true in der Story, um ein beschriftetes 100 px-Gitter über den Bildschirm zu legen, damit Positionen anhand eines Standbilds abgelesen werden können. Schalte es vor dem Rendern aus. Überprüfe bei jedem Szenenwechsel ein Standbild: Das Motiv ist bei Zoom vollständig im Bild, die Cursorspitze sitzt auf dem Ziel, Text ist lesbar, und die Overlays verdecken nicht die Aktion.

7. Übergeben

Gib dem Benutzer den MP4-Pfad und zeige ein oder zwei Bilder. Optional kannst du die Live-Komposition mit @remotion/player auf ihrer Website einbetten (siehe references/story-api.md).

Bewegungsregeln (das AutoZoom-Gefühl)

• Auto-Zoom-Kamera: entweder das ganze Fenster (1×) oder eine klare Nahaufnahme (1,6–2,2×), niemals dazwischen: Ein Zoom von 1,1–1,5× beschneidet das Fenster nur und sieht kaputt aus. Zoome auf das, was wichtig ist, halte, bewege dich direkt zum nächsten Punkt und ende wieder bei 1×. Bewegungen dauern 60–100 Bilder; Haltezeiten mindestens 50 Bilder. Verwende ease: 'smooth' (Standard) für Reisen und 'snap' nur für schnelle Ankünfte. Kein Bewegungsunschärfe.
• Cursor: kommt zuerst an, dann klickt er (Drücken + Welligkeit, automatisch bei jedem Bild in clicks), dann erscheint das Ergebnis 2–6 Bilder später. Während des Tippens beiseite bewegen, damit er den Text nicht verdeckt.
• Reihenfolge einer Szene: Kamera beginnt sich zu bewegen → Cursor kommt an → Klick → Zustandsänderung → Toast oder Tastenkappe → Untertitel trägt die Bedeutung.
• Untertitel: Was ein Moderator sagen würde, 3–6 Wörter pro Zeile, maximal zwei Zeilen pro Video.
• Overlays (Untertitel, Tastenkappen, Toasts, REC) bleiben außerhalb der Kamera: Sie zoomen nicht mit und verdecken nie die Aktion.
• Zurückhaltung: eine Akzentfarbe, kein Konfetti, kein Drehen, kein hüpfender Text. Das Produkt ist der Star.

Qualitäts-Checkliste

• Sieht aus wie ihr Produkt: gleiche Schriftart, Farben, Texte und Daten.
• Zeitlinien-Kommentar am Anfang von story.tsx; Bildnummern kommen von einer Stelle.
• Jede Szene mit einem Standbild überprüft; nichts Wichtiges beim Zoomen abgeschnitten oder von Overlays verdeckt.
• Cursor landet exakt auf den Zielen; Klicks kommen vor Ergebnissen.
• Text bei 1080p lesbar; Untertitel kurz.
• debug ist ausgeschaltet, und der Render-Vorgang endet ohne Fehler.