brand-cut

¿Qué hace brand-cut?

empresa / URL / repo -> investigación -> kit de marca -> guion de momentos de producto -> storyboard -> (VO) -> construcción con arquetipos -> (mezcla) -> control de calidad -> matriz de renderizado -> entrega

Lee LEARNINGS.md antes de tu primer vídeo. Es la lista de todo lo que causó el rechazo de un vídeo o el fallo de un renderizado.

0. Reglas (vinculantes)

• Cada escena es un momento concreto de producto con interfaz real. Cuando aparece una IA, una respuesta real de IA está en pantalla. Sin eslóganes abstractos.
• La verdad por encima del marketing. Construye a partir del código base, la documentación y las capturas de pantalla reales de la aplicación; el sitio web es solo para el tono. Cada afirmación en pantalla se remonta a una fuente (qa/claims.py).
• Logotipo exacto, colores tomados de la fuente, nunca aproximados.
• Sin aspecto de IA. Sin MAYÚSCULAS / text-transform: uppercase, emojis, serifas cursivas en pantalla, degradados morados de IA, destellos, orbes, partículas, destellos de lente, contornos de neón, interfaces falsas, teléfonos o casas procesales.
• Seguro contra destellos. Como máximo un destello a pantalla completa cada ~8 s, nunca más de 3 destellos en cualquier intervalo de 1 s. qa/flashcheck.py pasa en el archivo final.
• Sonido. Un efecto de sonido diseñado para cada acción de interfaz en pantalla; la música baja bajo los efectos de sonido y la locución; sin bombo constante.
• Los formatos son diseños nativos dentro de las zonas seguras, nunca recortes. 60 fps; 1080 se renderiza a 4K y se reduce la resolución.
• Nunca publiques, subas ni compartas nada, ni compres créditos, sin que el usuario lo diga.

1. Diseño

SKILL.md, LEARNINGS.md  este archivo, las trampas
research/RESEARCH.md    etapa 0: nombre de empresa / URL / código base -> kit de marca + verdades + capturas de interfaz real
brand.schema.json       esquema del kit de marca
brands/demo/            "Tidewell", una marca ficticia; cópiala para una marca nueva
archetypes/             CONTRACT.md + 30 plantillas de escena (scene.html + README.md)
formats/                presets.json (tamaños, márgenes de seguridad, ajustes preestablecidos de renderizado, volumen) + superposiciones safe-*.png
shared/                 hf.js (tiempo de ejecución: formato, selección, rng con semilla), phone.js (teléfono fotorrealista), type.js, uikit/ (componentes de chat,
                        notificación, calendario, recibo)
audio/                  vo.py (ElevenLabs + control de presupuesto), mix.py, music.md, sfx/ (INDEX.md, INDEX.json, archivos)
qa/                     flashcheck.py, framecheck.py, safezone.py, claims.py, vo_diff.py, contact.py, run-all.sh
scripts/                new-film.sh, add-scene.py, set-format.py, set-brand.py, brand-css.py, render-matrix.sh,
                        save-ref.sh, index-refs.py, shazam.py, xcorr.py, beats.py, peaks.py
templates/              SPEC.md (contrato del vídeo), index.html, project/, structures/
reference/              PATTERNS.md (biblioteca de arquetipos + leyes), RESEARCH-digest.md, studies/ (18 desgloses de reel + INDEX.md)
examples/               ejemplos de vídeos terminados con su kit de marca, SPEC e imágenes fijas

Requisitos: Node 18+ (npx hyperframes), Python 3.10+, ffmpeg, uv (uvx ejecuta los scripts de control de calidad y audio en entornos desechables). Opcional: ELEVENLABS_API_KEY para locución (sin ella, audio/vo.py recurre al TTS de código abierto Kokoro; consulta audio/VOICE.md), una carpeta de música ($MOTION_LIBRARY/music).

Funciona en cualquier agente con un shell. Cuando este archivo dice "subagentes", ejecuta los pasos secuencialmente si tu agente no tiene ninguno; "búsqueda web" significa cualquier herramienta de búsqueda/navegación que tenga tu agente, o curl.

2. Pipeline

0. Investigación (research/RESEARCH.md). Modo código base cuando tengas el repositorio (más preciso), modo sitio web en caso contrario, ambos cuando puedas. Salida: brands/<id>/brand.json, truths con fuentes, capturas de interfaz real en brands/<id>/assets/ui/, y 5-8 momentos de producto.
1. Brief. Público objetivo, formatos, duración, locución o solo música o silencio, la única cosa que el espectador debe entender.
2. Kit de marca. Copia brands/demo/, rellena las paletas (glowRamp de 9 paradas), tipografías con archivos, logotipo, capturas de interfaz, historia, verdades, voz. Valida contra brand.schema.json.
3. Andamiaje. scripts/new-film.sh <marca> <dir> <formato> [formato...] [--palette id] -> index.html con el bloque de marca (tipografías, variables CSS, window.BRAND), film.json, SPEC.md, stubs de audio. Cambia el tema en cualquier momento: scripts/set-brand.py <dir> <marca> [palette]. Cambia el formato: scripts/set-format.py <dir> <fmt>.
4. Guion. SPEC.md sección 2: una fila por momento de producto (interfaz real, palabras en pantalla, línea de locución, prueba, objetivos de tamaño estrictos). Límites de lectura: <= 3 palabras/s, <= 42 caracteres por línea, 2 líneas como máximo.
5. Locución primero (vídeos con VO). audio/vo/script.txt, una línea por línea de locución, luego python3 audio/vo.py say <dir> --voice <id> --take <nombre>. Hace una solicitud con marcas de tiempo, divide por alineación, corta los rellenos y limita las pausas. lines.json proporciona las duraciones. Compruébalo con qa/vo_diff.py <dir> <take>. El control de presupuesto rechaza cualquier llamada que supere el límite del trabajo.
6. Storyboard sobre la locución y la cuadrícula de compás (scripts/beats.py <wav> <dur>). SPEC.md sección 3: arquetipo, entrada/salida, transición (sin destello primero, PATTERNS sección 4), eventos de efectos de sonido.
7. Música. Tres opciones cortadas a ventanas alineadas al compás (florecimiento en la revelación, resolución en el logotipo); renderiza la selección. Consulta audio/music.md.
8. Construcción a partir de arquetipos. python3 scripts/add-scene.py <dir> <arquetipo> <scene-id> <inicio> <dur> [--vars JSON], luego personaliza. Con subagentes: un constructor por grupo de escenas, cada uno dueño solo de sus archivos, luego un crítico independiente sobre las capturas de pantalla, luego correcciones.
9. Mezcla. audio/events.json (música, líneas de locución, efectos de sonido con tiempos de audio/sfx/INDEX.md, reducción de volumen) -> python3 audio/mix.py <dir> -> audio/mix.wav a -14 LUFS / -1 dBTP.
10. Control de calidad. npx hyperframes check con 0 errores, un renderizado de borrador, luego qa/run-all.sh <dir> <video> <fmt> (framecheck, flashcheck, safezone, claims, loudness, fps). Revisa las hojas de qa/contact.py <video> 10 <prefijo> contra la sección 0.
11. Matriz de renderizado. scripts/render-matrix.sh <dir> [--4k 16x9]: por formato, captura 4K reducida a 1080, audio multiplexado, puertas de control de calidad ejecutadas. Primero verifica el espacio libre en disco.
12. Entrega. Una carpeta con los vídeos, una galería index.html y un breve REPORT.md (qué, créditos utilizados, alternativas de música y voz, qué se quedó corto). Ábrela para el usuario.

3. Formatos (formats/presets.json)

id	lienzo	márgenes de seguridad (sup/inf/izq/der)	para
16x9	1920x1080	108/108/192/192	YouTube, LinkedIn, X, sitio web
9x16	1080x1920	270/680/70/140	Reels, TikTok, Shorts
1x1	1080x1080	86/86/135/135	Feed de IG/LinkedIn
4x5	1080x1350	108/108/86/86	Feed de IG/FB
banner	1920x600	60/60/96/96	Cabecera de README / sitio web (bucle silencioso)

Las escenas leen window.BRAND.format y ramifican el diseño por formato ([data-fmt="9x16"]). El lado corto siempre es 1080 px, por lo que los tamaños en px se mantienen; escala los héroes hacia arriba en vertical.

4. Arquetipos (detalles en reference/PATTERNS.md)

campo-de-brillo (A01, luz WebGL a pantalla completa) | losa-de-vidrio (A02, panel de IA con una respuesta real transmitida) | clic-azulejo-vidrio (A03) | palabra-desenfoque-entrada (A04) | colapso-seguimiento (A05) | chip-marquee (A06) | pila-estado (A07, implementación de referencia) | bloque-marca (A08) | túnel-teléfono (A09) | rueda-tambor (A10) | carrusel-tarjetas (A11) | líneas-red (A12) | compositor-enviar (A13) | explosión-tarjetas (A14) | lista-verificación-arreglo (A15) | chips-órbita (A16) | intercambio-lista-alternar (A17) | lanzamiento-objeto (A18) | tipo-bruto (A19) | anillo-icono (A20) | selección-calendario (A21) | héroe-producto (A22) | hilo-chat (A23) | contenedor-morfosis (A24) | pila-notificaciones (A25) | firma-docusign (A26) | stripe-pagado (A27) | cortinilla-logotipo (A28) | árbol-ramas (A29) | píldora-contador (A30) | rueda-logotipo (A31, carrusel "funciona con" en bucle).

Las estructuras de vídeo S1-S8 (explicador SaaS, vertical de 13 s, lista de verificación de pulido premium, oscuro cinematográfico, showcase Figma, apertura degradada, cortinilla hecha a mano, placa de prueba) están en PATTERNS.md sección 5. Contrato: archetypes/CONTRACT.md (variables CSS independientes de la marca, window.BRAND, variables por instancia, nativo del formato, seguro contra destellos, señales de efectos de sonido en el README).

5. Estudiar un nuevo reel de referencia

• scripts/save-ref.sh <url> descarga un reel con yt-dlp y hace una vista general de 2 fps + identificación de canción; scripts/index-refs.py lo indexa.
• Construye tiras de 10 fps por cada 2 s y ejecuciones a fps nativos en momentos clave; rastrea un elemento por fotograma para nombrar la curva de aceleración; cuadrícula de compás con scripts/beats.py; hexadecimales de paleta; luminancia por fotograma para el perfil de destello.
• Escribe reference/studies/<id>.md: lista de tomas, construcción por elemento, cámara, números de aceleración, transiciones, tipo, paleta, profundidad, sonido, estructura de copia, por qué no es IA, qué lo haría parecer IA, arquetipos. Los 18 estudios allí son los ejemplos trabajados.

6. Looks probados

• Brillo (A01): un shader WebGL; campo escalar -> rampa de 9 paradas, deformación de ruido, tramado; uniformes desde una tabla de fotogramas clave monotono-Hermite impulsada por un proxy de animación GSAP.
• Vidrio: backdrop-filter: blur(22px) saturate(1.5) brightness(1.15), bisel degradado a través de mask-composite, resalte interior y sombra, sombra de contacto, un brillo en movimiento.
• Texto: una grotesk a 500, desenfoque de palabra por palabra 14 -> 0 px, escala 1.06 -> 1, power3.out, la línea se vuelve a centrar, retroceso continuo.
• Interfaz real: recrea los componentes del producto en HTML/CSS a partir de su fuente o capturas (shared/uikit/ es un punto de partida); HF.phone mapea una pantalla dentro del teléfono fotorrealista.