Landing Flyover : votre landing page en film 3D de 14,5 s

Landing fly-over

Un film fixe et dirigé artistiquement d'une page d'atterrissage. Chaque image est une fonction pure du temps (seek(t) dans WebGL2), capturée avec Playwright, rendue sur le vrai GPU avec un flou de mouvement 16 sous-rames, encodée avec ffmpeg. Pas d'éditeur vidéo, pas de timeline, pas de coupes.

Vous devez exécuter du code sur la machine de l'utilisateur. Si vous ne le pouvez pas (interface de chat uniquement), dites-le directement : vous pouvez décrire le film, mais le MP4 nécessite un agent de codage avec un shell (Claude Code, Codex, Cursor…).

0. Demander les entrées

Demandez une fois, en un seul message :

1. Lien de la page d'atterrissage.
2. Nom de la marque et logo (un PNG carré / chemin SVG ; cherchez d'abord dans le dépôt : logo*, favicon*, brand*).
3. Une phrase de clôture en deux parties : une courte déclaration, puis une courte queue en italique. Gardez la ligne 1 sous ~22 caractères (elle est définie à 74 px dans un cadre de 1440 px). Proposez 2–3 options tirées du texte de la page.
4. Un morceau de 15 secondes (optionnel). S'ils n'en ont pas, proposez d'en trouver un libre de droits (la licence gratuite de Mixkit autorise une utilisation commerciale sans attribution ; téléchargez depuis https://assets.mixkit.co/music/<id>/<id>.mp3). Ne commettez jamais un morceau téléchargé dans un dépôt ; seulement le MP4 final.

1. Configuration

cp -R <ce-dossier-skill>/engine ./flyover && cd flyover
npm install && npx playwright install chromium   # Chrome installé est préféré automatiquement quand présent
cp config.example.json config.json

Nécessite Node 18+, ffmpeg dans le PATH, et Python 3 avec numpy pour la bande-son (opencv-python-headless pour la vérification du flux). Placez le logo à côté de config.json et définissez url, brand, logo, title.

2. Inspecter, puis choisir ce qui se soulève

node inspect.mjs        # → dom.txt (arborescence des sections avec positions dans la page) + inspect.png

Lisez dom.txt et remplissez config.json :

• hero.section : la section héros. hero.mockup : le téléphone/produit/cadre vidéo dans le héros (le film commence en se concentrant dessus et le carton final recadre juste en dessous). hero.tileAnchor : le dernier bouton du héros (les quatre tuiles logo commencent à côté de lui). hero.footerTitle : le dernier grand titre avant le pied de page (il est net à 8,0 s).
• layers : pièces qui se soulèvent, sous forme de { "sel", "role" }, en surchargeant éventuellement z (élévation au repos), zMax (élévation quand la caméra passe) et stand (degrés de redressement vers l'objectif). Rôles et valeurs par défaut :

rôle	utilisation	z → zMax · stand
button	boutons héros/CTA	6 → 28 · 0°
chip	badges, pastilles, onglets, petits logos	4 → 64 · 30°
mockup	le téléphone/produit/cadre vidéo du héros	10 → 24 · 0°
card	cartes de fonctionnalités, tableaux, terminaux, cellules de métriques	6 → 30 · 0°
photo	images dans les cartes, captures d'écran, exemples de code	8 → 115 · 46°
flychip	1–2 petites puces qui volent hors du cadre	4 → 200 · 54°
testimonial	une carte de citation/terminal ; montre un bord blanc de 34 px	22 → 112 · 30°

Gardez la plupart des soulèvements petits (20–40 px). Visez 15–35 pièces sur toute la page, quelques-unes par section. Les pièces imbriquées sont autorisées : listez la pièce intérieure (photo) avant sa carte.

• waitFor : sélecteurs de nombres en direct alimentés par une API (compteurs de visiteurs, compteurs de jetons). La capture attend que chacun affiche un chiffre non nul avant de figer la page ; sinon ils peuvent filmer comme « 0 ».
• hide : bannières de cookies, widgets de chat, popups. css : tout CSS supplémentaire pour forcer l'état final des effets entraînés par le défilement (par exemple mots qui s'allument au défilement). routes : [{ "match": "**/broken.jpg*", "file": "/abs/local/copy.jpg" }] pour les ressources que le site en direct ne parvient pas à servir.

3. Capturer et figer la page

node capture.mjs

Ceci fait défiler vers le bas une fois (images paresseuses, compteurs, révélations), termine les animations, fige les vidéos sur une image (ou leur affiche), réduit les sections « piste » collées au défilement (les espaces de défilement collants + 200vh filmeraient autrement comme des étendues vides), défixe les barres fixes, puis enregistre la plaque de base en morceaux de 4096 px (Chrome limite une capture à 16384 px de périphérique : les captures plus grandes répètent silencieusement le haut de la page) plus chaque pièce soulevée seule sur fond transparent avec un padding de 28 px, et capture/layers.json avec chaque position.

Regardez la capture avant de chronométrer quoi que ce soit : ouvrez capture/page_*.png et quelques layer_*.png. Vérifiez les images vidéo vierges, le texte à moitié révélé, les régions dupliquées, les popups. Corrigez avec css/hide/routes et recapturez. Figez la page avant le chronométrage : tout changement de hauteur d'une section décale tout ce qui la suit.

4. Images fixes pour approbation

node render.mjs stills 0,1.6,2.5,5,6.5,9.3,11      # → stills/contact_sheet.png

Montrez à l'utilisateur la planche contact et attendez un oui avant le rendu final. Ce que chaque image doit montrer :

• 0s : bas au-dessus du héros, maquette nette, quatre tuiles logo de 32 px à côté du bouton.
• 1,6s : héros qui recule, le titre de la deuxième section traversant le centre, contenu proche en fondu.
• 2,5s : photos de cette section redressées et floutées près de l'objectif ; une puce volante quittant un bord.
• 5s / 6,5s : glisse régulière ; une section nette au centre, douce en dessous ; le témoignage relevé avec son bord blanc.
• 9,3s : vue de dessus, toute la page comme une bande centrée.
• 11s : le carton final : pastille de badge, ligne 1 en Geist 500, queue grise Instrument Serif en italique, le héros sous forme de carte 1018 px, tuiles logo sur ses coins, deux flous doux en bas.

5. Vérifier le mouvement

node render.mjs video preview30.mp4 30 1 && node render.mjs cam
python3 flow.py preview30.mp4     # PASS = la glisse ne s'arrête jamais ni n'inverse, le vol ne zoome jamais

6. Bande-son et rendu

python3 score.py track.mp3 auto     # trouve le drop, le pose sur 9,97s ; whooshes à 8,66s et 9,80s → audio/score.wav
node render.mjs video flyover.mp4 60 16   # → flyover.mp4, plus flyover-audio.mp4 quand audio/score.wav existe

Environ 0,1–0,2 s par image sur un GPU Apple M-series (870 images). Le harnais choisit ANGLE Metal sur macOS, D3D11 sur Windows, Vulkan sur Linux ; s'il signale SwiftShader/llvmpipe, vous êtes sur un rasteriseur logiciel et ce sera lent.

Le film (fixe : ne le rechronométrez pas par page)

• 14,5 s à 60 ips, 1440x1152. Vol 0–8,2 s · montée 7,75–9,25 s · vue de dessus 9,25–9,47 s · plongée 9,47–9,97 s · carton titre 9,97–14,5 s.
• Une seule caméra, jamais de coupe. Longueur focale 1880 px, inclinaison 56°, distance avec easing 1360→1700 px, jamais de virage. La vitesse le long de la page est une courbe intégrée (part de croisière) : 0 → 0,5 à 0,6 s, maintenue jusqu'à 1,25 s, 1,0 à 1,6 s, maintenue jusqu'à 7,3 s, easing vers 0,12 à 8,3 s. La croisière est résolue pour que le titre de pied de page soit net à 8,0 s, donc les pages longues glissent plus vite.
• Profondeur de champ par pixel : flou = 75·(focus−profondeur)/profondeur devant, 6·(profondeur−focus)/profondeur derrière, plafonné à 120 px ; 40 échantillons en angle d'or à partir des niveaux de mip, pivotés par sous-image de flou de mouvement ; le flou de champ proche est dilaté pour que le premier plan flou déborde sur l'arrière-plan net.
• Les pièces soulevées se redressent autour de leur milieu (bord supérieur vers l'objectif) et projettent une ombre : la même image en #1a2133 plat, décalée (0,10z, 4+0,36z), floutée 7+0,5z, 26%.
• Montée : zoom logarithmique sur une vitesse trapézoïdale, aplatissement de l'inclinaison 8,15–8,95 s, passant à une caméra qui épingle le bord inférieur de la page à 42 px au-dessus du cadre. Plongée : easing quadratique entrée-sortie en échelle logarithmique avec le bord supérieur épinglé, puis chute à y 283 ; un masque à coins arrondis passe de 24 px → 38 px. Le contenu sous le héros s'estompe d'abord dans la couleur de brume, puis passe en transparent.
• Titre : pastille de badge apparaît à 10,02 s (y 44) ; ligne 1 à partir de 10,12 s un mot toutes les 0,06 s ; queue à partir de 10,36 s un mot toutes les 0,05 s ; chaque mot monte de 16 px depuis un flou de 12 px en 0,34 s. Maintenu avec une dérive de 2%.

Interdit : coupes, fondus enchaînés, arrêts ou à-coups dans la glisse, la caméra qui tourne ou se balance latéralement, zoom avant pendant le vol, lueurs, tout texte sur la page avant le carton final.

Pièges

• Pages immenses : la plaque de base est fragmentée, jamais une seule capture d'écran. Si vous voyez le héros répété à mi-chemin, une capture a dépassé 16384 px de périphérique.
• Sites à défilement : les pistes collantes sont réduites automatiquement ; les surlignages mot par mot au défilement nécessitent une règle css forçant l'opacité totale.
• Vidéos : elles sont figées à videoTime secondes. Si la vidéo du site en direct est en 404, vous obtenez une carte noire ; servez une affiche locale via routes.
• Cartes en fondu : elles montrent ce qui se trouve derrière elles, alors fondez d'abord vers la couleur de brume (le moteur fait cela pour tout ce qui est sous le héros).
• Ligne 1 trop longue : les mots sortent du cadre à 74 px. Raccourcissez la ligne plutôt que de réduire la police.
• Licence : la musique reste la responsabilité de l'utilisateur ; préférez les morceaux dont la licence couvre l'utilisation commerciale en vidéo.