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

Remotion Markup Skill.

Écrivez du balisage React qui se comporte comme une timeline vidéo plutôt que comme une page web avec une animation CSS.

  • Vidéo
  • React
  • Animation
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Remotion MarkupSKILL.md
Tâche Vidéo Produit • Balisage de composition React piloté par les images • Calques média avec minutage explicite et références aux ressources • Une scène prévisualisable avec des structures d’effets et d’édition prises en charge Avant de commencer Remotion et des packages propres aux fonctionnalités, correspondant à la version du projet ; les références liées déterminent les besoins supplémentaires en médias, effets, polices ou export.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Remotion Markup : scènes vidéo pilotées par les images

Un contrat d’écriture basé sur les images et un point d’entrée de références pour le minutage, les médias, les scènes modifiables et les effets visuels de Remotion.

Flux de travail basé sur la sourcePas un benchmark d’exécution

L’approche de travail

Remotion Markup se concentre sur l’écriture de compositions : minutage calculé à partir de la fréquence d’images de la composition, animation pilotée par l’image courante et éléments média qui participent à une timeline vidéo. La source avertit explicitement que les transitions CSS ordinaires et les classes d’animation ne remplacent pas un rendu piloté par les images.

C’est aussi un point d’entrée vers des travaux plus spécialisés, des sous-titres et cartes à la mesure du texte, aux effets et à l’audio. Sa valeur concrète est le contrat de base : garder le minutage près de l’élément rédigé, préserver des cibles d’édition indépendantes et utiliser le composant média ou d’effet approprié plutôt que de traiter chaque visuel comme un simple conteneur DOM.

Livrables attendus

  • Balisage de composition React piloté par les images
  • Calques média avec minutage explicite et références aux ressources
  • Une scène prévisualisable avec des structures d’effets et d’édition prises en charge
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Lire les réglages de la composition

    Utilisez la fréquence d’images existante pour convertir les secondes en images et conservez la durée et les dimensions prévues.

  2. 02
    Écrire les calques minutés

    Gardez les médias et scènes modifiables indépendamment sur des nœuds JSX distincts, avec le minutage directement sur les composants qui le permettent. La source examinée exige aussi une seconde de prémontage via premountFor={fps} sur les composants minutés pris en charge, y compris les éléments imbriqués ; vérifiez l’API installée avant de l’appliquer.

  3. 03
    Ajouter mouvement et effets

    Pilotez le mouvement par interpolation sur l’image courante. Dirigez les effets spécialisés vers la référence correspondante et un composant compatible.

  4. 04
    Inspecter les images vidéo

    Vérifiez la lecture dans Studio et des images rendues représentatives : débordement de texte, disponibilité des médias et minutage.

02 Cas d’usage

Quand l’utiliser

Remotion et des packages propres aux fonctionnalités, correspondant à la version du projet ; les références liées déterminent les besoins supplémentaires en médias, effets, polices ou export.

Bon cas d’usage

  • Vidéos produitCombine séquences, images, bandeaux et audio dans une timeline reproductible.
  • Animation modifiable dans le codeUtile quand les calques visuels doivent rester compréhensibles et modifiables à la fois dans le code source et dans Studio.

Limites à vérifier

  • Pas de l’animation de navigateurLes transitions CSS et les classes d’animation Tailwind sont signalées comme inadaptées au modèle de rendu documenté.
  • Dépendances de références et de versionsL’entrée renvoie à de nombreux documents propres aux fonctionnalités. Les composants et effets disponibles doivent être vérifiés par rapport à la version de Remotion installée.

Fournissez ces éléments

  • Brief de compositionIndiquez la séquence des scènes, la durée, les dimensions et le rythme visé.
  • Ressources médiaFournissez de vrais fichiers d’image, d’audio, de vidéo et de police, ou des URL de source approuvées.
  • Besoins d’éditionIdentifiez les calques qui devront pouvoir être modifiés indépendamment après l’écriture initiale.

03 Décisions importantes

Décisions importantes

  1. Minutage tenant compte de la fréquence d’images

    Utiliser les fps de la composition garde les expressions de temps liées aux réglages réels de la vidéo.

  2. Les effets ont des cibles

    La source distingue les composants qui acceptent directement des effets du contenu DOM nécessitant un conteneur canvas adapté.

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

Chargez l’ensemble des références de balisage. Les commandes d’ajout de packages de la source installent des modules d’exécution, pas ce skill lui-même.

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

Remotion et des packages propres aux fonctionnalités, correspondant à la version du projet ; les références liées déterminent les besoins supplémentaires en médias, effets, polices ou export.

Commencer par un seul livrable

Adaptez le périmètre, le matériel source et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilisez Remotion Markup pour ajouter une incrustation minutée de titre produit à cette séquence. Conservez la fréquence d’images et la durée de scène actuelles. Utilisez une opacité et une translation pilotées par les images, gardez le titre modifiable indépendamment et chargez les consignes de mesure du texte avant d’ajuster le long sous-titre. Prévisualisez les images d’ouverture, de stabilisation et de sortie.

Inspecter le résultat

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

  • Aucun mouvement requis ne dépend d’une animation ou de transitions CSS.
  • Les calques minutés conservent leurs propres nœuds source modifiables.
  • Le texte et les médias sont corrects dans des images rendues représentatives.

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

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

05 Source et licence

Source et licence

Cette page décrit la révision de 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-markup/SKILL.md
Licence
Non confirmée — consultez les conditions en amont avant toute réutilisation.
Version examinée
2026-10-07 · 32b241b97f4e
Résumé éditorial de la source
Un contrat d’écriture basé sur les images et un point d’entrée de références pour le minutage, les médias, les scènes modifiables et les effets visuels de Remotion.

Résumé original de OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Puis-je réutiliser une animation CSS ?

La source indique de la refactoriser en animation Remotion pilotée par les images afin que le rendu suive la timeline.

Dois-je envelopper chaque composant dans Sequence ?

Non. La source préfère les propriétés de minutage directes lorsqu’elles sont prises en charge et réserve les conteneurs à un minutage partagé pertinent ou à un autre comportement.

Peut-on appliquer des effets à n’importe quel div ?

Pas directement via la propriété d’effets documentée. L’entrée identifie les composants pris en charge et une voie HtmlInCanvas pour le contenu DOM groupé.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, votre matériel source et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

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