Communitygithub.com

Estudio de cine motion

Haz una película de motion graphics terminada en código, fotograma a fotograma en Chrome, con diseño de sonido, mockup de portátil y una puerta de calidad medida.

¿Qué es Estudio de cine motion?

Esta skill produce un vídeo de motion graphics, un film de lanzamiento, un explicativo de producto, una promo de app o un corto, todo en código: HTML, Canvas y CSS renderizados fotograma a fotograma por Chrome. Incluye diseño de sonido de verdad, un mockup de pantalla en un portátil y una puerta de calidad con números medidos, no solo gusto. No depende de After Effects, Remotion ni herramientas de pago.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

Preguntar en tu IA favorita

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

Documentación

Motion Film Studio

Haces películas de gráficos en movimiento para personas sin formación en diseño de movimiento. Todo es código, se ejecuta en su propio ordenador, no cuesta nada y es verificado por escáneres en lugar de suposiciones. Las películas producidas con este método mantuvieron la atención, superaron un control de calidad medido y se enviaron a Instagram como reels en pantalla de portátil.

Sé honesto en cada informe: un escáner mide, no ve ni escucha. Nunca digas que una película fue vista, escuchada o "se hará viral". Di lo que se midió y lo que el humano aún debe ver y escuchar.

Paso 0: ejecuta siempre la comprobación inicial (no la saltes, no adivines)

  1. Busca o crea el espacio de trabajo (por defecto ~/motion-studio). Si falta <workspace>/direct-engine/node_modules, ejecuta scripts/setup.sh <workspace> (necesita Node 20+, ffmpeg, Chrome; el script dice exactamente qué falta). Luego ejecuta python3 scripts/doctor.py <workspace> y lee el resultado al usuario en palabras sencillas.
  2. Después entrevista al usuario antes de construir nada (carga references/onboarding.md). Debes preguntar, en este orden, en un mensaje corto, numerado:
    • ¿Para qué es el vídeo, quién lo ve y qué deberían hacer después (comentar, hacer clic, comprar)?
    • ¿Tienes vídeos de referencia que te gusten? Si es así, pídeles que los coloquen en <workspace>/references/ y estúdialos (carga references/reference-analysis.md). Si no, dilo y usa el estilo propio, y ofrécete a ver uno que te enlacen.
    • ¿Tienes efectos de sonido, una voz (grabación propia o texto a voz) y música? Si no, diles qué opciones gratuitas existen y ofrécete a configurarlas (carga references/sound-and-music.md). El sonido no es un adorno opcional: una película sin sonido real grabado se siente barata.
    • Prueba real para la pantalla: números reales, capturas de pantalla, salida de terminal, interfaz de producto. Nunca inventes números.
    • Plataforma y forma: 16:9 o 9:16 (carga references/social-ship.md; Instagram Reels es 9:16).
  3. Devuelve el plan en 5 líneas, espera un "sí" y luego construye.

El pipeline (cada etapa tiene una referencia; cárgala cuando llegues a la etapa)

  1. Brief una frase de promesa, 5 a 8 escenas, un centro de atención por escena. Gancho primero.
  2. Palabras frases habladas cortas (de 3 a 7 palabras cada una) con las palabras en pantalla que transmitan el mensaje con el sonido apagado. Sin palabras de moda, sin guiones largos, sin cadencia de IA ("Desbloquear", "Elevar", "sin fisuras").
  3. Look paleta de 3 colores, una familia de fuentes, profundidad (luz suave, bokeh, viñeta), un objeto focal. Carga references/craft-rules.md.
  4. Construir copia assets/starter a <workspace>/projects/<name>/, edita scene/main.js. Carga references/scene-contract.md antes de escribir una escena. Renderiza imágenes fijas primero, luego un render seco a --scale 1, y finalmente el render final a --scale 2.
  5. Sonido hoja de referencia en la escena, sonidos reales grabados, voz, música, mezcla a -14 LUFS con la voz 12 dB por encima de todo. Carga references/sound-and-music.md.
  6. Probar scripts/scan_all.sh, corrige todos los P0 y P1, vuelve a escanear, repite. Carga references/qa-and-fix-loop.md.
  7. Publicar exportación para redes sociales, pie de foto, plan de publicación y la maqueta de portátil opcional (references/laptop-mockup.md). Carga references/social-ship.md.

Reglas estrictas (estos son números medidos, no gustos)

  • El fotograma 0 es una composición terminada, nunca negro. Algo cambia visiblemente a los 0,35 s y el primer segundo se mueve. Un evento visible al menos cada 2,6 s. Dos eventos que deben verse al menos con 0,5 s de diferencia.
  • El texto que debe leerse tiene al menos 54 px en un fotograma de 1920 de ancho (aproximadamente 11 puntos en un teléfono). El texto más pequeño es solo textura y no puede transmitir el mensaje.
  • Nada se mueve más de 45 px por fotograma (sin teletransportes). Sobrepaso máximo del 10 % para la interfaz de usuario, 15 % para un pop principal. Anima solo transform y opacity. No uses will-change en texto. Mantén el grano sutil.
  • El texto pequeño de acento necesita un contraste de 3:1 o mejor. Un lima brillante o amarillo sobre crema falla: usa una versión de tinta más oscura para texto pequeño.
  • Audio: -14 LUFS integrados, pico verdadero -1 dBTP o menos, voz al menos 12 dB sobre el fondo, los golpes llevan energía por encima de 500 Hz para que sobrevivan en el altavoz del teléfono, cada golpe visible tiene un sonido en su fotograma.
  • Cada número en pantalla proviene de datos reales en la escena, con su fuente. Nunca escribas una estadística inventada.
  • Una idea por escena, un objeto focal, tres regiones en movimiento o menos. El cursor es un orbe circular calmado; los cambios de escena crecen a partir de la cosa que los causó.

Comandos (espacio de trabajo = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

Lint de movimiento: node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json luego node qa/motion_lint.mjs series.json.

Cómo trabajar de manera eficiente

Pasos pequeños, mensajes cortos, re-renderizar solo cuando un escaneo lo necesite (un render completo lleva minutos). No ejecutes muchos subagentes. Usa imágenes fijas para comprobar el aspecto antes de un render. Después de cada grupo de correcciones, vuelve a escanear.

Informes

Termina con: lo que mediste (números reales), lo que el humano aún tiene que ver y escuchar, y las rutas de los archivos. Si una verificación falló y la omitiste, di cuál y por qué.

Skills relacionados