Título cinético de seis segundos

Kinetic Title Drop

Um filme de seis segundos, 1920×1080, apenas com texto, em três tempos:

1. Uma enorme primeira palavra abre o quadro com um traço fino que a atravessa, depois se acomoda no canto superior esquerdo.
2. Uma segunda palavra cai como um contorno e se preenche com a cor de destaque.
3. Uma linha de conclusão entra rápida pela direita com um rastro de movimento, e uma barra de destaque surge por baixo dela. Um chip e um rodapé aparecem gradualmente, tudo se mantém por um instante e depois sai de cena de forma limpa.

O template é uma composição do HyperFrames. Você preenche um briefing, um script o escreve no template e o HyperFrames verifica e renderiza o MP4 localmente. O texto é medido na fonte real e dimensionado para preencher o quadro, de modo que palavras curtas e longas ocupem o mesmo espaço.

O que você precisa

• Node.js 22 ou superior e FFmpeg no PATH.
• O HyperFrames é executado via npx, fixado na versão com a qual este template foi testado: npx --yes [email protected].
• A primeira renderização baixa um Chrome headless. Se o render disser que o Chrome está faltando, execute npx --yes [email protected] browser ensure uma vez.
• Acesso de rede a cdn.jsdelivr.net, que fornece o GSAP para o template. Consulte Solução de Problemas se estiver bloqueado.

A pasta desta skill é <skill> abaixo: a pasta onde este SKILL.md está.

Passos

1. Obter o texto

Pergunte qualquer coisa que você não puder inferir. Cada campo tem um limite; o script rejeita valores acima dele.

Campo	O que é	Limite	Exemplo bom
line1	Primeira palavra. Abre enorme, depois fica no canto superior esquerdo.	10	Ship
line2	Segunda palavra. Cai como contorno, preenche com a cor de destaque.	6	it
line3	A conclusão. Maior linha, com a barra abaixo.	12	today.
chip	Pequena etiqueta, canto superior direito. Versão, data ou status.	24	v2.0 · Out now
metaLeft	Rodapé, esquerda. O que é, em poucas palavras.	60	Release notes · 14 fixes
metaRight	Rodapé, direita. Geralmente uma URL ou identificador.	40	relay.example/changelog

Dicas de escrita:

• As linhas 1 e 2 compartilham a linha superior, então juntas devem ler como o início de uma frase ("Ship / it", "Notes / that", "Meet / the"). A linha 3 completa a frase.
• Tudo é em maiúsculas. Palavras individuais funcionam melhor; a linha 3 pode ter duas palavras curtas.
• Mantenha line1 + line2 abaixo de cerca de 12 caracteres, senão a linha superior fica pequena ao lado da conclusão.
• O rodapé fica visível por cerca de 2 segundos, então mantenha-o escaneável.

2. Escolher as cores

Três cores hexadecimais: ground (fundo), ink (texto) e accent (destaque: contorno, preenchimento, barra, chip). Use as cores da marca, se disponíveis. Caso contrário, comece por uma predefinição:

Predefinição	ground	ink	accent
Ember	#0f1013	#f5f4ef	#ff5b2e
Fieldnote	#f1ede4	#18201c	#2f6b4f
Cobalt	#0b1020	#eef1ff	#5b7cff
Paper	#fbfaf7	#111111	#e8462b
Lime	#101410	#f2f5ee	#b6f23a

ink precisa de forte contraste com ground; accent precisa de pelo menos 3:1 contra ground, porque a linha 2 é desenhada com ele. O check mede ambos e informa se algum falhar.

3. Criar o projeto e aplicar o briefing

cp -r <skill>/template ./title-drop
cd title-drop

Escreva brief.json no projeto com os campos dos passos 1 e 2:

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · Out now",
  "metaLeft": "Release notes · 14 fixes · 3 new features",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

Depois, escreva-o no template:

node <skill>/scripts/apply-brief.mjs . brief.json

Ele verifica cada valor contra as variáveis declaradas do template (tipo, comprimento, formato de cor) e lista todos os problemas de uma vez se algo estiver errado. Corrija o briefing e execute novamente. Você pode omitir campos para manter o valor atual.

Dois briefings completos estão em <skill>/examples/.

4. Verificar

npx --yes [email protected] check --json

O check analisa o arquivo, reproduz em um navegador, mede o layout ao longo do tempo e testa o contraste. "ok": true sem achados significa que está pronto. Corrija qualquer achado antes de renderizar. Os que o texto pode causar:

• contrast_aa_failure: um par de cores está muito próximo. Use o suggestedColor que ele fornece, ou escolha um tom mais escuro ou mais claro.
• text_box_overflow, clipped_text ou content_overlap: um valor é maior do que o template espera, geralmente um rodapé ou chip que invade o espaço vizinho. Encurte-o.

Não altere a estrutura do template para silenciar um achado. Corrija o briefing.

5. Olhar antes de renderizar

npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

Isso escreve quadros PNG em snapshots/. Abra-os e verifique o quadro de abertura, a chegada da segunda palavra e o quadro final. Procure por palavras que colidam com o chip, um rodapé que invada a barra ou um destaque que desapareça no fundo.

6. Renderizar

npx --yes [email protected] render --quality delivery -o renders/title-drop.mp4

O package.json do projeto tem os mesmos comandos como npm run check e npm run render. Use --quality draft para um teste rápido e --fps 60 para um resultado mais suave em redes sociais.

7. Entregar

Forneça à pessoa o caminho para renders/title-drop.mp4 e uma imagem estática do passo 5. Diga quais campos alterar para outra versão: ela só precisa editar brief.json e repetir os passos 3 a 6.

Mapa de tempo

Tempo (s)	O que acontece
0,00	line1 já está na tela, grande e centralizada, como uma miniatura
0,00–0,42	Um traço fino de destaque a atravessa, depois desaparece
0,80–1,35	line1 move-se para o canto superior esquerdo
1,35–1,77	line2 cai como um contorno
1,90–2,06	line2 preenche-se com a cor de destaque
2,05–2,55	line3 entra rápida pela direita
2,60–3,05	Barra de destaque surge por baixo de line3
3,10–3,50	Chip, rodapé e marcas de canto aparecem gradualmente
3,50–5,45	Segura
5,45–5,80	Tudo sai para cima com um breve desfoque

Várias versões de uma vez

Para renderizar muitas variantes (uma por idioma, produto ou data), escreva um array JSON de briefings e renderize-os de uma só vez. Cada objeto é um briefing completo ou parcial, mesclado sobre os valores já aplicados:

npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"

--batch define variáveis por renderização, então você não precisa de apply-brief para cada uma. O caminho de saída precisa de um espaço reservado como {index} ou um campo como {line3}, senão os arquivos se sobrescrevem. Execute check em um briefing representativo primeiro e olhe o texto mais longo em um snapshot.

Solução de Problemas

• A renderização trava, depois mostra um quadro estático ou relata sub_timeline_script_failure. O GSAP não carregou. Se sua rede bloquear cdn.jsdelivr.net, execute npm i [email protected] no projeto, copie node_modules/gsap/dist/gsap.min.js para assets/vendor/ e aponte o <script src> em index.html para assets/vendor/gsap.min.js.
• As palavras parecem com a fonte errada. O template usa League Gothic e JetBrains Mono, que o HyperFrames inclui. Se você trocar de fontes, use outra família incluída (npx hyperframes docs compositions lista-as) ou adicione um @font-face, senão o check falha.
• As cores não mudaram. Execute apply-brief do passo 3 novamente e verifique se imprimiu "Applied N values". Editar as cores :root do CSS não tem efeito; as variáveis vencem.
• Quer uma duração diferente? Mantenha em 6 s. Os tempos são ajustados para caber nessa janela; esticar a duração raiz apenas prolonga a pausa.

Arquivos

• template/: o projeto HyperFrames (index.html, hyperframes.json, package.json).
• scripts/apply-brief.mjs: valida um briefing e o escreve no template. Sem dependências.
• examples/relay-v2/ e examples/fieldnote-beta/: briefings completos. As prévias no Lookbk são renderizadas a partir deles.
• NOTICE.md: software de terceiros que esta skill utiliza.