riaz37/remotion-ui

Agent RemotionUI

Utilisez cette compétence lorsque vous aidez les utilisateurs à créer des compositions Remotion complètes avec RemotionUI, et non des effets ponctuels.

Règles strictes

• Utilisez la documentation Remotion pour les fondamentaux du framework.
• Utilisez RemotionUI pour des composants sources prêts à l'emploi copiés dans le dépôt de l'utilisateur.
• Exécutez npx remotion-ui@latest add <composant> avant d'importer un composant.
• Importez depuis des chemins locaux : @/compositions/..., @/remotion/scenes/..., @/remotion/primitives/...
• N'importez jamais de composants UI depuis le paquet npm remotion-ui — il ne fournit qu'un CLI, pas une bibliothèque de composants. Les composants sont des fichiers sources copiés-collés, comme shadcn/ui.

Règles d'animation Remotion (obligatoires)

Les composants RemotionUI sont des fichiers sources Remotion standards. Tout mouvement au moment du rendu doit être piloté par les primitives basées sur les images de Remotion, et non par des API de minutage navigateur, car la sortie est rendue image par image côté serveur, et non lue en direct dans un navigateur :

• Animez avec useCurrentFrame() pour lire l'image courante, interpolate() pour mapper des plages d'images à des plages de valeurs, et spring() pour des mouvements physiques et amortis.
• Chronométrez les séquences avec <Sequence from={...} durationInFrames={...}> — jamais setTimeout, setInterval, ou requestAnimationFrame.
• N'utilisez jamais de transitions CSS, d'animations CSS (animation / @keyframes), ou de classes d'animation Tailwind (animate-*, transition-*) pour quoi que ce soit qui doit apparaître dans la vidéo rendue. Ces fonctions fonctionnent en temps réel dans un navigateur et n'existent pas image par image lors du rendu serveur de Remotion — elles seront incorrectes ou totalement absentes dans la sortie.
• Il est acceptable d'utiliser Tailwind pour les classes statiques de mise en page/espacement/couleur — la règle s'applique uniquement au mouvement/minutage.
• Dérivez toutes les valeurs d'opacité/position/échelle/rotation de interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) ou spring({ frame, fps, config }), puis appliquez-les via style en ligne (ex. style={{ opacity, transform: \translateY(${y}px)` }}`).
• Obtenez fps depuis useVideoConfig(), pas d'une constante codée en dur.

Workflow

1. Comprenez l'objectif de la vidéo (clip social, podcast, histoire de données, présentation de produit).
2. Choisissez une composition phare sur https://remotionui.com/ai/components.json
3. Exécutez npx remotion-ui doctor si la configuration semble cassée.
4. Installez : npx remotion-ui add <nom>
5. Importez depuis les chemins sources locaux et composez dans Root.tsx.
6. Personnalisez le code source copié pour la marque, le minutage et la mise en page — en suivant les règles d'animation ci-dessus.

Index de l'agent

• Composants : https://remotionui.com/ai/components.json
• Détail par composant : https://remotionui.com/ai/components/.json
• Guide complet : https://remotionui.com/ai/remotionui-agent.md
• Registre : https://remotionui.com/r/index.json

CLI (adapté aux agents)

npx remotion-ui init --existing          # bootstrap remotion-ui.json
npx remotion-ui doctor --json            # diagnostiquer la configuration
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight

Projets Remotion existants

cd votre-projet-remotion
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev

Valeurs par défaut basées sur la composition

Objectif	Composition phare
Clip social 9:16	social-clip
Reel de créateur	creator-reel
Clip de podcast	podcast-clip
Explication de données	data-story
Lancement de produit	intro