Deck caméra sur une image

Scene deck : une image, une caméra

Un scene deck est une présentation qui vit à l’intérieur d’une seule illustration. Chaque page est une position de caméra sur la même image. La caméra s’enfonce dans un détail, parcourt un chemin dessiné jusqu’à l’objet suivant, saute d’un bout à l’autre de la scène, et revient en plan large à la fin. Les mots se trouvent sur des cartes dessinées dans l’espace écran, et ils apparaissent une fraction de seconde après que la caméra s’est posée, de sorte que le public voit le lieu avant de lire à son sujet.

Ce skill est la méthode qui a produit une conférence de 22 plans et 20 minutes dans @open-slide/core 2.2. open-slide ne possède pas d’API caméra, donc la caméra est pilotée à l’intérieur du composant de la page. template/index.tsx est le moteur complet, accompagné de sept exemples de plans ; copiez-le et remplacez la scène, les ancres et les cartes.

Quand l’utiliser

• La présentation a un lieu : une salle de classe, un bloc opératoire, un atelier, un quartier. Les objets de ce lieu correspondent aux étapes de l’histoire.
• L’orateur souhaite la sensation Prezi (zoomer pour parler, dézoomer pour voir l’ensemble, glisser jusqu’au point suivant) sans utiliser Prezi.
• 15 à 25 plans. En dessous, un diaporama classique suffit ; au-dessus, les mouvements de caméra deviennent un fond de décor.

Ne l’utilisez pas pour des présentations riches en données, des démos en direct, ou quoi que ce soit qui doive être modifié par quelqu’un d’autre dans PowerPoint. C’est une page web ; elle fonctionne dans Chrome.

Le travail, dans l’ordre

1. Storyboard d’abord. Une scène, une liste de stations, une position de caméra et une carte par station, et une liste des éléments réels encore nécessaires (captures d’écran, logs, photos). Notez tout avant tout art ou code. references/storyboard.md contient le tableau et les questions à régler avec l’orateur.
2. Créer la scène. Générez trois candidats de style pour le plan large, laissez l’orateur choisir, puis corrigez l’image avec des modifications image-à-image (supprimez des objets, ajoutez l’élément unique dont l’histoire a besoin, laissez l’écran vide). Générez des plans rapprochés uniquement là où la caméra s’approche à quelques centaines de pixels mondiaux. references/art.md.
3. Mesurer les ancres avec une grille, jamais à l’œil sur un plan large. scripts/measure-grid.sh recadre une région de l’image avec une grille de 100 px ; utilisez un recadrage 3× pour tout ce qui doit tenir dans une capture d’écran. references/art.md.
4. Construire le deck à partir du modèle. Ajoutez une ViewKey, une entrée VIEWS (caméra, mode HUD, flou, pause), un cas HudBody, une page, une note. Le moteur ne change pas. references/engine.md explique chaque réglage.
5. Vérifier, ne pas évaluer à l’œil. Lancez scripts/perf-probe.cjs dans Chrome avec interface graphique : zéro tâche longue et aucun écart d’image supérieur à 50 ms sur tous les changements de page est le seuil. Mesurez sans prendre de captures d’écran ; les captures coûtent 300 ms chacune et ressemblent à du ralentissement. references/verification.md.
6. Enregistrer une visite et la regarder sur un téléphone. scripts/record-walkthrough.cjs joue le deck avec une durée par plan et l’enregistre ; convertissez en mp4 et envoyez-le au téléphone de l’orateur. Chaque cycle de retours dans le projet original provenait de cette boucle, pas du navigateur.
7. Présenter depuis une version buildée. scripts/present.command build, sert dist/, et ouvre le deck ainsi que la fenêtre du présentateur (notes, minuteur, page suivante). Testez sur le projecteur de la salle avec l’ordinateur portable de l’orateur. references/presenting.md.

Règles qui ont été payées

• Marquer une pause avant la carte. La carte attend que la caméra se soit posée plus hold ms (par défaut 1 s). Une carte qui apparaît à 70 % du trajet transforme la scène en fond d’écran.
• Une caméra en plan rapproché doit se situer à l’intérieur de son plan. Si la vue est plus large que le plan, l’image de base agrandie déborde autour et se lit comme une ombre ou une main fantôme.
• Les captures d’écran vont sur des écrans peints via une homographie, mappées au bord intérieur du cadre. Mesurez les quatre coins en 3×.
• Les longs sauts n’ont pas besoin de page intermédiaire. Le chemin van Wijk s’élève et plonge tout seul ; placez les stations éloignées aux extrémités de l’image et laissez-le voler.
• Langage simple sur les cartes. L’image fait la moitié du travail ; la carte reçoit une idée et au maximum quatre lignes.
• N’utilisez jamais MorphElement pour cela. Il copie les styles calculés de chaque descendant sur le thread principal avant le début de l’animation ; un vrai deck a gelé pendant cinq secondes. Voir docs/adr/0001-drive-the-camera-in-page.md.

Ce que contient ce dossier

Chemin	Contenu
template/index.tsx	Le moteur et sept exemples de plans. Copiez dans slides/<id>/index.tsx.
template/assets/	Exemple de scène (2752 × 1536), plan rapproché, capture d’écran d’application. Remplacez-les.
references/engine.md	Fonctionnement de la caméra, du HUD, de la pause, des plans et de l’écran en perspective ; comment ajouter un plan.
references/storyboard.md	Le tableau du storyboard et les décisions à prendre avant la création artistique.
references/art.md	Suggestion de la scène, correction, mesure des ancres, plans rapprochés.
references/verification.md	Sonde de performance, enregistrement de visite, cycle de relecture sur téléphone.
references/presenting.md	Build, aperçu, fenêtre présentateur, lanceur, solutions de repli.
references/pitfalls.md	Tout ce qui a mal tourné une fois, pour que cela ne se reproduise pas.
scripts/	perf-probe.cjs, record-walkthrough.cjs, measure-grid.sh, genimg.py, genedit.py, present.command.
docs/adr/	Pourquoi la caméra vit dans la page, pourquoi le HUD attend.

Travailler avec l’orateur

Décidez avec lui, dans cet ordre : l’ordre narratif des stations ; si les longs sauts doivent passer par le plan large (c’est automatique) ; quel matériel réel il fournira et quand ; le style artistique (montrez-en trois, choisissez-en un) ; ce qui ne doit pas apparaître dans l’image. Inscrivez chaque décision dans le storyboard avec une date. Ensuite, construisez le deck entier, enregistrez-le et envoyez la vidéo. Attendez-vous à trois ou quatre cycles de remarques qui touchent chacun cinq plans.