Vidéo produit de style Apple

Vidéo de démonstration de produit de style Apple

L'objectif est une page produit apple.com qui bouge : fond clair, grandes polices SF Pro avec tracking serré, un seul message à l'écran à la fois, des cartes couleur en plein écran, la vraie interface utilisateur du produit, de vrais SF Symbols, de vraies icônes d'application, un morceau entraînant composé, et un simple appel à la valeur à la fin. Construit comme une composition Diffusion Studio JSX pour que chaque image soit déterministe et puisse être vérifiée avant exportation.

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

Style de travail

• Les retours arrivent sous forme de puces concises, souvent avec des captures d'écran des images concernées. Réalisez-les tous ; vérifiez chaque par capture ; exportez ; répondez avec une planche contact des images.
• Lorsqu'on vous demande de réfléchir, listez 3–4 options en une ligne chacune, puis construisez la meilleure sans attendre.
• Tenez BRIEF.md (tableau des séquences avec temps et copie) et POSITIONING.md (raisonnement de la copie avec sources) à jour à chaque tour.
• Ne fabriquez jamais de preuves : pas de nombres d'utilisateurs, de citations ou de logos inventés. Vraies captures d'écran, vraies copies provenant de la source du produit, 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é, une prise de vue démonstration du produit entre les cartes lorsqu'elle existe. Les coupes atterrissent sur 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 devez partir. »).
2. Problème — une carte textuelle uniquement, les mauvaises alternatives s'empilant au milieu du cadre, le coût en rouge (« Verrouiller ? Le Mac dort. »).
3. Révélation — l'icône apparaît sur un hit musical, le mot-symbole, la ligne héroïque propre au site web (correspondance du message avec la page d'accueil).
4. Grille « Conçu pour » — les cas d'utilisation du site en 4 tuiles : cercle coloré avec un SF Symbol, titre, vraies icônes d'application en dessous. Pas de sous-texte.
5. Démonstration — la vraie interface utilisateur faisant la seule chose, légendes juste en dessous de l'action, mots clés en surbrillance.
6. Cartes de fonctionnalités — avantage comme titre, fonctionnalité comme sous-titre. Bleu / ardoise-grain / vert / noir-avec-texte- dégradé / gris-page. Montrez, ne dites pas : une horloge défilant pendant la nuit, des touches estampillées « ✕ Bloqué » en rouge, des notifications arrivant sur l'écran de verrouillage.
7. Résultat — revenir 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. Rythme rapide, mais chaque écran reste assez 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, espacage des lettres −0,03 à −0,04 em ; SF Pro Rounded pour les horloges.
• Cartes dégradées en plein écran (bleu, vert, ardoise avec grain SVG, noir avec texte mono clipé par dégradé) dans l'esprit des pages produit apple.com.
• Surfaces Liquid Glass : blanc translucide, bord lumineux, formes capsules, ombre portée large et douce, flou d'arrière-plan. Interface utilisateur du produit reconstruite à partir de sa propre source avec les mêmes tailles, graisses et copies.
• Vrais SF Symbols rendus depuis macOS (tools/render-symbols.swift) ; vraies icônes d'application extraites des applications installées. Mettez en surbrillance les mots avec **…** via Rich.tsx.
• Le texte est 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 les autres mouvements jusqu'à ce que la ligne soit posée.

Copie

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

• Mots simples, lignes courtes, pas de sous-texte sauf s'il porte un fait.
• Titre entièrement descriptif de ce que fait le produit ; réutilisez celui du site.
• Nombres spécifiques (« trois heures de plus », « 340 tests », « 2:06 AM »).
• Avantage en premier, fonctionnalité comme preuve ; traitez les objections qui arrêtent un acheteur (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 la trame sonore en code (tools/make-music.py, numpy + ffmpeg) : 126 BPM, kick à chaque temps et clap sur 2/4 dès la première mesure, arpeggio en pizzicato, sub, nappe ; montée + impact dans la révélation et le verrouillage ; breakdown au déverrouillage ; résolution sous la signature ; un tick doux à chaque coupe de carte. Les moments sont des paramètres en haut du script ; réglez-les à chaque changement de coupe. Utilisez les vrais sons système du produit là où il en a. Pas de musique sous licence.

Flux de travail

1. Lisez le site et la source du produit pour les cas d'utilisation, les chaînes de copie, les captures d'interface utilisateur, les icônes. Lisez references/copy.md.
2. Écrivez 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, copie, 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 des planches contact de chaque temps fort ; lisez-les ; corrigez ; seulement ensuite dapi export. Analysez le MP4 (durée, pic audio) et disposez les images d'échantillon pour la réponse.
6. Détails du pipeline et pièges du rastériseur : references/pipeline.md.