Composition launch style Apple

Vidéo de démonstration de produit à la Apple

L'objectif est une page produit apple.com animée : fond clair, police SF Pro avec un grand crénage serré, un seul message à l'écran à la fois, des cartes couleur pleine page, la véritable interface utilisateur du produit, de vrais SF Symbols, de vraies icônes d'applications, un morceau composé entraînant, et un simple appel à la valeur à la fin. Conçue comme une composition Diffusion Studio JSX afin que chaque image soit déterministe et puisse être vérifiée avant l'exportation.

Partez de templates/promo-project/ à côté de ce fichier (une composition complète et fonctionnelle : le film de lancement d'un utilitaire d'écran de verrouillage Mac). Lisez son BRIEF.md et POSITIONING.md pour voir la forme finale.

Méthode de travail

• Les retours arrivent sous forme de listes à puces concises, souvent accompagnées de captures d'écran des images concernées. Appliquez-les toutes ; vérifiez chacune par capture ; exportez ; répondez avec une planche-contact des images.
• Lorsqu'on vous demande de réfléchir, énumérez 3 à 4 options en une ligne chacune, puis construisez la meilleure sans attendre.
• Tenez à jour BRIEF.md (tableau des séquences avec durées et textes) et POSITIONING.md (justification des textes avec sources) à chaque tour.
• N'inventez jamais de preuves : pas de chiffres d'utilisateurs, de citations ou de logos fictifs. Utilisez de vraies captures d'écran, de vraies chaînes de texte provenant des sources du produit, de vraies icônes.
• Rapportez fidèlement : dites ce qui a été vérifié par capture et ce qui ne l'a pas été.

Structure

Un message par carte, coupures franches de chaque côté, un plan de démonstration du produit entre les cartes le cas échéant. Les coupures correspondent à la grille rythmique de la musique.

1. Accroche, 3 s pour arrêter le défilement — le problème du spectateur, le produit en action, pas de logo. Une carte par cas d'utilisation : une fenêtre + une ligne, la paire centrée comme un groupe au milieu du cadre. Couvrez tous les cas d'utilisation listés sur le site web, pas seulement le personnage principal ("Votre agent a besoin de trois heures de plus." / "Votre rendu a besoin de quarante minutes." / "Votre build est à moitié." / "Vous avez besoin de partir.").
2. Problème — une carte uniquement textuelle, les mauvaises alternatives s'empilant au milieu du cadre, le coût en rouge ("Verrouiller ? Le Mac se met en veille.").
3. Révélation — l'icône apparaît sur un temps fort de la musique, le mot-symbole, la ligne d'accroche du site web (correspondance du message avec la page d'accueil).
4. Grille "Conçu pour" — les cas d'utilisation du site sous forme de 4 tuiles : cercle coloré avec un SF Symbol, titre, vraies icônes d'applications en dessous. Pas de sous-texte.
5. Démonstration — la véritable interface utilisateur effectuant la tâche, légendes juste sous l'action, mots-clés mis en évidence.
6. Cartes de fonctionnalités — l'avantage comme titre, la fonctionnalité comme sous-titre. Bleu / ardoise grainée / vert / noir avec texte en dégradé / gris page. Montrez, ne dites pas : une horloge tournant toute la nuit, des touches estampillées "✕ Bloqué" en rouge, des notifications arrivant sur l'écran de verrouillage.
7. Résultat — retour au travail terminé, chaque tâche accomplie.
8. Grille de fonctionnalités supplémentaires — 4 tuiles, une courte ligne chacune.
9. Confiance — "Pas de cloud. Pas de pistage. Pas d'abonnement."
10. Signature — icône + nom, "Essayez-le gratuitement pendant 7 jours.", "Puis 8,99 $, une fois.", l'URL. Rien d'autre.

Durée d'environ 45 s. Cartes d'accroche ≈ 1,3 s, cartes textuelles ≈ 2 s, démonstrations 1,6–2,8 s, grilles ≈ 3,4 s, signature ≈ 7 s. Rythmé, mais chaque écran reste suffisamment longtemps pour être lu.

Aspect visuel

Jetons dans references/design.md. En résumé :

• Fond de page #f5f5f7, texte #1d1d1f, secondaire #6e6e73, accent = le bleu du produit, rouge système #ff3b30 pour les coûts et le glyphe Touch ID, vert système pour le succès. Mode clair uniquement.
• SF Pro via -apple-system ; titres 76–120 px, graisse 600–700, espacement des lettres −0,03 à −0,04 em ; SF Pro Rounded pour les horloges.
• Cartes dégradées pleine page (bleu, vert, ardoise avec grain SVG, noir avec texte mono découpé par dégradé) dans l'esprit des pages produit apple.com.
• Surfaces Liquid Glass : blanc translucide, bord lumineux, formes en capsule, ombre portée large et douce, flou d'arrière-plan. Interface utilisateur du produit reconstruite à partir de ses propres sources avec les mêmes tailles, graisses et textes.
• Vrais SF Symbols rendus depuis macOS (tools/render-symbols.swift) ; vraies icônes d'applications extraites des applications installées. Mettez en évidence les mots avec **…** via Rich.tsx.
• Texte centré ; une fenêtre et sa ligne se déplacent comme un groupe centré. Ne changez jamais le texte en bas pendant qu'une animation se produit en haut ; placez les légendes à côté de l'action et retardez tout autre mouvement jusqu'à ce que la ligne soit arrivée.

Contenu textuel

Principes avec sources dans references/copy.md. Règles :

• Mots simples, lignes courtes, pas de sous-texte sauf s'il apporte un fait.
• Titre entièrement descriptif de ce que fait le produit ; réutilisez celui du site.
• Chiffres précis ("trois heures de plus", "340 tests", "2:06 AM").
• Avantage d'abord, fonctionnalité comme preuve ; traitez les objections qui empêchent un achat (confidentialité, verrouillage, prix, "est-ce que cela correspond à mon cas").
• L'appel à l'action est un appel à la valeur avec le prix à côté.

Audio

Composez le fond sonore en code (tools/make-music.py, numpy + ffmpeg) : 126 BPM, kick sur chaque temps et clap sur les temps 2 et 4 dès la première mesure, arpège de cordes pincées, sub, nappe ; montée + impact lors de la révélation et du verrouillage ; descente lors du déverrouillage ; résolution sous la signature ; un tic doux à chaque coupure de carte. Les moments sont des paramètres en haut du script ; réajustez-les dès que la coupure change. Utilisez les véritables sons système du produit là où il en a. Pas de musique sous licence.

Flux de travail

1. Lisez le site et les sources du produit pour les cas d'utilisation, les chaînes de texte, les captures d'interface, les icônes. Lisez references/copy.md.
2. Rédigez BRIEF.md et POSITIONING.md.
3. Copiez templates/promo-project/ ; définissez ROOT dans src/theme.ts.
4. Construisez d'abord la timeline (src/timeline.ts : moments, textes, interpolations), puis les cartes, puis les démonstrations. Régénérez la musique en fonction des moments.
5. Vérifiez : dapi check, puis dapi capture les planches-contact de chaque séquence ; lisez-les ; corrigez ; ensuite seulement dapi export. Sondez le MP4 (durée, pic audio) et disposez en mosaïque des images d'échantillon pour la réponse.
6. Détails du pipeline et pièges du rasteriseur : references/pipeline.md.