Skill : Motion Video 3D (Remotion + Three.js + PiP)

Quand utiliser

"Fais une vidéo 3D avec ma vidéo qui parle dans le coin"
"Vidéo style TikTok cinématographique sur [thème]"
"Vidéo avec fond 3D et légendes animées"
"Vidéo avec [mon audio/ma vidéo] qui dit X"

Philosophie (RÈGLE D'OR)

La vidéo doit être CRÉATIVE et CONTEXTUELLE par rapport au thème. Avoir un 3D générique ne suffit pas. Chaque phrase du script doit inspirer un élément visuel unique qui traduit le concept. Exemple :

Phrase "8 minutes et 20 secondes" → odomètre digital qui défile jusqu'à 8:20
Phrase "300 000 km/s" → compteur de vitesse HUD de science-fiction avec aiguille
Phrase "un avion ferait 3 tours" → avion en orbite autour de la Terre avec traînée
Phrase "la lumière voyage du Soleil à la Terre" → photon avec lens flare en voyage

L'utilisateur exige ce niveau de créativité contextuelle. NE JAMAIS se contenter de texte statique avec fondu.

Prérequis (vérifier avant de commencer)

Node.js + npm installés
FFmpeg installé (brew install ffmpeg)
Whisper-cpp installé (brew install whisper-cpp) — pour synchroniser les mots
FREESOUND_API_KEY dans ~/.zshrc (obligatoire pour API SFX)
Vidéo/audio du narrateur dans public/eu.mp4 ou public/audio/*.mp3

Si l'un manque, ARRÊTER et avertir l'utilisateur.

1. Structure du projet

~/Documents/[nom-du-projet]/ ├── public/ │ ├── eu.mp4 # vidéo du narrateur (si PiP) │ ├── audio/*.mp3 # audio seul (si pas de vidéo) │ ├── images/[thème]/ # images téléchargées (avec credits.json) │ └── sfx/ # SFX téléchargés de Freesound ├── src/ │ ├── three/ # scène 3D (Three.js) │ ├── components/ # Légendes, HUDs, overlays │ ├── timeline.json # TOUS les timings (source de vérité) │ └── Root.tsx ├── scripts/ │ ├── align-words.py # Whisper → timestamps des mots │ ├── gen-sfx.mjs # synthèse locale (pads, drones) │ ├── fetch-freesound.mjs # OBLIGATOIRE : télécharge SFX de l'API │ ├── finalize.sh # -14 LUFS + faststart │ └── contact-sheet.sh # contact sheet avec safe zones ├── out/ │ ├── final_[thème].mp4 │ ├── thumbnail.png # couverture 1080x1920 │ └── contact_sheet.png └── timeline.json

2. Workflow obligatoire (dans l'ordre)

Phase 0 : Briefing

Confirmer avec l'utilisateur :

Thème de la vidéo
Durée réelle de l'audio (ne jamais couper la punchline)
Palette (par défaut : deep black + accent color cohérente avec le thème)
Style du fond 3D (voir section 3)
PiP (si vidéo présente) : position en bas à droite, x ≤ 940
Légendes : cinétiques (voir section 5)

Phase 1 : Setup + Whisper

Initialiser/vérifier Remotion + @remotion/three + @react-three/fiber + three
Exécuter scripts/align-words.py pour transcrire l'audio
Créer timeline.json avec les timings EXACTS de chaque mot
S'ARRÊTER ET ATTENDRE L'APPROBATION avant de coder les scènes

Phase 2 : Fond 3D thématique (voir section 3)

Phase 3 : PiP (si présent) + Légendes + HUDs (voir sections 4 et 5)

Phase 4 : SFX via Freesound (voir section 6) — OBLIGATOIRE

Phase 5 : Rendu + Mix + Contact Sheet + Thumbnail

3. Fond 3D dynamique (CRÉATIVITÉ OBLIGATOIRE)

Règle : le fond NE DOIT PAS être statique. Il doit avoir un mouvement continu et des éléments flottants. Utilisez le thème pour décider du style :

Thème	Fond 3D
Espace / Univers	3 couches d'étoiles avec parallax, nébuleuse subtile, planètes à l'horizon
Programmation / Tech	Matrice de code flottante, particules de "bits", circuits en wireframe, grille animée
iPhone / Minimaliste	Particules de poussière flottantes (lentes, tailles variées), lumière volumétrique douce, style Stranger Things upside down
Nature	Feuilles/particules organiques flottant, lumière solaire filtrée, profondeur avec parallax
Ville / Urbain	Lueurs de néon lointaines, particules de pluie, skyline avec parallax
Science / Laboratoire	Molécules flottantes, tubes à essai en wireframe, particules brillantes

Toujours inclure :

Parallax (minimum 3 couches avec vitesses différentes)
Mouvement de caméra (dérive subtile tout au long de la vidéo)
Éclairage volumétrique (lumière douce, pas plate)
Post-traitement (bloom, vignette subtile)
Couleurs cohérentes avec le thème (ne pas utiliser de palette générique)

4. PiP (Talking-head) — si vidéo présente

Utiliser <OffthreadVideo> de Remotion
Aspect ratio exact (ne pas déformer le visage)
Position : bas à droite, MAIS en respectant la safe zone (x ≤ 940)
Style : coins arrondis 24px, ombre douce, bordure fine
Ne jamais modifier les couleurs, le fond, l'aspect ratio ou l'audio de la vidéo originale
Scale up uniquement aux moments de payoff (ex: 1.12x)
Si audio seul : ajouter un "Audio Visualizer HUD" pulsant avec la voix à la place du PiP

5. Légendes (CINÉTIQUES + sans "rectangle")

Règles d'animation :

Mot par mot (pas phrase par phrase) — chaque mot au frame exact de la parole
Ease-out avec overshoot (~0.15s par mot)
Mots-clés : flash blanc + settle en accent color + glow + scale up bref
Lignes prédisposées (ne pas laisser les mots "sauter" de ligne)

⚠️ RÈGLE CRITIQUE : PAS DE RECTANGLES

NE PAS utiliser de couleur de fond solide derrière le texte. Pour la lisibilité, utiliser UNIQUEMENT :

text-shadow: 4px 4px 8px rgba(0,0,0,0.9)
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8))
Optionnel : dégradé radial ≤ 15% d'opacité derrière des mots isolés
JAMAIS : <div style="background: rgba(0,0,0,0.7)"> autour de la phrase

Le texte doit flotter sur le fond, sans ressembler à une carte.

Positionnement :

Centré horizontalement
Y entre 1400-1550
Taille minimale : 72px (lisible sur mobile)

6. SFX via Freesound API (OBLIGATOIRE)

L'utilisateur EXIGE que les sons soient téléchargés depuis l'API Freesound. N'utilisez pas uniquement la synthèse locale.

Flux :

Vérifier FREESOUND_API_KEY dans ~/.zshrc
Créer/utiliser scripts/fetch-freesound.mjs pour rechercher et télécharger
Carte minimale des SFX (adaptez au thème) :

Moment	Type	Requête sur Freesound
Ouverture	démarrage digital doux	"soft digital boot"
Impacts de texte	hit cinématique	"cinematic impact hit"
Compteur	tic-tac d'horloge	"digital counter tick"
Compteur de vitesse	gémissement de compteur	"engine whine pitch up"
Objet volant	whoosh de jet	"jet flyby whoosh"
Révélation 3D	montée en puissance	"cinematic riser"
Arrivée / climax	boom + carillon	"cinematic boom chime"
CTA final	carillon doux	"soft notification chime"

Filtrer d'abord par CC0 ; fallback CC-BY (noter dans public/sfx/CREDITS.json)
Sauvegarder dans public/sfx/
Synthétiser LOCALEMENT uniquement les sons continus (space pad, drone, riser long) via scripts/gen-sfx.mjs

Mixage :

Voix : NE JAMAIS traiter (seulement +gain pour atteindre -14 LUFS, avec limiteur -1 dBTP)
SFX : ducking -3dB (whooshes), -8dB (booms) — signifie baisser le SFX sous la voix, pas la voix
Space pad : -24dB continu, fondu entrant 1s, fondu sortant 2s
Loudness final : -14 LUFS, peak maximum -1 dBTP

7. Zones de sécurité TikTok (OBLIGATOIRE)

Canvas : 1080×1920, 60fps
Zone de sécurité : x ∈ [60, 1020], y ∈ [120, 1670]
Barre d'action (droite) : ne pas envahir x > 960
Barre du haut : y < 120
Barre du bas (caption) : y > 1670
PiP : ne jamais chevaucher x > 940
Toujours valider avec une contact sheet superposant les zones de sécurité

8. Checklist Final

9. Gérer le blocage macOS (Sandbox)

Si Claude Code perd l'accès au dossier à cause de "Operation not permitted" :

Préparer tous les fichiers dans le scratchpad
Générer un script unique finish-v2.sh qui installe et rend
L'utilisateur l'exécute manuellement dans le terminal
Claude Code lit ensuite le résultat de ffprobe que l'utilisateur colle en retour

Toujours inclure un fallback manuel à la fin.

10. À propos des licences d'images (si téléchargement)

PRÉFÉRER Wikimedia Commons (CC0/CC-BY/CC-BY-SA) — toujours vérifier la licence
PRÉFÉRER Apple/entreprises officielles (fair use éditorial)
ÉVITER les sites aléatoires / Pinterest / stock
Sauvegarder credits.json avec {filename, source_url, author, license}
Créer LICENSE_CHECK.md avant de télécharger, en auditant chaque image
Si pas de licence claire, générer une alternative procédurale avec Three.js

Résumé : cette skill transforme tout script en vidéo TikTok cinématographique avec 3D thématique, typographie cinétique, HUDs créatifs, PiP (optionnel), et design sonore professionnel via Freesound. La créativité contextuelle est OBLIGATOIRE — chaque phrase du script doit inspirer un élément visuel unique.

Motion Video 3D (Remotion + Three.js + PiP)

Qu'est-ce que Motion Video 3D (Remotion + Three.js + PiP) ?

Demander à votre IA préférée

Documentation