Communitygithub.com

motion-storyboard

Crea un storyboard detallado para un guion de papercut antes de escribir cualquier código. Define la tabla de Cámara/Corte, un bloque por escena con eventos a nivel de fotograma en cada palabra acentuada, el plan de efectos de sonido y el ritmo de la prueba. Úsalo para 'previsualizar este guion' o 'planificar los movimientos de cámara y cortes'.

¿Qué es motion-storyboard?

Este skill define el proceso de creación de un storyboard para animaciones de papercut (recorte de papel) en kits de movimiento como Motion Explainer. Su propósito es planificar cada escena antes de que los agentes de escena comiencen a trabajar, asegurando coherencia visual y narrativa. El storyboard especifica el movimiento de cámara y el tipo de corte para cada escena, evitando que los agentes inventen transiciones genéricas. Además, incluye una tabla detallada de Cámara/Corte, bloques de escena con eventos por fotograma en cada palabra acentuada, un plan de efectos de sonido y un ritmo de prueba (proof beat). El skill se apoya en archivos de catálogo y herramientas de la biblioteca de Motion Explainer, como `catalog.py` y `capture.mjs`, y requiere la presencia de `narration/script.json` y `video/STORYBOARD.md` con el bloque HOOK y la tabla de escenografía. El resultado final se entrega al proceso `motion-build` para generar el proyecto y el archivo `episode.json`.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/boytegar/motion-skills/tree/HEAD/skills/motion-storyboard

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Storyboard de Papercut

El storyboard es el plan a partir del cual se construye cada escena. Especifica el movimiento de cámara y el corte de cada escena, para que el agente de escena no los invente. Un resumen que diga "CameraPush o tu propia transformación" genera un push plano o un zoom artesanal en cada escena, y los movimientos de cámara del kit quedarían sin usar.

Preflight

  • Instalación: Mínima suficiente. Con una biblioteca, consulta style/$MOTION_STYLE/remotion/CATALOG.md (secciones "paper/camera.tsx" y "paper/transitions.tsx") para conocer las propiedades de cada movimiento y cuándo encaja. Si el archivo falta o está desactualizado, ejecuta python3 $MOTION_LIB/core/tools/catalog.py. Resuelve $MOTION_LIB desde el entorno, o desde la línea MOTION_LIB= en ~/.config/motion-explainer/config.env, o pregúntalo una sola vez.
  • Necesita narration/script.json y video/STORYBOARD.md con el bloque HOOK y la tabla de escenografía (banner, decorado, utilería, momento de UI, mascota, gag por fila). Si faltan, ejecuta motion-hook y motion-script.
  • Hoja de fondos para elegir decorados: style/$MOTION_STYLE/remotion/public/bg/backdrops/_sheet.jpg. Abre solo lo que el paso necesite.

1. Reglas globales

Colócalas al inicio de STORYBOARD.md, debajo del bloque HOOK. Paleta por rol (rota los colores de fondo por decorado): $MOTION_LIB/style/$MOTION_STYLE/docs/style-guide.md sección 5. Fuentes: sección 6. Lienzo y zonas: sección 4. Una característica especial que se ajuste a una metáfora extendida puede usar la sección 12.

  • 1080x1920, 30 fps. Banner al 14-21% de altura, banda de subtítulos 68-80% (se desplaza por escena para no tapar rostros), 20% inferior despejado.
  • Luz desde la esquina superior izquierda. Saturación solo en personajes, subtítulos y señales.

2. Tabla de Cámara / Corte

Una fila por escena, antes de los bloques de escena. Cada fila nombra un componente del kit de paper/camera.tsx y el tipo de CutSeries (de paper/transitions.tsx) para el corte de entrada a esa escena.

EscenaCámara (paper/camera.tsx)Corte de entrada (tipo CutSeries)
S01HookOrbitCamera + Depth, SnapZoom en ""none
S04NameCrane sube hasta <utilería focal>tearAway
S09PeakCrabTrack a lo largo de <alineación>whip
S10CTARackFocus <utilería> al teléfonotapePull
  • Opciones de cámara: OrbitCamera + Depth, SnapZoom, Crane, CrabTrack, DollyZoom, RackFocus, ForegroundPass, DutchTilt, FocusPulse, FreezeFrame, PullBack, PovMask, TimeRamp, TiltShift, FocusHunt, Handheld y CameraPush (de paper/kit.tsx). La sección paper/camera.tsx del catálogo indica cuándo encaja cada una.
  • Opciones de corte: hard, whip, zoomThrough, pageTurn, tearAway, tapePull, stampCut, infiniteZoom, popUpBook, keyhole, burnAway.
  • Se permite un CameraPush simple en como máximo un tercio de las escenas.
  • Copia la cámara de cada fila en el encabezado del bloque de su escena. La columna de corte va en episode.json como "cuts": {"S04Name": {"kind": "tearAway"}} (sin entrada significa corte directo), que motion-build completará.

3. Bloques de escena

Un bloque por escena, de 1.5 a 5 s cada uno, con corte en los límites de las oraciones:

## S03: <ritmo>  (5.6-8.2 s, 78 f)   BANNER: <CONCLUSIÓN EN MAYÚSCULAS>
Ubicación/fondo: <ubicación mundial + color de fondo>     Cámara: <componente camera.tsx + parámetros, de la tabla>   Corte de entrada: <tipo>
Elenco: <quién, accesorios>                       Banda de subtítulos: y=0,76
| Palabra de VO (acentuada) | fotograma | evento                                  | especificación de movimiento |
| "<palabra>"               | +6        | <utilería entra / estado cambia / actúa> | <spring/slide/swap + fotogramas> |
Ambiente: <parpadeo LED, balanceo inactivo, estrellas, forma de onda en pantalla>
Hervor: banner + etiquetas, +-1,5 px cada 2 fotogramas
SFX: <pop, chime, click...>
  • Expande cada fila de la tabla de escenografía en eventos a nivel de fotograma: uno por palabra acentuada (cada 0.4-0.8 s), movimiento ambiental siempre activo. Los fotogramas son desplazamientos desde la palabra, que luego se leen con cueOf(ID)(word, n).
  • La interfaz de usuario del producto es la reconstrucción aproximada en un monitor o portátil de papel, con interacciones falsas (clic del cursor, escritura, progreso, forma de onda, desplazamiento de lista).
  • Prueba: una vez por rollo, una captura de pantalla real de la página de origen (una captura del navegador mediante $MOTION_LIB/core/tools/capture.mjs, no un redibujado) pegada en una tarjeta de papel, con un círculo marcador rojo dibujándose alrededor de la línea clave. Todo lo demás sigue siendo una reconstrucción tosca de papercut.
  • Un guiño a un decorado anterior antes del CTA.

4. Reglas de cámara y transiciones

  • Cada escena tiene un movimiento. Un push lento es la línea base. Agrega una órbita de paralaje en decorados iluminados para dar profundidad, un punch-in o snap zoom en la palabra acentuada para números y chistes, un paso en primer plano (objeto de papel borroso a través de la lente) o rack focus, un pull-back para revelar escala, y un fotograma congelado con una etiqueta en el ritmo de la mascota en dificultades.
  • Mayormente cortes directos al cambiar el banner. Un whip-pan con desenfoque de movimiento en 2-3 cambios de tema, un zoom-through al entrar "dentro" de una pantalla, puerta o espejo, como máximo un page turn o tear por rollo (en el gancho o un contraste antes/después), y el tape pull hacia el CTA (una tira de papel kraft simple, con una label opcional para imprimir una palabra).
  • El corte de salida del gancho lleva movimiento a través de él. Aplica la regla de motion-hook a S01 y S02.
  • Las transiciones duran 6-12 fotogramas, cada una con su SFX (whip, zoom, page-flip, rip, tape-peel).
  • En un proyecto de biblioteca, encadena las escenas con la serie de transiciones del kit, que mantiene cada inicio de escena en su fotograma de plan.json para que la voz se mantenga sincronizada.

5. Plan de SFX

  • Sonidos de aire (whoosh, slide, whip, zoom) juntos: como máximo uno cada 2.5 s de rollo. cues.py imprime una nota por encima de eso. Para escala, 12 en 33 s está bien y 24 en 26 s es molesto.
  • Las entradas obtienen sonidos de contacto (pop, thud, stamp) o silencio. Cuéntalos en tools/cues.json antes de la renderización de audio.
  • Nombra los SFX desde $MOTION_LIB/core/audio/CATALOG.md en la línea SFX: de cada bloque. Los agentes de escena escriben las filas reales en tools/cue_sheet.d/<Scene>.json.
  • Elige el preset de fondo (episode.json "bed") y configura cutSfx para que coincida con los tipos de corte: tearAway rip, tapePull tape-peel.

Gate

  • Cada escena tiene una cámara y un corte de entrada, y CameraPush simple está en como máximo un tercio de ellas.

  • Cada palabra acentuada tiene un evento; el movimiento ambiental está listado.

  • Un ritmo de prueba, un guiño, el tape pull o whip hacia el CTA.

  • Como máximo un page turn o tear; sonidos de aire dentro del presupuesto.

  • Nombra la anticipación y el ritmo exagerado único en la tabla de eventos de cada bloque de escena. Los 12 principios, mapeados a los componentes del kit, están en $MOTION_LIB/style/$MOTION_STYLE/docs/motion-principles.md.

Hand-off

El siguiente paso es motion-build, que crea la estructura del proyecto y convierte la tabla de Cámara/Corte y los límites de escena en episode.json. Lee STORYBOARD.md y narration/script.json. La sección de Temporización de STORYBOARD.md se genera más tarde, después de la voz, así que déjala fuera.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados