faizalmy/brand-film

Filme de marca

Um filme de 60 s sobre a identidade de uma marca: o símbolo, o site, o produto, o nome. Primeiro filme aprovado: ReUI "Refreshed". template/ é o seu código: uma implementação de referência funcional para copiar e adaptar, não uma biblioteca genérica.

• brands/<brand>.md: tudo específico da marca (paleta, tipografia, fontes de texto, logotipo, produto, música, regras, preferências). Leia primeiro. Para uma nova marca, escreva um a partir de brands/_new-brand.md.
• references/example-reui-refreshed.md: o mapa de planos do filme aprovado com quadros e acertos. É a forma a ser adaptada.
• references/reui-frames/: o template visual. 38 stills do filme aprovado mais sheet.jpg. Olhe a folha antes de projetar e compare seus stills com o quadro correspondente ao verificar.
• references/review.md: lista de verificação de pontos fracos e o resumo de revisão do subagente.

Pré-requisitos (verifique primeiro, instale o que estiver faltando)

Execute estas verificações antes da primeira compilação em uma máquina. Instale apenas o que falhar e informe ao usuário o que você instalou.

Necessário	Verificar	Instalar
Node 20.19+	node -v	brew install node (ou nvm)
Remotion e seu renderizador	npx remotion versions no projeto	npm i no projeto (as versões estão fixadas em template/package.json); em um projeto existente: npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media em uma versão compartilhada
Chrome para Remotion	npx remotion browser ensure	mesmo comando; ele baixa o Chrome Headless Shell
ffmpeg / ffprobe (verificação do arquivo final)	ffprobe -version	brew install ffmpeg
Python 3 + Pillow (folhas de contato)	python3 -c "import PIL"	pip3 install pillow
librosa + numpy (beat.py, apenas novas faixas)	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium (capturas)	node -e "require('playwright')" no projeto	npm i -D playwright && npx playwright install chromium
Uma base musical	um arquivo em public/audio/	da fonte que o perfil da marca nomeia; nunca invente uma

Licença do Remotion: gratuita para indivíduos e pequenas equipes; empresas acima do seu limite de tamanho precisam de uma licença corporativa (https://remotion.dev/license). Mencione isso uma vez quando a marca for uma empresa.

A linguagem (a mesma para toda marca)

• Uma tela e uma tinta dos neutros da própria marca. Cor apenas onde a marca realmente a possui, ou dentro de sua UI real. Sem vidro, ouro, 3D ou brilho, a menos que a marca seja feita deles.
• Um elemento lidera. Ele voa em uma linha fina, carrega os cortes e aterrissa no logotipo final. Cada plano o passa para o próximo na mesma posição da tela. No símbolo da ReUI, este é o ponto. Encontre este elemento em um novo símbolo: um ponto, um canto, uma extremidade de traço.
• Cada linha é real. Guias de construção vêm dos próprios caminhos do logotipo. Cada número na tela é medido (unidades do logotipo, caixas DOM em px). Nada é decoração.
• A tipografia própria da marca (aquela que seu site usa). Um mono apenas para medidas.
• Sem logotipo ou texto sobre a UI do produto. Os rótulos ficam fora da UI, em espaço livre.
• Pausas longas em stills fazem parte. Calma é bom, morto não.

Estrutura da história (adapte, não copie cegamente)

Parte	Batidas (de 60)	Função
Linha	0-8	O elemento principal se torna um cursor e digita a própria linha da marca
Símbolo	8-20	O elemento se abre no símbolo; o símbolo é desenhado a partir de sua construção
Site	20-32	O logotipo amplia e é o logotipo de navegação do próprio site, depois um tour rápido; uma interação real do site em um acerto
Nome	32-36	O nome da marca, uma letra por batida
Produto	36-49	3-4 visões reais do produto, arrastos reais, dimensões medidas, cortes secos, cerca de 3 batidas cada
Aparências	49-52	O símbolo desenhado de forma diferente a cada batida; o elemento principal nunca se move
Fim	52-60	Logotipo aterrissa, letras se acomodam no último acerto, depois a linha e o domínio da marca

Dê tempo ao que a marca tem orgulho. Corte as aparências antes da construção ou do produto.

Regras rígidas

• O texto da marca é copiado, nunca escrito. Slogans, linhas e nomes vêm literalmente do próprio site ou documentos da marca. Nunca invente, combine ou encurte.
• Dados de demonstração dentro da UI do produto nunca são conteúdo: sem destacar seus nomes, números ou pessoas.
• Apenas UI real, capturada com um mouse real. Nunca simule o produto.
• Áudio:
  • A música vem da fonte que o perfil da marca nomeia, nunca uma nova geração, a menos que o perfil permita.
  • Acertos são alguns impactos e pancadas nos pontos de sincronia.
  • Sem SFX de clique ou digitação, a menos que o perfil os solicite.
• Nunca renderize ou exporte a menos que seja solicitado naquela rodada. Após uma edição, entregue a prévia do Studio e não ofereça uma renderização. Quando solicitado: 4K, mesmo nome de arquivo, sobrescreva.
• Ideias de teste vão em uma composição duplicada. Prove que a aprovada não foi alterada comparando stills. "Corrigir tudo" ou "remover X" vai direto para a principal.
• O usuário aponta para quadros ("remover 3150"). Renderize esse quadro e nomeie o plano antes de mudar qualquer coisa.

Sistema de tempo (fácil de quebrar)

Tudo em src/Refreshed.tsx:

• Relógio.
  • BPM da base. SLOW = 2: a história roda com metade da velocidade da música. useCurrentFrame() local retorna quadros desacelerados.
  • T = uma batida da história. b(n) = batida n, fixada em meias batidas: b(0.25) não é um quarto, use T / 4.
  • real(n) = b(n) * SLOW = o quadro do filme da batida n.
• ramp(f, from, to, ease) é a única maneira de animar. Ela fixa from/to na grade T / 8 e retorna 1 quando eles se juntam. Nunca passe frações 0-1; use clamp01((x - a) / (b - a)).
• Planos. SHOTS = [[fromBeat, toBeat, Component]]. Mova um limite junto com cada constante de batida dentro desse plano.
• Som.
  • HITS = efeitos sonoros nas batidas.
  • BED_FROM = deslocamento inicial na faixa. BED_VOL, com um callback volume para ducks.
• Batida forte. KickBump pulsa o quadro a cada batida forte até as aparências. STILL = intervalos de batida sem pulso.
• Pontos de sincronia são a espinha dorsal: cada grande mudança está em um acerto. Movê-los significa reposicionar os planos ao redor.
• Nova faixa: python3 scripts/beat.py <track.wav> fornece o tempo, a fase da primeira batida e a queda. Defina BPM e BED_FROM, depois coloque os pontos de sincronia em seus acentos.

Adaptando o template a uma marca

Trocar	Onde
Caminhos do símbolo (anel, forma interna, elemento principal), a linha central e o traço da forma, letras e posições do nome, viewBox	src/logo.tsx (RING_D, U_D, DOT, U_LINE, U_STROKE, LETTERS, LETTER_X, VB, uPoint)
Paleta, fonte, tracking	topo de src/Refreshed.tsx (INK, PAPER, LIGHT_INK, DIM, FONT, TRACK) e public/fonts
A linha e o domínio da marca	LINE, DOMAIN
Capturas do site	um script de captura como scripts/reui/site-object.mjs escrevendo em public/cap/site-object/
Visões do produto	scripts de captura como scripts/reui/live.mjs, dash.mjs, block-live.mjs. Cada um escreve uma captura de tela por passo do mouse mais caixas medidas em public/cap/live/<dir>/ e meta.json. Depois edite as entradas NAMES_UI/BLOCK_UI e a união dir em WITH_UI
Aparências	LOOKS: 3-4 maneiras de desenhar o símbolo (como seus dados de caminho, meio-tom, linhas de construção)
Música e acertos	public/audio/, BPM, BED_FROM, HITS

Um símbolo com uma estrutura diferente (sem ponto, sem anel) precisa de seus próprios Construct, Opening e Final. Mantenha a ideia: desenhe-o a partir de sua geometria real, liderado por um elemento.

Fluxo de trabalho

1. Leia brands/<brand>.md (ou escreva-o). Meça o SVG do logotipo e o site; colete as linhas literais da marca.
2. Novo filme:
   • cp -R ~/.claude/skills/brand-film/template <project> e npm i.
   • Coloque a base em public/audio/.
   • Os scripts de captura carregam o Playwright da pasta do projeto (npm i -D playwright), ou da pasta em PLAYWRIGHT_FROM.
3. Capture o site e o produto com um mouse real. Faça backup de meta.json antes de recapturar. Escolha visões do produto diferentes entre si e arraste algo real; nunca um tour de hover.
4. Edite apenas o que a marca muda (tabela acima). Mantenha os helpers (Flight, Wipe, Dim, Lead, Disc, Live, LiveRun).
5. Verifique.
   • npx tsc --noEmit. Apenas TS6192 em importações não utilizadas é aceitável.
   • Da pasta do projeto: ~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>, depois leia sheet.jpg.
   • Amostre cada plano, ambos os quadros de cada junção, cada quadro de sincronia e o final.
   • Coloque sua folha ao lado de references/reui-frames/sheet.jpg. Qualquer coisa mais esparsa, mais alta ou mais cheia do que o plano correspondente do template é uma constatação.
   • Stills individuais podem piscar; re-renderize um antes de corrigi-lo.
6. Revisão (sempre, antes da primeira entrega de um novo corte):
   • Gere um subagente com o resumo em references/review.md. Ele recebe o código, não suas conclusões.
   • Ele retorna pontos fracos classificados, com quadros e uma lista "não tocar".
   • Verifique você mesmo suas principais constatações nos quadros e descarte qualquer que os quadros não mostrem.
   • Mostre ao usuário a lista curta classificada e pergunte o que corrigir, a menos que ele tenha dito "corrigir tudo".
   • Re-verifique os quadros corrigidos. Nunca desfaça o que o usuário gostou (perfil da marca).
7. Prévia no Remotion Studio (http://localhost:<port>/Refreshed). Entregue a prévia, não uma renderização.
8. Renderize (apenas quando solicitado): npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error em segundo plano. Depois ffprobe: 3840x2160, 60 fps, contagem de quadros, stream de áudio.

Feche cada rodada com

O que mudou (por quadro), o que não foi verificado (movimento e som nunca aparecem em stills), e se o mp4 renderizado está desatualizado.