cinetic

Estás dirigiendo un cortometraje, no animando una página web. La imagen, el texto y el sonido son un solo sistema impulsado por un único archivo de línea de tiempo, y nada está terminado hasta que se ha renderizado, medido y criticado.

Motores. Remotion 4.0.529 (React, basado en fotogramas) es el predeterminado. HyperFrames 0.8.79 (HTML más una línea de tiempo de GSAP en pausa) es la alternativa. La artesanía es independiente del motor; la §7 enumera las reglas que difieren por motor.
Números. Cada número aquí es un valor predeterminado probado en trabajos enviados: un punto de partida del que puedes alejarte cuando tengas una razón declarada. No es una ley de la naturaleza.
Marca. Cuando el usuario proporciona una marca (colores, fuentes, logotipo, material de archivo, tono), la marca gana. Los valores predeterminados de gusto cubren las partes que debes inventar.
Rutas. Rutas como scripts/render.sh funcionan desde la raíz de la habilidad y también dentro de un proyecto de película, porque scripts/new-film.sh copia cada script en el proyecto. Cada script excepto brand-svg.ts (que brand-kit.sh llama) imprime --help.
Ejemplo trabajado. references/worked-example.md guía a través de Tessel, una película de lanzamiento de 33 s a 1920×1080 y 60 fps, y muestra cada regla a continuación en uso, incluidos los errores. Léelo una vez antes de tu primera película.

El estándar

El objetivo es una película que la gente vea dos veces: una idea que el producto posee, contada en imágenes, donde cada fotograma parece elegido y nada está ahí para llenar espacio.

Sustancia antes que pulido. Muestra la cosa específica e inteligente que hace este producto, la cosa que un producto más simple no haría. Un movimiento impecable alrededor de una afirmación genérica todavía pierde frente a una película tosca que hace que el espectador piense "oh, eso es inteligente".
Su propio aspecto. Cada marca obtiene un lenguaje visual derivado de su nombre, su producto y su personalidad, dentro de las prohibiciones estrictas a continuación. La moderación significa sin decoración; no significa un estilo minimalista de casa para todo.
Ultralimpio y suave. Fotogramas limpios y modernos, con ideas creativas y coreografía. Cada movimiento está suavizado, con peso y suave a 60 fps: sin vibraciones, sin saltos y sin efectos que sustituyan a las ideas.
Visual, no narrado. La idea se lee con el sonido apagado; las palabras confirman lo que la imagen ya dijo.
Peso y quietud. El movimiento tiene masa, llega al compás y luego descansa, para que los momentos rápidos impacten.
Sonido que hace que la imagen se sienta mejor: cada golpe es causado por algo que puedes ver.
Moderación antes que decoración. En caso de duda, elimina.
Prueba, no impresión. El proceso a continuación existe porque nada de esto se puede juzgar en el editor o el Estudio: solo sabes una vez que has visto el renderizado real y lo has medido.

Prohibiciones estrictas

Cuando inventes el aspecto, ninguno de estos aparece, nunca. Son las señales más rápidas de trabajo generado, y esta habilidad existe para hacer películas que no parezcan generadas. lint-film.mjs verifica los tokens y estilos para detectarlos, y los críticos verifican los fotogramas.

Palabras:
- etiquetas de ceja o iniciador arriba de un título;
- eslóganes apilados, y "Presentamos…";
- muros de texto y texto de relleno aleatorio: subtítulos mono decorativos, métricas falsas, etiquetas que nadie necesita, lorem ipsum.
Cada palabra en pantalla gana su lugar.
Tipografía: tipos de letra serifa, y estilos cursiva u oblicua, incluida una inclinación que los falsifique. Usa una sans limpia y moderna, más una mono para código o números si el producto lo necesita.
Color:
- naranja, ámbar, beige, crema, tostado o arena, como acento, papel o brillo;
- neón: acentos muy brillantes y saturados, brillos, floraciones y halos;
- púrpura, violeta o índigo, y degradados de púrpura a azul o de varios tonos;
- glassmorfismo.
Decoración:
- emojis e iconos prediseñados;
- destellos que representan "IA", partículas, confeti, destellos de lente y lluvia de código;
- rebote exagerado en cualquier cosa que no sea un aterrizaje.

Lo que queda es suficiente: tinta y papel (claro u oscuro, neutro o frío), un acento con un significado de cualquier familia de tonos fuera de las prohibidas (rojo, verde, teal, azul, amarillo), una sans, y movimiento que sea ultralimpio y suave, suavizado, con peso, con desenfoque de movimiento y libre de vibraciones. La creatividad va a la idea, el dispositivo y la coreografía, no a los efectos.

Si el usuario proporciona una marca que incluye uno de estos (su logotipo serifa, su naranja), la marca gana, porque es su identidad en lugar de un valor predeterminado. Regístralo en BRIEF.md para que los críticos no lo marquen, y marca las líneas que lo establecen con // cinetic:brand-supplied <qué> para que el lint las acepte.

1. Formatos y valores predeterminados

Elige primero una fila. Establece la duración, la densidad y la lista de archivos a entregar. La receta para cada formato está en references/formats.md.

Formato	Duración	fps	Cuadrícula (BPM)	Latidos de la historia	Palabras en pantalla	Sonido	Entregables
Película de lanzamiento / avance	20–45 s	60	120	8–10 por 30 s	≤ 20–35 en total	partitura completa + SFX	máster 16:9, re-maquetaciones 9:16 y 1:1, póster, kit de marca si se inventa
Video de producto / función	8–30 s	60	100–120	1 capacidad por 8–10 s	≤ 15	cama ligera + SFX de UI	máster, póster
Bucle de función	4–15 s, compases enteros	60 (GIF 25)	cualquiera; compases enteros	3–5	≤ 8, se lee silenciado	opcional	MP4, WebM, GIF, unión sin costuras
Presentación de logotipo	3–8 s	60	120	2–4	nombre + ≤ 4	un golpe afinado + cola	MP4, ProRes 4444 alfas (mantenido y limpiado), póster, kit de marca si se inventa
Recorrido de UI	20–90 s	60	90–110	1 capítulo por 2–4 compases	≤ 6 por leyenda	cama + SFX de UI	máster, subtítulos SRT

Usa 60 fps siempre que la UI, el texto o la cámara se muevan. A 30 fps, los movimientos lentos visibles se escalonan y los rápidos parpadean, y 24 fps nunca es adecuado para UI. Un GIF es la única excepción: expórtalo a 25 fps (o 50) desde el máster de 60 fps, porque los retrasos de fotograma del GIF son centésimas de segundo enteras y 30 fps reproduce un 11% más rápido.

2. Las cinco leyes

Una idea, específica de este producto. Puedes decir la película en una oración, y la prueba muestra lo que este producto hace que la versión obvia o más simple no haría. La moderación se aplica a la decoración y el texto, nunca a la inteligencia del producto: si la función es inteligente, la película muestra la parte inteligente. Por qué: un espectador se lleva una cosa, y una película que sería igualmente cierta para un competidor, o para una función más tonta, no les da nada que llevarse.
Un dispositivo narrativo. Un objeto, forma o color viaja a través de cada toma y nunca parpadea en un corte. En una película de lanzamiento idealmente se resuelve en la marca al final; en un bucle de función o video de producto es la unidad sobre la que actúa el producto (la tarjeta, la fila, el archivo). Encuentra el objeto que este producto posee. Un punto, línea o bloque desnudo es el valor predeterminado perezoso, y también es el aspecto de los propios ejemplos de esta habilidad. Por qué: hace que la película sea continua, permite que se lea con el sonido apagado, y un objeto propio es lo que hace que la película sea inconfundiblemente de esta marca.
Un acento con un significado. El acento es un solo token que significa una cosa, como "ahora", "nuevo" o "tuyo". Úsalo con moderación (aproximadamente ≤ 8% de los píxeles) y deja que inunde el cuadro como máximo una vez. Por qué: un color que significa algo se lee sin palabras, y un color usado en todas partes no significa nada.
Un sistema de movimiento propio. Usa algunas curvas y resortes con nombre, cada uno por una razón declarada, y toma cada número de fotograma de timeline.ts. Por qué: el movimiento consistente es el movimiento de la marca, y las suavizaciones ad hoc se leen como generadas.
Verificar mediante medición. Una película está terminada solo cuando los píxeles renderizados y el audio decodificado pasan los scripts y una ronda de crítica. Por qué: la reproducción del Estudio oculta pops, fotogramas fantasma, deslizamientos de sincronización y cambios de color que el archivo codificado mostrará.

3. Flujo de trabajo

Cada paso escribe un archivo, y cada puerta es una verificación que realmente ejecutas. Trabaja de forma inline. Los subagentes son solo para crítica (§8), porque construir fotogramas en paralelo cuesta más tiempo del que ahorra.

Paso 0: Recepción → `BRIEF.md`

Si el brief ya establece el producto, el mensaje y la duración, infiere todo lo demás y escribe tus suposiciones.
Si no es así, haz como máximo 3 preguntas: el producto en una línea, el formato y la duración, y dónde se mostrará la película. Toma todo lo demás de la §1.
Elige el motor:
- Remotion por defecto.
- HyperFrames si el usuario ya tiene un proyecto de HyperFrames, quiere HTML/GSAP, o necesita renders --batch impulsados por variables.
Copia las prohibiciones estrictas (arriba) en BRIEF.md, más cualquier excepción proporcionada por la marca. Los críticos luego reciben este archivo palabra por palabra, por lo que duplica como el contrato de control de calidad.
Prepara el proyecto: bash <skill>/scripts/new-film.sh films/<nombre> --fps 60 --bpm 120 --size 1920x1080 [--engine hyperframes]. Pasa --link-modules <dir>/node_modules para reutilizar una instalación existente en lugar de ejecutar npm install.
Puerta: BRIEF.md tiene una línea de especificación, por ejemplo 1920x1080@60, 30s, 120BPM, audio: sintetizado.

Paso 1: Concepto → `TREATMENT.md`

Lee references/concept-and-story.md ahora.

Comienza desde lo específico, no desde el estilo. Escribe:
- qué significa o evoca el nombre (a menudo te da la marca y el dispositivo);
- el comportamiento no obvio de la función, completando la frase "a diferencia de la versión obvia, esto…";
- los objetos propios del producto (sus filas, tarjetas, lecturas y estados).
Escribe 3 conceptos, cada uno a través de un lente diferente:
- (a) el propio verbo o metáfora del producto hecho literal;
- (b) el dolor del espectador hecho visible;
- (c) un dispositivo formal: un objeto de relevo, un bookend, un movimiento de cámara ininterrumpido, o un contenedor que se convierte en el producto.
Desecha cualquier concepto cuyos accesorios podrían aparecer en la película de otro producto. No es tuyo.
Completa assets/TREATMENT.md para el concepto que elegiste:
- un logline;
- el arco: gancho (dentro del problema, sentido en 1 s) → giro → prueba (1–2 capacidades) → promesa → bloqueo;
- el camino del dispositivo, toma por toma;
- una hoja de ritmos con las columnas compás | tiempo | imagen | texto | sonido;
- el texto completo con su recuento de palabras;
- el fotograma final.
Ejecuta la prueba de eliminación. Elimina los compases de demostración, y el valor aún debería leerse. Elimina los compases de valor; si la película aún "funciona", fue un recorrido de funciones.
Ejecuta la prueba de especificidad. ¿Sería la película igualmente cierta para un producto más simple, por ejemplo una división uniforme en lugar de una detallada, o una lista simple en lugar de una clasificada? Si es sí, la prueba subestima el producto; muestra la parte que es difícil.
Ejecuta la prueba de palabra de función. Viéndola silenciada, ¿usaría un extraño la palabra del brief para la función ("racha", "división")? Si un dispositivo inteligente la hace leer como otra cosa, mantén la forma familiar de la función y deja que el dispositivo la vista.
Puerta:
- el logline tiene ≤ 15 palabras;
- la prueba de especificidad pasa, con su respuesta escrita;
- el recuento de palabras está dentro del presupuesto de la §1;
- ninguna línea tiene más de 5 palabras, y ninguna toma tiene más de 2 líneas;
- el dispositivo aparece en cada fila de compás.

Paso 2: Marca y fotogramas de estilo → `src/brand/`

Lee references/brand-and-color.md y la sección de tipografía de references/copy-and-type.md.

La paleta inicial, las fuentes, la marca y el nombre de demostración son marcadores de posición marcados // cinetic:placeholder, y lint-film.mjs informa un error hasta que cada marcador desaparece. Aplica la marca del usuario, o inventa una para esta película, luego elimina los marcadores. Una película que mantiene el aspecto inicial se parece a cualquier otra película hecha a partir de él.
Personalidad primero. Escribe tres adjetivos para la marca, luego deriva las elecciones a partir de ellos. Este mapeo está en references/brand-and-color.md §2:
- la tipografía: elige la sans para esta marca de @fontsource-variable/* y vendorízala con node scripts/add-font.mjs <nombre> (seguro con un node_modules compartido); Geist es solo el marcador de posición inicial;
- peso y mayúsculas/minúsculas;
- el escenario (claro u oscuro: una herramienta de desarrollo o una marca con nombre de fuego a menudo quiere oscuro), neutro o frío, y el tono del acento de las familias permitidas;
- el carácter del movimiento, de nítido a pausado.
Una aplicación de notas tranquila y una herramienta de CI rápida no deberían compartir un aspecto.
Escribe src/brand/tokens.ts (python3 scripts/palette.py --accent '#…' --stage dark construye los neutros, verifica el contraste y rechaza un tono prohibido):
- colores: una tinta, un papel, 2–4 neutros, y un acento con su significado en un comentario;
- tipografía: una familia en 2 pesos, más una mono si la necesitas;
- una escala tipográfica;
- un valor de tracking por rol.
Explora la marca antes de comprometerte con una.
- Dibuja 6–10 direcciones, cada una de una fuente diferente: el significado del nombre, una letra, el objeto propio del producto, la metáfora de la idea y una construcción puramente geométrica.
- Renderízalas juntas en una hoja y mírala (el MarkSheet todavía está en references/brand-and-color.md §4).
- Rechaza cualquier dirección que podría pertenecer a otras diez startups, incluida la familia "bloque geométrico + punto de acento", que es el propio vocabulario de ejemplo de esta habilidad.
- Ejecuta la prueba de lectura incorrecta. Muestra la marca a 64 px durante medio segundo. Si se lee primero como un símbolo común (un menos, un emoticono, un ícono de menú o hamburguesa, un candado, un botón de reproducción, un más), recházala o cámbiala hasta que no lo haga.
- Construye la ganadora en src/brand/Mark.tsx en una cuadrícula de 100 unidades, con espacios de al menos 8 unidades para que sobreviva al escalado.
Una paleta con carácter, dentro de las prohibiciones. Derrívala del mundo del nombre y el producto (una ladera da pino, musgo y pizarra; una fundición da carbón, hollín y un rojo brillante), no de los valores predeterminados del framework. Cuando el mundo del nombre es calor o fuego, el naranja está prohibido, así que ve al rojo vivo (un rojo profundo brillando sobre un carbón verdadero) o blanco al rojo vivo, nunca genérico azul de herramienta de desarrollo: el color debe llevar el nombre. Un escenario azul grisáceo casi negro es el tema oscuro estándar de herramienta de desarrollo (palette.py lo señala), y en una herramienta de desarrollo las etiquetas de UI rojas se leen como errores; gasta el rojo en lo propio de la marca.
- Los azules de framework (la familia #3B82F6 / #2563EB) y los grises planos puros se leen como "predeterminado".
- Tiñe los neutros hacia el mundo, con un verde grisáceo frío o una pizarra azul; un escenario oscuro puede ser negro pino o tinta azul marino en lugar de #000.
- references/brand-and-color.md §8–10 tiene paletas trabajadas.
Establece la tipografía. La tipografía es la primera impresión de la marca, y los valores predeterminados son Geist, que es el marcador de posición del iniciador y la sans de esta habilidad misma.
- Elige la sans de la personalidad de la marca, no porque coincida con un color.
- Para una herramienta de desarrollo seria y rápida, usa una sans como Inter Tight o DM Sans (apretada, con peso presente pero sin distracción).
- Para una marca de consumo amigable y cercana, usa una sans de forma redonda o más abierta como Quicksand o Nunito.
- Para una marca de edición, un detalle asimétrico o de nicho, usa una con un carácter distintivo como Space Grotesk (la 'Q' y la 'a' de dos pisos).
- Poner en mayúsculas el texto de la interfaz en una sola palabra (FULL SCREEN no es MAYÚSCULAS, es márgenes ajustados).
Crea los fotogramas de estilo. TOMA de 2 a 4 fotogramas clave de la hoja de ritmos y constrúyelos en src/BrandFilm.tsx.
- El dispositivo debe ser reconocible al instante.
- Sin decoración que no sean los objetos del producto.
- El acento se usa en un solo lugar significativo.
- El fotograma final muestra el bloqueo completo con la marca y el eslogan.
Establece las reglas de brand para BRIEF.md, marcando las anulaciones de prohibiciones con // cinetic:brand-supplied <qué>.
Activa dprint y lint-film.mjs en los archivos de marca.

Paso 3: Línea de tiempo y copia → `src/timeline.ts` y datos de texto

Abre scripts:node scripts/edit-timeline.mjs films/<nombre> (o edita src/timeline.ts manualmente). La línea de tiempo es un array de objetos de ritmo, cada uno con startFrame, durationFrames, picture, copy y sound.
La primera parte de la línea de tiempo src/timeline.ts tiene ritmos a los que se hace referencia por nombre, y la línea de tiempo principal los referencia por el nombre del ritmo.
Cada ritmo tiene:
- startFrame y durationFrames en fotogramas en el fps de la película;
- picture: una descripción de la acción de la cámara y el dispositivo;
- copy: una matriz de líneas de texto (cada línea es una cadena, con movimientos de texto anotados con {/* entry:… */});
- sound: una matriz de objetos de sonido (golpes, colas, camas).
La copia debe estar dentro del presupuesto de la §1 y pasar la prueba de especificidad.
El texto en pantalla está en mayúsculas o minúsculas según el carácter de la marca, y el espacio entre caracteres está ajustado.
Puerta: la línea de tiempo tiene exactamente el número de ritmos de la hoja de ritmos, cada ritmo tiene un fotograma de inicio que es un múltiplo del BPM en fotogramas, y el último ritmo termina dentro de 1 fotograma de la duración de la película.

Paso 4: Escena de apertura

Construye la primera escena. Muestra el producto o el problema en 1–2 segundos, sin logotipo, sin eslogan.
El dispositivo se presenta aquí.
El ritmo de la película se establece.
Puerta: la escena de apertura funciona con el sonido apagado y la música puesta.

Paso 5: Construcción de escenas

Construye las escenas una por una, en orden.
Cada escena debe avanzar la historia y/o el dispositivo.
La cámara se mueve suavemente, con desenfoque de movimiento.
Las transiciones son cortes, fundidos o movimientos del dispositivo, no efectos.
Puerta: cada escena pasa las pruebas de especificidad y eliminación.

Paso 6: Renderizado → archivo de salida

Renderiza la película con el script apropiado:
- Remotion: npx remotion render o bash scripts/render.sh.
- HyperFrames: python3 scripts/render.py --batch.
El archivo de salida está en el directorio renders/ con el nombre <nombre>.mp4.
Verifica que el archivo exista y no esté corrupto.
Puerta: el archivo existe, tiene la duración correcta (dentro de 1 fotograma), y el tamaño es correcto.

Paso 7: Medición y crítica → crítica

Reproduce el archivo de salida.
Mídelo:
- Sincronización: verifica que el audio y el video estén sincronizados.
- Calidad: verifica que no haya artefactos, bandas o problemas de color.
- Movimiento: verifica que no haya vibraciones, saltos o fotogramas fantasma.
Escribe la crítica en CRITIQUE.md.
- Enumera los problemas.
- Clasifícalos por gravedad (bloqueante, mayor, menor).
- Sugiere correcciones.
Puerta: no hay problemas bloqueantes, y los problemas mayores tienen una corrección planificada.

Paso 8: Revisión y re-renderizado

Corrige los problemas de la crítica.
Re-renderiza.
Repite hasta que no haya problemas bloqueantes o mayores.
Puerta: la película pasa las pruebas de especificidad, eliminación y medición, y la crítica está vacía de problemas bloqueantes y mayores.

Paso 9: Entrega

Los archivos finales están en renders/ con el nombre <nombre>_final.mp4.
Si se necesitan variantes (9:16, 1:1), renderízalas y renómbralas.
Si se necesita un póster, crea un fotograma clave y guárdalo como renders/<nombre>_poster.png.
Si se necesita un kit de marca, compila los activos de src/brand/ en un archivo.
Puerta: todos los archivos de entrega existen y pasan las verificaciones de calidad.

4. Reglas de sonido

El sonido es parte del sistema de línea de tiempo y se genera a partir de él.

Cada golpe es causado por un evento visual (un movimiento del dispositivo, una aparición de texto, un cambio de escena).
La música de fondo (cama) se genera a partir del BPM y el estado de ánimo, y está sincronizada con la línea de tiempo.
Los efectos de sonido de UI se agregan para clics, deslizamientos y transiciones.
La música se mezcla en una cama de audio estéreo, y los SFX están en la misma pista, con los niveles ajustados para que los diálogos (si los hay) sean audibles.
Puerta: el audio está sincronizado dentro de 1 fotograma, y no hay pops, chasquidos o ruido de fondo.

5. Reglas de código

Todo el código está en TypeScript (o Python para scripts).
Los nombres de variables y funciones están en camelCase.
Los nombres de archivos están en kebab-case.
Cada archivo tiene una responsabilidad única.
Los estilos están en línea en React (Remotion) o en una hoja de estilo separada (HyperFrames).
No uses bibliotecas de animación externas (como Framer Motion) a menos que sea necesario.
Usa @remotion/player para previsualización en lugar de @remotion/renderer.
Para HyperFrames, usa gsap para animaciones, no anime.js o mo.js.
Puerta: el código pasa tsc --noEmit y npm run lint (si está configurado).

6. Reglas de evaluación

Cada película se evalúa según:

Especificidad: ¿La película es específica de este producto? ¿Podría ser de otro?
Claridad: ¿La idea es clara? ¿Se lee con el sonido apagado?
Movimiento: ¿El movimiento es suave, con peso y sin vibraciones?
Calidad: ¿La película se ve limpia, sin artefactos, bandas o problemas de color?
Sonido: ¿El sonido está sincronizado y mejora la imagen?
Marca: ¿La marca es consistente y se deriva de la personalidad del producto?
Restricciones: ¿Se cumplen las prohibiciones estrictas?
Puerta: la película obtiene una puntuación de al menos 4/5 en cada categoría.

7. Diferencias por motor

Regla	Remotion	HyperFrames
Entorno	Node.js + React + Puppeteer	Node.js + HTML + GSAP (sin Puppeteer)
Archivo de escena	`src/<Scene>.tsx`	`scenes/<scene>.html`
Animaciones	React + CSS + desenfoque de movimiento de Remotion	GSAP + CSS + desenfoque de movimiento manual
Renderizado	`npx remotion render`	`python3 scripts/render.py`
Línea de tiempo	`src/timeline.ts` exporta una matriz de ritmos	`src/timeline.json` (JSON)
Marca	`src/brand/tokens.ts`	`src/brand/tokens.json`
Guión	`node scripts/`	`python3 scripts/`

8. Crítica y autoevaluación

Después del renderizado, ejecuta bash scripts/critique.sh para abrir la herramienta de crítica.
La herramienta muestra el fotograma actual, la línea de tiempo, y permite navegar por los fotogramas.
La crítica se escribe en CRITIQUE.md.
Los subagentes (si están disponibles) pueden ejecutar la crítica en paralelo, pero la corrección se realiza de forma secuencial.

9. Ejemplos trabajados

Ver references/worked-example.md para un ejemplo completo de una película de lanzamiento.
Ver references/formats.md para recetas de formato.
Ver references/concept-and-story.md para técnicas de narración.
Ver references/brand-and-color.md para guías de marca y color.
Ver references/copy-and-type.md para reglas de texto y tipografía.

johdav999/VideoAIAgent

¿Qué es VideoAIAgent?

Preguntar en tu IA favorita

Documentación