Film de lancement produit style Keynote Apple (Master Prompt @twoclipping)

Rôle

Tu es un réalisateur de films de lancement technologique et motion designer senior expert dans l'esthétique des présentations Keynote Apple et Stripe.

Contexte

Je veux concevoir un film de lancement produit d'exception en 2D, tourné en un seul plan-séquence continu (one continuous take). Chaque scène émerge de la précédente par métamorphose organique : aucun fondu au noir, aucun flou de transition, aucune coupe cut. Les objets changent physiquement de forme sous l'action d'un curseur.

Tâche

<inputs> Demande-moi d'abord : un nom de marque en un seul mot pour le logotype (un verbe d'action fonctionne idéalement), 9 à 12 photographies ou captures de haute résolution de mon produit, un morceau de musique libre de droits à environ 120 BPM avec une montée et une rupture calme (Mixkit, libre d'usage commercial), et un clip vidéo d'arrière-plan de mur épuré avec des ombres de plantes en mouvement (Pexels). </inputs> <direction> Film de lancement de niveau Apple Keynote, 2D pure, un seul plan-séquence ininterrompu. Chaque scène est fabriquée à partir de la précédente : rien ne s'estompe, ne se floute ni ne se coupe brutalement. Les objets changent de forme à la place : le texte surgit d'une ligne de masque vectorielle, les icônes jaillissent de zéro sur un ressort physique, les barres d'outils se dessinent, les pages se poussent, et une forme noire géante inonde parfois l'ensemble du cadre avant de se contracter dans la scène suivante. Toile de fond blanc cassé chaleureux (#f8f7f4), interface noire pure, effet verre liquide (Liquid Glass style iOS 26) au-dessus des photos. Police Archivo (wdth 125, weight 800) pour le logo, Geist pour l'interface. Un curseur pilote chaque micro-interaction avec de vrais clics, glissements et appuis longs. La caméra effectue des zooms studio pour que chaque détail remplisse le carré, et le curseur s'ajuste à l'échelle. Strictement banni : fondus enchaînés, apparitions par flou progressif, effets d'apparition par luminosité, rotations 3D artificielles, particules, lueurs néon, arrêts sur image de plus de 1 seconde, et tout ce qui ressemble à un template préfabriqué. </direction> <structure> 120 BPM, 54 temps musicaux, un événement précis survient sur chaque temps. Ouverture (Open) : Le logo textuel se compresse dans son propre point final comme un accordéon, le point grossit en une pilule noire, un libellé s'élève à l'intérieur. Clic : six lames d'iris d'obturateur se referment sur le libellé et s'ouvrent brusquement sur une photo. Le cercle devient un carré, rétrécit, la grille se déploie depuis l'arrière comme une carte routière en papier (centre, croix, coins), se réorganise en grille bento, et un clic zoome sur une tuile, atterrissant exactement sur le drop musical. Verre liquide (Glass) : Un mot en verre apparaît lettre par lettre, fond en une gouttelette qui s'étire en une barre d'outils en verre dépoli. L'icône de réglage la transforme en curseur de commande. Le glissement rééclaire la photo du plein jour vers l'heure dorée (deux photos alignées), et le bouton se transforme en lentille de verre grossissante pendant la manipulation. Il s'élève en un orbe de verre, la photo suivante s'ouvre à l'intérieur sous forme de cercle, et l'orbe s'étend en un écran de verrouillage : chiffres d'horloge en verre, date, et barre d'accueil qui s'étire en lecteur audio en verre. Scène (Stage) : L'écran de verrouillage recule dans un smartphone (la bordure de l'appareil émerge du bord de l'écran). L'îlot Dynamic Island s'étire comme un liquide, se détache, vole et grandit en une fenêtre Mac qui se déroule comme un store vénitien. Appui long sur le fond d'écran, glissement vers un onglet Safari, la page pousse vers l'avant, relâchez et cela devient le Hero d'une landing page. Défilement : le Hero se métamorphose en un tirage encadré sur une carte produit, avec le passe-partout et les moulures qui naissent des bords de la photo. Choisissez une couleur de cadre (la peinture s'étale) et une taille, puis le bouton de navigation s'envole vers « Commander le tirage ». Commande (Order) : Une forme noire continue de muter : Commandé ✓ → En cours d'impression % → En cours d'acheminement (une camionnette sur une route) → Livré ✓. Mur réel (Wall) : Le cercle livré inonde l'écran bord à bord, tient le noir pendant un temps fort, et se contracte en le cadre photo réel accroché sur le mur de la vidéo réelle avec ombres de plantes en mouvement. Le même diaphragme à iris s'ouvre sur le tirage, se referme, le cadre inonde l'écran et se contracte dans la pilule finale → Logo de clôture. </structure> <build> 1. Un fichier HTML unique, format carré 1440x1440. Chaque style est calculé mathématiquement à partir du temps à l'intérieur d'une fonction asynchrone seek(t) : aucune transition CSS, aucun timer setTimeout/setInterval, aucun état persistant d'une image à l'autre. 2. Les ressorts physiques sont des réponses scalaires analytiques à forme fermée (closed-form step responses). Une valeur ayant plusieurs cibles successives est la somme d'un ressort par impulsion, restant ainsi une fonction mathématique pure du temps. 3. Verre liquide (Liquid glass) : chaque élément en verre contient son propre clone de la scène située derrière lui, filtré avec une carte de déplacement SVG feImage (un champ de distance de rectangle à coins arrondis) à travers trois feDisplacementMaps à des échelles légèrement différentes pour générer des franges chromatiques (aberration optique subtile), plus une lueur de bordure spéculaire (rim light). Pour les lettres en verre : un champ de distance canvas par glyphe génère la carte, le masque et les reflets. 4. Effet de fusion liquide (Goo effect) : flou gaussien + seuillage de canal alpha, puis composition de la source originale par-dessus pour que le verre reste parfaitement net à l'intérieur. 5. Iris mécanique : 6 lames disposées autour d'une ouverture hexagonale. Chaque lame est définie géométriquement par ses deux sommets, les deux prolongements d'arêtes et l'arc court qui les relie. 6. Compression du wordmark (accordéon) : chaque lettre se déplace vers le point final avec le même facteur proportionnel et sa largeur dessinée s'adapte (réduction de l'axe de graisse/largeur wdth de la police variable, mise à l'échelle du reste), de sorte que les lettres restent en contact continu. 7. Vidéo d'arrière-plan : ré-encodage complet en all-intra (ffmpeg -g 1), chargement sous forme d'URL Blob, et attente de l'événement 'seeked' avant de peindre chaque image dans le canvas. 8. Audio : un bruitage SFX téléchargé pour chaque micro-événement (Mixkit), jamais synthétisé artificiellement, chacun positionné précisément sur son pic d'amplitude mesuré. La musique démarre sur un temps fort : le zoom atterrit sur le drop, la scène du mur s'installe dans la rupture calme, et le nom de marque revient sur le temps fort final. Normalisation audio stricte à -14 LUFS. 9. Rendu sous Playwright : 4 sous-images par frame fusionnées avec le filtre tmix de ffmpeg pour un flou de mouvement (motion blur) naturel à 60fps. Vérification d'une image par temps fort, puis détection algorithmique des sursauts d'une seule frame (pics de différence entre images 3x supérieurs aux voisines). </build> <gotchas> La propriété backdrop-filter: url() interprète mal les cartes de déplacement SVG sous Chromium : clonez la scène sous-jacente manuellement à la place. Une inondation d'écran (flood) doit dépasser largement les coins et durer environ 0,3s, sinon la moitié de l'écran change brutalement en une seule frame. Un élément enfant avec visibility: visible transparaît à travers un parent masqué : utilisez toujours inherit. Le texte qui permute à l'intérieur d'une forme en métamorphose nécessite son propre masque de découpe dédié. Le serveur python http.server ne prend pas en charge les requêtes de recherche d'intervalle (range-seek) pour la vidéo : utilisez impérativement une URL Blob. </gotchas> <start> Demande-moi d'abord les paramètres d'entrée (<inputs>), puis montre-moi la carte rythmique des 54 temps et 4 images de contrôle (ouverture, verre, scène smartphone, mur réel) avant d'écrire le code complet du film. </start>

Format

Le code source autonome complet (HTML5/Canvas, SVG displacement shaders, script de capture Playwright et chaîne ffmpeg), précédé de l'étape de cadrage interactive.