106.9K+Descargar
Ir a la guía de uso
Motion Canvaspor VideoZero

Motion Canvas Skill.

Escribe escenas Motion Canvas con generadores, señales reactivas y nodos reutilizables.

  • TypeScript
  • Animación Canvas
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · motion-canvasSKILL.md
Tarea Escribe escenas Motion Canvas con generadores, señales reactivas y nodos reutilizables. Resultados Código de escena Motion Canvas con la configuración existente del proyecto. Antes de empezar Aporta un proyecto Motion Canvas existente, su versión instalada y un brief de escena con el orden de acciones. Decide qué valores serán señales compartidas y qué momentos necesitan eventos temporales nombrados.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Escribe escenas Motion Canvas con generadores, señales reactivas y nodos reutilizables

Construye escenas Motion Canvas con tiempos basados en generadores, señales reactivas, referencias de nodos, formas y transiciones explícitas.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

motion-canvas es una referencia del framework para escribir escenas Motion Canvas en TypeScript. Explica la secuenciación por generadores, señales reactivas, referencias y jerarquía de escena, y muestra cómo combinarlas con formas, texto, trazados y medios.

La fuente incluye mecanismos prácticos de estado y tiempos: guardar y restaurar nodos, esperar eventos nombrados, ejecutar tareas en segundo plano y finalizar transiciones personalizadas. Es útil cuando el agente ya sabe qué escena construir y necesita los conceptos correctos del framework para expresarla.

Entregables esperados

  • Código de escena Motion Canvas con la configuración existente del proyecto.
  • Señales, componentes y secuencias temporales reutilizables.
  • Un proyecto preparado para su flujo configurado de vista previa y renderizado.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Definir los objetos de escena

    Crea las formas y textos necesarios, asigna referencias y sitúalos en una jerarquía clara de nodos.

  2. 02
    Conectar estado y tiempos

    Usa señales para valores cambiantes y funciones generadoras para la secuencia. Usa all() para acciones simultáneas y yield* para una secuencia que espere a que termine una animación. Los eventos waitUntil() nombrados pueden alinear una escena con una señal de narración.

  3. 03
    Comprobar transiciones y salida

    Añade los nodos de la escena entrante antes de iniciar slideTransition(), para que no aparezcan bruscamente después. Un useTransition() personalizado devuelve una función de finalización que debe llamarse tras la animación de transición. Inspecciona la vista previa o renderizado configurado y conserva los ajustes de salida del proyecto.

02 Cuándo usarlo

Cuándo usarlo

Aporta un proyecto Motion Canvas existente, su versión instalada y un brief de escena con el orden de acciones. Decide qué valores serán señales compartidas y qué momentos necesitan eventos temporales nombrados.

Buen encaje

  • La animación con código necesita secuenciación precisaLos generadores y eventos temporales nombrados hacen explícita la relación entre acciones.
  • Varios objetos comparten un valor cambianteLas señales calculadas pueden derivar geometría de una fuente única en vez de actualizar manualmente cada nodo.

Límites que conviene comprobar

  • El framework debe estar disponibleEl skill es una referencia, no un entorno Motion Canvas funcional incluido.
  • Es independiente de automatizar el editorLa navegación temporal, capturas y control HTTP del renderizado pertenecen al skill complementario motion-canvas-agent.
  • Los ejemplos necesitan comprobaciones del proyectoLa versión existente del framework y la configuración de salida deben regir la adaptación de ejemplos.

Aporta estos datos

  • Brief de escenaDescribe objetos visibles, orden de acciones y explicación o historia.
  • Configuración del proyectoProporciona las fuentes actuales de Motion Canvas y la versión instalada.
  • Tiempos y salidaEspecifica duración, eventos, dimensiones y formato de renderizado requerido.

03 Decisiones importantes

Decisiones importantes

  1. Relaciones reactivas de escena

    Una señal calculada puede sincronizar dimensiones dependientes.

  2. Secuenciación legible

    El código generador hace visibles en la fuente esperas, acciones paralelas y transiciones.

  3. Componentes reutilizables

    Los nodos personalizados y estados guardados permiten repetir elementos visuales y realizar acciones reversibles.

04 Ejemplo de brief

Prueba con un encargo concreto

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

Revisa la fuente y la configuración

Describe objetos visibles, orden de acciones y explicación o historia.

Archivo fuente original
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

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 motion-canvas para construir en mi proyecto existente una escena breve que muestre tres paquetes atravesando una cola. Da a cada paquete una identidad estable y deriva el espaciado de la cola de una señal única. Introduce las etiquetas antes de la acción, mueve los paquetes en secuencia y sincroniza el contador con el estado visible. Usa un evento nombrado para la pausa explicativa final. Conserva la versión instalada del framework y los ajustes actuales de renderizado. Entrega el código de escena e inspecciona las transiciones de entrada y salida, especialmente cualquier objeto que aparezca solo después de terminar la transición.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Comprueba relaciones entre señales y referencias estables de objetos.
  • Verifica orden de secuencia, tareas en segundo plano y finalización de transiciones.
  • Inspecciona por separado la vista previa configurada y la salida realmente renderizada.

OpenDesign ofrece un espacio de trabajo 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 OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

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

Propietario de la fuente
VideoZero
Repositorio
VideoZero/skills
Archivo del skill
SKILL.md
Licencia
Apache-2.0
Versión revisada
2026-11-02 · 670ff96af614
Resumen editorial de la fuente
Escribe escenas Motion Canvas con generadores, señales reactivas y nodos reutilizables.

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

¿Qué aportan las funciones generadoras?

Describen acciones temporales de escena mediante yields, esperas y operaciones de animación compuestas. La fuente las usa como mecanismo principal de secuenciación.

¿Para qué se usan las señales?

Almacenan valores cambiantes y pueden derivar otros de forma reactiva, como el tamaño de una forma a partir de un radio compartido.

¿Incluye automatización de capturas?

La referencia del framework cubre la creación de escenas. El skill complementario motion-canvas-agent documenta un puente de control HTTP y capturas para un editor en ejecución.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el 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 OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md