102.3K+Télécharger
Aller au guide d’utilisation
Remotion Interactivitypar remotion-dev

Remotion Interactivity Skill.

Rendez une vidéo modifiable dans Studio en changeant la façon dont son code source React expose les calques, le timing et les contrôles.

  • Vidéo
  • React
  • Interaction
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · Remotion InteractivitySKILL.md
Tâche Vidéo Produit • Des calques vidéo nommés, modifiables individuellement • Des composants personnalisés avec des contrôles de contenu et d'apparence déclarés • Des compositions connectées, chacune avec sa propre timeline modifiable Avant de commencer Une version de Remotion compatible avec les API Interactive documentées ; @remotion/paths est en outre nécessaire pour l'interpolation de tracé modifiable décrite.
Résumé éditorial · source examinée 2026-10-07 · n'est pas un exemple généré

01 Fonctionnement

Remotion Interactivity : calques vidéo modifiables

Règles de balisage pour des calques Remotion modifiables dans le code source, des schémas personnalisés, des valeurs d'animation en ligne et l'enregistrement de compositions connectées.

Workflow fondé sur la sourcePas un benchmark d'exécution

L'approche de travail

Remotion Interactivity répond à un problème d'écriture précis : une vidéo peut s'afficher correctement alors que ses calques sont difficiles, voire impossibles, à modifier dans Studio. La source explique quels motifs de balisage l'éditeur peut reconnaître, notamment les styles en ligne, les éléments nommés, les expressions d'interpolation prises en charge et les nœuds JSX écrits directement.

Son approche des composants personnalisés utilise un schéma d'interactivité pour exposer des contrôles pertinents par instance. Un composant doté de sa propre timeline peut aussi être enregistré comme composition connectée. Il s'agit du lien entre le code source et l'éditeur vidéo, et non d'ajouter des boutons cliquables à une vidéo publiée.

Livrables attendus

  • Des calques vidéo nommés, modifiables individuellement
  • Des composants personnalisés avec des contrôles de contenu et d'apparence déclarés
  • Des compositions connectées, chacune avec sa propre timeline modifiable
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Identifier les unités d'édition

    Listez les clips, scènes et calques à modifier séparément. Donnez à chacun son propre nœud JSX écrit à la main plutôt que de tous les produire dans une même boucle.

  2. 02
    Exposer des contrôles utiles

    Ajoutez un InteractivitySchema pour les propriétés pertinentes de texte, de couleur, de média ou numériques, et transmettez le style injecté à une seule racine visuelle.

  3. 03
    Garder la source modifiable

    Placez en ligne les keyframes et styles pris en charge, conservez la distinction entre frame de l'appelant et frame locale, et enregistrez les scènes réutilisables avec le même composant exporté.

  4. 04
    Tester les modifications dans Studio

    Sélectionnez, déplacez et ajustez les calques voulus dans Studio, puis vérifiez si les changements sont réécrits dans le nœud source attendu.

02 Cas d’usage

Quand l'utiliser

Une version de Remotion compatible avec les API Interactive documentées ; @remotion/paths est en outre nécessaire pour l'interpolation de tracé modifiable décrite.

Un bon choix

  • Bandeaux de titrage réutilisablesLe texte et la couleur d'accent peuvent devenir des contrôles explicites par instance, tandis que les détails décoratifs restent internes.
  • Bibliothèques de scènes modifiablesLes compositions connectées conviennent aux scènes importantes qui ont besoin de leur propre timeline sans dupliquer leur implémentation.

Limites à vérifier

  • API dépendantes de la versionLa source capturée déclare la version 4.0.534. Vérifiez la version de Remotion de votre projet avant de vous appuyer sur ces API de composants interactifs.
  • Les boucles partagent des cibles d'éditionLes éléments répétés par programmation conviennent à un modèle commun, mais pas à des noms de clips, des timings ou des suppressions indépendants.

Éléments à fournir

  • JSX actuelFournissez l'enregistrement des compositions et les composants dont les contrôles sont indisponibles ou grisés.
  • Exigences d'éditionIndiquez les propriétés et les instances individuelles que l'éditeur doit pouvoir modifier.
  • Sémantique de la timelinePrécisez les décalages, rognages, imbrications et la fréquence d'images existants afin que le refactoring ne déplace pas l'animation.

03 Décisions importantes

Décisions importantes

  1. La forme du code compte

    Une même image rendue peut offrir des capacités d'édition différentes selon l'endroit où se trouvent les valeurs dans le code source.

  2. Des contrôles voulus

    Les schémas gardent visibles les choix utiles par instance sans transformer chaque détail décoratif d'implémentation en contrôle.

04 Exemple de brief

Essayer un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Gardez ensemble l'entrée d'interactivité et les références liées, et vérifiez l'API de Remotion installée avant le refactoring.

Fichier source amont
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-interactivity/SKILL.md

Une version de Remotion compatible avec les API Interactive documentées ; @remotion/paths est en outre nécessaire pour l'interpolation de tracé modifiable décrite.

Commencer par un seul livrable

Adaptez le périmètre, les contenus sources et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilise Remotion Interactivity pour refactoriser cette scène de bandeau de titrage afin qu'elle soit modifiable dans Studio sans changer son timing rendu. Expose le texte et la couleur d'accent, transmets le style à une seule racine, et enregistre le même composant exporté comme composition connectée. Garde deux instances modifiables indépendamment et vérifie que déplacer l'une ne modifie pas l'autre.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque calque modifié indépendamment a son propre nœud source.
  • Les contrôles du schéma apparaissent et enregistrent les modifications dans le code.
  • Le refactoring conserve les décalages et l'apparence rendue.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, identifiants et dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source épinglée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
remotion-dev
Dépôt
remotion-dev/skills
Fichier du skill
skills/remotion-interactivity/SKILL.md
Licence
Non confirmée — consultez les conditions en amont avant toute réutilisation.
Instantané examiné
2026-10-07 · 32b241b97f4e
Résumé éditorial de la source
Règles de balisage pour des calques Remotion modifiables dans le code source, des schémas personnalisés, des valeurs d'animation en ligne et l'enregistrement de compositions connectées.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Pourquoi certains champs de Studio apparaissent-ils grisés ?

La source note qu'un balisage trop complexe peut empêcher Studio d'interpréter les valeurs. Elle recommande des expressions en ligne prises en charge et des schémas explicites.

Chaque objet répété doit-il avoir son propre nœud JSX ?

Seulement s'il doit pouvoir être modifié indépendamment dans la source. Les barres ou particules issues d'un modèle commun peuvent toujours être générées par programmation.

Extraire un composant crée-t-il une composition connectée ?

Non. Le composant extrait doit aussi être enregistré avec des dimensions, une durée, une fréquence d'images et des valeurs par défaut adaptées.

OpenDesign

Faites de la place pour la prochaine itération de conception.

Gardez votre brief, vos contenus sources et votre travail de conception ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre workflow.

Télécharger OpenDesignParcourir les skills de conception
Fichier source amont
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-interactivity/SKILL.md