exiao/skills

Vidéos Remotion

Créez des vidéos animées avec Remotion (React). Basé sur les bonnes pratiques officielles de remotion-dev ainsi que des compositions spécifiques à Bloom.

Aiguillage rapide

Lisez le fichier de règle approprié en fonction de la tâche :

Animation de base

Tâche	Fichier de règle
Interpolation, easing, ressorts	references/rules/timing.md
Fondamentaux des animations	references/rules/animations.md
Animations de texte (machine à écrire, mot par mot, etc.)	references/rules/text-animations.md
Transitions de scène (glissement, fondu, volet, retournement)	references/rules/transitions.md
Séquencement (délai, rogner, limiter la durée)	references/rules/sequencing.md
Rogner (couper le début/la fin)	references/rules/trimming.md

Média

Tâche	Fichier de règle
Images (composant Img)	references/rules/images.md
Vidéos (intégrer, rogner, volume, vitesse, boucle)	references/rules/videos.md
Audio (importer, rogner, volume, vitesse, hauteur)	references/rules/audio.md
Visualisation audio (spectre, formes d'onde)	references/rules/audio-visualization.md
GIFs synchronisés avec la timeline	references/rules/gifs.md
Polices (Google Fonts, locales)	references/rules/fonts.md
Ressources (importation d'images/vidéos/audio)	references/rules/assets.md

Sous-titres et voix off

Tâche	Fichier de règle
Générer des sous-titres (transcrire l'audio)	references/rules/transcribe-captions.md
Importer des sous-titres SRT	references/rules/import-srt-captions.md
Afficher des sous-titres (sous-titres animés)	references/rules/display-captions.md
Aperçu des sous-titres	references/rules/subtitles.md
Voix off IA (ElevenLabs TTS)	references/rules/voiceover.md

Avancé

Tâche	Fichier de règle
Contenu 3D (Three.js / React Three Fiber)	references/rules/3d.md
Graphiques (barres, camembert, lignes, boursiers)	references/rules/charts.md
Cartes (Mapbox)	references/rules/maps.md
Animations Lottie	references/rules/lottie.md
Superpositions de fuites de lumière	references/rules/light-leaks.md
Rendu vidéo transparent	references/rules/transparent-videos.md

Configuration

Tâche	Fichier de règle
Compositions, images fixes, dossiers, propriétés par défaut	references/rules/compositions.md
Métadonnées dynamiques (calculateMetadata)	references/rules/calculate-metadata.md
Paramétrer avec le schéma Zod	references/rules/parameters.md
TailwindCSS dans Remotion	references/rules/tailwind.md
Mesurer le texte (ajustement, débordement)	references/rules/measuring-text.md
Mesurer les nœuds DOM	references/rules/measuring-dom-nodes.md

Utilitaires FFmpeg et Média

Tâche	Fichier de règle
Opérations FFmpeg (rogner, détection de silence)	references/rules/ffmpeg.md
Extraire des images d'une vidéo	references/rules/extract-frames.md
Obtenir la durée d'une vidéo	references/rules/get-video-duration.md
Obtenir les dimensions d'une vidéo	references/rules/get-video-dimensions.md
Obtenir la durée d'un audio	references/rules/get-audio-duration.md
Vérifier si une vidéo peut être décodée	references/rules/can-decode.md

---

Kit de composants remotion-bits

Composants d'animation pré-construits. Installation : npm install remotion-bits

Composants clés : AnimatedText (révélations mot/caractère/ligne), ParticleSystem (confettis, neige, lucioles), GradientTransition, Scene3D (mouvements de caméra 3D), Typewriter, CodeBlock (typage avec coloration syntaxique).

Voir references/remotion-bits.md pour le catalogue complet et les exemples d'utilisation.

---

Projet Bloom

Emplacement du projet : ~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # Toutes les compositions enregistrées ici
│   ├── ProductDemo.tsx   # Composant principal de démo produit
│   ├── schema.ts         # Schémas Zod pour les propriétés
│   ├── scenes/           # Composants de scène individuels
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # Ressources statiques
├── out/                  # Sortie rendue
├── remotion.config.ts
└── package.json

Compositions existantes

ID	Taille	Cas d'utilisation
ProductDemo	1080x1080	Twitter/Instagram carré
ProductDemoVertical	1080x1920	TikTok/Reels/Shorts vertical
BloomDemo	1080x1080	Carré avec la marque Bloom
BloomDemoVertical	1080x1920	Vertical avec la marque Bloom

Toutes les compositions : 15 secondes à 30 images/s (450 images).

Schéma des propriétés (ProductDemoProps)

{
  command: string;           // Commande du terminal affichée en tapant
  files: Array<{             // Liste des fichiers pour l'animation de scan
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // Score à révéler (0-maxScore)
  maxScore: number;          // Valeur maximale du score
  statusLabel: string;       // ex. "Critique", "Risque modéré"
  statusColor: string;       // Couleur hexadécimale pour le statut
  resultLines: string[];     // Résultats de synthèse
  title: string;             // Texte du titre de la vidéo
  logoText: string;          // Nom de la marque/produit
}

---

Pré-composition : Captures d'écran réelles de Bloom

Si la vidéo présente l'interface utilisateur de l'application Bloom, capturez d'abord de vraies captures d'écran :

1. Démarrer le pont PhoneAgent (voir ~/clawd/skills/phoneagent/SKILL.md)
2. Exécuter : python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. Référencer les captures d'écran dans les compositions : staticFile("screenshots/<feature>/home.png")

Se dégrade gracieusement si le pont n'est pas en cours d'exécution.

---

Rendu

cd ~/clawd/remotion-videos

# Prévisualiser dans le navigateur (Remotion Studio)
npm run dev

# Rendre en MP4
npx remotion render ProductDemo out/product-demo.mp4

# Rendre en vertical pour TikTok
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# Propriétés personnalisées
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"ma commande","score":85}'

# Rendre en GIF
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# Plage d'images spécifique
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

Créer de nouvelles compositions

1. Créer des composants de scène dans src/scenes/
2. Créer la composition principale dans src/
3. Définir le schéma Zod dans src/schema.ts
4. Enregistrer dans src/Root.tsx avec les dimensions :
   • Carré : 1080x1080 (Twitter, Instagram)
   • Vertical : 1080x1920 (TikTok, Reels, Shorts)
   • Horizontal : 1920x1080 (YouTube)

---

QA post-rendu

Exécutez toujours la QA après le rendu :

python scripts/visual_qa.py out/video.mp4 "Description de votre objectif"
# Ou utilisez le script wrapper :
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "Objectif ici"

Corrigez les problèmes signalés et effectuer un nouveau rendu. Ne livrez pas une vidéo qui échoue à la QA.

---

Conseils

• Gardez les vidéos entre 15 et 30 secondes pour les réseaux sociaux
• Utilisez des couleurs à fort contraste pour la visualisation mobile
• Ajoutez des sous-titres/overlays de texte (la plupart des spectateurs regardent sans son)
• Testez les formats carré et vertical avant publication
• Rendez à 30 images/s pour les réseaux sociaux (60 images/s pour un mouvement élevé)
• Utilisez les composants remotion-bits avant de construire des animations à partir de zéro