Scènes Web 3D Cinématographiques

Que fait Scènes Web 3D Cinématographiques ?

Les gens décrivent l'animation avec des mots de sensation (« épique », « lisse », « ça se fait engloutir », « comme un film »). Le code a besoin de décisions exactes : ce qui est à l'écran, où se trouve la caméra, ce qui bouge, à quelle vitesse, avec quelle easing, comment c'est éclairé, et ce que fait le texte à chaque point du défilement. Quand ces décisions sont laissées à la supposition, le résultat est techniquement correct mais pas ce qu'ils avaient imaginé — et chaque correction coûte plus cher que de bien faire les choses dès le départ.

Cette compétence comble cet écart en deux étapes : diriger avant de construire (transformer la description en une spécification de scène précise et confirmée) et construire sur une base éprouvée (une architecture et une bibliothèque de techniques qui rendent la spécification fiable à implémenter et fluide à faire défiler).

Elle fonctionne pour n'importe quelle scène — les scènes du portfolio inclus (un ordinateur portable qui s'ouvre, un atome de compétences en orbite, des logos qui s'enflamment et brûlent, un tunnel de trou noir) sont des exemples travaillés de la méthode, pas un menu dans lequel piocher.

Fichiers

references/scene-language.md   vocabulaire de mouvement précis + traductions de mots vagues en détails
references/scene-spec.md       le format de spécification / storyboard de scène, avec exemples travaillés
references/techniques.md       comment construire chaque type d'effet (caméra, shaders, particules, texte…)
references/architecture.md     le modèle de scène à défilement épinglé, timelines, performances, pièges
references/house-style.md      le style visuel par défaut, et comment adopter un style à partir de références
references/effects.md          les scènes terminées du template, disséquées — copiez ou apprenez-en
references/portfolio.md        construire un portfolio complet à partir du template
references/content-guide.md    les champs de contenu du template
references/portrait-rig.md     le héros portrait animé du template
template/                      site portfolio Next.js complet (l'exemple travaillé)
scripts/create-site.mjs        crée un nouveau site d'une seule page (Next.js, fond maison, prêt pour les scènes)
scripts/new-scene.mjs          génère une nouvelle scène épinglée (section + timeline, + canvas 3D sauf --no-canvas)
scripts/video-frames.mjs       extrait des images d'une vidéo de référence pour étudier le mouvement
scripts/create-portfolio.mjs   copie le template de portfolio complet dans un nouveau dossier
scripts/retheme.mjs            recolore la famille d'accentuation du template

Le flux de travail

1. Comprendre ce qu'ils imaginent

Lisez la demande pour : à quoi sert la page, ce que chaque scène doit montrer, la sensation, les références (sites, vidéos, images, films, jeux), et les contraintes strictes (site existant, framework, couleurs de marque).

S'ils ont donné une référence, étudiez-la avant toute autre chose — elle contient plus d'informations que n'importe quelle description. Images : regardez-les. Vidéo : exécutez scripts/video-frames.mjs et regardez les images dans l'ordre (voir « Lire une vidéo de référence » ci-dessous). Site web : si vous pouvez l'ouvrir, faites-le défiler et prenez des captures d'écran à intervalles. Notez le style (couleur, lumière, typographie, mouvement de fond) séparément de la chorégraphie (ce qui bouge quand) — les gens veulent généralement l'un ou l'autre d'une référence, et vous devriez demander lequel si ce n'est pas clair.

2. Traduire en une spécification de scène

Lisez references/scene-language.md, puis écrivez la spécification dans le format de references/scene-spec.md. Pour chaque scène : l'idée en une phrase, les objets, le style maison ou l'apparence choisie, et une feuille de battements — ce qui est à l'écran à chaque portion du défilement (0–15%, 15–40%, …), avec le mouvement de la caméra, le mouvement (verbe + easing + durée), le changement de lumière/couleur, les effets (particules, distorsion, lueur) et ce que fait le texte.

Les mots vagues sont résolus ici, pas dans le code. « Ça se fait aspirer » devient : les lettres du titre spiralent vers le centre de l'écran, chacune commençant lorsque le bord du vortex l'atteint, tournant de 150° tout en rétrécissant à 15% et en floutant à 6px sur 10% du défilement ; l'arrière-plan se déforme vers le centre dans la même fenêtre. Si un mot pourrait signifier deux choses assez différentes, proposez les deux lectures concrètes et choisissez la plus probable comme valeur par défaut.

3. Confirmer avant de construire

Montrez la spécification à la personne — cela lui prend une minute à lire et économise des heures. Demandez-lui de corriger tout ce qui ne correspond pas à ce qu'elle imaginait, en particulier le rythme (trop rapide / trop lent) et le moment clé de chaque scène. Gardez le message court : la feuille de battements plus 2–3 questions ciblées avec vos réponses par défaut, afin que « oui, vas-y » soit une réponse valide.

Si vous ne pouvez pas demander (une requête unique ou automatisée), allez-y avec vos valeurs par défaut et incluez la spécification dans votre message final pour que la personne puisse rediriger précisément.

4. Construire en couches

Lisez references/architecture.md avant d'écrire du code — commencez par son tableau « est-ce que ceci a besoin de WebGL du tout ? » — et references/techniques.md pour chaque effet de la spécification.

Où va le code :

• Un nouveau site (page d'atterrissage, page produit, toute page unique) : node <skill-dir>/scripts/create-site.mjs <dossier> crée un projet Next.js prêt avec le fond maison, les polices et la configuration lint ; ajoutez-y des scènes.
• Un site existant : travaillez dans leur projet et lisez d'abord « Travailler dans un site existant » dans architecture.md.
• Un portfolio complet : commencez par le template (references/portfolio.md).

Construisez ensuite chaque scène dans cet ordre, en vérifiant après chaque couche :

1. Blocage — la section épinglée, la timeline de défilement avec un emplacement par battement, des formes fictives et le chemin de la caméra. scripts/new-scene.mjs <projet> <Nom> --beats N génère ce squelette, déjà câblé (progression du défilement → timeline partagée → caméra 3D et légendes DOM, repli pour mouvement réduit, pause quand hors écran) ; ajoutez --no-canvas pour les effets DOM uniquement. Faites défiler : les battements sont-ils dans le bon ordre et au bon rythme ?
2. Mouvement — les vrais mouvements et transitions, avec leurs easings et durées de la spécification. Le timing est ce à quoi les gens réagissent le plus ; faites-le bien avant de le rendre joli.
3. Apparence — matériaux, lumière, couleur, lueur, particules, arrière-plan, typographie.
4. Polissage — inclinaison du pointeur, dérive au ralenti, petit mouvement secondaire, cadrage mobile, mouvement réduit.

Exécutez npm run lint avec la construction — les règles React attrapent les erreurs de mutation par image avant qu'elles ne deviennent des bugs subtils.

5. Vérifier par rapport à la spécification

Construisez (npm run build), exécutez-le, et prenez une capture d'écran de chaque battement à sa position de défilement. Comparez chaque capture à la feuille de battements ligne par ligne : cet objet est-il là, la caméra est-elle cadrée comme décrit, le texte est-il présent, la couleur est-elle correcte ? Corrigez ce qui ne correspond pas avant de le montrer. Attendez une seconde après le défilement avant chaque capture — les scènes se mettent en place en douceur. Vérifiez également un viewport de taille téléphone (375×812) et le mouvement réduit. Si vous n'avez pas d'outil de navigation, dites clairement que les scènes ont été construites mais pas regardées, et listez ce qu'il faut vérifier.

6. Affiner avec un langage précis

Quand la personne réagit (« ça fait cheap », « trop », « pas assez dramatique »), traduisez le retour avec scene-language.md de la même manière que la demande originale, proposez le changement spécifique (« ralentir la plongée de 8% à 14% du défilement et ajouter une pause de 0,3s avant »), puis faites-le. Changez une chose à la fois quand ils ne sont pas sûrs, afin qu'ils puissent dire ce qui a aidé.

Lire une vidéo de référence

node <skill-dir>/scripts/video-frames.mjs <vidéo> --every 0.25 --out frames/

Cela nécessite ffmpeg (le script explique comment l'installer s'il manque). Regardez les images dans l'ordre et notez, par tranche de temps : ce qui est à l'écran, ce qui a bougé et comment (direction, vitesse, easing — accélère-t-il, dépasse-t-il, se stabilise-t-il ?), la caméra (statique, poussée, orbite, secousse), les coupures vs les mouvements continus, et la couleur/lumière. Cette liste est la première ébauche de la feuille de battements. Pour les moments rapides, relancez avec --every 0.04 sur cette seule tranche (--from, --to).

Non-négociables

Ceux-ci proviennent de vrais échecs ; chacun a une raison dans architecture.md.

• Chaque scène a une version à mouvement réduit (une disposition statique qui montre toujours tout le contenu).
• WebGL se charge côté client et se met en pause quand sa section est hors écran ou que l'onglet est caché.
• Le texte 3D et DOM lisent les mêmes fonctions de timeline, donc ils ne peuvent pas dériver.
• Les valeurs liées au défilement dans les sections épinglées utilisent des transformations de fonction, pas des tableaux de plages.
• Lueur simulée (halos additifs), pas de bloom de post-traitement, sauf si la personne accepte le coût.
• Tout le contenu de la page est un texte réel et lisible dans le DOM — pas seulement cuit dans des canvases.
• N'inventez jamais de faits sur une personne ou un produit dans le texte ; le texte de conception est acceptable, les affirmations ne le sont pas. Les prix, spécifications, dates, statistiques et récompenses qui ne vous ont pas été donnés vont dans des [placeholders] visibles.
• Tout ce qui se joue tout seul (une introduction au chargement) a un contrôle de saut visible, et chaque scène a un repli sans WebGL (image d'affiche ou disposition statique).
• Dans le site existant de quelqu'un, ne modifiez que ce dont l'effet a besoin et dites ce qui a été déplacé.

Crédits à conserver

Le template crédite son auteur original et les pièces open source sur lesquelles il repose (React Bits pour ColorBends et Magnet, l'association de polices d'après dungyov.com). Conservez ces crédits lorsque vous réutilisez ces parties.