motion-design: el taller (Remotion, tema, sonidos, música)

¿Qué hace motion-design: el taller (Remotion, tema, sonidos, música)?

Todo es local y determinista: mismo código = mismo MP4. Ninguna imagen o video generado por IA.

La pila tecnológica

Pieza	Herramienta	Dónde
Animación	Remotion 4.0.529 (React / TSX), versiones fijadas en package.json	src/; npx remotion add <paquete> para un módulo más
Tema	colores, tipografías, tamaños, márgenes	src/illustration/theme.ts (leído por las constantes C y F de src/illustration/scenes/kit.tsx), tipografías en public/fonts/
Módulos de Remotion	transiciones, efectos, gsap, three, ruido, trayectorias, formas, desenfoque de movimiento, fugas de luz, ráfaga estelar, notación aproximada, subtítulos, utilidades de diseño, lottie	package.json
Composiciones gráficas	BrandedVideo (escenas a pantalla completa), LowerThirdTrack (tercios inferiores, títulos de sección), Screencast (demos de sitio), Scene (catálogo de escenas), ControleTexte (verificación de texto), FondAnime (fondo animado en bucle; su grano lo genera scripts/make-grain.py)	src/illustration/, declaradas en Compositions.tsx, conectadas en src/Root.tsx
Señales compartidas	tiempos clave en segundos, leídos por la animación Y por el sonido	src/<proyecto>/cues.json
Música	una partitura escrita en Python sobre un sintetizador numpy (scripts/synth.py: piano eléctrico FM, pad, bajo, percusión, crujido de vinilo, reverberación)	music/<proyecto>.py, modelo: music/example_pad.py
Efectos de sonido	paleta sintetizada: lee reference/sound-palette.md antes de cualquier sonido. Recetas de síntesis scripts/make-sfx.py -> public/sfx/*.wav + palette.json; vocabulario gestual scripts/son.py (un plan nombra un gesto, nunca un archivo; las listas son una tarjeta colocada por elemento por defecto, son.LISTES; son.releve: una lista numerada de los sonidos de un video, para revisión por número); scripts/palette-import.py (una paleta de grabaciones reales, mismos nombres de archivo, recurre al valor por defecto); scripts/sfx.py (algunos sonidos adicionales: obturador, tic de enfoque, whoosh)	scripts/
Mezcla	música + efectos de sonido + voz, música con atenuación bajo la voz, sonoridad objetivo EBU R128, pico verdadero limitado a -1.5 dBTP (limitador sobremuestreado, solo cuando supera el límite)	scripts/mix.py
Verificaciones	balance tonal por octava, sonoridad	scripts/ltas.py, mix.py

Licencias. Remotion es gratuito para individuos y para empresas de hasta 3 empleados; más allá se requiere una licencia empresarial (remotion.pro). Lee su LICENSE.md antes de usar el kit comercialmente en una empresa más grande. Las tipografías Inter y Source Serif 4 están bajo la OFL (public/fonts/OFL-*.txt); los sonidos y la música de ejemplo se sintetizan aquí, sin derechos de terceros. Música encontrada en otro lugar: verifica su licencia (sin CC-BY-NC en un canal monetizado).

Configuración, y qué hace la línea de node_modules

El plugin se instala una vez con:

bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"

(Claude Code reemplaza ambas variables con rutas reales cuando lee este archivo). Por qué una carpeta de datos: la carpeta del plugin se reemplaza en cada actualización del plugin, y node_modules pesa alrededor de 1 GB. Así que npm ci se ejecuta una vez en la carpeta de datos del plugin (${CLAUDE_PLUGIN_DATA}), que sobrevive a las actualizaciones, y skills/motion-design/node_modules es un enlace simbólico a ella. Si node_modules falta después de una actualización del plugin (la nueva carpeta del plugin no tiene enlace), vuelve a ejecutar la línea de arriba: solo hace lo que falta y vuelve a enlazar en un segundo.

Instalación manual (las cuatro carpetas skills/ copiadas una al lado de la otra en ~/.claude/skills/): bash install.sh desde la raíz del kit; node_modules es entonces una carpeta normal instalada por npm ci. Lado Python: python3 -m pip install numpy scipy soundfile pillow, y brew install ffmpeg. Detalles y una verificación de toda la cadena: INSTALL.md del kit.

Ejecuta cada comando de esta habilidad desde la carpeta del taller (skills/motion-design).

Pipeline de un video completo de motion-design

1. Encuadrarlo: duración, formato (1920x1080 a 30 fps por defecto; 1080x1920 para un reel vertical; 1080x1080 para un cuadrado), uso, restricciones de la plataforma. Escribe src/<proyecto>/cues.json: los tiempos clave guían tanto la imagen como el sonido.
2. Animar: una composición por entregable en src/<proyecto>/, declarada en src/Root.tsx, props tipificadas con zod. Todo deriva de useCurrentFrame(): nunca una animación CSS libre, nunca Math.random() (random(seed) o noise2D). Solo colores y tipografías del tema.
3. Verificar la imagen sin esperar una renderización: npx remotion still src/index.ts <Id> out.png --frame=N en los fotogramas clave, luego una hoja de contactos del MP4 (ffmpeg tile). Juzgar al tamaño de un teléfono: la imagen reducida a 390 px de ancho debe mantenerse legible.
4. Voz en off (si la hay): grabada por el usuario (WAV de 48 kHz), colocada con --voice-at. El kit no clona voces.
5. Música y efectos de sonido: python3 music/<proyecto>.py <duración> music.wav; sonidos a través de son.py, colocados en los mismos instantes que la imagen (el plan llama a son.releve(...) para escribir la lista numerada para escuchar); verificar con python3 scripts/ltas.py music.wav (sin hueco más profundo de aproximadamente 6 dB contra una pendiente suave).
6. Mezcla: python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<proyecto>_mix.wav (-14 para un reel, -16 para YouTube; --sfx-voix-ref -22 reescala los efectos de sonido sobre la voz real).
7. Renderizar: npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<proyecto>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k.
8. Entregar sin sobrescribir un entregable existente (sufijo -v2), con una vista previa.

Renderizaciones colocadas en Premiere (gráficos)

• Sin logotipo en una escena, un gráfico a pantalla completa o un tercio inferior: carga la imagen para nada.
• Un archivo destinado a una secuencia de 29.97 fps debe cubrir TODO su clip: n fotogramas de secuencia duran n x 1.001 / 30 s. Las composiciones de src/illustration/ aceptan tailFrames: el componente TenirFin (src/illustration/tenir-fin.tsx) reproduce la animación durante su duración, luego mantiene el último fotograma; las animaciones de salida no se mueven. El script render-segments.py de la habilidad overlays calcula tailFrames.
• Las composiciones gráficas son renderizadas por scripts/render-segments.py, scripts/screencast-render.py y scripts/montage-tella.py de la habilidad overlays (carpeta de trabajo = este taller, fotogramas PNG, 4 núcleos), nunca a mano fuera de una verificación de remotion still. Los medios llamados a través de staticFile van en public/scenes/<video>/.

Hazlo tuyo (cambia el tema)

El kit incluye un tema neutro: acento azul #2F5BEA, Inter y Source Serif 4, un archivo de tema, src/illustration/theme.ts. Para usar tu propia marca:

1. Colores: src/illustration/theme.ts (color: base, contraste, inkSoft, muted, surface, line, accent, accentDark, accentWash, darkBg, paperWarm); las escenas lo leen a través de C. El acento y sus tintes claros aún están codificados en algunos lugares: grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/ (destacados en preuves.tsx, Screencast.tsx, las variantes PALETTES de compositions/FondAnime.tsx), para que coincidan con el nuevo acento. Un acento, usado como señal, nunca como relleno.
2. Tipografías: coloca los archivos .woff2 en public/fonts/, luego cambia los nombres de archivo y los nombres de familia en las listas de carga (src/illustration/scenes/kit.tsx, compositions/BrandedVideo.tsx, compositions/LowerThirdTrack.tsx, compositions/Screencast.tsx) y en theme.ts (font.display, font.sans). Verifica que la tipografía tenga dígitos y acentos (un subconjunto "latin-ext" solo no tiene ni dígitos ni letras base, y todo recurre a Georgia). Nombre de familia sin un dígito (o entre comillas en CSS).
3. Curva de animación: easeStd en scenes/kit.tsx y EASING en scripts/make-sfx.py van juntos (el sonido sigue la curva de la imagen).
4. Verificar: npx tsc --noEmit, luego un remotion still de cada composición (cita, tercio inferior, tarjeta de sección, número...), luego --force en la siguiente ejecución de render-segments.py (su caché ya sigue el código de src/illustration/).

Añadir una escena o un sonido

• Escena: un componente en src/illustration/scenes/opaque.tsx (pantalla completa) o alpha.tsx (superposición), su contrato data como comentario encima, una línea en el registro scenes/Scene.tsx, una línea en el catálogo del SKILL.md de overlays. Cada instante proviene de los cues. Verificar: remotion still en varios fotogramas, la superposición compuesta sobre un fotograma del clip.
• Sonido: reference/sound-palette.md, "Añadir o ajustar un sonido".

Trampa de las carpetas sincronizadas

Si el taller vive en una carpeta sincronizada (Dropbox, iCloud, Drive...), otra máquina puede enviar de vuelta una versión antigua de un archivo y renombrar la buena como "copia conflictiva". Síntoma: Could not find composition with ID .... Reflejo: find . -name '*conflicted copy*' -not -path './node_modules/*', comparar, conservar la versión más reciente. El caché de webpack (node_modules/.cache) también puede entrar en conflicto: elimínalo, Remotion lo reconstruye. Mejor: mantén node_modules fuera de la sincronización.