Remotion Markuppor remotion-dev

Remotion Markup Skill.

Escribe marcado React que se comporte como una línea de tiempo de vídeo y no como una página web con animación de CSS.

Vídeo
React
Movimiento

Revisión de la fuente · Remotion MarkupSKILL.md

Tarea Vídeo Produce • Marcado de composición React basado en fotogramas • Capas multimedia con tiempos explícitos y referencias a recursos • Una escena previsualizable con estructuras de efectos y edición compatibles Antes de empezar Remotion y paquetes específicos de cada función que coincidan con la versión del proyecto; las referencias enlazadas determinan los requisitos adicionales de multimedia, efectos, tipografías o exportación.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Remotion Markup: escenas de vídeo basadas en fotogramas

Un contrato de creación basado en fotogramas y un centro de referencias para tiempos, multimedia, escenas editables y efectos visuales de Remotion.

Flujo de trabajo basado en la fuenteNo es una prueba de ejecución

El enfoque de trabajo

Remotion Markup se centra en la creación de composiciones: tiempos derivados de la frecuencia de fotogramas de la composición, animación impulsada por el fotograma actual y elementos multimedia que participan en una línea de tiempo de vídeo. La fuente advierte expresamente de que las transiciones y clases de animación CSS habituales no sustituyen al renderizado basado en fotogramas.

También es un centro de referencias para trabajos más especializados, desde subtítulos y mapas hasta medición de texto, efectos y audio. Su valor concreto es el contrato base: mantener los tiempos junto al elemento creado, conservar objetivos de edición independientes y usar el componente multimedia o de efecto adecuado en lugar de tratar cada elemento visual como un contenedor DOM arbitrario.

Entregables esperados

Marcado de composición React basado en fotogramas
Capas multimedia con tiempos explícitos y referencias a recursos
Una escena previsualizable con estructuras de efectos y edición compatibles

Ver el brief de ejemplo

Del brief a la revisión

01
Lee los ajustes de la composición
Usa la frecuencia de fotogramas existente para convertir segundos en fotogramas y conserva la duración y las dimensiones previstas.
02
Crea capas temporizadas
Mantén los medios y escenas editables por separado en nodos JSX distintos, con los tiempos directamente en los componentes que los admitan. La fuente revisada también exige un segundo de premontaje mediante premountFor={fps} en los componentes temporizados compatibles, incluidos los elementos anidados; comprueba la API de tu versión instalada antes de aplicarlo.
03
Añade movimiento y efectos
Impulsa el movimiento con interpolación según el fotograma actual. Dirige los efectos especializados a la referencia correspondiente y a un componente compatible.
04
Inspecciona los fotogramas del vídeo
Revisa la reproducción en Studio y fotogramas renderizados representativos para detectar desbordes de texto, problemas de carga de medios y errores de tiempos.

02 Cuándo usarlo

Cuándo usarlo

Remotion y paquetes específicos de cada función que coincidan con la versión del proyecto; las referencias enlazadas determinan los requisitos adicionales de multimedia, efectos, tipografías o exportación.

Buen encaje

Vídeos de productoCombina metraje, imágenes, rótulos inferiores y audio en una línea de tiempo repetible.
Movimiento editable en códigoÚtil cuando las capas visuales deben seguir siendo comprensibles y editables tanto en el código como en Studio.

Límites que conviene comprobar

No es animación de navegadorLas transiciones de CSS y las clases de animación de Tailwind se señalan como inadecuadas para el modelo de renderizado documentado.
Dependencias de referencias y versionesLa entrada enlaza con muchos documentos específicos de cada función. Los componentes y efectos disponibles deben comprobarse con la versión instalada de Remotion.

Aporta estos datos

Brief de composiciónIndica la secuencia de escenas, la duración, las dimensiones y el ritmo previsto.
Recursos multimediaProporciona archivos reales de imagen, audio, vídeo y tipografía, o URL de origen aprobadas.
Necesidades de ediciónIdentifica las capas que deben poder cambiarse de forma independiente tras la creación inicial.

03 Decisiones importantes

Decisiones clave

Tiempos según la frecuencia de fotogramas
Usar los fps de la composición mantiene las expresiones de tiempo conectadas con los ajustes reales del vídeo.
Los efectos tienen destinos
La fuente distingue entre los componentes que aceptan efectos directamente y el contenido DOM, que requiere un contenedor canvas adecuado.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Carga todo el conjunto de referencias de marcado. Los comandos de añadir paquetes de la fuente instalan módulos de ejecución, no este Skill en sí.

Archivo fuente original

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

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa Remotion Markup para añadir a este metraje una superposición temporizada con el título del producto. Conserva la frecuencia de fotogramas y la duración de escena actuales. Usa opacidad y traslación basadas en fotogramas, mantén el título editable de forma independiente y carga la guía de medición de texto antes de ajustar el subtítulo largo. Previsualiza los fotogramas de entrada, estabilizado y salida.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Ningún movimiento necesario depende de animaciones o transiciones de CSS.
Las capas temporizadas conservan sus propios nodos de origen editables.
El texto y los medios son correctos en fotogramas renderizados representativos.

OpenDesign ofrece un espacio de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada a continuación. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: remotion-dev
Repositorio: remotion-dev/skills
Archivo del skill: skills/remotion-markup/SKILL.md
Licencia: No confirmada: revisa los términos originales antes de reutilizarlo.
Versión revisada: 2026-10-07 · 32b241b97f4e

Resumen editorial de la fuente

Un contrato de creación basado en fotogramas y un centro de referencias para tiempos, multimedia, escenas editables y efectos visuales de Remotion.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puedo reutilizar una animación de CSS?

La fuente indica que hay que refactorizarla como animación de Remotion basada en fotogramas para que el renderizado siga la línea de tiempo.

¿Debo envolver cada componente en Sequence?

No. Prefiere props de tiempo directas cuando se admiten y reserva los contenedores para tiempos compartidos relevantes u otros comportamientos.

¿Se pueden aplicar efectos a cualquier div?

No directamente mediante la prop de efectos documentada. La entrada identifica los componentes compatibles y una vía HtmlInCanvas para contenido DOM agrupado.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y tu trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño