Film de lancement Apple-style, construit en code
Chaque pixel du Mac est dessiné en code : la barre de menu, l'encoche, les widgets et les fonds d'écran. Un seul fichier HTML avec window.seek(seconds), exporté en MP4.
Avant de commencer : lisez brand.md et MOTION.md s'ils existent. Sinon, exécutez d'abord brand-intake, ou demandez des codes hexadécimaux, une police et un fichier logo. N'appelez jamais un résultat "conforme à la marque" sans eux.
Fonctionne avec une compétence gratuite (pas de moi) qui transforme les recommandations de design d'Apple en règles que Claude suit. Installez-la une fois :
npx skills add emilkowalski/skills --skill apple-design
Étape 1 : Demandez cinq choses, puis attendez
- Le nom du produit et son slogan, mot pour mot.
- La liste des faits. Chaque fonctionnalité, nombre et exigence que le film peut montrer. Rien d'autre ne s'affiche à l'écran.
- Les scènes. 6 à 8, chacune avec une fonctionnalité plus une courte légende. Exemple : « Votre voix vit ici. »
- Une référence (facultative) : un vrai film de lancement Mac ou des images de l'un d'eux, dans un dossier appelé
ref. Cela définit uniquement l'apparence. - Taille et durée. Par défaut 1920 x 1080, 30 ips, environ 2,5 secondes par scène.
Étape 2 : Construisez le brief (à coller dans Claude Code)
Utilisez la compétence apple-design. [Si ref/ existe : Adaptez l'APPARENCE de la référence dans ref/. Lisez chaque image d'abord. Ne copiez pas ses mots ni son nom de produit.]
Il s'agit d'un film de lancement pour [PRODUIT] : l'encoche noire du MacBook en haut au centre se transforme en widgets Apple-style, une scène à la fois. Chaque scène a son propre fond d'écran dégradé plein écran et une légende centrée sous l'encoche, avec le dernier mot ou les deux derniers teintés d'une nuance plus claire de la couleur du fond d'écran. Il s'ouvre avec l'encoche agrandie et le mot « hello » écrit à la main dans une fine ligne blanche, comme l'écran d'accueil du Mac.
Utilisez uniquement ces faits, et n'en ajoutez aucun autre :
[LISTE DES FAITS]
Scènes, environ 2,5 secondes chacune :
[1. Encoche agrandie sur fond noir, « hello » manuscrit.]
[2..n. Couleur du fond d'écran, en quoi l'encoche s'ouvre, la légende.]
[Dernière. Noir : l'encoche se referme à sa forme de repos. Légende : PRODUIT et son slogan.]
Taille [LARGEUR] x [HAUTEUR], 30 ips. Le cadre est un écran Mac : une fine barre de menu macOS en haut avec l'encoche au milieu. Polices système (-apple-system, Helvetica Neue en secours).
Construisez-le comme un seul fichier HTML autonome avec window.seek(seconds) qui dessine n'importe quelle image exacte. Capturez une image de chaque scène [et comparez-la côte à côte avec l'image de référence correspondante]. Corrigez ce qui diffère, et vérifiez l'animation par rapport à la compétence apple-design.
Ce que j'ai appris à la dure
- Nommez l'encoche en toutes lettres. Avec le même brief, un modèle a dessiné un ordinateur portable entier. « L'encoche en haut au centre de l'écran » est le point d'ancrage.
- Ressorts, pas d'interpolations linéaires. L'encoche a l'air correcte lorsque la largeur et la hauteur rebondissent sur leurs propres courbes, s'ouvrent en douceur et se ferment sans dépassement.
- Travaillez le mouvement depuis le début du film. Si l'encoche se rouvre avant d'avoir fini de se fermer, elle continue là où elle en est. Une interpolation linéaire par scène saute.
- Comparez avec la référence, scène par scène. La comparaison côte à côte a permis de détecter un « hello » décentré et trop grand, une barre de progression épaisse qui devrait être de fines graduations, et une invite plaquée dans la barre de menu.
- Gardez la barre de menu courte. Un menu complet de mots est coupé en deux par des widgets larges. Cinq éléments suffisent.
- Les widgets n'ajoutent aucune revendication. Le texte d'espace réservé est constitué de lignes grises. Tout mot d'interface utilisateur que la liste des faits ne vous a pas donné (étiquettes de boutons, une heure d'horloge) doit être listé pour approbation.
Étape 3 : Vérifiez et exportez
Un étranger croirait-il que c'est un vrai Mac pendant la première seconde ? Chaque mot à l'écran provient-il de la liste des faits ? Ajoutez un paramètre de mouvement réduit qui remplace les ressorts par des fondus rapides.
Exportez avec HyperFrames (gratuit, open source) : npx skills add heygen-com/hyperframes, puis npx hyperframes render. Pour un montage vertical, transmettez le MP4 à reel-export.