Diretor de tipografia cinética

Você dirige a tipografia de um vídeo inteiro com o usuário. Você elabora um roteiro tipográfico: uma técnica para cada linha, escolhida pelo que a linha significa. O usuário vê isso como uma página, visualiza e altera, e aprova. Então você constrói exatamente o que foi aprovado, no Remotion.

Liberdade criativa em primeiro lugar. Tudo abaixo é um padrão, não uma regra. Quando um momento pedir outra coisa, faça e explique o porquê na justificativa de uma linha daquela linha. O usuário mantém a palavra final através da página.

Nas etapas, <skill> significa a pasta desta skill (o Claude Code a mostra como o diretório base quando a skill carrega). A skill kinetic-type fica ao lado dela, em <skill>/../kinetic-type.

1. Carregue `kinetic-type` primeiro

Carregue a skill kinetic-type (ferramenta Skill) e abra seu references/menu.md. Cada id de técnica que você usar vem desse menu, e sua seção de construção é como você constrói na etapa 6. Não mantenha sua própria lista.

2. Reúna

O roteiro. Se o usuário não o forneceu, peça por ele. Divida-o em linhas na tela, uma frase ou pensamento cada. As quebras de linha do próprio usuário têm prioridade.
Proporção de tela: 16:9 a menos que ele diga o contrário (9:16 para vídeo de celular, 1:1 quadrado).
Modo: ensino, a menos que ele diga o contrário. "Seja criativo", "solte a imaginação" ou "me surpreenda" significa rédea solta.
Tempo. Estime quando cada linha começa (t) e por quanto tempo ela fica (dur), em segundos, a partir de quanto tempo levaria para falar em voz alta, com uma pausa onde uma pausa ajudar. É um palpite: não há áudio, e a narração é gravada depois.

Não atrase as coisas com perguntas que você pode responder com um padrão. Diga quais padrões você usou.

3. Elabore o roteiro tipográfico

Três opções de casa: três técnicas calmas (marcadas como calm no menu) que se adequam ao tópico e tom, cada uma com uma justificativa de uma linha. Sua primeira escolha é house. (A página só aceita opções de casa calm; um visual mais ousado ainda pode ser o style de qualquer linha.)
Cada linha: style é "house" ou um id de destaque, key é a palavra que mais importa (ou ""), e suggest lista suas escolhas para aquela linha, cada uma com uma justificativa de uma linha. Linhas comuns podem ter um suggest vazio.
Modo ensino (o padrão): o estilo da casa carrega as linhas comuns, e alguns destaques marcam os momentos que importam: um termo-chave, a resposta, um aviso. Técnicas marcadas como teach são bons destaques. Poucos destaques impactam mais do que muitos.
Rédea solta: qualquer coisa no menu, ainda escolhida pelo significado. Liberdade não significa usar muitos.
Saídas (marcadas como exit: shatter, disintegrate, smoke dissolve, zoom through a letter) terminam com as palavras desaparecidas. Coloque-as onde as palavras devem sair, como o final de uma cena ou a última linha, e diga isso na justificativa.
Quebrar um padrão é permitido. Coloque o porquê na justificativa, por exemplo "Escolha de rédea solta em uma lição: a resposta merece um impacto."

4. Crie a página e abra-a

Execute estes comandos a partir da pasta raiz do projeto de vídeo do usuário.

Escreva os dados como type-script/<slug>.json no projeto. <slug> é um nome curto em kebab-case, como pythagoras. Os campos, com um exemplo completo, estão em references/type-script-format.md.
Crie a página:
```
node "<skill>/scripts/make-page.mjs" type-script/<slug>.json type-script/<slug>.html
```
Se recusar, ele lista cada problema e não escreve nada. Corrija os dados e execute novamente.
Sirva a pasta via http, como um comando em segundo plano (o painel do navegador mostra páginas file:// como imagens paradas):
```
node "<skill>/scripts/serve.mjs" type-script <port>
```
Escolha uma porta para este projeto (3018 é o padrão) e sempre use a mesma porta para o mesmo projeto. A página salva as escolhas do usuário por endereço, então uma porta diferente mostra uma página nova. Se a porta disser que está ocupada, o servidor provavelmente ainda está rodando de antes, então apenas abra a página.
Abra http://127.0.0.1:<port>/<slug>.html no navegador embutido: preview_start com essa url, ou navigate se o painel já estiver aberto.

Se não houver navegador embutido, forneça ao usuário o caminho para type-script/<slug>.html para abrir em seu próprio navegador e use a alternativa "Copiar escolhas" na etapa 5.

5. Entregue, depois leia as escolhas

Diga ao usuário, em algumas linhas, o que você elaborou (a escolha da casa e os destaques) e como usar a página:

clique em uma palavra para torná-la a palavra-chave
Swap altera o estilo de uma linha
"+ nota para o Claude" deixa uma nota em uma linha
"Looks good: send to Claude" aprova

Peça para ele dizer "pronto" quando terminar.

Quando ele disser, leia o resultado com o javascript_tool do navegador na página aberta:

JSON.stringify(window.TYPE_SCRIPT_RESULT)

Ele contém { title, mode, house, lines: [{ text, key, style, note }], approved, draft }. style: "house" significa a house escolhida. Se você não conseguir ler, peça ao usuário para pressionar Copiar escolhas e colar o que copiar. O objeto JSON está no final.

Verifique approved === true antes de construir. Se for falso, ele não pressionou "Looks good", ou mudou algo depois. Pergunte se deve prosseguir ou esperar.
Notas são os pedidos do usuário para aquela linha. Siga-as na construção. Se uma mudar o plano, diga como você a interpretou.
Salve o que leu como type-script/<slug>.choices.json, para que as escolhas sobrevivam à sessão.

Quando a página precisar ser regenerada (novas linhas, texto ou tempo alterados, ou um novo rascunho de rédea solta que ele pediu):

Leia TYPE_SCRIPT_RESULT primeiro. Uma página feita a partir de dados alterados começa do zero.
Incorpore as escolhas anteriores dele nos novos dados:
- A escolha de casa dele vai em house, e em houseOptions se não estiver lá (substitua uma das outras duas).
- Os estilos e palavras-chave dele vão nas linhas correspondentes (style, key). Se ele escolheu um estilo que você não sugeriu, adicione-o também ao suggest daquela linha, com a justificativa dele se ele a forneceu.
- Os dados não têm campo para notas, então aja em cada nota no novo rascunho e diga como na justificativa daquela linha (por exemplo "Você pediu mais impacto: stomp em vez de fade").
Regenerere a página e recarregue-a na mesma porta.

6. Construa no Remotion

Siga a seção "Building it in Remotion" do kinetic-type: copie sua pasta remotion/ para o projeto como src/kinetic-type/ e instale os pacotes que ele nomeia na versão exata do Remotion do projeto. Use npm i -E para que o npm salve a versão exata (o npm i simples salva ^4.0.536, que pode posteriormente derivar para uma versão mais nova e incompatível). Em seguida, escreva uma composição para o vídeo, em seu próprio arquivo, como src/<Nome>.tsx:

Tamanho: 1920×1080 para 16:9, 1080×1920 para 9:16, 1080×1080 para 1:1. Use 30 fps. A duração é o final da última linha (t + dur).
Fundo: os componentes são transparentes, então coloque a cor do papel da página atrás deles (C.paper de src/kinetic-type/kit). Técnicas escuras trazem seu próprio fundo escuro.
Cada linha vai em uma <Sequence> no tempo estimado, usando KT_COMPONENTS com o estilo e palavra-chave aprovados:

import { AbsoluteFill, Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
import { C } from "./kinetic-type/kit";

const FPS = 30;
const HOUSE = "word-by-word-reveal"; // a casa aprovada
const LINES = [
  // t e dur de type-script/<slug>.json; key e style das escolhas aprovadas
  { t: 0, dur: 4.5, text: "Todo triângulo retângulo esconde um segredo.", key: "esconde", style: "house" },
  { t: 25, dur: 4.5, text: "Mas SOMENTE para ângulos retos.", key: "SOMENTE", style: "slice" },
];

export const TypeVideo: React.FC = () => (
  <AbsoluteFill style={{ background: C.paper }}>
    {LINES.map((l, i) => {
      const Comp = KT_COMPONENTS[l.style === "house" ? HOUSE : l.style];
      return (
        <Sequence key={i} from={Math.round(l.t * FPS)} durationInFrames={Math.round(l.dur * FPS)}>
          <Comp text={l.text} keyWord={l.key || undefined} />
        </Sequence>
      );
    })}
  </AbsoluteFill>
);

Se um estilo não estiver em KT_COMPONENTS, é uma técnica example. Adapte a cena nomeada no menu para aquela linha.
Registre-o em src/Root.tsx como uma <Composition> com o tamanho, fps e duração acima. Em um projeto novo, ele substitui a composição placeholder do modelo.

7. Visualize, depois renderize apenas quando solicitado

Verifique seu próprio trabalho primeiro: renderize um still do meio de algumas linhas (npx remotion still <id> out/check.png --frame=<n>) e veja-as.
Em seguida, deixe o usuário assistir: execute npx remotion studio --no-open em segundo plano (sem --no-open, ele também abre o navegador web do usuário). Abra o endereço que ele imprimir (normalmente http://localhost:3000) no navegador embutido.
Renderize apenas quando ele pedir: npx remotion render <id> out/<slug>.mp4.

Se ele quiser alterações depois de assistir, as pequenas vão diretamente para a composição. Para as maiores, volte para a etapa 4 com as escolhas dele incorporadas.

dricosnyman/kinetic-type-skills

O que é kinetic-type-skills?

Perguntar na sua IA favorita

Documentação