Vidéo de lancement Frame by Frame

Demandez-moi : le nom de mon produit, un logo (ou laissez-moi dessiner un symbole simple), le texte d’une ligne que l’utilisateur saisit dans la zone de texte, la page qui y répond (titre + 2 à 3 phrases avec une expression-clé), deux noms de fonctionnalités pour les cartes empilées et un morceau de musique. Si j’omets des informations, utilisez les éléments par défaut : le produit « Frame by Frame » dans son hub Whop, un symbole de viseur (quatre crochets autour d’un « FF » en gras), l’invite « Créez une vidéo de lancement pour mon application », une page de leçon intitulée « 2.1 Choisir une référence », les cartes « Lancement » et « Son », et le morceau house gratuit « Rising Forest » de Mixkit ralenti à 124 BPM.

Un jingle carré de 12 secondes présentant le produit, en 1080x1080, avec une fréquence d'images de 29,97 ips (f0–f359), rendu final à 59,94 ips. Un rendu digne d'une keynote Apple : doux, blanc, bleu vif, effet cristallin. La caméra ne coupe jamais sur une image fixe : chaque plan commence en mouvement (décélération progressive, de 12 à 19 % de la distance restante par image) et se termine par une accélération ou un flou progressif. Le flou suit la vitesse et la direction de chaque mouvement.
Palette : page #FDFDFB, brume #B7CFEB, glace #E6F0FA, dégradé bleu foncé #294376 → #769CC2 ciel, marine #1E2F52, bleus accentués #2F6BFF / #3CC8F0 / menthe #4ED6A0, blanc. Type : Inter (400/500/600/700). Aucune trace de violet, de mauve, de magenta ou d’orange.
Histoire : l’en-tête du produit émerge d’une brume bleue à l’intérieur d’une fenêtre d’application claire → un curseur glisse, se tourne vers sa destination, s’agrandit au survol et clique sur le logo → transition abrupte sur la musique qui apparaît, puis sur l’icône de l’application avec quatre carrés orbitant en croix → l’icône se transforme en barre de menus Mac → le curseur clique sur l’icône de la barre de menus, une boîte de dialogue en verre dépoli surgit et le texte s’affiche → bascule rapide vers le haut à travers un flash bleu clair, puis sur la page de réponse qui se met en place → une carte apparaît au-dessus → fondu enchaîné flou sur deux cartes empilées avec des titres géants en verre dépoli → fondu enchaîné flou sur le disque du logo solitaire → transition abrupte sur une page de fin noire avec un logotype lumineux.
Interdits : fondus enchaînés, images figées (sauf une dans S7), kits d’interface utilisateur d’origine, effets lumineux sur le texte de l’interface utilisateur, Math.random, tout ce qui ressemble à un modèle.

Les coordonnées sont exprimées en pixels sur la scène 1080. Le tempo musical k = 0,048 + 0,4838·ks (124 BPM, un temps = 14,5 images). Les trois coupes franches f72, f101 et f159 se produisent 2 images avant un temps : conservez précisément ces images.
S1 f0–71, en-tête + fenêtre + clic : flou #B7CFEB s’estompant en #FDFDFB à f28, maintien d’une lueur bleue au sol #DBEEFD en bas. En-tête sur une seule ligne : disque logo ⌀132 (#FBFCFE, bordure de 1 px #E8E8EA, marque foncée), le nom du produit (Inter 500), une capsule foncée « on Whop » (#2F2E2F, texte blanc) ; le verrouillage complet s’étend de x474 à x1063, la ligne centrale monte y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), avec une dérive de 1 px par image. Le nom apparaît flou à f2, la capsule est fortement floue à f4–5 et se déplace de 15 px vers la gauche en s’affinant. Une fenêtre lumineuse (rayon 93, remplissage #FCFDFF, bande supérieure #F1F6FF, halo bleu au sol) apparaît progressivement autour de l'élément : opacité de 0 à f14, 0,53 à f15, 0,7 à f19 et 1,0 à f24 ; elle est située en haut à gauche (408, 405) et déborde sur les côtés droit et inférieur. À l'intérieur : une barre 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 fiche de cours (764, 700) hors cadre, avec son image de couverture, son titre et la mention « Cours · 8 leçons ». Cursor (flèche noire macOS, contour blanc, 32x39) apparaît f27 à (891,393), glisse vers la gauche en décélérant jusqu'à (770,383) f44, pivote pour pointer vers le bas à gauche f47–51 en plongeant, atterrit sur le côté inférieur droit du disque (629,564) f56 → (587,546) f59 → (555,531) f71; grandit ×1,55 au survol à partir de f56; un anneau de glace mou (#D5F3FF → #F7FEFF, diamètre extérieur 174) s'illumine autour du disque à partir de f53. La caméra effectue un zoom d'environ (540,540): 1.0 f46 → 1.2 f60 en douceur, maintient f61, puis s'atténue en accélérant jusqu'à 1.04 à f71 tandis que le curseur appuie (rétrécit de 15 % f69–71).
S2 f72–100, icône + orbite : icône d’application carrée bleu marine (#294376 → #1E2F52, marque blanche), 276 px à f72, rétrécissant progressivement jusqu’à 178 px à f86, rayon de 28 % de la largeur, sur un disque halo gris #E9E9E7 dont le diamètre augmente de 240 (f75) à 326 (f86). Quatre carrés de 92 px (rayon de 26) tournent dans le sens antihoraire en décélérant et se verrouillent en une croix à un rayon d’orbite d’environ 216 à f86 : blanc (bordure de 1 px #E3E8EF + ombre légère) à gauche, #2F6BFF en haut, #3CC8F0 à droite, #4ED6A0 en bas. f88–100 : l’icône rétrécit en s’accélérant jusqu’à ≈40 px, les carrés glissent dans une rangée sur sa droite (le blanc glisse derrière l’icône), le flou augmente de 0,3 à 6 px.
S3 f101–158, barre de menu + invite : page blanche au-dessus d’un cadre noir d’ordinateur portable (y425–475, surbrillance supérieure n° 686866), barre de menu bleu marine foncé (y477–538), fond d’écran en dessous : dégradé de ciel bleu avec de fines lignes blanches (un grand cercle, deux lignes horizontales, une verticale, une étincelle à quatre points à une intersection, douce lueur turquoise en haut à droite). Groupe de touches blanches à droite de la barre de menu : Wi-Fi, batterie, boutons, logo du produit à x531–584, trois points ⌀36 n° 2F6BFF / n° 3CC8F0 / n° 4ED6A0 à x612, 661, 709, « Lun. 22 juin 9:41 » 34 px. Apparition floue de 3 px et stabilisation par f110. Cursor remonte du bas (f102), se place sur le logo, puis appuie sur f113–117. La caméra effectue un panoramique vers la droite de +125 px entre les images f115 et f130 (plus rapide entre f118 et f120). Une boîte en verre dépoli (verre blanc-bleu sur le ciel, bord supérieur lumineux, rayon 60) apparaît sous le repère f116 : sa largeur atteint un maximum de 744 à f126 et se stabilise à 726 × 228 à f138, aux alentours de x196–922 et y568–797. L’invite de commande s’affiche de f121 (premier « Make » lisible) à f150 (fin) à raison d’environ 1 caractère par image, avec une pause d’une image toutes les 2 à 3 caractères ; le curseur est toujours activé ; trois icônes blanches sont affichées en bas ; le bouton d’envoi est #2F6BFF ⌀51 avec une flèche blanche pointant vers le haut. À partir de f136, toute la scène dérive vers le haut, accélérant dans une inclinaison fouettée (f158 se déplaçant ≈25 px/image, flou vertical ≈6–8 px) tandis que la page se teinte #E6F4FE sur f154–158.
S4 f159–186, page de réponses : page de leçon simplifiée (fil d’Ariane, titre, corps du texte) : colonne de texte x120, corps 47 px, Inter 400 gris #BCBCBA, espacement des lignes 58, une phrase clé (« image par image ») en noir 600. Le texte apparaît flou et décalé de 420 px vers le bas, puis défile vers le haut avec des décalages de 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), avant de se déplacer de −6 px à f186. Flou : 24 px (f159) → 1,5 (f165) → 0. Éclat #E2F4FE s’estompant en #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, déborde du bas) se détache sur la page : image de couverture 627x536, encart de 24 px, rayon de 64, une barre de lumière en haut au centre, légende semi-gras noire de 38 px, sous-légende grise de 23 px. Haut de la couverture y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), puis continue de monter d’environ 4 px par image. Le flou de la carte atteint un maximum de 3,8 px à f189, est net à f201 ; la page en arrière-plan est floue jusqu’à environ 2,5 px. Sortie f207–214 : la carte rétrécit d’environ 5 % et remonte tandis que l’ensemble du cadre devient flou de 1 à 7 px ; couper au pic du flou.
S6 f215–244, deux cartes : page blanche, deux cartes superposées de 538 × 348 (rayon 57, espacement 36) centrées sur x540, la carte du haut se positionnant à y168 à f230, celle du bas à y552. Chacune : illustration de couverture (sans texte intégré), une pilule givrée en haut à gauche (« Module 3 » / « Module 5 »), un cercle givré « ••• » en haut à droite et un grand titre en gras le long du bord inférieur, réalisé en verre dépoli (une copie floue et éclaircie de l’image rognée sur les lettres, coupée par le bord inférieur de la carte) : « Lancement » et « Son ». Les deux apparaissent floues (12 px) et nettes à f224 ; la carte du haut apparaît en grand (8 %) et se positionne à partir de y264 ; la carte du bas se positionne à partir de y927, décalée derrière. Ils dérivent vers le haut de 3 px/image f230–238, puis accélèrent vers le haut et se floutent dans la coupe.
S7 f245–300, disque logo: page #FDFDFB, disque ⌀168 #F6F6F6 avec la marque sombre, monte au centre (haut y569 f245 → 491 f250 → 468 f255 → 456 f269) avec une traînée verticale sur le cadre coupé, reste immobile f269–287 (le seul étirement figé), puis rétrécit en accélérant jusqu'à ⌀123 à f300.
S8 f301–359, carte de fin: fond radial noir (coins #020204, ≈#272729 autour du mot), le logotype en Inter 600, blanc #F3F3F5 avec une lueur serrée plus un large halo doux, centré (540,540). Largeur du mot : ≈1650 px f301 (fluidité horizontale, stries de zoom) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (rétrécissement d’environ 1 px par image) → 492 f350, puis rétrécissement progressif : 450 f355 → 267 f359 avec un flou atteignant 3,5 px. Le film s’interrompt en plein rétrécissement.

1. Une page HTML de 1080x1080 pixels, dessinée par seek(t) en fonction du numéro d'image. Aucune transition CSS, aucun minuteur, aucun générateur de nombres aléatoires (uniquement des hachages initialisés). Les images sont enregistrées sous la forme {f0, f1, render(localFrame)}.
2. Chaque valeur est continue dans le numéro d'image (le master 59,94 rend des demi-images) : animer avec des tables d'images clés kf(image, [[f, valeur],...], ease) et des tables de consultation par image avec interpolation linéaire. Pas de Math.floor sur le mouvement.
3. Flou : Filtre CSS blur pour un flou circulaire, SVG feGaussianBlur avec écart-type x/y séparé pour des effets de flou directionnels. Effet de zoom sur la page de garde : 20 à 30 copies du mot, mises à l’échelle et estompées. Verre dépoli : copie floue et éclaircie de l’arrière-plan, découpée selon la forme.
4. Cursor: une flèche SVG macOS (remplissage noir, contour blanc, ombre douce) avec rotation et mise à l'échelle, réutilisée dans S1, S3, S4.
5. Son (sans voix), exactement 12,075 s : musique à 124 BPM, introduction douce, le drop à 2,47 s (temps 5, la coupure à f72 le précède de 2 images). Effets sonores synthétisés : impact léger à 0,10 s ; souffles atteignant leur apogée aux coupures à 2,402, 3,370, 5,305 et 10,043 s ; transitions précises à 6,240 s et 8,175 s ; clics à 2,33 et 3,83 s ; cliquetis de touches très discrets toutes les ~32 ms entre 4,04 et 5,00 s ; un léger scintillement à 10,05 s. Mastering à −14 LUFS, crête réelle −1 dBTP, pas de fondu sauf sur les 60 dernières millisecondes.
6. Rendu avec Playwright (une capture d'écran par image, polices chargées en premier), encodage H.264 yuv420p à 60000/1001, multiplexage audio.

Mesurez le texte uniquement après le chargement des polices. Un nom de produit long ne tiendra pas là où un nom de 5 lettres pouvait tenir : redimensionnez l’ensemble du verrouillage (espace du disque, nom, pilule) pour qu’il s’adapte à la plage x474–1063, en veillant à ce que la pilule ne dépasse pas du cadre. Un carré d’orbite blanc disparaît sur la page blanche sans bordure de 1 px et sans ombre légère. N’insérez pas d’images avec leur propre texte à l’intérieur des cartes S6, sinon le titre en verre se double. Conservez des cadres de découpe précis, même lorsqu’ils ne sont pas alignés sur un temps. Rien ne se bloque, sauf S7 f269–287. Des tables de flou trop importantes peuvent effacer complètement une forme : si un cadre semble vide, réduisez le flou jusqu’à ce que la forme reste lisible.

Demandez-moi les entrées. Ensuite, montrez-moi 4 images fixes (f40 l'en-tête dans la fenêtre, f86 l'icône en forme de croix, f150 le message de fin, f230 les deux cartes) avant de réaliser le rendu complet du film.

Ask me for: my product name, a logo (or let you draw a simple mark), the one-line thing a user types into the prompt box, the page that answers it (title + 2–3 sentences with one key phrase), two feature names for the stacked cards, and a music track. If I skip any, use the defaults: product "Frame by Frame" living inside its Whop hub, a viewfinder mark (four corner brackets around a bold "FF"), prompt "Make a launch video for my app", a lesson page titled "2.1 Choose a reference", cards "Launch" and "Sound", and Mixkit's free house track "Rising Forest" slowed to 124 BPM.

A 12 second square product sting, 1080x1080, frame numbers at 29.97 fps (f0–f359), master rendered at 59.94 fps. Apple-keynote feel: soft, white, bright blue, glassy. The camera never cuts on a still frame: every shot enters already moving (exponential ease-out, 12–19% of the remaining distance per frame) and leaves on an accelerating move or a blur ramp. Blur follows speed and direction on every move.
Palette: page #FDFDFB, haze #B7CFEB, ice #E6F0FA, deep blue #294376 → #769CC2 sky gradient, navy #1E2F52, accent blues #2F6BFF / #3CC8F0 / mint #4ED6A0, white. Type: Inter (400/500/600/700). No purple, violet, magenta or orange anywhere.
Story: the product header rises out of a blue haze inside a light app window → a cursor glides in, turns to face where it's going, grows on hover and clicks the logo → hard cut on the music drop to the app icon with four squares orbiting into a cross → the icon collapses into a Mac menu bar → the cursor clicks the menu-bar icon, a frosted glass prompt box springs out and the prompt types → whip-tilt up through a light-blue flash into the answer page scrolling into place → a card rises over it → blur-dissolve to two stacked cards with giant frosted-glass titles → blur-dissolve to the lone logo disc → hard cut to a black end card with a glowing wordmark.
Banned: crossfades, frozen frames (except one hold in S7), stock UI kits, glows on UI text, Math.random, anything that looks like a template.

Coordinates are px on the 1080 stage. Music beat k = 0.048 + 0.4838·k s (124 BPM, one beat = 14.5 frames). The three hard cuts f72, f101, f159 land 2 frames before a beat: keep these exact frames.
S1 f0–71, header + window + click: haze #B7CFEB fading to #FDFDFB by f28, keep a blue floor glow #DBEEFD at the bottom. Header on one line: logo disc ⌀132 (#FBFCFE, 1px rim #E8E8EA, dark mark), the product name (Inter 500), a dark capsule pill "on Whop" (#2F2E2F, white text); the whole lockup spans x474–1063, centre line rises y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), drifting 1 px/frame after. Name appears f2 blurred, pill f4–5 heavily blurred and sliding 15 px left as it sharpens. A light hub window (radius 93, fill #FCFDFF, top band #F1F6FF, blue inner floor glow) fades in around it: opacity 0 to f14, 0.53 f15, 0.7 f19, 1.0 f24; top-left corner (408,405), runs off the right and bottom. Inside: a search pill in the top band, a left icon column (Courses icon at (537,739), faded Chat icon at (537,900)), and a course card from (764,700) off-frame with its cover image, title and "Course · 8 lessons". Cursor (black macOS arrow, white outline, 32x39) appears f27 at (891,393), glides left decelerating to (770,383) f44, rotates to point down-left f47–51 as it dives, lands on the disc's lower right (629,564) f56 → (587,546) f59 → (555,531) f71; grows ×1.55 on hover from f56; a soft ice ring (#D5F3FF → #F7FEFF, outer ⌀174) lights around the disc from f53. Camera zooms about (540,540): 1.0 f46 → 1.2 f60 ease-in-out, holds f61, then eases out accelerating to 1.04 at f71 while the cursor presses (shrinks 15% f69–71).
S2 f72–100, icon + orbit: navy squircle app icon (#294376 → #1E2F52, white mark), 276 px at f72 shrinking ease-out to 178 px by f86, radius 28% of width, on a grey halo disc #E9E9E7 growing ⌀240 (f75) → 326 (f86). Four 92 px squares (radius 26) spin in counter-clockwise, decelerating, and lock into a cross at orbit radius ≈216 by f86: white (1px #E3E8EF edge + faint shadow) left, #2F6BFF top, #3CC8F0 right, #4ED6A0 bottom. f88–100: the icon shrinks accelerating to ≈40 px, the squares slide into a row on its right (white slips behind the icon), blur ramps 0.3 → 6 px.
S3 f101–158, menu bar + prompt: white page above a black laptop bezel band (y425–475, top highlight #686866), a dark navy menu bar (y477–538), wallpaper below = the blue sky gradient with thin white line art (one big circle, two horizontal lines, one vertical, a four-point sparkle at a crossing, soft teal glow top-right). Menu bar right cluster in white: Wi-Fi, battery, toggles, the product mark at x531–584, three ⌀36 dots #2F6BFF / #3CC8F0 / #4ED6A0 at x612, 661, 709, "Mon Jun 22  9:41 AM" 34 px. Enters blurred 3 px and settling by f110. Cursor rises from below (f102), sits on the mark, presses f113–117. Camera pans content right +125 px f115–130 (fastest f118–120). A frosted glass box (white-blue glass over the sky, bright top rim, radius 60) springs out from under the mark f116: width peaks 744 at f126 and settles 726x228 by f138 around x196–922, y568–797. The prompt types from f121 (first legible "Make ") to f150 (complete) at about 1 char/frame with a 1-frame hold every 2–3 chars; caret always on; three white outline icons along the bottom; send button #2F6BFF ⌀51 with a white up arrow. From f136 the whole scene drifts up, accelerating into a whip-tilt (f158 moving ≈25 px/frame, vertical blur ≈6–8 px) while the page tints #E6F4FE over f154–158.
S4 f159–186, answer page: a light course lesson page (breadcrumb, title, body): text column x120, body 47 px Inter 400 grey #BCBCBA, line pitch 58, one key phrase ("frame for frame") in black 600. It arrives smeared and 420 px low, scrolls up with offsets 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), then creeps −6 px by f186. Blur 24 px (f159) → 1.5 (f165) → 0. Flash #E2F4FE fading to #FDFDFB by f165. A cursor pointing straight up rides the scroll and stops under the key phrase (≈(450,591) f180), then drifts right.
S5 f187–214, card: a white card (x203–878, runs off the bottom) rises over the page: cover image 627x536 inset 24 px, radius 64, a light grabber bar at its top centre, caption semibold 38 px black, sub-caption grey 23 px. Cover top y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), then keeps drifting up ~4 px/frame. Card blur peaks 3.8 px at f189, sharp by f201; the page behind blurs to ≈2.5 px. Exit f207–214: card shrinks ~5% and rises while the whole frame blurs 1 → 7 px; cut at the blur peak.
S6 f215–244, two cards: white page, two stacked cards 538x348 (radius 57, gap 36) centred on x540, top card settling at y168 by f230, bottom at y552. Each: cover art (no text baked into it), a frosted pill top-left ("Module 3" / "Module 5"), a frosted round "•••" top-right, and a huge bold title along the bottom edge made of frosted glass (a blurred, lightened copy of the image clipped to the letters, cut off by the card's bottom edge): "Launch" and "Sound". Both enter blurred 12 px and sharp by f224; the top card enters 8% large and rises from y264; the bottom card rises from y927, staggered behind it. They drift up 3 px/frame f230–238, then accelerate up and blur out into the cut.
S7 f245–300, logo disc: page #FDFDFB, disc ⌀168 #F6F6F6 with the dark mark, rises into the centre (top y569 f245 → 491 f250 → 468 f255 → 456 f269) with a vertical smear on the cut frame, holds still f269–287 (the only frozen stretch), then shrinks accelerating to ⌀123 at f300.
S8 f301–359, end card: black radial background (#020204 corners, ≈#272729 around the word), the wordmark in Inter 600, white #F3F3F5 with a tight glow plus a wide soft halo, centred (540,540). Word width: ≈1650 px f301 (horizontally smeared, zoom streaks) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame shrink) → 492 f350, then collapses ease-in: 450 f355 → 267 f359 with blur rising to 3.5 px. The film ends mid-collapse.

1. One HTML page, 1080x1080, drawn by seek(t) as a pure function of the frame number. No CSS transitions, no timers, no Math.random (seeded hashes only). Shots register as {f0, f1, render(localFrame)}.
2. Every value is continuous in the frame number (the 59.94 master renders half frames): animate with keyframe tables kf(frame, [[f, value], ...], ease) and per-frame lookup tables with linear interpolation. No Math.floor on motion.
3. Blur: CSS filter blur for round blur, SVG feGaussianBlur with separate x/y stdDeviation for directional smears. Zoom smear on the end card = 20–30 scaled, faded copies of the word. Frosted glass = a blurred, lightened copy of what's behind, clipped to the shape.
4. Cursor: one SVG macOS arrow (black fill, white outline, soft shadow) with rotation and scale, reused in S1, S3, S4.
5. Sound (no voice), exactly 12.075 s: music at 124 BPM, soft intro, the drop at 2.47 s (beat 5, the f72 cut leads it by 2 frames). Synthesized SFX: soft impact 0.10 s; whooshes peaking at the cuts 2.402, 3.370, 5.305, 10.043 s; transition hits exactly on 6.240 s and 8.175 s; clicks at 2.33 and 3.83 s; very quiet key ticks every ~32 ms over 4.04–5.00 s; a soft shimmer at 10.05 s. Master to −14 LUFS, true peak −1 dBTP, no fade except the last 60 ms.
6. Render with Playwright (one screenshot per frame, fonts loaded first), encode H.264 yuv420p at 60000/1001, mux the audio.

Measure text only after the fonts load. A long product name won't fit where a 5-letter name did: scale the whole lockup (disc gap, name, pill) to fit the span x474–1063, don't let the pill fall off-frame. A white orbit square vanishes on the white page without a 1px edge and a faint shadow. Don't put images with their own text inside the S6 cards, or the glass title doubles up. Keep the cut frames exact even where they don't sit on a beat. Nothing freezes except S7 f269–287. Heavy blur tables can wipe a shape out completely: if a frame looks empty, lower the blur until the shape still reads.

Ask me for the inputs. Then show me 4 stills (f40 header in the window, f86 icon cross, f150 finished prompt, f230 the two cards) before you render the full film.

Extrait de poste @notdwd.