faizalmy/brand-film

Video de marca

Un video de 60 segundos sobre la identidad de una marca: la marca gráfica, el sitio, el producto, el nombre. Primer video aprobado: ReUI "Refreshed". template/ es su código: una implementación de referencia funcional para copiar y adaptar, no una biblioteca genérica.

• brands/<brand>.md: todo lo específico de la marca (paleta, tipografía, fuentes de texto, logotipo, producto, música, reglas, preferencias). Léelo primero. Para una nueva marca, escribe uno a partir de brands/_new-brand.md.
• references/example-reui-refreshed.md: el mapa de tomas del video aprobado con fotogramas y golpes. Es la forma a adaptar.
• references/reui-frames/: la plantilla visual. 38 fotogramas fijos del video aprobado más sheet.jpg. Mira la hoja antes de diseñar y compara tus fotogramas fijos con el fotograma correspondiente cuando verifiques.
• references/review.md: lista de verificación de puntos débiles y resumen de revisión del subagente.

Requisitos previos (verificar primero, instalar lo que falte)

Ejecuta estas comprobaciones antes de la primera compilación en una máquina. Instala solo lo que falle e informa al usuario lo que instalaste.

Necesidad	Verificar	Instalar
Node 20.19+	node -v	brew install node (o nvm)
Remotion y su renderizador	npx remotion versions en el proyecto	npm i en el proyecto (las versiones están fijadas en template/package.json); en un proyecto existente: npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media en una versión compartida
Chrome para Remotion	npx remotion browser ensure	mismo comando; descarga Chrome Headless Shell
ffmpeg / ffprobe (verificación final del archivo)	ffprobe -version	brew install ffmpeg
Python 3 + Pillow (hojas de contactos)	python3 -c "import PIL"	pip3 install pillow
librosa + numpy (beat.py, solo pistas nuevas)	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium (capturas)	node -e "require('playwright')" en el proyecto	npm i -D playwright && npx playwright install chromium
Una base musical	un archivo en public/audio/	de la fuente que nombre el perfil de la marca; nunca inventes una

La licencia de Remotion: gratuita para individuos y equipos pequeños; las empresas por encima de su límite de tamaño necesitan una licencia corporativa (https://remotion.dev/license). Mencionalo una vez cuando la marca sea una empresa.

El lenguaje (el mismo para cada marca)

• Un lienzo y una tinta de los colores neutros propios de la marca. Color solo donde la marca realmente lo tiene, o dentro de su interfaz de usuario real. Sin vidrio, oro, 3D o brillo a menos que la marca esté hecha de ellos.
• Un elemento lidera. Vuela sobre una línea delgada, lleva los cortes y aterriza en el logotipo final. Cada toma lo entrega a la siguiente en la misma posición de pantalla. En la marca de ReUI, este es el punto. Encuentra este elemento en una nueva marca: un punto, una esquina, un extremo de trazo.
• Cada línea es real. Las guías de construcción provienen de las propias rutas del logotipo. Cada número en pantalla se mide (unidades del logotipo, cuadros DOM en px). Nada es decoración.
• La tipografía propia de la marca (la que usa su sitio). Una mono solo para medidas.
• Sin logotipo ni texto sobre la interfaz de producto. Las etiquetas se colocan fuera de la interfaz, en espacio libre.
• Las pausas largas en fotogramas fijos son parte del estilo. La calma está bien, lo muerto no.

Estructura de la historia (adapta, no copies ciegamente)

Parte	Tiempos (de 60)	Trabajo
Línea	0-8	El elemento principal se convierte en un cursor y escribe la propia línea de la marca
Marca gráfica	8-20	El elemento se abre en la marca gráfica; la marca se dibuja a partir de su construcción
Sitio	20-32	El logotipo se aleja y es el propio logotipo de navegación del sitio, luego un recorrido rápido; una interacción real del sitio en un golpe
Nombre	32-36	El nombre de la marca, una letra por tiempo
Producto	36-49	3-4 vistas reales del producto, arrastres reales, dimensiones medidas, cortes duros, aproximadamente 3 tiempos cada uno
Apariencias	49-52	La marca gráfica se dibuja de manera diferente cada tiempo; el elemento principal nunca se mueve
Final	52-60	El logotipo aterriza, las letras se asientan en el último golpe, luego la línea y el dominio de la marca

Dale tiempo a lo que la marca se enorgullece. Recorta las apariencias antes que la construcción o el producto.

Reglas estrictas

• El texto de la marca se copia, nunca se escribe. Los lemas, líneas y nombres provienen textualmente del propio sitio o documentación de la marca. Nunca inventes, combines o acortes.
• Los datos de demostración dentro de la interfaz de producto nunca son contenido: no se muestran sus nombres, números o personas.
• Solo interfaz de usuario real, capturada con un ratón real. Nunca simules el producto.
• Audio:
  • La música proviene de la fuente que nombre el perfil de la marca, nunca una nueva generación a menos que el perfil lo permita.
  • Los golpes son algunos impactos y portazos en los puntos de sincronización.
  • Sin efectos de sonido de clic o escritura a menos que el perfil lo solicite.
• Nunca renderices ni exportes a menos que se solicite en esa ronda. Después de una edición, entrega la vista previa del Studio y no ofrezcas un renderizado. Cuando se solicite: 4K, mismo nombre de archivo, sobrescribe.
• Las ideas de prueba van en una composición duplicada. Demuestra que la aprobada no ha cambiado comparando fotogramas fijos. "Arreglar todo" o "eliminar X" va directamente a la principal.
• El usuario señala fotogramas ("elimina 3150"). Renderiza ese fotograma y nombra la toma antes de cambiar nada.

Sistema de sincronización (fácil de romper)

Todo en src/Refreshed.tsx:

• Reloj.
  • BPM de la base musical. SLOW = 2: la historia se ejecuta a la mitad de la música. useCurrentFrame() local devuelve fotogramas ralentizados.
  • T = un tiempo de la historia. b(n) = tiempo n, ajustado a medios tiempos: b(0.25) no es un cuarto, usa T / 4.
  • real(n) = b(n) * SLOW = el fotograma de la película en el tiempo n.
• ramp(f, from, to, ease) es la única forma de animar. Ajusta from/to a la cuadrícula de T / 8 y devuelve 1 cuando se ajustan juntos. Nunca pases fracciones 0-1; usa clamp01((x - a) / (b - a)).
• Tomas. SHOTS = [[fromBeat, toBeat, Component]]. Mueve un límite junto con cada constante de tiempo dentro de esa toma.
• Sonido.
  • HITS = efectos de sonido en tiempos.
  • BED_FROM = desplazamiento de inicio en la pista. BED_VOL, con una devolución de llamada volume para silencios.
• Golpe. KickBump pulsa el fotograma por cada golpe hasta las apariencias. STILL = rangos de tiempo sin pulso.
• Los puntos de sincronización son la columna vertebral: cada cambio grande se asienta en un golpe. Mover uno significa reajustar las tomas a su alrededor.
• Nueva pista: python3 scripts/beat.py <track.wav> da el tempo, la fase del primer golpe y la caída. Establece BPM y BED_FROM, luego coloca los puntos de sincronización en sus acentos.

Adaptación de la plantilla a una marca

Intercambio	Dónde
Rutas de la marca gráfica (anillo, forma interior, elemento principal), línea central y trazo de la forma, letras y posiciones del nombre, viewBox	src/logo.tsx (RING_D, U_D, DOT, U_LINE, U_STROKE, LETTERS, LETTER_X, VB, uPoint)
Paleta, fuente, interletraje	parte superior de src/Refreshed.tsx (INK, PAPER, LIGHT_INK, DIM, FONT, TRACK) y public/fonts
La línea y el dominio de la marca	LINE, DOMAIN
Capturas del sitio	un script de captura como scripts/reui/site-object.mjs que escribe en public/cap/site-object/
Vistas del producto	scripts de captura como scripts/reui/live.mjs, dash.mjs, block-live.mjs. Cada uno escribe una captura de pantalla por paso del ratón más cuadros medidos en public/cap/live/<dir>/ y meta.json. Luego edita las entradas NAMES_UI/BLOCK_UI y la unión dir en WITH_UI
Apariencias	LOOKS: 3-4 formas de dibujar la marca gráfica (como sus datos de ruta, semitono, líneas de construcción)
Música y golpes	public/audio/, BPM, BED_FROM, HITS

Una marca gráfica con una estructura diferente (sin punto, sin anillo) necesita su propio Construct, Opening y Final. Mantén la idea: dibújala desde su geometría real, liderada por un elemento.

Flujo de trabajo

1. Lee brands/<brand>.md (o escríbelo). Mide el logotipo SVG y el sitio; recopila las líneas textuales de la marca.
2. Nuevo video:
   • cp -R ~/.claude/skills/brand-film/template <project> y npm i.
   • Coloca la base musical en public/audio/.
   • Los scripts de captura cargan Playwright desde la carpeta del proyecto (npm i -D playwright), o desde la carpeta en PLAYWRIGHT_FROM.
3. Captura el sitio y el producto con un ratón real. Haz una copia de seguridad de meta.json antes de volver a capturar. Elige vistas de producto diferentes entre sí y arrastra algo real; nunca un recorrido de desplazamiento.
4. Edita solo lo que cambia la marca (tabla anterior). Mantén los ayudantes (Flight, Wipe, Dim, Lead, Disc, Live, LiveRun).
5. Verifica.
   • npx tsc --noEmit. Solo TS6192 en importaciones no utilizadas es aceptable.
   • Desde la carpeta del proyecto: ~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>, luego lee sheet.jpg.
   • Muestra cada toma, ambos fotogramas de cada unión, cada fotograma de sincronización y el final.
   • Coloca tu hoja junto a references/reui-frames/sheet.jpg. Cualquier cosa más dispersa, más ruidosa o más abarrotada que la toma correspondiente de la plantilla es un hallazgo.
   • Los fotogramas fijos individuales pueden parpadear; vuelve a renderizar uno antes de arreglarlo.
6. Revisión (siempre, antes de la primera entrega de un nuevo corte):
   • Genera un subagente con el resumen en references/review.md. Obtiene el código, no tus conclusiones.
   • Devuelve los puntos débiles clasificados, con fotogramas y una lista de "no tocar".
   • Verifica sus principales hallazgos en los fotogramas tú mismo y descarta cualquier cosa que los fotogramas no muestren.
   • Muestra al usuario la breve lista clasificada y pregunta qué arreglar, a menos que hayan dicho "arreglar todo".
   • Vuelve a verificar los fotogramas arreglados. Nunca deshagas lo que le gustó al usuario (perfil de marca).
7. Vista previa en Remotion Studio (http://localhost:<port>/Refreshed). Entrega la vista previa, no un renderizado.
8. Renderizado (solo cuando se solicite): npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error en segundo plano. Luego ffprobe: 3840x2160, 60 fps, conteo de fotogramas, flujo de audio.

Cierra cada ronda con

Qué cambió (por fotograma), qué no se verificó (el movimiento y el sonido nunca se muestran en fotogramas fijos), y si el mp4 renderizado está desactualizado.