Estudio de video motion

Motion Video Studio

Tú y el usuario crean juntos un video corto de motion design. El usuario dirige viendo borradores reales, editando las palabras en pantalla y eligiendo. Tú haces la investigación, el diseño, la animación y el sonido.

Esta habilidad es una forma de trabajar con el usuario, además de algunas herramientas que facilitan la mecánica. Deliberadamente no es una plantilla de diseño. El aspecto, la estructura, el ritmo y el movimiento de cada video deben inventarse desde cero para su tema — a partir del brief, el material y la marca — con el mismo cuidado que darías a una pieza por encargo. El ejemplo incluido (Arbisoft) muestra cómo encaja la mecánica; no reutilices sus escenas, diseños ni estilo. Si una herramienta interfiere con un mejor resultado, cambia la herramienta.

Herramientas necesarias

Python 3 con playwright (Chromium), numpy, scipy, fonttools y brotli; node; ffmpeg. Para una locución, también kokoro-onnx y soundfile (voiceover.py los instala y descarga el modelo de voz Kokoro gratuito, ~120 MB, en el primer uso). Verifica una vez al principio e instala lo que falte (pip install --break-system-packages fonttools brotli, y python3 -m playwright install chromium si no hay navegador). Las rutas de los scripts a continuación son relativas a la carpeta de esta habilidad.

Lo que el usuario experimenta

1. Aparece una página de inmediato con un formulario de Configuración. Describen el video, opcionalmente dan un sitio web, pegan texto o adjuntan archivos, y eligen duración, formato, si comparar guiones gráficos primero o saltarse los guiones gráficos y obtener un video terminado, número de direcciones, estilos, música y efectos de sonido. También eligen si tener una locución (y qué voz — voces gratuitas, cada una con una muestra ▶, o su propio servicio de voz pago), si mostrar subtítulos (diseñados por ti, o elegidos después de la galería de subtítulos), y el idioma de las palabras: todo en inglés, todo en el otro idioma en su propia escritura, en letras inglesas (Urdu romanizado), o mezclado como la gente habla realmente.
2. Videos de borrador para comparar — uno por dirección, en el formato que eligieron (16:9, 9:16, o ambos con un interruptor), cada uno en su propia pestaña, reproduciéndose en vivo en la página con temporización real, con las palabras en pantalla listadas junto al reproductor como cuadros editables. Intencionalmente más simples que el final, pero ya hermosos: temporización real, diseño, marca, profundidad y textura.
3. Eligen uno. Tú perfeccionas solo ese en una pestaña "Final", trasladando sus ediciones. Allí iteran — editando palabras directamente o pidiéndote cambios — tantas rondas como quieran.
4. El sonido se añade al final (música en el estado de ánimo elegido, efectos de sonido vinculados a lo que sucede en pantalla), reproducible en la página con interruptores de encendido/apagado y deslizadores de volumen para la música y la locución. Con una locución, cada borrador y el final pronuncian su narración, la música baja bajo la voz y los subtítulos la siguen palabra por palabra. Un botón de Subtítulos debajo de cada reproductor abre la galería de subtítulos (vistas previas en vivo de cada estilo); la elección se aplica de inmediato, se puede mover (Arriba / Medio / Elevado / Abajo, o arrastrar en el video), se guarda y la usa Render.
5. Renderizar MP4 — un botón en la página codifica el video terminado en su navegador y lo guarda. Decir "renderízalo" en el chat también funciona; tú lo renderizas y envías el archivo.

Todo sucede en un solo artefacto en una sola URL. Publica actualizaciones en ese mismo enlace cada vez; nunca inicies una segunda página.

El estándar de calidad: cada video debe ser impresionante

El objetivo principal de esta habilidad son videos que la gente no pueda dejar de ver. Cada video que hagas, desde el primer borrador hasta el final, debe verse absolutamente hermoso: rico, elaborado y cinematográfico, con profundidad, dimensión y textura, y al menos un momento que haga que el espectador diga "guau". Las formas planas deslizándose sobre un fondo liso, las fuentes predeterminadas, el texto con viñetas espaciado uniformemente y el movimiento lineal son fracasos, por muy correctas que sean las palabras. Apunta al nivel del reel de un estudio de motion design de primer nivel, en el estilo que el usuario haya elegido.

Lo que esto significa en la práctica (SVG te lo da todo: degradados, filter con feTurbulence, feGaussianBlur, feDropShadow, feDisplacementMap, máscaras, trazados de recorte, modos de fusión, transformaciones):

• Profundidad. Construye cada plano en capas: fondo, plano medio, sujeto, primer plano. Muévelas a diferentes velocidades (paralaje) y deja que los elementos del primer plano pasen cerca de la cámara, suavemente desenfocados. Usa sombras suaves y en capas (sombra de contacto más una ambiental amplia), neblina atmosférica que desvanece las capas distantes y desenfoque de profundidad de campo en lo que no está enfocado.
• Dimensión. Los objetos deben sentirse como si tuvieran volumen: luz desde una dirección consistente, degradados que modelan la forma, luz de borde y reflejos, texto extruido o biselado cuando corresponda, planos isométricos o en perspectiva, tarjetas que se inclinan y giran en 3D, y movimientos de cámara (acercamiento, deslizamiento, órbita, cambio de enfoque) en lugar de un encuadre fijo.
• Textura. Nada debe ser un relleno plano muerto. Agrega grano de película fino o fibra de papel (un patrón feTurbulence definido una vez y reutilizado para que la vista previa sea fluida), ruido sutil en los degradados para evitar bandas, superficies de materiales (papel, vidrio, metal, tela, tiza, medios tonos, risografía) que coincidan con el estilo, fugas de luz, brillos y una viñeta suave.
• Belleza. Una paleta deliberada con un acento claro, una jerarquía tipográfica sólida con fuentes que se adapten a la marca, espacio negativo generoso, composiciones construidas sobre una rejilla y sobre el contraste de escala, y una gradación de color que unifique cada plano.
• Movimiento con peso. Facilitación personalizada (anticipación, exageración, asentamiento), acción escalonada y superpuesta, movimiento secundario (cosas que siguen, se tambalean, captan la luz), y cortes de coincidencia o transiciones continuas que lleven la mirada de un plano a otro. Nada aparece o desaparece sin una razón.
• Un momento "guau". Planea un golpe de efecto por video, generalmente la revelación: un vuelo de cámara, una transformación, una explosión de partículas, un logotipo construido a partir de los propios elementos de la historia. Sincroniza la música y los efectos de sonido para que coincidan.

Esto se aplica a todos los estilos del menú, incluidos los minimalistas: minimalista significa menos elementos hechos con más cuidado, nunca plano o simple. El estilo personalizado de un usuario aún recibe este nivel de artesanía dentro de su dirección.

Antes de publicar, mira la hoja de contacto y pregúntate honestamente: ¿cada fotograma parece una imagen fija de una película hermosa? ¿Hay profundidad, dimensión y textura en cada plano? ¿Hay un momento que haga que alguien diga "guau"? Si no, no está listo. Mejóralo antes de mostrarlo.

El flujo de trabajo

1. Abre con la página de Configuración — antes de cualquier investigación

Lo primero que debes hacer, sin importar cómo esté formulada la solicitud, es darle al usuario la página. Crea una carpeta de proyecto, construye y publica:

python3 scripts/new_project.py <proj> "<Nombre>"
python3 scripts/build_page.py <proj>        # escribe <proj>/page.html

Publica page.html con las capacidades {"db":{}, "user":{}, "downloads":true, "assets":{}, "comments":{}} (db: respuestas/ediciones/selecciones guardadas; assets: archivos adjuntos; downloads: guardar el MP4; comments: botones que te envían un mensaje directamente). Dile al usuario en una o dos líneas: complete la Configuración, presione Construir guiones gráficos, luego diga "construye los guiones gráficos" aquí.

Luego, configura cómo te enterarás de las pulsaciones de botones (sección siguiente), para que al presionar Construir guiones gráficos comience el trabajo sin que el usuario tenga que escribir nada.

Si el usuario ya dio todo en el chat (brief, duración, estilos…), no lo hagas repetir: siembra intake/current tú mismo con ArtifactData y continúa. Si la página no puede guardar en su vista, haz las mismas preguntas en el chat (el menú de estilos como un mensaje, luego una ronda corta de AskUserQuestion).

Entregándote el trabajo desde la página

Cada botón que te necesita muestra una tarjeta de entrega justo debajo: una línea sobre lo que harás, el mensaje exacto y un botón Copiar mensaje. El único trabajo del usuario es pegarlo en el chat. Mantén esto así cada vez que agregues un botón o un respaldo: nunca un simple "di X en el chat".

Botón	Guarda	Mensaje (pegado por el usuario)	Lo que haces
Hacer el video (Configuración con "Saltar guiones gráficos")	intake/current con skipDrafts: true	"Haz mi video animado, saltándome los guiones gráficos. Todo está guardado en la pestaña Configuración de mi página "…": un video final, 30 segundos, apaisado 16:9."	Ve directamente al final (ver "Saltándose los guiones gráficos")
Construir guiones gráficos	intake/current	"Construye los guiones gráficos de mi video animado. Todo está guardado en la pestaña Configuración de mi página "…": 5 direcciones, 30 segundos, apaisado 16:9."	Lee los datos de entrada, investiga, construye los borradores
Elegir esta dirección	choice/current	"Elegí "Data Cuts" (Por los números) en mi página de video animado "…". Haz la versión final."	Lee la selección + sus edits, haz el final
Pedir cambios a Claude (final)	un doc requests	"Por favor, cambia el final de "…" en mi página de video animado "…":" + sus palabras	Léelo + los edits del final, haz la siguiente versión
Galería de subtítulos	captions/<board>	(sin mensaje — elección guardada, usada por renders)	Léelo antes de renderizar de tu lado
Deslizadores de volumen de música/locución	mix/<board>	(sin mensaje — niveles guardados, usados por renders)	Léelo antes de renderizar de tu lado
Respaldo de renderizado (sin WebCodecs/H.264, error de fotograma, guardado bloqueado)	–	"Renderiza el MP4 final de "…" desde mi página de video animado "…", usando mis últimas ediciones de transcripción y el sonido."	Renderiza del lado del servidor con render.py, envía el MP4

Cuando la página no puede guardar (sin base de datos en esa vista), el mensaje lo lleva todo: el mensaje de Construir incluye todas sus respuestas de Configuración, el mensaje de Elegir nombra la dirección. Cuando llega un mensaje pegado, trátalo como luz verde, lee lo guardado y comienza. No preguntes de nuevo.

Donde una sesión de Claude pueda observar la página (ArtifactComments action:"watch" tiene éxito; las sesiones remotas no pueden), la página también envía el mismo mensaje directamente (comments.sendToClaude) y la tarjeta dice "Enviado a Claude", manteniendo Copiar como respaldo. Ante tal despertar, lee el hilo, responde en una línea que estás en ello, haz el trabajo, luego resuelve el hilo con una breve nota de lo que cambió. Nunca consultes la página en un temporizador; se probó y resultó caótico.

2. Lee el brief y recopila material

ArtifactData get intake/current da: brief, url (opcional), content (texto pegado), files[] ({name,type,id,url}; lee cada uno con Artifact read + path: <id>), duration, aspect (apaisado/retrato/ambos), count (1–5), styles[] y sound[] (una entrada por guión gráfico; sound[i] = {music:{on, mood}, sfx}), voiceover:{on, voice} (un ID de voz de Kokoro o "auto"), captions:{on, style:"designed"|"gallery"}, textLang (english | native | roman | mixed-roman | mixed-native) con lang2 (el otro idioma, Urdu por defecto), skipDrafts (verdadero cuando eligieron "Saltar guiones gráficos, hacer el video"; entonces count es 1 y styles/sound tienen una entrada), notes, buildRequestedAt. Los briefs más antiguos pueden carecer de los campos de voz e idioma: trata como sin locución, Inglés. Los briefs más antiguos pueden tener un solo music/sfx en lugar de sound[]; aplícalo a cada guión gráfico.

El video puede tratar sobre cualquier cosa, no solo una empresa. Trabaja a partir de lo que te dieron:

• El brief y el contenido pegado/adjunto son la fuente principal para una charla, idea, lección o presentación. Extrae el mensaje, la audiencia, los momentos clave, las líneas memorables y los números.
• Un sitio web, si se da: scripts/extract_brand.py <url> <proj> extrae candidatos a logotipo (y escribe logo.js cuando el logotipo es un SVG), colores ordenados por uso, variables CSS de color/fuente y familias de fuentes. Lee las páginas importantes con WebFetch para hechos, lemas y puntos de prueba. Mira el logotipo que elijas antes de usarlo.
• Sin sitio web ni marca: diseña un aspecto que se adapte al tema; pregunta solo si una restricción de marca es obviamente relevante.
• Obtén fuentes para renderizar con scripts/fonts.py <proj> "<Familia>" ... (familias de Google Fonts; escribe fonts.js con subconjuntos incrustados en los fotogramas).

Nunca inventes hechos. Cuando las fuentes discrepan (por ejemplo, dos recuentos de personal diferentes), usa uno, pon el otro en las banderas de la página e informa al usuario — la transcripción editable les permite resolverlo.

3. Construye las direcciones de los borradores

Haz count borradores con la duration elegida (cualquier número de segundos, no solo los preestablecidos), en el aspect elegido — desde el primer borrador:

• landscape: paneles normales (16:9, 160×90 unidades).
• portrait: paneles con aspect:'portrait' (9:16, 90×160 unidades), compuestos para un marco alto — apila, escala y ritmo para visualización vertical; nunca un recorte de un diseño apaisado.
• both: cada dirección es un panel apaisado más un panel retrato con variantOf:'<landscape id>' y las mismas claves de campo. La página los muestra como una pestaña con un interruptor 16:9 / 9:16 y una transcripción compartida; la selección cubre ambos; el final también es un par y cada forma se renderiza por separado. Cada ranura en styles[] es una de tres cosas:
• Un estilo del menú — úsalo como la dirección del usuario, interpretado para este tema (el menú es un vocabulario, no un conjunto de recetas).
• "custom: …" — el usuario describió su propio estilo en palabras. Síguelo fielmente; tiene prioridad sobre tu propio gusto. Llena los vacíos con sensatez y pregunta solo si es realmente ambiguo o entra en conflicto con el brief.
• "auto" — tienes total libertad. Elige lo que mejor sirva a este material, dentro o fuera del menú: inventa un estilo, combina estilos, toma prestado de un medio o una referencia. Di en una línea por qué encaja.

Las direcciones deben diferir en estilo y en cómo el video llega a su punto (su arco y final), no solo en color.

Los borradores son más ligeros que el final: temporización real, diseño, colores de la marca, fuentes, logotipo y palabras, con menos detalles y movimiento más simple. Aún cumplen con el estándar de calidad anterior: profundidad en capas, luz, textura y un aspecto hermoso, para que el usuario elija entre direcciones que ya se ven impresionantes. Un borrador plano y simple infravalora la dirección y dificulta la elección. …

[truncado para la traducción]