El enfoque de trabajo
Remotion Interactivity aborda un problema concreto de creación: un vídeo puede renderizarse correctamente y, aun así, sus capas pueden ser difíciles o imposibles de editar desde Studio. La fuente explica qué patrones de marcado puede reconocer el editor, incluidos los estilos en línea, los elementos con nombre, las expresiones de interpolación compatibles y los nodos JSX escritos directamente.
Su enfoque de componentes personalizados usa un esquema de interactividad para exponer controles útiles por instancia. Un componente con su propia línea de tiempo también puede registrarse como composición conectada. Se trata de la relación entre el código fuente y el editor de vídeo, no de añadir botones en los que se pueda hacer clic a un vídeo publicado.
Entregables esperados
- Capas de vídeo con nombre y editables individualmente
- Componentes personalizados con controles declarados de contenido y apariencia
- Composiciones conectadas con sus propias líneas de tiempo editables
Del brief a la revisión
- 01Identifica las unidades de edición
Enumera los clips, escenas y capas que deben cambiarse por separado. Da a cada uno su propio nodo JSX escrito a mano en lugar de generarlos todos desde un bucle.
- 02Expón controles útiles
Añade un InteractivitySchema para propiedades relevantes de texto, color, medios o valores numéricos, y reenvía el estilo inyectado a una única raíz visual.
- 03Mantén el código editable
Coloca en línea los fotogramas clave y estilos compatibles, conserva la semántica de fotograma del llamador frente al local y registra las escenas reutilizables con el mismo componente exportado.
- 04Prueba las ediciones en Studio
Selecciona, mueve y ajusta en Studio las capas previstas y luego comprueba si los cambios se escriben en el nodo de código esperado.