Survol cinématique 3D de landing page (Master Prompt @twoclipping)

Rôle

Tu es un directeur de la photographie 3D et développeur créatif WebGL / Three.js spécialisé dans les présentations de sites web et produits numériques d'exception.

Contexte

Je veux créer une vidéo de survol 3D cinématographique de 14,5 secondes de ma landing page ou application web (résolution 1440x1152 ou 1920x1080 à 60 images par seconde). La page repose à plat sur un sol de studio lumineux avec une caméra continue qui glisse en rase-motte, élève les composants clés en lévitation 3D et plonge sur la carte finale.

Tâche

<inputs> Demande-moi d'abord : le lien vers ma landing page [lien URL], le nom de ma marque et son logo vectoriel SVG [nom de marque], une phrase de conclusion en deux parties (une affirmation forte, suivie d'un court épilogue en italique élégant), et une piste musicale de 15 secondes (optionnelle). </inputs> <direction> Un survol 3D de 14,5 secondes de ma landing page, format 1440x1152 à 60fps. La page repose à plat sur le sol d'un studio lumineux (#f9fbfb au centre, #f2f3f6 dans les coins) avec une ombre portée large et diffuse tout autour et des coins arrondis de 24px. Un seul mouvement de caméra continu, aucun cut : elle commence en rase-motte au-dessus du Hero et glisse vers l'arrière le long de la page à vitesse constante tout en regardant vers le haut, monte à la verticale pour révéler la page entière sous forme de ruban, plonge dans le Hero et le dépose sous forme de carte sous un titre en deux lignes. La profondeur de champ (DoF) est d'une finesse chirurgicale devant le sujet et quasi nulle derrière, de sorte que tout ce qui s'approche de la lentille fond dans un flou optique somptueux. Les cartes flottent légèrement au-dessus de la page avec des ombres douces ; les photos, badges et témoignages décollent et se redressent face à l'objectif au passage de la caméra. Quatre petites tuiles de mon logo décollent près du bouton Hero et accompagnent la caméra jusqu'à la carte de fin. Le titre principal est en Geist 500, l'épilogue en italique Instrument Serif. Strictement banni : coupes franches (cuts), fondus enchaînés, à-coups ou accélérations brutales dans la glisse, rotation ou balancement latéral de la caméra, zooms avant/arrière saccadés, lueurs artificielles, et tout texte superposé sur la page avant la carte finale. </direction> <structure> 14,5 secondes au total : vol rasant 0-8.2s, élévation verticale 7.75-9.25s, vue zénithale d'ensemble 9.25-9.47s, plongée piquée 9.47-9.97s, carte de titre finale 9.97-14.5s. La caméra est inclinée à 56° par rapport à la verticale et située à 1360px de son point de visée, centrée sur la moitié supérieure du Hero, la maquette de smartphone ou de produit étant parfaitement nette, quatre tuiles de logo de 32px à côté du bouton → 0-0.6s : la glisse s'amorce avec douceur depuis l'arrêt → 0.1-1.35s : les tuiles s'élèvent, grandissent à 140-200px et planent juste à l'extérieur des coins supérieurs de la page tandis que les badges du Hero s'élèvent à 60-80px et se redressent de 30° → 1.25-1.6s : la glisse double vers sa vitesse de croisière pendant que le Hero s'éloigne vers l'arrière → 1.6s : le titre de la 2e section passe au centre du cadre, ses photos floutées au premier plan près de la lentille → 1.35-2.7s : les photos principales de cette section s'élèvent à 100-130px et se redressent de 46°, deux de ses badges s'envolent à environ 200px, se redressent de 54° et dépassent les bords gauche et droit à 2.5s → 1.2-2.4s : les tuiles de logo suivent la caméra 300px en retrait le long de la page, puis dérivent hors du champ par le haut → 3.0-7.3s : chaque section suivante défile à la même vitesse régulière, nette lorsqu'elle croise le centre du cadre et douce en dessous ; une tuile de logo dérive le long du bord gauche, très proche et floue à 5.4s → 5.45-6.3s : la carte de témoignage s'élève de 22 à 112px, se redresse de 30° et dévoile une tranche blanche de 34px → 7.3-8.2s : la glisse ralentit en douceur à l'arrivée du pied de page, le titre du footer devenant net à 8.0s → 7.75-9.25s : élévation de la caméra, dézoom à vitesse uniforme pendant que l'inclinaison s'aplatit (8.15-8.95s) et que le bord inférieur de la page se cale à 42px au-dessus du bas du cadre → 9.25-9.47s : la page entière visible sous forme d'un ruban continu centré, se rapprochant de 3,5% → 9.47-9.97s : la plongée piquée, le bord supérieur de la page restant épinglé au haut du cadre pendant qu'il s'agrandit, tout ce qui se trouve sous le Hero s'estompant en fondu, puis le sommet descend à y=283 pour que le Hero atterrisse comme une carte de 1018px de large avec des coins de 38px et une ombre douce ; deux tuiles de logo reposent sur ses coins supérieurs, une nette au bord droit, deux gigantesques flous doux dérivant dans les coins inférieurs → 10.02s : une pilule badge blanche (logo + nom de marque, 21px) apparaît en fondu à y=44 → 10.12s : ligne 1 du titre à 74px, un mot toutes les 0.06s → 10.36s : épilogue en italique à 82px en gris #8b8b92, un mot toutes les 0.05s, chaque mot surgissant de 16px hors d'un flou de 12px en 0.34s → 10.6-14.5s : maintien statique, la carte se rapprochant imperceptiblement de 2%, les tuiles dérivant de quelques pixels. </structure> <build> 1. Ouvre mon lien dans Chromium sans interface (Playwright) à 1440px de large, deviceScaleFactor 2, et fais défiler jusqu'en bas une première fois pour que les images en chargement différé (lazy-loading) et les animations de scroll s'exécutent complètement. Marque les éléments qui doivent décoller en relief (cartes, maquettes de smartphones ou produits, badges, photos de fonctionnalités, témoignage, bouton du Hero) avec l'attribut data-layer. Effectue une capture d'écran de la page complète avec ces éléments masqués, puis capture chaque élément individuellement sur fond transparent avec 28px de marge intérieure (padding), et enregistre la position exacte de chaque composant sur la page dans un fichier JSON. 2. Une page de rendu WebGL2 unique, 1440x1152, chaque image étant calculée mathématiquement à partir du temps à l'intérieur d'une fonction seek(t) : aucun timer, aucune transition CSS. La page est un quadrilatère texturé (textured quad) posé sur le sol et chaque élément a son propre quadrilatère à son altitude respective, dessiné du plus bas au plus haut sans tampon de profondeur (depth buffer). Utilise des mipmaps et un filtrage anisotrope 16x, sinon le texte éloigné scintille et vibre. 3. Pilote la caméra à partir d'une courbe de vélocité continue unique, jamais à partir de positions clés définies toutes les demi-secondes. Distance focale 1880px, inclinaison de 56°, distance s'écartant progressivement de 1360 à 1700px sans jamais se rapprocher, sans aucune rotation latérale. Vitesse le long de la page exprimée en fraction de la vitesse de croisière (la croisière est d'environ 770 px de page par seconde) : 0 à 0s, 0.5 à 0.6s, maintenue à 0.5 jusqu'à 1.25s, 1.0 à 1.6s, maintenue entre 0.94 et 1.1 jusqu'à 7.3s, puis décélérant en douceur à 0.12 à 8.3s. Intègre cette vitesse mathématiquement pour déterminer la position exacte sur la page. 4. Profondeur de champ calculée par pixel (Shader DoF) : rayon de flou = 75 x (mise_au_point - profondeur) / profondeur devant le plan de netteté, et 6 x (profondeur - mise_au_point) / profondeur derrière le plan de netteté, plafonné à 120px, avec 40 échantillons (taps) distribués sur un disque à angle doré (golden-angle disc), chaque échantillon étant lu depuis le niveau de mipmap correspondant au rayon de flou. Maintiens la mise au point sur l'élément qui croise précisément le centre du cadre. 5. Un élément en lévitation se redresse en tournant sur son propre axe central médian, son bord supérieur s'élevant vers l'objectif de la caméra. Chaque élément projette une ombre portée réaliste sur ce qui se trouve sous lui : la même texture aplatie en aplat uni #1a2133, décalée de (0.10z, 4 + 0.36z), avec un flou de 7 + 0.5z, et 26% d'opacité. 6. Élévation (Rise) : dézoom en échelle logarithmique avec une courbe de vitesse trapézoïdale douce (accélération de 7.75 à 8.35s, vitesse constante de 8.35 à 8.95s, décélération jusqu'à l'arrêt à 9.25s) et transmission de la glisse à une caméra qui maintient le bord inférieur de la page sur cette ligne de 42px de 8.3 à 8.65s. Plongée piquée (Dive) : échelle logarithmique avec interpolation quadratique douce (quadratic ease in-out), puis résolution trigonométrique du point de visée (look-at) depuis le bord épinglé. Un masque rectangulaire à coins arrondis se métamorphose de la page complète vers le Hero, passant de coins de 24px à des coins de 38px. 7. Rendu avec Playwright sur le véritable processeur graphique matériel (--use-angle=d3d11 --enable-gpu --ignore-gpu-blocklist) : 60 images par seconde, 16 sous-images calculées sur 0,7 de frame pour un flou de mouvement (motion blur) cinématographique parfait, encodage H.264 MP4. L'impact sonore musical se place à 9.97s, les bruits de balayage d'air (whooshes) à 8.66s et 9.80s. </build> <gotchas> Si tu ne peux pas exécuter de code directement sur ma machine, dis-le-moi immédiatement en précisant que tu peux uniquement générer une prévisualisation interactive en direct ici et que le rendu vidéo final MP4 nécessite Claude Code ou un terminal local. Les cartes ou maquettes qui disparaissent en fondu transparent laissent transparaître tout ce qui se trouve derrière elles : applique d'abord leur fondu vers la couleur de brume ambiante (#f2f3f6) et ne bascule vers la transparence complète qu'à l'ultime frame. Conserve la majorité des élévations d'éléments minimes (20 à 40px) et verrouille la maquette de la page avant de chronométrer quoi que ce soit, car toute modification de la hauteur d'une section décale l'intégralité des sections suivantes. Avant le rendu final, génère une prévisualisation rapide à 30fps mesurée avec flux optique : la vitesse le long de la page ne doit subir aucun creux et le zoom ne doit jamais s'inverser en zoom avant pendant la phase de vol. </gotchas> <start> Demande-moi d'abord les paramètres d'entrée (<inputs>), capture ma page web, puis montre-moi des images fixes de contrôle (stills) à 0s, 1.6s, 2.5s, 5s, 6.5s, 9.3s et 11 secondes avant de lancer le calcul du rendu final. </start>

Format

Le code source complet (script Playwright d'extraction de calques, scène WebGL2 Three.js avec shaders personnalisés et pipeline ffmpeg), précédé du dialogue de cadrage des entrées.