apple-design

Apple Design : films de lancement

Cette compétence réalise des films produits de 30 à 35 secondes dans le style d'un spot de lancement Apple. Deux films finis sont fournis, et chaque nouveau film commence à partir de l'un d'eux :

Film	Look	À utiliser pour
films/oto	Pop. Champs de couleurs saturées plates qui changent à chaque temps, grands mots blancs, un produit ludique qui rebondit sur la basse, morceau house 120 BPM.	Gadgets grand public, enceintes, écouteurs, jouets, tout ce qui est amusant ou coloré.
films/vela	Cinématique. Scène noire, métal éclairé en studio, bloom, mouvements de caméra lents, faisceaux lumineux et mondes projetés, vue éclatée, partition 100 BPM.	Matériel haut de gamme, caméras, wearables, tout ce qui est « conçu avec précision ».

Ouvrez out/sheet.jpg dans l'un ou l'autre dossier (après un rendu) ou lisez simplement film.js pour voir chaque plan. references/film-recipe.md explique comment un film est assemblé et répertorie les motifs de plans réutilisables. Lisez-le avant d'écrire un nouveau film.

Comment fonctionne un film

• films/<name>/index.html configure les polices et les styles typographiques.
• films/<name>/film.js construit le produit à partir de primitives Three.js et définit SHOTS, une liste de plages temporelles { a, b, f(t, p) }. renderAt(t) réinitialise la scène et appelle le plan pour cette seconde. Chaque image est une fonction pure de t : pas de Date.now, pas d'animation CSS, pas d'état transmis entre les images. C'est ce qui permet un rendu image parfait.
• films/<name>/music.py compose la bande-son avec numpy et écrit out/score.wav. La version Oto écrit également env.json (temps de kick et enveloppe de basse par image) pour que le produit et les anneaux réagissent à la piste réelle.
• render.mjs sert le dossier, rend les images dans Chrome headless avec le GPU et encode le MP4.

Flux de travail pour un nouveau film

1. Brief. Obtenez le nom du produit, ce qu'il est et ce qu'il a de surprenant, 3 à 5 faits réels (nombres avec unités), les couleurs ou finitions, le slogan et l'accroche de lancement („Arrivée 2027“). Si l'utilisateur ne donne qu'une idée approximative, inventez des détails spécifiques de bon goût et précisez-le. Posez au maximum une question.
2. Choisissez le film de base (Oto pour le pop, Vela pour le cinématique) et copiez-le : cp -r films/oto films/<name> (minuscules, sans espaces). Supprimez le dossier out/ copié et env.json.
3. Écrivez d'abord le découpage. Choisissez un BPM (100–124). Disposez 8 à 11 plans sur la grille de mesures (à 120 BPM une mesure dure 2 s, donc les plans durent 2, 4 ou 8 s), avec les mots à l'écran pour chacun. Suivez l'arc narratif de la recette : ouverture froide → drop → nom → ce qu'il fait → à l'intérieur → le nombre clé → gamme → silence → carton de fin. Montrez-le à l'utilisateur sous forme d'un petit tableau seulement s'ils ont demandé à le valider ; sinon continuez.
4. Modélisez le produit dans film.js, en remplaçant makeOto / makeDevice. Construisez-le à partir de profils de tournage, de sphères, de tores et de boîtes arrondies avec MeshPhysicalMaterial (clearcoat, sheen, metalness), ainsi que des textures canvas pour les grilles, écrans et étiquettes. Donnez-lui une fonction pose(...) ou setFinish(...) que les plans peuvent appeler. Consultez la section de modélisation de la recette.
5. Réécrivez les plans et le texte : SHOTS, CAPS, légendes, noms de gamme, carton de fin. Gardez les coupes sur les limites de temps. Réutilisez les aides déjà présentes (showWord, showRings, drawField, panels, cam, le rig d'incrustation, les lignes de légende).
6. Composez la musique en éditant le fichier music.py copié : définissez le BPM, la liste d'accords ou de notes, et les blocs d'arrangement pour que chaque section corresponde à son plan (hit sur la révélation, breakdown sur l'incrustation, silence avant le carton de fin). Conservez kick_times et l'export de l'enveloppe si le film utilise env.json.
7. Vérifiez les images fixes, puis effectuez le rendu (depuis le dossier de la compétence) :

   python3 films/<name>/music.py
   node render.mjs <name> sheet            # 8 images → films/<name>/out/sheet.jpg
   node render.mjs <name> stills 4.2,9,17  # secondes exactes
   node render.mjs <name> final            # → <Name>_Launch_Film.mp4 avec musique
   

   Regardez la feuille de contact. Corrigez tout ce qui est coupé, superposé, décentré ou illisible avant le rendu complet. final à 60 ips prend environ 3 à 8 minutes pour 34 s ; utilisez final 30 pour un brouillon rapide.
8. Livrez. Donnez le chemin du MP4 final et de la feuille de contact, listez les plans en une ligne chacun et proposez des ajustements spécifiques (copie, couleurs, timing, musique).

Configuration (une fois)

cd ~/.claude/skills/apple-design && npm install
python3 -m pip install numpy scipy      # ou utilisez un venv

Nécessite Google Chrome et ffmpeg. Définissez CHROME_PATH si Chrome se trouve dans un emplacement inhabituel.

Barre de qualité

• Chaque coupe et chaque mot tombe sur la grille rythmique de la piste. Vérifiez les temps a/b par rapport au BPM.
• Une idée par plan. Légendes ≤ 7 mots, mots géants 1 mot.
• Le produit est suffisamment bien éclairé pour qu'on distingue sa forme : lumière principale, lumière de contour, ombre de contact douce, reflets d'environnement sur le métal.
• Au moins un plan que seul ce produit pourrait avoir (l'incrustation d'Oto et « plus fort le soulève plus haut », le mur, la table et le plafond de Vela).
• Le carton de fin comporte le nom, un slogan et une accroche de lancement, puis un fondu sur la dernière note.
• Regardez une feuille de contact avant le rendu final, à chaque fois.

Garde-fous

« Style Apple » désigne l'apparence. N'utilisez pas les logos, noms de produits, marques déposées, fichiers SF Pro ou images réelles d'Apple. Les polices utilisées ici sont Inter et Inter Tight. Inventez des noms de produits et spécifications uniquement lorsque l'utilisateur a demandé une pièce conceptuelle, et étiquetez-la comme concept.