Apple-Startfilm, programmiert in Code
Jedes Pixel des Macs wird in Code gezeichnet: die Menüleiste, die Notch, die Widgets und die Hintergründe. Eine HTML-Datei mit window.seek(seconds), exportiert als MP4.
Bevor du beginnst: Lies brand.md und MOTION.md, falls vorhanden. Falls nicht, führe zuerst brand-intake aus, oder frage nach Hex-Codes, einer Schriftart und einer Logodatei. Nenne niemals ein Ergebnis „on-brand“ ohne diese Angaben.
Ergänzt wird durch ein kostenloses Skill (nicht von mir), das Apples Designrichtlinien in Regeln übersetzt, die Claude befolgt. Installiere es einmal:
npx skills add emilkowalski/skills --skill apple-design
Schritt 1: Frage fünf Dinge ab, dann warte
- Der Produktname und sein Werbeslogan, Wort für Wort.
- Die Faktenliste. Jede Funktion, Zahl und Anforderung, die der Film zeigen darf. Nichts anderes erscheint auf dem Bildschirm.
- Die Szenen. 6 bis 8, jede eine Funktion plus eine kurze Bildunterschrift. Beispiel: „Deine Stimme lebt hier.“
- Eine Referenz (optional): ein echter Mac-Startfilm oder Einzelbilder davon, in einem Ordner namens
ref. Sie bestimmt nur das Aussehen. - Größe und Länge. Standard 1920 x 1080, 30fps, etwa 2,5 Sekunden pro Szene.
Schritt 2: Briefing erstellen (in Claude Code einfügen)
Nutze das apple-design-skill. [Wenn ref/ existiert: Gleiche das AUSSEHEN der Referenz in ref/ an. Lies zuerst jedes Einzelbild. Kopiere nicht deren Worte oder den Produktnamen.]
Es handelt sich um einen Startfilm für [PRODUKT]: Die schwarze MacBook-Notch oben in der Mitte wächst Szene für Szene zu Apple-ähnlichen Widgets heran. Jede Szene hat ihr eigenes Vollbild-Farbverlauf-Wallpaper und eine zentrierte Bildunterschrift unterhalb der Notch, wobei das letzte Wort oder die letzten zwei Wörter in einem helleren Farbton des Wallpapers getönt sind. Es beginnt mit der aufgeklappten Notch und dem Wort „hello“ handschriftlich in einer weißen Skriptlinie, ähnlich dem Mac-Begrüßungsbildschirm.
Verwende nur diese Fakten und füge keine weiteren hinzu:
[FAKTENLISTE]
Szenen, jeweils etwa 2,5 Sekunden:
[1. Notch aufgeklappt auf schwarzem Hintergrund, „hello“ handschriftlich.]
[2..n. Wallpaper-Farbe, was die Notch öffnet, die Bildunterschrift.]
[Letzte. Schwarz: Die Notch schließt sich zu ihrer Ruheform. Bildunterschrift: PRODUKT und sein Werbeslogan.]
Größe [BREITE] x [HÖHE], 30fps. Der Bildrahmen ist ein Mac-Bildschirm: eine dünne macOS-Menüleiste oben mit der Notch in der Mitte. Systemschriftarten (-apple-system, Helvetica Neue als Fallback).
Erstelle es als eine einzige in sich geschlossene HTML-Datei mit window.seek(seconds), die jeden exakten Frame zeichnet. Nimm einen Frame von jeder Szene auf [und vergleiche ihn Seite an Seite mit dem passenden Referenzframe]. Korrigiere Abweichungen und überprüfe die Bewegung anhand des apple-design-skills.
Was ich auf die harte Tour gelernt habe
- Benenne die Notch mit Worten. Bei gleichem Briefing zeichnete ein Modell einen ganzen Laptop. „Die Notch oben in der Mitte des Bildschirms“ ist der Ankerpunkt.
- Federn, keine Tweens. Die Notch sieht richtig aus, wenn Breite und Höhe auf eigenen Kurven federn – beim Öffnen weich und beim Schließen ohne Überschwingen.
- Bewegung vom Filmanfang an planen. Wenn die Notch wieder aufgeht, bevor sie vollständig geschlossen ist, setzt sie an der aktuellen Position fort. Ein pro-Szene-Tween würde springen.
- Vergleiche mit der Referenz, Szene für Szene. Seite-an-Seite-Vergleiche haben ein „hello“ aufgedeckt, das außermittig und zu groß war, eine klobige Fortschrittsanzeige, die dünne Häkchen sein sollte, und eine Eingabeaufforderung, die in die Menüleiste gequetscht wurde.
- Halte die Menüleiste kurz. Ein volles Menü mit Wörtern wird von breiten Widgets halbiert. Fünf Einträge reichen völlig.
- Widgets fügen keine Behauptungen hinzu. Platzhaltertexte sind graue Linien. Jedes UI-Wort, das die Faktenliste nicht vorgegeben hat (Schaltflächenbeschriftungen, eine Uhrzeit), wird zur Genehmigung zurückgemeldet.
Schritt 3: Prüfen und exportieren
Würde ein Fremder in der ersten Sekunde glauben, dass es ein echter Mac ist? Steht jedes Wort auf dem Bildschirm aus der Faktenliste? Füge eine Einstellung für reduzierte Bewegung hinzu, die Federn durch schnelle Überblendungen ersetzt.
Exportiere mit HyperFrames (kostenlos, Open Source): npx skills add heygen-com/hyperframes, dann npx hyperframes render. Für einen vertikalen Schnitt übergib das MP4 an reel-export.