brand-cut

O que brand-cut faz?

empresa / URL / repositório -> pesquisa -> kit de marca -> roteiro de momentos do produto -> storyboard -> (VO) -> construção com arquétipos -> (mix) -> QA -> matriz de render -> entrega

Leia LEARNINGS.md antes do seu primeiro filme. Lá está tudo o que fez um filme ser rejeitado ou uma renderização falhar.

0. Regras (vinculativas)

• Cada cena é um momento concreto do produto com UI real. Quando a IA aparece, uma resposta real da IA está na tela. Sem slogans abstratos.
• Verdade acima do marketing. Construa a partir do repositório, da documentação e das telas reais do aplicativo; o site serve apenas para o tom. Cada afirmação na tela tem origem em uma fonte (qa/claims.py).
• Logotipo exato, cores extraídas da fonte, nunca aproximadas.
• Não parece IA. Sem CAIXA ALTA / text-transform: uppercase, emojis, serifas itálicas em display, gradientes roxos de IA, brilhos, orbes, partículas, lentes flare, contornos neon, UI falsa, telefones ou casas processuais.
• Seguro contra flashes. No máximo um flash de quadro cheio a cada ~8 s, nunca mais de 3 flashes em qualquer 1 s. qa/flashcheck.py deve passar no arquivo final.
• Som. Um SFX desenhado para cada ação de UI na tela; a música atenua sob SFX e narração; sem batida pulsante.
• Formatos são layouts nativos dentro das zonas de segurança, nunca cortes. 60 fps; 1080 é renderizado em 4K e reduzido.
• Nunca publique, envie ou publique nada, nem compre créditos, sem que o usuário autorize.

1. Layout

SKILL.md, LEARNINGS.md   este arquivo, as armadilhas
research/RESEARCH.md     estágio 0: nome da empresa / URL / repositório -> kit de marca + verdades + capturas de UI real
brand.schema.json        esquema do kit de marca
brands/demo/             "Tidewell", uma marca fictícia; copie para uma nova marca
archetypes/              CONTRACT.md + 30 templates de cena (scene.html + README.md)
formats/                 presets.json (tamanhos, margens de segurança, predefinições de render, volume) + sobreposições safe-*.png
shared/                  hf.js (runtime: formato, pick, rng com semente), phone.js (telefone fotorrealista), type.js, uikit/ (componentes de chat,
                         notificação, calendário, recibo)
audio/                   vo.py (ElevenLabs + limite de orçamento), mix.py, music.md, sfx/ (INDEX.md, INDEX.json, arquivos)
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 do filme), index.html, project/, structures/
reference/               PATTERNS.md (biblioteca de arquétipos + leis), RESEARCH-digest.md, studies/ (18 análises de reels + INDEX.md)
examples/                amostras de filmes finalizados com seus kits de marca, SPEC e imagens

Requisitos: Node 18+ (npx hyperframes), Python 3.10+, ffmpeg, uv (uvx executa os scripts de QA e áudio em ambientes descartáveis). Opcional: ELEVENLABS_API_KEY para narração (sem ela, audio/vo.py usa o TTS open-source Kokoro; veja audio/VOICE.md), uma pasta de música ($MOTION_LIBRARY/music).

Funciona em qualquer agente com shell. Onde este arquivo disser "subagentes", execute as etapas sequencialmente se seu agente não tiver nenhum; "busca web" significa qualquer ferramenta de fetch/navegação que seu agente tiver, ou curl.

2. Pipeline

0. Pesquisa (research/RESEARCH.md). Modo repositório quando você tem o código (mais preciso), modo site caso contrário, ambos quando possível. Saída: brands/<id>/brand.json, truths com fontes, capturas de UI reais em brands/<id>/assets/ui/ e 5 a 8 momentos do produto.
1. Brief. Público-alvo, formatos, duração, narração ou só música ou silencioso, a única coisa que o espectador deve entender.
2. Kit de marca. Copie brands/demo/, preencha paletas (glowRamp de 9 paradas), fontes com arquivos, logotipo, capturas de UI, história, verdades, voz. Valide contra brand.schema.json.
3. Estrutura. scripts/new-film.sh <marca> <dir> <formato> [formato...] [--palette id] -> index.html com o bloco da marca (fontes, variáveis CSS, window.BRAND), film.json, SPEC.md, stubs de áudio. Re-tematize a qualquer momento: scripts/set-brand.py <dir> <marca> [paleta]. Troque de formato: scripts/set-format.py <dir> <fmt>.
4. Roteiro. SPEC.md seção 2: uma linha por momento do produto (UI real, palavras na tela, linha de VO, prova, metas de tamanho rígidas). Limites de leitura: <= 3 palavras/s, <= 42 caracteres por linha, no máximo 2 linhas.
5. Primeiro a VO (filmes com VO). audio/vo/script.txt, uma linha por linha de VO, depois python3 audio/vo.py say <dir> --voice <id> --take <nome>. Faz uma requisição com timestamps, divide por alinhamento, corta preenchimentos e limita pausas. lines.json fornece durações. Verifique com qa/vo_diff.py <dir> <take>. O guardião de orçamento recusa qualquer chamada acima do limite do job.
6. Storyboard com base na VO e na grade de compassos (scripts/beats.py <wav> <dur>). SPEC.md seção 3: arquétipo, entrada/saída, transição (sem flash primeiro, PATTERNS seção 4), eventos de SFX.
7. Música. Três opções cortadas em janelas alinhadas ao compasso (bloom no reveal, resolve no logotipo); renderize a escolhida. Veja audio/music.md.
8. Construção a partir de arquétipos. python3 scripts/add-scene.py <dir> <arquétipo> <scene-id> <início> <dur> [--vars JSON], depois personalize. Com subagentes: um construtor por grupo de cenas, cada um dono apenas de seus arquivos, depois um crítico independente em snapshots, então correções.
9. Mixagem. audio/events.json (música, linhas de VO, SFX com tempos de audio/sfx/INDEX.md, atenuação) -> python3 audio/mix.py <dir> -> audio/mix.wav a -14 LUFS / -1 dBTP.
10. QA. npx hyperframes check com 0 erros, uma renderização de rascunho, então qa/run-all.sh <dir> <vídeo> <fmt> (framecheck, flashcheck, safezone, claims, loudness, fps). Revise as folhas de qa/contact.py <vídeo> 10 <prefixo> contra a seção 0.
11. Matriz de renderização. scripts/render-matrix.sh <dir> [--4k 16x9]: por formato, captura em 4K reduzida para 1080, áudio multiplexado, gates de QA executados. Verifique o disco livre primeiro.
12. Entrega. Uma pasta com os vídeos, uma galeria index.html e um breve REPORT.md (o que foi feito, créditos usados, alternativas de música e voz, o que ficou aquém). Abra-a para o usuário.

3. Formatos (formats/presets.json)

id	canvas	margens de segurança (c/b/e/d)	para
16x9	1920x1080	108/108/192/192	YouTube, LinkedIn, X, site
9x16	1080x1920	270/680/70/140	Reels, TikTok, Shorts
1x1	1080x1080	86/86/135/135	Feed IG/LinkedIn
4x5	1080x1350	108/108/86/86	Feed IG/FB
banner	1920x600	60/60/96/96	README / faixa de cabeçalho do site (loop silencioso)

As cenas leem window.BRAND.format e ramificam o layout por formato ([data-fmt="9x16"]). O lado curto é sempre 1080 px, portanto os tamanhos em px se mantêm; dimensione os heróis para cima na vertical.

4. Arquétipos (detalhes em reference/PATTERNS.md)

glow-field (A01, luz WebGL de filme inteiro) | glass-slab (A02, painel de IA com uma resposta real transmitida) | glass-tile-click (A03) | word-blur-in (A04) | tracking-collapse (A05) | chip-marquee (A06) | status-stack (A07, implementação de referência) | wordmark-lockup (A08) | phone-tunnel (A09) | drum-wheel (A10) | card-carousel (A11) | network-lines (A12) | composer-send (A13) | card-burst (A14) | checklist-fix (A15) | orbit-chips (A16) | list-swap-toggle (A17) | object-launch (A18) | brutal-type (A19) | icon-ring (A20) | calendar-pick (A21) | product-hero (A22) | chat-thread (A23) | container-morph (A24) | notification-pile (A25) | docusign-sign (A26) | stripe-paid (A27) | logo-sting (A28) | branch-tree (A29) | counter-pill (A30) | logo-wheel (A31, carrossel "funciona com" em loop).

Estruturas de filme S1-S8 (explicador SaaS, vertical de 13 s, checklist de polimento premium, escuro cinematográfico, showcase Figma, abertura gradiente, vinheta artesanal, placa de prova) estão na seção 5 do PATTERNS.md. Contrato: archetypes/CONTRACT.md (variáveis CSS agnósticas à marca, window.BRAND, variáveis por instância, nativo do formato, seguro contra flash, dicas de SFX no README).

5. Estudando um novo reel de referência

• scripts/save-ref.sh <url> baixa um reel com yt-dlp e faz uma visão geral de 2 fps + identificação da música; scripts/index-refs.py indexa.
• Construa tiras de 10 fps a cada 2 s e execuções na taxa de quadros nativa em momentos-chave; rastreie um elemento por quadro para nomear a easing; grade de compassos com scripts/beats.py; hexadecimais da paleta; luminância por quadro para o perfil de flash.
• Escreva reference/studies/<id>.md: lista de tomadas, construção por elemento, câmera, números de easing, transições, tipo, paleta, profundidade, som, estrutura de cópia, por que não é IA, o que a tornaria IA, arquétipos. Os 18 estudos existentes são os exemplos trabalhados.

6. Looks comprovados

• Glow (A01): um shader WebGL; campo escalar -> rampa de 9 paradas, ruído warp, dither; uniforms a partir de uma tabela de keyframes monotônica Hermite conduzida por um proxy tween GSAP.
• Glass: backdrop-filter: blur(22px) saturate(1.5) brightness(1.15), bisel gradiente via mask-composite, destaque e sombra internos, sombra de contato, um brilho no movimento.
• Tipo: uma grotesk com peso 500, blur-in por palavra de 14 -> 0 px, escala 1,06 -> 1, power3.out, linha centralizada novamente, recuo contínuo.
• UI real: recrie os componentes do produto em HTML/CSS a partir do código-fonte ou capturas (shared/uikit/ é um ponto de partida); HF.phone mapeia uma tela no telefone fotorrealista.