Remotion Beautiful Videos

Créez des vidéos de lancement de produit de 40 secondes qui ressemblent à une production d'agence à 50 000 $. Le secret : construire des maquettes UI animées de produits — de vrais tableaux de bord, interfaces de conversation, éditeurs de code, visualisations de données — toutes construites en code et animées par ressort.

Quand l'utiliser

L'utilisateur nomme une marque ou donne une URL et souhaite une vidéo de lancement / marketing / démonstration de produit.

PAS pour (redirigez ailleurs plutôt que d'étendre cette compétence) : extraire de courts clips d'une vidéo longue existante (c'est un travail de recadrage) ; ajouter des sous-titres à des séquences de tête parlante existantes ; le montage NLE de séquences utilisateur (recadrage/recolorisation/réorganisation) ; une piste musicale nue nécessitant un lyric video synchronisé au rythme. Cette compétence construit une vidéo de lancement à partir de la présence web d'une marque — maquettes UI construites en code, vrais assets récupérés, récit en 5 actes. Si l'entrée n'est pas une marque/produit à présenter, c'est le mauvais outil.

Stack Technique

Remotion 4.x (scaffold épinglé ≥4.0.484) + React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects (gradient officiel / damier / gaufrage / lignes de grille — privilégiez plutôt que les équivalents CSS faits maison)

Prérequis Système — Gérés Automatiquement

NE DEMANDEZ PAS à l'utilisateur d'installer quoi que ce soit. N'EXÉCUTEZ PAS de vérification manuelle command -v. L'orchestrateur (scripts/url-to-video.ts) a une vérification préalable intégrée qui détecte les outils manquants, affiche ce qui manque et les installe via brew/apt/dnf/pacman/npm — le tout à l'Étape 1.

Outils requis (tous installés automatiquement si manquants) :

Outil	Pourquoi
`ffmpeg`	Coupe audio, loudnorm, coupe vidéo, vérifications de détection de volume
`yt-dlp`	Récupérer les vidéos de démonstration de la marque + BGM libre de droits depuis YouTube
`aubiotrack`	Repli de rythme en mode dégradé pour `analyze-audiomap.py` + `beat-sync.ts` hérité (via le package `aubio`)
`playwright`	Capture d'écran de la page d'accueil en mode headless

Indicateurs de vérification préalable (passez-les à url-to-video.ts) :

--yes — installation automatique sans invite (utilisez ceci lors de l'exécution en tant que Claude, car vous n'avez pas de TTY)
--no-install — ignorer les installations, exécuter en mode dégradé (rythmes → repli, capture d'écran → récupération uniquement)

Si vous rencontrez une plateforme où l'installation automatique échoue (environnement verrouillé, pas de sudo), l'orchestrateur affiche la commande d'installation manuelle par outil et continue en mode dégradé. N'abandonnez jamais l'exécution — une sortie dégradée est toujours mieux que rien.

L'analyseur de carte musicale (scripts/analyze-audiomap.py, Étape 4) porte sa propre vérification préalable : il pip-installe librosa/numpy/soundfile lors de la première exécution et, si l'installation échoue (ou si --no-install est passé), se dégrade en aubiotrack — la carte musicale ne contient alors que bpm + beats_sec avec tous les autres champs null et rhythmic: false (grille non fiable en aval).

Le générateur BGM (scripts/generate-bgm.py, Étape 2 niveau ②) porte la même forme de vérification préalable : pip-installe transformers/torch/soundfile/numpy (plain → --break-system-packages → --user) ; si l'installation échoue, il se termine avec l'indice de repli yt-dlp au lieu de bloquer — l'approvisionnement BGM se dégrade, ne meurt jamais. Les pistes générées alimentent analyze-audiomap.py exactement comme n'importe quel autre BGM.

Contrat de Sortie V2 URL-vers-Vidéo

Chemin préféré : exécutez l'orchestrateur d'admission V2, puis affinez le projet généré dans Remotion.

node --experimental-strip-types <chemin-du-skills-installe>/scripts/url-to-video.ts https://site-de-la-marque.com --out ./<nom-de-la-marque>-video-de-lancement

L'orchestrateur doit émettre :

brand-report.json
scene-constitution.json
asset-manifest.json
story.md
review.md
un répertoire de projet Remotion complet avec public/brand/*, éventuellement public/brand/beat-map.json, src/theme.ts et les données d'admission générées pour que le scaffold les consomme

Chemin de régression :

node --experimental-strip-types <chemin-du-skills-installe>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

L'exécuteur de benchmark doit émettre des fichiers benchmark-result.json par benchmark et un résumé de suite afin que les modifications V2 puissent être testées sous pression plutôt que débattues.

Cette compétence n'optimise pas pour les rendus finaux en un clic. Elle optimise pour un premier jet de qualité équipe vidéo que Claude ou un humain peut peaufiner les derniers 10-20 % à l'intérieur de Remotion.

Philosophie Centrale

Construisez des maquettes UI de produits, pas des graphismes abstraits. L'interface utilisateur EST l'animation.
Récupérez d'abord, concevez ensuite. Chaque couleur, police, logo provient du vrai site de la marque.
Le rythme est le luxe. 40 secondes laissent le contenu respirer. Ne précipitez jamais les fonctionnalités.
Le goût plutôt que les modèles. Si ça ressemble à « fait par l'IA », reconcevez.
Une seule famille de polices, hiérarchie de poids. Gamme 300-600 uniquement, jamais gras (700+).

Constitution en Trois Couches

Couche phénoménale : récoltez les preuves du site web officiel. ScreenshotProof est obligatoire. VideoProof est préféré. Pas de preuve visuelle, pas de vidéo crédible.
Couche essentielle : déduisez un DesignArchetype à partir des preuves. Utilisez les références pour affiner le jugement, jamais pour remplacer la marque.
Couche philosophique : rejetez les valeurs par défaut réflexes avant de construire. Le goût prime sur la commodité. La crédibilité prime sur le spectacle. La réalité du produit prime sur l'énergie du modèle.

Cette compétence absorbe explicitement les idées de :

agent-browser comme récupérateur préféré de la couche phénoménale (headless, ne détourne pas l'écran)
awesome-design-md comme bibliothèque de référence d'archétypes de design d'entreprise
taste-skill comme source de discipline d'exécution
Impeccable comme vocabulaire de porte de finition et anti-monoculture

Aucun des éléments ci-dessus n'est une dépendance stricte. Leur valeur est intégrée dans la réflexion et les portes de cette compétence.

Règles

Lisez les fichiers de règles individuels pour des explications détaillées et des exemples de code :

Système de Design

rules/typography.md - Poids de police (max 600), hiérarchie de taille (min 24px), sécurité du texte
rules/color.md - Polarité de la marque, teinte neutre, règle 60-30-10, niveaux d'opacité des accents
rules/layout.md - Système de grille, échelle d'espacement 4px, zones de sécurité, hiérarchie du rayon de bordure, anti-chevauchement
rules/composition.md - Loi de Composition Bespoke : base d'atmosphère zéro-vide, moments plein écran, typographie éditoriale 200-320px, primauté des assets réels, diversité de composition — plus la LISTE NOIRE SLOP compositionnelle (diagramme hub-and-spoke en pilule, triptyque à carte creuse, vide d'objet centré, ouverture printanière éternelle + scintillement) et le manuel des preuves faibles (score < 40 → développer un monde de marque à partir de la géométrie du logo, jamais de cartes vides)

Contenu Visuel

rules/ui-mockups.md - Construction UI de produit, densité, barres de titre, coloration syntaxique, simulation de curseur, spécification de remontée du Terminal Géant (géométrie prouvée + contrat de contenu + liste d'échecs)
rules/cards.md - Grilles de cartes décalées, techniques de remplissage intérieur, corps de cartes animés, pas de doublons
rules/data-viz.md - Graphiques SVG, métriques animées, tabular-nums, badges d'état, anti-héros-métrique
rules/artifact-catalog.md - Lisez avant de concevoir un acte : 15 familles d'artefacts bespoke éprouvées au combat (avec pointeurs sources) + inventaire du scaffold + registre de rotation des héros de production (~/.media/hero-ledger.jsonl) — la diversité est une porte, pas une suggestion

Mouvement & Production

rules/motion.md - Ressorts, easeOutExpo, décalage par caractère, normes de timing, hold-then-snap, vocabulaire AE organique (wiggle / overshoot / idle float / lookAt — câblé depuis la compétence sœur remotion-motion)
rules/transitions.md - TransitionSeries, fuites de lumière, fonds fluides, textures de bruit, parallaxe
rules/cinematic.md - Grain de film, vignette, balayage chatoyant, étalonnage des couleurs, glassmorphisme, paramètres de rendu
rules/beat-sync.md - Timing piloté par BGM depuis audiomap.json : un analyseur approuvé inconditionnellement, accrochage à la grille de rythme quand rhythmic: true, rythme par phase d'énergie/silence quand non, hold-then-snap sur les pics d'énergie
rules/narration-sync.md - Vidéos voix-off/légendes uniquement : verrouillez les visuels sur les horodatages des mots chuchotés, nettoyage des légendes/mots de marque, accrochage aux coupures de phrases

Stratégie & Qualité

rules/creative-moves.md - Cinq générateurs créatifs distillés de chaque verdict « époustouflant » — littéralisme d'expression, croissance de la géométrie du logo, alchimie de contrainte, inversion sémantique, preuve native du domaine
rules/taste.md - Liste noire SLOP IA, principes de design, lois UX, liste de vérification d'auto-révision, rythme
rules/narrative.md - Structure en 5 actes, rythme titre/UI, arc narratif, constellation de logo
rules/narrative-templates.md - Modèles narratifs spécifiques à l'industrie (SaaS IA, FinTech, DevTool, E-Commerce, Santé, Cybersécurité, Collaboration)
rules/workflow.md - Récupération de marque, système d'icônes, stratégie d'actifs, intégration vidéo, organisation de fichiers, Mandat de Variété BGM (ambiance dérivée de la marque + dédoublonnage du registre global — jamais la même piste deux fois)
rules/media-resolve.md - Cascade de résolution d'actifs (registre → adopter → programmatique → catalogue → web) avec registre de gel .media/manifest.jsonl ; programmatique d'abord : cartes du monde en points, marques simple-icons, logos de modèles LobeHub en composants en ligne teintables
rules/archetypes.md - Archétypes de design d'entreprise abstraits de références de design de haute qualité
rules/finish-gate.md - Protocole de finition de style Impeccable, vérifications anti-monoculture, critères de blocage de rendu
rules/qc-gates.md - Quatre portes QC fondées sur des preuves : audit d'actifs (Étape 2.5), preuves d'images par acte (Étape 4), câblage de boucle critique (Étape 7.5), divulgation honnête (Étape 8). Preuves uniquement — pixels rendus + Lecture, jamais grep

Fichiers de Référence (Modèles de Code)

references/animations.md - FadeIn, ScaleIn, SplitText, Typewriter, CountUp, AnimatedPath
references/audio.md - Synchronisation audio, détection de rythme, atténuation de voix-off, pipeline VO with-timestamps ElevenLabs TTS (timing des mots gratuit, gestion de clé restreinte, atténuation dérivée de VO_CUES)
references/components.md - GradientMesh, GlassPanel, FilmGrain, ProductFrame, BrandIcon
scaffold/src/components/Transitions.tsx - 7 familles de transition (whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut) — remplacements directs de fade() ; les vidéos tout-fade sont une violation
scaffold/src/components/ShaderFX.tsx - GPU ShaderPlane (liquidWarp prêt pour la production ; silk/lens en cours) — rendu avec --gl=angle (intégré dans le script de rendu du scaffold)
scaffold/src/components/Captions.tsx - Légendes avec horodatage de mots, 6 styles (karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial)
references/lottie.md - Intégration @remotion/lottie, sources recommandées
references/visual-effects.md - Référence de bibliothèque d'effets visuels hiérarchisés (lottie, motion-blur, confetti, flubber, three.js)

Référence API Remotion (Intégrée)

Cette compétence intègre la référence complète remotion-best-practices pour les motifs d'API Remotion. Chargez-la lorsque vous avez besoin de connaissances spécifiques à l'API Remotion :

remotion-best-practices/rules/videos.md - Intégration vidéo, coupe, volume, vitesse, boucle
remotion-best-practices/rules/audio.md - Importation audio, coupe, volume, vitesse, hauteur
remotion-best-practices/rules/timing.md - Courbes d'interpolation, linéaire, easing, ressort
remotion-best-practices/rules/transitions.md - Motifs de transition de scène
remotion-best-practices/rules/compositions.md - Compositions, images fixes, dossiers, props par défaut
remotion-best-practices/rules/sequencing.md - Délai de séquence, coupe, limitation de durée
remotion-best-practices/rules/fonts.md - Google Fonts et chargement de polices locales
remotion-best-practices/rules/images.md - Utilisation du composant Img
remotion-best-practices/rules/charts.md - Motifs de graphiques à barres, circulaires, linéaires, boursiers
remotion-best-practices/rules/light-leaks.md - Effets de superposition @remotion/light-leaks
remotion-best-practices/rules/lottie.md - Intégration @remotion/lottie
remotion-best-practices/rules/text-animations.md - Motifs d'animation typographique
remotion-best-practices/rules/calculate-metadata.md - Métadonnées de composition dynamique
remotion-best-practices/rules/voiceover.md - Voix-off IA avec ElevenLabs TTS
remotion-best-practices/rules/parameters.md - Paramétrisation de schéma Zod
remotion-best-practices/rules/ffmpeg.md - Opérations FFmpeg pour le recadrage vidéo

Workflow (8 étapes + 4 portes de preuves)

Quatre portes QC fondées sur des preuves s'exécutent dans ce workflow — Audit d'Actifs (Étape 2.5), Preuves d'Images par Acte (Étape 4), Boucle Critique (Étape 7.5), Divulgation Honnête (Étape 8).

Étape 1 : Récupération d'Identité de Marque

Récupérez l'URL (ou effectuez une recherche de marque). Lancez l'orchestrateur de vérification préalable : node --experimental-strip-types scripts/url-to-video.ts <URL> --out ./<brand-dir> --yes
L'orchestrateur installera ffmpeg, yt-dlp, aubio et playwright s'ils sont manquants.
L'orchestrateur récupère les assets du site (logo, captures d'écran, couleurs, polices, contenu vidéo) et génère brand-report.json, scene-constitution.json, asset-manifest.json, story.md et review.md.
Ne sautez pas cette étape — ne construisez jamais de maquettes UI à partir de rien.
À la fin de l'Étape 1, vous avez un répertoire <brand-dir> complet avec tout ce dont vous avez besoin commencer.

Étapes 2-8

Effectuez les étapes de construction de la vidéo selon scene-constitution.json et story.md. Consultez les fichiers de règles pour les motifs de conception détaillés. Utilisez les fichiers de référence comme exemples de code pour les animations, les composants et l'audio.

Lorsque la construction est terminée, exécutez le protocole de finition selon finish-gate.md.

norahe0304-art/30x-video

Qu'est-ce que 30x-video ?

Demander à votre IA préférée

Documentation