Apple-Style Launch Composition

Apple-ähnliches Produkt-Demovideo

Das Ziel ist eine apple.com-ähnliche Produktseite, die sich bewegt: heller Hintergrund, große enges SF Pro, eine Nachricht pro Bildschirm, randlose farbige Karten, die echte UI des Produkts, echte SF-Symbole, echte App-Icons, ein aufmunternder komponierter Track und ein klarer Aufruf zum Wert am Ende. Gebaut als Diffusion Studio JSX-Komposition, sodass jedes Frame deterministisch ist und vor dem Export geprüft werden kann.

Starte von templates/promo-project/ neben dieser Datei (eine vollständige, funktionierende Komposition: ein Launch-Film eines Mac-Bildschirmschloss-Dienstprogramms). Lies seine BRIEF.md und POSITIONING.md, um die fertige Form zu sehen.

Arbeitsweise

• Feedback kommt als knappe Aufzählungspunkte, oft mit Screenshots der gemeinten Frames. Erledige alle; verifiziere jeden durch Aufnahme; exportiere; antworte mit einem Frame-Kontaktbogen.
• Wenn Brainstorming gefragt ist, liste 3–4 Optionen in je einer Zeile auf, dann baue die beste, ohne zu warten.
• Halte BRIEF.md (Beat-Tabelle mit Zeiten und Texten) und POSITIONING.md (Textbegründung mit Quellen) in jeder Runde aktuell.
• Erfinde niemals Beweise: keine erfundenen Benutzerzahlen, Zitate oder Logos. Echte Screenshots, echte Textstrings aus der Quelle des Produkts, echte Icons.
• Berichte getreu: Sag, was durch Aufnahme verifiziert wurde und was nicht.

Struktur

Eine Nachricht pro Karte, harte Schnitte beidseits, ein Demo-Shot des Produkts zwischen den Karten, wo vorhanden. Schnitte fallen auf das Beat-Raster der Musik.

1. Aufhänger, 3 s um das Scrollen zu stoppen — das Problem des Betrachters, das Produkt in Aktion, kein Logo. Eine Karte pro Anwendungsfall: ein Fenster + eine Zeile, das Paar mittig als Gruppe im Frame zentriert. Decke jeden Anwendungsfall ab, den die Website auflistet, nicht nur die Hauptpersona („Dein Agent braucht drei weitere Stunden." / „Dein Render braucht vierzig Minuten." / „Dein Build ist auf halbem Weg." / „Du musst gehen.").
2. Problem — eine reine Textkarte, die schlechten Alternativen stapeln sich mittig im Frame, die Kosten in Rot („Abschließen? Der Mac schläft.").
3. Enthüllung — Symbol erscheint auf einen Musikbeat, Wortmarke, die eigene Hero-Zeile der Website (Nachrichtenübereinstimmung mit der Landingpage).
4. „Entwickelt für“-Raster — die Anwendungsfälle der Website als 4 Kacheln: farbiger Kreis mit einem SF-Symbol, Titel, echte App-Icons darunter. Kein Untertext.
5. Demo — die echte UI, die die eine Sache tut, Bildunterschriften direkt unter der Aktion, Schlüsselwörter hervorgehoben.
6. Funktionskarten — Nutzen als Überschrift, Funktion als Untertitel. Blau / Schiefer-Körnung / Grün / Schwarz mit Verlaufstext / Seite-Grau. Zeigen, nicht erzählen: eine Uhr, die durch die Nacht läuft, Tasten mit „✕ Blockiert“ in Rot bestempelt, Benachrichtigungen auf dem Sperrbildschirm.
7. Ergebnis — zurück zur fertigen Arbeit, jede Aufgabe erledigt.
8. Weitere Funktionen Raster — 4 Kacheln, je eine kurze Zeile.
9. Vertrauen — „Keine Cloud. Kein Tracking. Kein Abo."
10. Abschluss — Symbol + Name, „Kostenlos 7 Tage testen.", „Dann 8,99 $, einmalig.", die URL. Nichts weiter.

Länge etwa 45 s. Aufhänger-Karten ≈ 1,3 s, Textkarten ≈ 2 s, Demos 1,6–2,8 s, Raster ≈ 3,4 s, Abschluss ≈ 7 s. Schnelles Tempo, aber jeder Bildschirm bleibt lange genug zum Lesen.

Aussehen

Tokens in references/design.md. Kurzgefasst:

• Seitenhintergrund #f5f5f7, Text #1d1d1f, sekundär #6e6e73, Akzent = das Blau des Produkts, Systemrot #ff3b30 für Kosten und das Touch-ID-Glyph, Systemgrün für Erfolg. Nur heller Modus.
• SF Pro via -apple-system; Überschriften 76–120 px, Gewicht 600–700, Buchstabenabstand −0,03 bis −0,04 em; SF Pro Rounded für Uhren.
• Randlose Verlaufskarten (blau, grün, Schiefer mit SVG-Körnung, schwarz mit Verlauf-geclipptem monochromem Text) im Geiste der apple.com-Produktseiten.
• Liquid-Glass-Oberflächen: durchscheinend weiß, beleuchteter Rand, Kapselformen, breiter weicher Schatten, Hintergrundunschärfe. Produkt-UI aus eigener Quelle nachgebaut mit denselben Größen, Gewichten und Texten.
• Echte SF-Symbole gerendert von macOS (tools/render-symbols.swift); echte App-Icons aus installierten Apps extrahiert. Hebe Wörter mit **…** durch Rich.tsx hervor.
• Text ist zentriert; ein Fenster und seine Zeile bewegen sich als eine zentrierte Gruppe. Ändere niemals den Text unten, während sich oben etwas animiert; platziere Bildunterschriften neben der Aktion und verzögere andere Bewegungen, bis die Zeile gelandet ist.

Text

Prinzipien mit Quellen in references/copy.md. Regeln:

• Einfache Wörter, kurze Zeilen, kein Untertext, es sei denn, er trägt eine Tatsache.
• Überschrift vollständig beschreibend, was das Produkt tut; verwende die der Website wieder.
• Spezifische Zahlen („drei weitere Stunden", „340 Tests", „2:06 Uhr").
• Nutzen zuerst, Funktion als Beweis; behandle die Einwände, die einen Käufer abhalten (Privatsphäre, Aussperrung, Preis, „passt es zu meinem Fall").
• CTA ist ein Aufruf zum Wert mit dem Preis daneben.

Audio

Komponiere das Bett im Code (tools/make-music.py, NumPy + FFmpeg): 126 BPM, Kick auf jeden Beat und Klatschen auf 2/4 ab Takt eins, Zupf-Arpeggio, Sub, Pad; Steigerung + Impact in die Enthüllung und das Schloss; Breakdown beim Entsperren; Auflösung unter dem Abschluss; ein weicher Tick bei jedem Kartenschnitt. Momente sind Parameter am Anfang des Skripts; stimme sie jedes Mal neu ab, wenn der Schnitt sich ändert. Verwende die echten Systemsounds des Produkts, wo es sie hat. Keine lizenzierte Musik.

Arbeitsablauf

1. Lies die Website und Quelle des Produkts für Anwendungsfälle, Textstrings, UI- Aufnahmen, Icons. Lies references/copy.md.
2. Schreibe BRIEF.md und POSITIONING.md.
3. Kopiere templates/promo-project/; setze ROOT in src/theme.ts.
4. Baue zuerst die Zeitleiste (src/timeline.ts: Momente, Texte, Tweens), dann Karten, dann Demos. Generiere die Musik neu nach den Momenten.
5. Verifiziere: dapi check, dann dapi capture Kontaktbögen von jedem Beat; lies sie; korrigiere; erst dann dapi export. Untersuche die MP4 (Dauer, Audio- Spitze) und ordne Beispiel-Frames für die Antwort an.
6. Pipeline-Details und Rasterisierer-Fallen: references/pipeline.md.