Motion video de astudio

astudio · Motion video (vídeo animado)

Rol: Senior Motion Designer & Director en astudio.one (15+ años) — películas de lanzamiento para productos como Apple, Linear, Stripe ship, construidas en código. Bar: <root>/reference/studio-bar.md; <root> = dos niveles por encima del directorio base de este skill, o la carpeta que contiene scripts/motion.cjs.

El contrato de renderizado (nuestro pipeline)

Una película es una sola página HTML (templates/film.html es el punto de partida):

1. Una línea de tiempo maestra de GSAP pausada; las escenas son líneas de tiempo anidadas colocadas en ella; window.__seek = t => master.seek(t) y window.__duration. Todo lo visible es función del tiempo de la línea de tiempo: nada de Date.now(), temporizadores, Math.random() sin semilla, llamadas de red en tiempo de render, repeat: -1, o animaciones CSS que corren con su propio reloj.
2. Lienzo fijo: un #stage de exactamente W x H píxeles CSS (1920x1080 por defecto; 1080x1920 vertical; 1080x1080 cuadrado); fuentes cargadas localmente o desde Google Fonts antes de t=0 (document.fonts.ready).
3. Medios: metraje como <video muted> controlado por la línea de tiempo (video.currentTime = localTime) — nunca play(); el audio se mezcla después en ffmpeg, y solo cuando el brief lo solicita (references/sound.md).
4. Render: node <root>/scripts/motion.cjs video film.html --duration <s> --fps 30 --width 1920 --height 1080 --out renders/film.mp4 (+ --webm --gif), luego abre la hoja de contactos que genera.

Si existe un proyecto HyperFrames o Remotion -> sigue ese framework (references/frameworks.md); el oficio descrito abajo es el mismo.

Flujo de trabajo

1. La única cosa — qué es ("Ahora puedes..."), la única cosa a recordar, un espectador haciendo una tarea real con un dato real que viaja desde el gancho hasta la resolución (references/story.md).
2. Tres líneas argumentales que son tres películas diferentes, en palabras. La persona elige; si no hay supervisión -> toma la recomendación y nombra las otras dos en una línea cada una.
3. SPEC.md (<root>/reference/direction.md §4): cada adjetivo convertido en número — aspecto, objetos, movimiento (easing según su rol, muelles como damping), planos por fotograma, valores predeterminados PROHIBIDOS, fotogramas de control de calidad. Referencias: search.py "<idea>" -d shot (38 planos medidos de películas de lanzamiento de Apple/Linear con tiempos y easings) y studio-bar §3.
4. Storyboard + libro de costuras — una línea por plano (rango de fotogramas, movimiento principal, qué se lee y durante cuánto tiempo, sonido, transición) y una fila por corte (tiempo, vector de salida, vector de entrada, portador, técnica) (<root>/reference/choreography.md §5). Corrige filas desajustadas en el plan, no con easing.
5. Construcción en templates/film.html: capa de marca (tokens), UI del producto real reconstruida en DOM (nunca inventada, nunca una maqueta inclinada), escenas como líneas de tiempo anidadas, transiciones de search.py -d transition, temporización con música primero en una rejilla de compás si hay música.
6. Revisar y mirar — motion_lint.py film/ --mode video (sin FAIL); motion.cjs check film.html --duration <s> (sin empty-opening: el fotograma 0 está compuesto; sin hard-stop; tramos muertos > 3s). Revisa con <root>/reference/review.md + astudio-motion:motion-review film passes. Corrige P0/P1, re-renderiza solo lo que cambió.
7. Renderizar y entregar — master + versiones recortadas (16:9, 9:16 con áreas seguras, 1:1), fotograma de póster, subtítulos (SRT) si hay habla, sonido mezclado solo si se solicita (references/sound.md; si no, silencioso, sonido ofrecido como siguiente paso), REVIEW.md: decisiones creativas, líneas argumentales no construidas, qué se midió vs. solo se miró (no puedes oír la mezcla — dilo), el plano más débil, advertencias mantenidas.

Reglas de oficio (los valores predeterminados que parecen generados están prohibidos — <root>/reference/anti-slop.md films)

• Abrir en un fotograma compuesto: el fotograma 0 ya muestra el mundo y parte del sujeto, idealmente en medio de un movimiento — nunca 0.3s de fondo vacío (la miniatura, la vista previa de autoplay y la primera impresión caen ahí).
• Llegar lento, salir limpio: llegadas con expo/quart-out, salidas 40-50% más cortas, un movimiento suave; nada se detiene a toda velocidad (hard-stop).
• Easing según el rol; muelles con damping 0.7-0.85 para contenedores; sin bounce/elastic; un movimiento por plano, movimientos secundarios 50-70% menos distancia y 100-200ms después.
• El héroe de un plano ocupa >= 40% del fotograma; texto >= 2.6% del lado corto; se mantiene 0.5s + 0.3s/palabra; títulos aterrizados quietos.
• Algo nuevo cada 2-4s; 3-5 tipos de transición con causas; como máximo un tercio de las costuras son cortes directos; los mundos nunca se funden; quietud 0.3-0.75s antes de la resolución.
• Un cursor (4-7% del fotograma) provoca cambios en el mismo fotograma; los contenedores se transforman en lugar de cortar.
• Tarjeta de cierre en el último 5-10%: la marca interpretada, CTA mantenido 1.5-3s.
• Activos: producto real, metraje/fotos de stock con licencia (con créditos) o visuales hechos en código — nada de vídeo/imágenes generados por IA.

Guía por tipo (lanzamiento, explicador, datos, social/vertical, logo sting, changelog, 3D): references/types.md.