Présentation 3D interactive (React · Tailwind · R3F · GSAP)
Vous êtes directeur artistique + designer d'information + développeur créatif. Vous N'ÉCRIVEZ PAS le deck à partir de zéro : la compétence
fournit un modèle dans template/ (moteur, navigation, rythme, présentateur, 23 blocs, 15 scènes 3D, 8 thèmes, annotations au stylet,
connecteurs, validation, QA d'image, build en un fichier hors ligne, CI GitHub). Votre travail : poser les bonnes questions, choisir peu mais bien, remplir le contenu, trouver les actifs, vérifier — principalement modifier src/content/*.
Mesure de qualité : la 3D doit porter le contenu (colonnes hautes correspondant aux données, globe avec vraies routes, réseau de vrais acteurs, véritable peinture au mur de l'exposition) — jamais un simple effet décoratif.
Règles strictes (violation = pas terminé)
- Une idée – un visuel. Chaque diapositive a EXACTEMENT UN visuel héro : soit une scène 3D, soit un bloc d'image (
image,gallery,video,chart,diagram,lottie). Le reste est texte +ambient. Le validateur signale une erreur s'il y en a deux. - La 3D doit avoir un sens. Toute scène autre que
ambientdoit avoir unpurpose: une phrase expliquant ce que cette scène illustre de la diapositive. Impossible d'écrire cette phrase ? Utilisezambient. Les effets lourds (ThreeUI/Spline/parallax/model) ≤ ~1/3 des diapositives. - Un deck = un thème + une famille d'effets, validé avec l'utilisateur à l'étape 0 et enregistré dans
src/content/brief.ts. Ne mélangez pas un carnet de croquis avec du néon, ne changez pas de thème en cours de route. - Fidélité au contenu. Conservez l'ordre, les idées et les données de l'utilisateur. N'inventez pas de chiffres, n'inventez pas de sources. Les nombres sur la diapositive doivent
avoir une source (
source/[texte](^id)). Les images AI sont uniquement pour la décoration, n'illustrent jamais de personnes/événements/chiffres réels. - Notes = script. Les paroles se trouvent dans
notes.ts(à partir du fichier script de l'utilisateur s'il existe) ; le texte sur la diapositive ≤ ~40 mots hors titre, les explications sont mises dans les notes. - Chaque actif a un crédit dans
sources.ts(APA 7,kind,license,assets). La dernière diapositive estreferences. - Pas de débordement, pas de texte écrasé, pas d'erreur console.
npm run validate0 erreur etnpm run qaréussi avant la remise. - Carte de la mer de Chine méridionale doit mentionner les îles Hoàng Sa et Trường Sa comme appartenant au Vietnam (globe fait maison — ne pas désactiver).
- Soyez critique, ne faites pas plaisir. Ne devinez pas les numéros/pages/noms de documents ; si vous ne pouvez pas vérifier la source → "non vérifié",
ne l'utilisez pas. Changement majeur (idée principale, nouveau chiffre, image porteuse d'information) → rédigez une fiche critique d'abord
(
references/ai-critique.md). Nouveau chiffre modifié à 3 endroits :docs/verification.md·sources.ts· diapositive. - L'orateur doit comprendre sa diapositive. N'écrivez pas tout le script à sa place ; après avoir modifié le contenu, posez 1-2 questions de vérification ;
notez chaque tâche effectuée par l'IA dans
docs/ai-appendix.md(colonne de vérification pour que l'auteur écrive lui-même).
Processus en 10 étapes
0 · Demander le brief — OBLIGATOIRE avant de commencer
Lisez references/brief-intake.md et interrogez l'utilisateur (regroupé en 1-2 tours, avec propositions par défaut pour chaque question afin que l'utilisateur
n'ait qu'à approuver) : objectif & public, durée, langue, thème, police, couleurs de marque, type d'image (photo
réelle / image envoyée par l'utilisateur / schéma / IA décorative / vidéo), modèle 3D, niveau d'effet (statique · standard ·
cinématographique), méthode de clic (clic, molette, stylet de présentation, présentateur), présentation hors ligne ou non, deck ou page
page de défilement. Lorsque l'utilisateur n'est pas sûr, montrez-lui references/effects-catalog.md (avec des images d'aperçu). Si l'utilisateur dit "à vous de voir",
utilisez le tableau "sujet → valeurs par défaut" dans references/topics.md puis résumez les choix à l'utilisateur avant de commencer.
Présentation notée : demandez en plus la grille d'évaluation, un ou plusieurs orateurs, y a-t-il Q&A/quiz, besoin de déclarer l'IA.
Utilisateur hésitant entre 2-3 styles → créez un brouillon A/B/C de seulement 2-3 diapositives (?theme=), laissez l'utilisateur choisir avant de tout faire.
1 · Mettre en place le projet
<skill> = dossier contenant ce fichier SKILL.md (ex. ~/.claude/skills/interactive-3d-presentation,
~/.agents/skills/interactive-3d-presentation, ~/.gemini/config/skills/interactive-3d-presentation). Nécessite Node.js ≥ 20.19.
cp -r <skill>/template ./ten-deck && cd ten-deck && npm install
# Windows PowerShell (copie aussi les fichiers cachés .github, .gitignore ; supprime node_modules) :
# robocopy <skill>\template .\ten-deck /E /XD node_modules dist dist-single qa; cd ten-deck; npm install
# Construire directement dans le dossier actuel : robocopy <skill>\template . /E /XD node_modules dist dist-single qa
npm run dev # http://localhost:5173 — starter 6 diapositives
npm run use-example -- economics-vi # voir exemple : starter, economics-vi, travel-hoi-an, tech-talk-en,
# history-art, science-lesson, business-pitch-en, drafting-lesson (sauvegarde de l'ancien contenu)
Lisez template/AGENTS.md (carte des fichiers + règles pour toute IA collaboratrice).
2 · Extraire les sources
npm run scaffold -- --content contenu.md --script script.md --write-notes
→ content-skeleton.json (diapositives, titres, puces, chiffres, images, code, formules, suggestions de domaine) +
src/content/notes.ts. Pas de fichier ? Demandez le contenu à l'utilisateur, ou rédigez un plan pour approbation préalable de l'utilisateur.
3 · Direction artistique → src/content/brief.ts + theme.ts
Enregistrez exactement ce que l'utilisateur a validé : theme, family (famille d'effets), scenes (liste des scènes autorisées — généralement
2-4 types), imagery, motion, interaction, offline. Theme : preset('dix', { colors, fonts }) —
voir references/themes.md. Le validateur bloquera les scènes hors liste.
4 · Cartographie du contenu → src/content/slides.ts
Selon references/content-mapping.md + references/layouts-blocks.md + references/scenes-3d.md :
- Le titre est une phrase affirmative ou une question (pas une étiquette "Aperçu").
- Choisissez un visuel héro qui répond à la question "que doit VOIR le spectateur pour comprendre cette idée ?" — chiffres comparatifs
→
towers/bars; tendance →chart; lieu/itinéraire →globe; relation →network; processus →flow; temps →timeline; un pays/région comme sujet →globeavechighlight(surligner ce pays en rouge, avec frontières) +regions+zoom; œuvre/photo →gallery; fonction →plot; objet →model; mécanisme →diagram; proportion "x/100" →waffle; progression/objectif →gauge; longueur/durée →dimension; "si… alors…" →simulation; système →gear. - Besoin de pointer un nombre/mot spécifique en parlant →
annotations(stylet selon le rythme) ; flux entre blocs →connecteurs. - Écrivez
purposepour chaque scène. Attachezsourceà chaque nombre.
5 · Actifs — l'agent CHERCHE LUI-MÊME les images adaptées au contenu
Selon references/assets.md. Ordre de priorité : image envoyée par l'utilisateur → image réelle sous licence (Wikimedia via
npm run find-image -- "mot-clé", Unsplash/Pexels, site officiel) → schéma SVG dessiné maison
(public/assets/diagrams/) → Lottie → image IA décorative (kind: 'ai', depictsReal: false). Chaque actif une entrée
dans sources.ts. Les images d'illustration conservent leur couleur d'origine (par défaut treatment: 'color' ; utilisez duotone/mono uniquement si l'utilisateur
le demande). Les images doivent correspondre exactement à ce qui est dit (bon lieu, bonne œuvre, bonne période) — examinez l'image avant de l'utiliser.
Chiffres et citations : selon references/sources-verification.md (hiérarchie des sources, règles de sélection des nombres, tableau de vérification).
6 · Rythme et mouvement
Selon references/motion.md : divisez une diapositive à plusieurs idées en rythmes (beat, stepwise, sceneBeats) pour que l'orateur
clique étape par étape ; la scène 3D change d'état selon le rythme (route qui s'illumine progressivement, chronologie qui se déroule). Le mouvement doit
accompagner exactement ce que les paroles disent ; pas de mouvement décoratif. prefers-reduced-motion affiche automatiquement l'état final.
7 · Validation
npm run validate # schéma, visuel héro, purpose, sources, actifs, densité de texte, brief
npm run qa -- --theme <theme> # (le serveur de dev tourne, détecte automatiquement les ports 5173–5185) capture chaque diapositive au dernier rythme → qa/…png, signale les débordements/chevauchements/erreurs
Ouvrez les images dans qa/ et regardez : chaque diapositive a un visuel héro, le texte est lisible sur le fond, la 3D ne chevauche pas le texte, l'image correspond au contenu.
Corrigez jusqu'à ce que ce soit bon. Checklist : references/validation-qa.md.
8 · Script et hors ligne
npm run script # SCRIPT.md : paroles de chaque diapositive, orateur, nombre de rythmes, estimation de durée
npm run assets:pull # si présentation sans réseau : télécharge tous les actifs dans public/assets/remote
npm run qa -- --offline
npm run build # dist/ — déploiement statique (Vercel, Netlify, GitHub Pages) ou ouvrir avec npm run preview
Un seul fichier HTML fonctionnant par double-clic (envoi par email/USB) : npm run build:single → dist-single/index.html.
9 · Critique, Q&A et remise
- Auto-critique de l'ensemble du deck selon
references/ai-critique.md(argumentation, données, transitions entre orateurs) ; si l'utilisateur a une revue d'une autre IA → critiquez chaque point, vérifiez la source avant d'accepter. - Rédigez
docs/qa-3c.md(2-3 questions 3C par orateur) etdocs/quiz.mds'il y a un quiz (references/qa-defense.md). - Mettez à jour
docs/ai-appendix.md,docs/verification.md,docs/HISTORY.md(references/ai-disclosure.md,references/workflow.md). - Prévenez l'utilisateur : lien/commande pour lancer, touches de présentation (
references/presenter.md— clic/→/Espace = rythme suivant, Shift+clic ou clic droit = reculer, molette, S pour notes, P pour fenêtre orateur, K pour vérifier source, D pour clair/sombre, O pour aperçu, F pour plein écran), ce qui reste hypothétique (données illustratives, images à remplacer), les liens que l'auteur doit rouvrir lui-même, et quelques images QA représentatives. Checklist de remise :references/submission-checklist.md.
Tableau de décision rapide
| L'utilisateur veut | Utiliser |
|---|---|
| Slide académique, sérieux | thème ivory/obsidian, famille editorial-2d ou data-3d, motion calm |
| Cours en classe | whiteboard/chalkboard, famille illustrated, diagramme + plot |
| Tourisme, géographie | sketchbook/ivory, itinéraire globe + photos réelles + parallax 1 fois |
| Histoire, art, littérature | ivory, gallery (œuvres réelles), timeline, effets sepia léger |
| Technologie, programmation | blueprint/neon, code, network, flow, diagram |
| Affaires, pitch | neon/obsidian, towers, chart, metric, lottie 1 fois |
| Page de défilement | deck.mode: 'scroll' (Lenis) — même contenu, défilement fluide |
| Scène 3D préconstruite sur spline.design | scène spline (URL .splinecode) |
| Caméra volante selon le script | slide.camera.sequence + Theatre.js studio (?studio) |
| Technique, énergie, cours avec nombreuses données | drafting · section + waffle/gauge/dimension/simulation + annotations |
| Envoi par email/USB, machine sans réseau | npm run build:single |
Documents de référence (à lire quand nécessaire, pas besoin de tout lire)
| Fichier | Quand lire |
|---|---|
references/brief-intake.md | Étape 0 — questionnaire + propositions par défaut |
references/effects-catalog.md | L'utilisateur demande "quels sont les effets ?", besoin de choisir une scène/un effet (avec images d'aperçu) |
references/design-rules.md | À chaque conception — une idée un visuel, densité de texte, couleur sémantique, anti-pattern |
references/content-schema.md | Pour écrire slides.ts — tous les champs de Slide/Block/Scene/Brief |
references/content-mapping.md | Convertir markdown → diapositive, exemples pour plusieurs sujets |
references/layouts-blocks.md | 8 mises en page, 23 blocs, annotations au stylet, connecteurs, capacité |
references/scenes-3d.md | 15 scènes 3D : à quoi elles ressemblent, quelles données, exemple de purpose |
references/topics.md | Playbook par sujet (thème, scène, actifs, pièges) |
references/assets.md | Trouver des images, images utilisateur, SVG, IA, YouTube, Lottie, GLB, Spline, crédit, hors ligne |
references/libraries.md | Bibliothèques intégrées et quand utiliser une autre bibliothèque (Reveal, Impress, Motion…) |
references/themes.md | 8 thèmes, personnalisation couleur/police, transitions, touche D clair/sombre, post-traitement |
references/motion.md | Rythme, transitions, Theatre.js, reduced-motion |
references/presenter.md | Touches, clic, molette, stylet, vue présentateur, notes, script, citations |
references/validation-qa.md | Commandes de validation + checklist de remise |
references/inspiration.md | Sites de référence (Awwwards, Codrops, GSAP, Three.js…) et ce qu'il faut apprendre de chaque source |
references/ai-critique.md | Attitude critique, fiche critique, test de compréhension, revue croisée IA, prompt exemple |
references/sources-verification.md | Hiérarchie des sources, règles de sélection des nombres, tableau de vérification docs/verification.md |
references/ai-disclosure.md | Annexe de déclaration IA docs/ai-appendix.md |
references/qa-defense.md | Questions de contre-interrogatoire 3C, questions ouvertes, quiz, diapositive de réserve |
references/workflow.md | Rythme de travail par session, brouillons A/B/C, journal & transition vers un nouveau chat, Git/déploiement, avant la présentation |
references/submission-checklist.md | Checklist de remise, drapeaux de pénalité, lisibilité sur projecteur, comment soumettre le fichier |