apple-design

Apple Design: Launch-Filme

Diese Skill erstellt 30–35 Sekunden lange Produktfilme im Stil eines Apple-Launch-Spots. Zwei fertige Filme sind enthalten, und jeder neue Film beginnt auf Basis eines von ihnen:

Film	Look	Verwendung für
films/oto	Poppig. Flächige, gesättigte Farbfelder, die bei jedem Takt wechseln, riesige weiße Wörter, ein verspieltes Produkt, das im Bass mitschwingt, 120 BPM House-Track.	Konsumgadgets, Lautsprecher, In-Ears, Spielzeug, alles, was Spaß macht oder farbenfroh ist.
films/vela	Kinoreif. Schwarze Bühne, studiobeleuchtetes Metall, Bloom, langsame Kamerafahrten, Lichtstrahlen und projizierte Welten, Explosionsdarstellung, 100 BPM Score.	Premium-Hardware, Kameras, Wearables, alles „Durchdachte“.

Öffnen Sie out/sheet.jpg in einem der Ordner (nach einem Render) oder lesen Sie einfach film.js, um jeden Shot zu sehen. references/film-recipe.md erklärt, wie ein Film zusammengesetzt ist, und listet die wiederverwendbaren Shot-Muster auf. Lesen Sie es, bevor Sie einen neuen Film schreiben.

Wie ein Film funktioniert

• films/<name>/index.html richtet Schriftarten und die Typografie-Stile ein.
• films/<name>/film.js baut das Produkt aus Three.js-Primitiven auf und definiert SHOTS, eine Liste von { a, b, f(t, p) }-Zeitbereichen. renderAt(t) setzt die Szene zurück und ruft den Shot für diese Sekunde auf. Jeder Frame ist eine reine Funktion von t: kein Date.now, keine CSS-Animation, kein Zustand, der zwischen Frames weitergereicht wird. Das ermöglicht die framescharfe Ausgabe.
• films/<name>/music.py komponiert den Soundtrack mit numpy und schreibt out/score.wav. Die Oto-Version schreibt auch env.json (Kick-Zeiten und eine Pro-Frame-Bass-Hüllkurve), sodass das Produkt und die Ringe auf den tatsächlichen Track reagieren.
• render.mjs bedient den Ordner, rendert Frames in einem kopflosen Chrome mit GPU und codiert das MP4.

Workflow für einen neuen Film

1. Briefing. Holen Sie den Produktnamen, was es ist und die eine überraschende Eigenschaft, 3–5 echte Fakten (Zahlen mit Einheiten), Farben oder Oberflächen, einen Tagline und einen Launch-Spruch („Coming 2027“). Wenn der Benutzer nur eine grobe Idee hat, erfinden Sie geschmackvolle Details und geben das an. Stellen Sie höchstens eine Frage.
2. Basis-Film auswählen (Oto für poppig, Vela für kinoreif) und kopieren: cp -r films/oto films/<name> (klein, keine Leerzeichen). Löschen Sie den kopierten out/-Ordner und env.json.
3. Zuerst das Beat-Sheet schreiben. Wählen Sie eine BPM (100–124). Legen Sie 8–11 Shots auf dem Takt-Raster an (bei 120 BPM ist ein Takt 2 s, Shots sind also 2, 4 oder 8 s lang), mit den jeweiligen On-Screen-Wörtern. Folgen Sie dem Ablauf aus dem Rezept: Cold Open → Drop → Name → Was es kann → Innenleben → Die eine Zahl → Aufstellung → Stille → Endcard. Zeigen Sie es dem Benutzer als kurze Tabelle, bevor Sie weiterbauen – nur wenn er es überprüfen möchte; ansonsten machen Sie weiter.
4. Produkt modellieren in film.js, ersetzen Sie makeOto / makeDevice. Bauen Sie es aus Drehprofilen, Kugeln, Tori und abgerundeten Quadern mit MeshPhysicalMaterial (Clearcoat, Sheen, Metallness), plus Canvas-Texturen für Gitter, Bildschirme und Etiketten. Geben Sie ihm eine pose(...)- oder setFinish(...)-Funktion, die Shots aufrufen können. Siehe den Modellierungsabschnitt im Rezept.
5. Shots und Typografie umschreiben: SHOTS, CAPS, Labels, Finish-Namen, Endcard. Halten Sie Schnitte auf Takt-Grenzen. Nutzen Sie die vorhandenen Helfer (showWord, showRings, drawField, panels, cam, den Cutaway-Rig, Label-Leitlinien).
6. Musik komponieren, indem Sie die kopierte music.py bearbeiten: Setzen Sie die BPM, die Tonart oder Akkordliste und die Arrangement-Blöcke, sodass jeder Abschnitt mit seinem Shot übereinstimmt (Treffer beim Reveal, Breakdown beim Cutaway, Stille vor der Endcard). Behalten Sie kick_times und den Hüllkurven-Export bei, wenn der Film env.json verwendet.
7. Stills prüfen, dann rendern (aus dem Skill-Ordner):

   python3 films/<name>/music.py
   node render.mjs <name> sheet            # 8 Frames → films/<name>/out/sheet.jpg
   node render.mjs <name> stills 4.2,9,17  # beliebige exakte Sekunden
   node render.mjs <name> final            # → <Name>_Launch_Film.mp4 mit Musik
   

   Sehen Sie sich das Sheet an. Beheben Sie alles Abgeschnittene, Überlappende, Dezentrierte oder Unleserliche vor dem Vollrender. final bei 60 fps dauert etwa 3–8 Minuten für 34 s; verwenden Sie final 30 für einen schnellen Entwurf.
8. Ausliefern. Geben Sie den Pfad des endgültigen MP4 und des Kontaktblatts an, listen Sie die Shots in je einer Zeile auf, und bieten Sie gezielte Änderungen an (Kopie, Farben, Timing, Musik).

Setup (einmalig)

cd ~/.claude/skills/apple-design && npm install
python3 -m pip install numpy scipy      # oder verwenden Sie ein venv

Erfordert Google Chrome und ffmpeg. Setzen Sie CHROME_PATH, wenn Chrome an einem ungewöhnlichen Ort ist.

Qualitätsstandard

• Jeder Schnitt und jedes Wort liegt auf dem Takt-Raster des Tracks. Prüfen Sie die a/b-Zeiten gegen die BPM.
• Eine Idee pro Shot. Bildunterschriften ≤ 7 Wörter, riesige Wörter 1 Wort.
• Das Produkt ist gut genug ausgeleuchtet, um seine Form zu erkennen: Key-Licht, Rim-Licht, weicher Kontaktschatten, Umgebungsreflexionen auf Metall.
• Mindestens ein Shot, den nur dieses Produkt haben kann (Otos Cutaway und „lauter hebt es höher“, Velas Wand, Tisch und Decke).
• Die Endcard hat den Namen, einen Tagline und einen Launch-Spruch, dann einen Fade auf der letzten Note.
• Sehen Sie sich vor jedem endgültigen Render ein Kontaktblatt an, jedes Mal.

Leitplanken

„Apple-Stil“ ist der Look. Verwenden Sie keine Apple-Logos, Produktnamen, Marken, SF Pro-Dateien oder echtes Apple-Material. Schriften hier sind Inter und Inter Tight. Erfinden Sie Produktnamen und Spezifikationen nur, wenn der Benutzer nach einem Konzeptstück gefragt hat, und kennzeichnen Sie es als Konzept.