Invite vidéo de lancement de produit de 12 secondes

<inputs> Demande-moi : le nom de mon produit, un logo (ou laisse-moi dessiner un motif simple), mes couleurs de marque (ou extrais-les de mon logo), la phrase d'une ligne que l'utilisateur tape dans la zone de prompt, la page qui y répond (titre + 2-3 phrases avec une phrase clé), deux noms de fonctionnalités pour les cartes empilées, et un morceau de musique. Si j'en saute une, utilise les valeurs par défaut : produit "Frame by Frame" vivant dans son hub Whop, un motif de viseur (quatre coins entrecroisés autour d'un "FF" en gras), prompt "Make a launch video for my app", une page de leçon intitulée "2.1 Choose a reference", cartes "Launch" et "Sound", et le morceau house gratuit de Mixkit "Rising Forest" ralenti à 124 BPM. </inputs> <direction> Un spot produit carré de 12 secondes, 1080x1080, numéros de frame à 29,97 fps (f0-f359), rendu maître à 59,94 fps. Ambiance keynote Apple : doux, blanc, bleu vif, vitré. La caméra ne coupe jamais sur une image fixe : chaque plan entre déjà en mouvement (ease-out exponentiel, 12-19 % de la distance restante par frame) et sort sur un mouvement accéléré ou une rampe de flou. Le flou suit la vitesse et la direction à chaque mouvement. Palette : mes couleurs de marque mappées sur ces rôles ; si je n'en donne aucune, utilise page #FDFDFB, haze #B7CFEB, ice #E6F0FA, deep blue #294376 → #769CC2 dégradé ciel, navy #1E2F52, bleus d'accent #2F6BFF / #3CC8F0 / mint #4ED6A0, blanc. Typographie : Inter (400/500/600/700). Pas de violet, magenta ou orange nulle part. Histoire : l'en-tête du produit s'élève d'une brume bleue dans une fenêtre d'app claire → un curseur glisse, se tourne pour faire face à sa direction, grossit au survol et clique sur le logo → coupe franche sur le drop musical vers l'icône d'app avec quatre carrés orbitant en croix → l'icône se réduit en barre de menu Mac → le curseur clique sur l'icône de la barre de menu, une boîte de prompt en verre dépoli jaillit et le prompt se tape → whip-tilt vers le haut à travers un flash bleu clair dans la page de réponse qui défile en place → une carte s'élève dessus → fondu flou vers deux cartes empilées avec d'énormes titres en verre dépoli → fondu flou vers le disque de logo seul → coupe franche vers une carte de fin noire avec un wordmark lumineux. Interdit : fondus enchaînés, images figées (sauf un maintien en S7), kits UI stock, lueurs sur le texte UI, Math.random, tout ce qui ressemble à un template. </direction> <structure> Les coordonnées sont en px sur la scène 1080. Temps musical beat k = 0,048 + 0,4838·k s (124 BPM, un beat = 14,5 frames). Les trois coupes franches f72, f101, f159 tombent 2 frames avant un beat : garde ces frames exactes. S1 f0-71, en-tête + fenêtre + clic : haze #B7CFEB s'estompant vers #FDFDFB à f28, garde une lueur de sol bleue #DBEEFD en bas. En-tête sur une ligne : disque de logo ⌀132 (#FBFCFE, bord 1px #E8E8EA, motif sombre), le nom du produit (Inter 500), une pilule sombre "on Whop" (#2F2E2F, texte blanc) ; l'ensemble s'étend de x474 à 1063, la ligne centrale monte y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), dérivant de 1 px/frame après. Le nom apparaît flou à f2, la pilule f4-5 très floue et glissant de 15 px vers la gauche en se nettooyant. Une fenêtre de hub claire (rayon 93, remplissage #FCFDFF, bande supérieure #F1F6FF, lueur de sol intérieure bleue) apparaît autour : opacité 0 à f14, 0,53 f15, 0,7 f19, 1,0 f24 ; coin supérieur gauche (408,405), s'étend hors du cadre à droite et en bas. À l'intérieur : une pilule de recherche dans la bande supérieure, une colonne d'icônes à gauche (icône Cours à (537,739), icône Chat estompée à (537,900)), et une carte de cours de (764,700) hors cadre avec son image de couverture, titre et "Course · 8 lessons". Curseur (flèche macOS noire, contour blanc, 32x39) apparaît à f27 à (891,393), glisse vers la gauche en décélérant vers (770,383) f44, pivote pour pointer en bas à gauche f47-51 en plongeant, atterrit sur le coin inférieur droit du disque (629,564) f56 → (587,546) f59 → (555,531) f71 ; grossit ×1,55 au survol à partir de f56 ; un anneau ice doux (#D5F3FF → #F7FEFF, ⌀ extérieur 174) s'allume autour du disque à partir de f53. La caméra zoome autour de (540,540) : 1,0 f46 → 1,2 f60 ease-in-out, maintient f61, puis ease-out en accélérant vers 1,04 à f71 pendant que le curseur appuie (rétrécit de 15 % f69-71). S2 f72-100, icône + orbite : icône d'app squircle navy (#294376 → #1E2F52, motif blanc), 276 px à f72 rétrécissant ease-out vers 178 px à f86, rayon 28 % de la largeur, sur un disque de halo gris #E9E9E7 grandissant ⌀240 (f75) → 326 (f86). Quatre carrés de 92 px (rayon 26) tournent en sens antihoraire, décélérant, et se verrouillent en croix à un rayon d'orbite ≈216 à f86 : blanc (bord 1px #E3E8EF + ombre légère) à gauche, #2F6BFF en haut, #3CC8F0 à droite, #4ED6A0 en bas. f88-100 : l'icône rétrécit en accélérant vers ≈40 px, les carrés glissent en rangée à sa droite (le blanc passe derrière l'icône), rampe de flou 0,3 → 6 px. S3 f101-158, barre de menu + prompt : page blanche au-dessus d'une bande de châssis d'ordinateur portable noire (y425-475, surbrillance supérieure #686866), une barre de menu navy sombre (y477-538), fond d'écran en dessous = dégradé de ciel bleu avec fines lignes blanches (un grand cercle, deux lignes horizontales, une verticale, une étincelle à quatre points à une intersection, lueur teal douce en haut à droite). Cluster droit de la barre de menu en blanc : Wi-Fi, batterie, toggles, le motif du produit à x531-584, trois points ⌀36 #2F6BFF / #3CC8F0 / #4ED6A0 à x612, 661, 709, "Mon Jun 22 9:41 AM" 34 px. Entre flou 3 px et se stabilise à f110. Le curseur monte d'en bas (f102), se pose sur le motif, appuie f113-117. La caméra panne le contenu vers la droite +125 px f115-130 (plus rapide f118-120). Une boîte en verre dépoli (verre blanc-bleu sur le ciel, bord supérieur lumineux, rayon 60) jaillit sous le motif f116 : largeur maximale 744 à f126 et se stabilise à 726x228 vers f138 autour de x196-922, y568-797. Le prompt se tape de f121 (premier "Make " lisible) à f150 (complet) à environ 1 caractère/frame avec un maintien de 1 frame toutes les 2-3 caractères ; curseur toujours allumé ; trois icônes à contour blanc le long du bas ; bouton d'envoi #2F6BFF ⌀51 avec une flèche blanche vers le haut. À partir de f136, toute la scène dérive vers le haut, accélérant dans un whip-tilt (f158 se déplaçant ≈25 px/frame, flou vertical ≈6-8 px) pendant que la page se teinte #E6F4FE sur f154-158. S4 f159-186, page de réponse : une page de leçon de cours claire (fil d'Ariane, titre, corps) : colonne de texte x120, corps 47 px Inter 400 gris #BCBCBA, interligne 58, une phrase clé ("frame for frame") en noir 600. Elle arrive étalée et 420 px plus bas, défile vers le haut avec des décalages 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), puis rampe de −6 px à f186. Flou 24 px (f159) → 1,5 (f165) → 0. Flash #E2F4FE s'estompant vers #FDFDFB à f165. Un curseur pointant droit vers le haut suit le défilement et s'arrête sous la phrase clé (≈(450,591) f180), puis dérive vers la droite. S5 f187-214, carte : une carte blanche (x203-878, s'étend hors du bas) s'élève sur la page : image de couverture 627x536 en retrait de 24 px, rayon 64, une barre de préhension claire en haut au centre, légende semi-gras 38 px noir, sous-légende grise 23 px. Haut de couverture y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), puis continue de dériver vers le haut ~4 px/frame. Flou de carte maximal 3,8 px à f189, net à f201 ; la page derrière se floute à ≈2,5 px. Sortie f207-214 : la carte rétrécit ~5 % et monte pendant que tout le cadre se floute 1 → 7 px ; coupe au pic de flou. S6 f215-244, deux cartes : page blanche, deux cartes empilées 538x348 (rayon 57, espace 36) centrées sur x540, carte supérieure se stabilisant à y168 à f230, carte inférieure à y552. Chacune : artwork de couverture (pas de texte cuit dedans), une pilule en verre dépoli en haut à gauche ("Module 3" / "Module 5"), un "•••" rond en verre dépoli en haut à droite, et un énorme titre en gras le long du bord inférieur fait de verre dépoli (une copie floutée et éclaircie de l'image découpée dans les lettres, coupée par le bord inférieur de la carte) : "Launch" et "Sound". Les deux entrent floues 12 px et nettes à f224 ; la carte supérieure entre 8 % plus grande et monte de y264 ; la carte inférieure monte de y927, décalée derrière. Elles dérivent vers le haut de 3 px/frame f230-238, puis accélèrent vers le haut et se floutent dans la coupe. S7 f245-300, disque de logo : page #FDFDFB, disque ⌀168 #F6F6F6 avec le motif sombre, monte au centre (haut y569 f245 → 491 f250 → 468 f255 → 456 f269) avec un étirement vertical sur la frame de coupe, maintient f269-287 (la seule séquence figée), puis rétrécit en accélérant vers ⌀123 à f300. S8 f301-359, carte de fin : fond radial noir (#020204 aux coins, ≈#272729 autour du mot), le wordmark en Inter 600, blanc #F3F3F5 avec une lueur serrée plus un large halo doux, centré (540,540). Largeur du mot : ≈1650 px f301 (étalé horizontalement, traînées de zoom) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame de rétrécissement) → 492 f350, puis s'effondre ease-in : 450 f355 → 267 f359 avec flou montant à 3,5 px. Le film se termine en pleine effondrement. </structure> <build> 1. Une page HTML, 1080x1080, dessinée par seek(t) comme une fonction pure du numéro de frame. Pas de transitions CSS, pas de minuteurs, pas de Math.random (hachages seedés uniquement). Les plans s'enregistrent comme {f0, f1, render(localFrame)}. 2. Chaque valeur est continue dans le numéro de frame (le maître 59,94 rend des demi-frames) : anime avec des tables de keyframes kf(frame, [[f, valeur], ...], ease) et des tables de consultation par frame avec interpolation linéaire. Pas de Math.floor sur le mouvement. 3. Flou : filtre CSS blur pour le flou rond, feGaussianBlur SVG avec écarts-types x/y séparés pour les étirements directionnels. Étirement de zoom sur la carte de fin = 20-30 copies du mot mises à l'échelle et estompées. Verre dépoli = une copie floutée et éclaircie de ce qui est derrière, découpée dans la forme. 4. Curseur : une flèche macOS SVG (remplissage noir, contour blanc, ombre douce) avec rotation et échelle, réutilisée en S1, S3, S4. 5. Son (pas de voix), exactement 12,075 s : musique à 124 BPM, intro douce, le drop à 2,47 s (beat 5, la coupe f72 le précède de 2 frames). SFX synthétisés : impact doux 0,10 s ; whooshes culminant aux coupes 2,402, 3,370, 5,305, 10,043 s ; hits de transition exactement à 6,240 s et 8,175 s ; clics à 2,33 et 3,83 s ; ticks de touches très silencieux toutes les ~32 ms sur 4,04-5,00 s ; un shimmer doux à 10,05 s. Master à −14 LUFS, pic vrai −1 dBTP, pas de fondu sauf les 60 dernières ms. 6. Rendu avec Playwright (une capture par frame, polices chargées d'abord), encodage H.264 yuv420p à 60000/1001, mux de l'audio. </build> <gotchas> Mesure le texte seulement après le chargement des polices. Un nom de produit long ne tiendra pas là où un nom de 5 lettres tenait : mets à l'échelle tout le lockup (espace du disque, nom, pilule) pour tenir dans la plage x474-1063, ne laisse pas la pilule tomber hors cadre. Un carré d'orbite blanc disparaît sur la page blanche sans bord 1px et une ombre légère. Ne mets pas d'images avec leur propre texte dans les cartes S6, sinon le titre en verre se double. Garde les frames de coupe exactes même là où elles ne tombent pas sur un beat. Rien ne se fige sauf S7 f269-287. Les tables de flou lourdes peuvent effacer complètement une forme : si une frame semble vide, baisse le flou jusqu'à ce que la forme reste lisible. </gotchas> <start> Demande-moi les entrées. Puis montre-moi 4 images fixes (f40 en-tête dans la fenêtre, f86 croix d'icône, f150 prompt terminé, f230 les deux cartes) avant de rendre le film complet. </start>