Talking Head Recut

Primeiro, mantenha esta skill atualizada — execute silenciosamente, não pergunte: npx hyperframes skills update talking-head-recut. Uma operação rápida e sem efeitos quando tudo está atualizado; caso contrário, ela atualiza esta skill e as skills de domínio principais das quais depende antes que você confie nelas.

O que Talking Head Recut faz?

Talking Head Recut pega um vídeo local que é reproduzido por completo e sobrepõe a ele uma sequência de cartões gráficos temporizados e estilizados — títulos, barras inferiores, destaques de dados, citações, painéis laterais, picture-in-picture — sincronizados com o que está sendo dito. O agente projeta os cartões (temporização + conteúdo) e escreve o HTML de cada cartão diretamente na conversa, depois monta um único HTML de composição e o renderiza em MP4 via hyperframes. Não há uma lista fixa de arquétipos nem uma estrutura de cartão prescrita — as sobreposições emergem do que a transcrição realmente diz.

A porta de entrada é /hyperframes. Esta skill empacota um clipe de cabeça falante existente com cartões gráficos projetados (títulos, barras inferiores, destaques de dados, citações, painéis laterais, PiP) — não legendas simples (as palavras faladas como texto). O clipe é reproduzido intacto. Qualquer outra intenção — legendas simples, um gráfico independente, um vídeo do zero — ou qualquer incerteza → leia /hyperframes primeiro: a camada de intenção é a dona de toda decisão de rota.

Irmão de empacotamento gráfico de embedded-captions. Legendas adicionam as palavras faladas como legenda legível; esta skill adiciona gráficos projetados sobre o vídeo em reprodução. Legendas simples → embedded-captions. Criar um vídeo do zero → os fluxos de criação (product-launch-video / faceless-explainer / …).

Roteada através de /hyperframes, a camada de intenção confirma apenas a entrada (qual clipe) e anuncia as perguntas da estratégia de renderização como perguntas adiadas — aspecto, layout, grupo de estilo e contagem de cartões permanecem na Etapa 7, onde a filmagem analisada e a transcrição fundamentam as recomendações; as perguntas de formato de execução da camada não se aplicam. Um BRIEF.md, quando presente, carrega a entrada confirmada e quaisquer notas do usuário — leia-o primeiro.

Arquivos intermediários inspecionáveis no diretório de trabalho:

• metadata.json — duração / largura / altura / fps
• audio.mp3 — áudio extraído
• transcript.json — um vetor de palavras plano [{ text, start, end }, …] (Whisper; sem segments, sem wrapper words)
• storyboard.json — esboço leve do cartão (o plano do agente)
• public/cards/card-XX.html — um fragmento HTML por cartão
• public/index.html — composição final montada
• output.mp4 — vídeo renderizado

Resolução CLI

# hyperframes — transcrição (Whisper local) + renderização do HTML montado em MP4
npx hyperframes --help

Esta skill é executada inteiramente no CLI hyperframes mais ffmpeg / ffprobe do sistema. A transcrição é feita localmente com Whisper via hyperframes transcribe — nenhum serviço de terceiros, chave de API ou proxy com limite de taxa.

Fluxo de Trabalho

1. Verificar Ambiente

npx hyperframes doctor          # ffmpeg, navegador headless, dependências de renderização
# confirmar assets empacotados:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"

Requerido:

• ffmpeg / ffprobe (sistema)
• <SKILL_DIR>/assets/fonts/*.woff2, <SKILL_DIR>/assets/vendor/gsap.min.js (empacotados dentro desta skill, preparados no diretório de trabalho na Etapa 9)

A transcrição não precisa de chave — hyperframes transcribe executa Whisper localmente (Etapa 4).

Fortemente recomendado no macOS para hyperframes render:

export PRODUCER_BROWSER_GPU_MODE=hardware

2. Criar um Diretório de Trabalho

Todos os artefatos ficam em videos/<nome-do-projeto>/ — a mesma convenção dos outros fluxos de trabalho de vídeo (product-launch-video / faceless-explainer / pr-to-video). Mantenha o cwd na raiz do workspace; tudo abaixo é escrito neste único subdiretório.

VIDEO_PATH="/caminho/absoluto/input.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^.]*$//')"
mkdir -p "$WORK_DIR"

3. Extrair Áudio e Metadados

# metadados — duração / largura / altura / fps
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate \
  -show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# áudio
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"

Saídas: metadata.json (leia width/height/duration; fps = a fração r_frame_rate calculada, ex. 30000/1001 → 29.97) + audio.mp3.

4. Transcrever

npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en

Whisper local — sem chave de API, sem proxy, sem limite de taxa. Escreve um transcript.json no nível da palavra no diretório de trabalho (texto da palavra + timestamps start / end). Leia-o para obter as temporizações de palavras/frases que orientam a temporização dos cartões na Etapa 6; agrupe as palavras em frases você mesmo com base em pontuação/pausas se precisar de blocos no nível do segmento.

Limitar à duração da mídia. O Whisper pode retornar o end da última palavra um pouco além do comprimento real do clipe — limite cada endSec do cartão e composition.durationSeconds à duração do metadata.json, ou a renderização mostrará uma cauda preta após o vídeo.

5. Corrigir Transcrição

transcript.json é um vetor plano de objetos de palavra — [{ "text": "...", "start": s, "end": s }, …] (sem vetor segments, sem wrapper words; a chave por palavra é text). Leia-o e corrija erros óbvios do ASR:

• Homófonos, nomes de produtos, termos técnicos, pontuação
• Edite o text de uma palavra no lugar; preserve seus timestamps start / end
• Não há um vetor segments pré-agrupado — agrupe as palavras em frases você mesmo (divida em pontuação terminal / pausas) quando precisar de blocos no nível do segmento para a temporização do cartão

6. Criar um Rascunho de Storyboard Leve (no chat)

Nenhum CLI envolvido. Leia transcript.json + metadata.json e projete os cartões diretamente. storyboard.json é um artefato de planejamento interno do agente — nenhum comando CLI o consome; ele existe para que você possa pensar claramente sobre temporização e conteúdo antes de escrever o HTML de cada cartão. Mantenha a forma consistente com o exemplo abaixo para que o mesmo esboço possa orientar a composição que você criará na Etapa 9:

{
  "schemaVersion": 3,
  "composition": {
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "durationSeconds": 121.2,
    "layout": "portrait",
    "themeId": "noir",
    "seed": 42
  },
  "videoTrack": {
    "sourcePath": "input-video.mp4",
    "startSec": 0,
    "endSec": 121.2,
    "bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
  },
  "subtitles": { "enabled": false },
  "cards": [
    {
      "id": "card-01",
      "intent": "Gancho com a pergunta ansiosa do palestrante à meia-noite",
      "startSec": 0.5,
      "endSec": 13.0,
      "accentIndex": 0,
      "zone": "fullscreen",
      "contentHints": {
        "kicker": "UMA PERGUNTA HONESTA",
        "title": "A pergunta de autoavaliação às 23h",
        "detail": "Mensagem de voz de 60 segundos do cliente: 'Se o RMB se valorizar, isso significa que minha apólice em USD é uma perda terrível?'"
      }
    }
  ]
}

Campos Obrigatórios do Cartão:

campo	tipo	finalidade
id	string	id estável usado no HTML do cartão e nos seletores GSAP
intent	string	descrição em linguagem natural; alimenta a síntese do cartão
startSec / endSec	número	tempos em segundos (endSec > startSec)
accentIndex	0 | 1 | 2 | 3 | 4	qual das 5 cores de destaque do tema este cartão puxa
zone	enum (veja abaixo)	onde no canvas o cartão vive
contentHints	objeto	saco de forma livre; o agente coloca kicker/title/detail/quote aqui
archetype (opcional)	string	rótulo de forma livre que você pode anexar para lembrar o padrão de um cartão; ausente = forma livre, que é o padrão
transition (opcional)	enum: cut | fade | slide | wipe	transição declarativa de cartão para cartão

Cinco valores de zone:

zona	limites resolvidos	quando usar
fullscreen	cobre o canvas inteiro	momentos heróicos, grandes números, mantras
whiteboard-area	margem interna de 40px (ou 45% da altura do retrato)	conteúdo denso / anotado
lower-third	faixa inferior de 30%	anotação sobre vídeo visível
side-panel	42% à direita (paisagem) ou 40% inferior (retrato)	dados de um lado, vídeo do outro
video-overlay	canvas inteiro, espera cartão maioritariamente transparente	sobreposições de anotação em vídeo em tela cheia

Quando você montar a composição na Etapa 9, resolva a zone de cada cartão em limites de pixels no wrapper do cartão host seguindo a tabela acima. Os limites do vídeo são definidos uma vez no nível da composição (videoTrack.bounds); para fazer o vídeo parecer "se mover entre os cartões", crie tweens GSAP contra #video-wrap no <script> da composição (veja Etapa 9).

Nenhum papel de cartão prescrito, nenhum arco narrativo prescrito. Os cartões emergem do que o vídeo realmente diz — podem ser todas citações ou todos dados, podem começar com um número ou com uma história. Deixe a transcrição conduzir o ritmo.

Quantos cartões? — inferir automaticamente da duração + densidade. Nenhum limite superior fixo. Escolha um ritmo base da duração do vídeo, depois ajuste pela densidade de informações. Apenas o mínimo é fixo: mínimo de 5 cartões para que mesmo vídeos curtos tenham ritmo.

Etapa 1 — ritmo base por duração (o seg/cartão natural para densidade média):

duração do vídeo	ritmo base (seg por cartão)	justificativa
< 60s (reel curto)	6–8s	espectadores esperam cortes rápidos em formato curto
60s – 3 min	8–12s	ritmo social normal
3 – 10 min	12–20s	dar espaço para respirar; cada cartão carrega mais
10 – 30 min	20–35s	ritmo de palestra / entrevista de longa duração
> 30 min	30–60s	sensação episódica, quase de capítulo

Etapa 2 — multiplicador de densidade (multiplica o ritmo base):

sinal na transcrição	multiplicador	efeito
Alta densidade — muitos números, afirmações distintas, ritmo staccato, enumeração em lista, a cada 1–2 frases é uma nova ideia	× 0.7	corta mais rápido, mais cartões
Densidade média — fluxo misto com dados e narrativa	× 1.0	ritmo base
Baixa densidade — uma história estendida, reformulação repetida, ritmo reflexivo lento, um único argumento se desdobrando	× 1.5	corta mais devagar, menos cartões

Etapa 3 — calcular:

segPorCartao = ritmoBase × multiplicadorDensidade
qtdCartoes  = max(5, round(duracaoVideoSeg / segPorCartao))

Exemplos (observe — nenhum limite superior; vídeos longos naturalmente produzem mais cartões):

• Reel de 30s, uma única piada (baixa densidade) → 7 × 1.5 = 10.5s/cartão → round(30/10.5)=3 → mínimo de 5 cartões
• Monólogo reflexivo de 60s (baixa densidade) → 10 × 1.5 = 15s/cartão → 4 → mínimo de 5 cartões
• Cabeça falante de 121s com dados ricos (alta densidade) → 10 × 0.7 = 7s/cartão → 17 cartões
• Entrevista de 5 min, densidade mista → 16 × 1.0 = 16s/cartão → 19 cartões
• Mergulho profundo de 10 min, alta densidade → 16 × 0.7 = 11s/cartão → 55 cartões
• Palestra de 30 min, densidade média → 28 × 1.0 = 28s/cartão → 64 cartões
• Podcast de 1h, baixa densidade → 45 × 1.5 = 67.5s/cartão → 53 cartões

Quando um cartão dura mais de ~15s, planeje um cartão mais rico (bloco de dados, revelação em várias etapas, vários subpontos se desdobrando com animações escalonadas) — uma frase estática fica chata após 8s. Para peças longas onde muitos cartões excedem 30s, considere dividir a linha do tempo em sub-composições (um .html por capítulo, montado com data-composition-src) para que a linha do tempo GSAP por arquivo permaneça gerenciável — veja o aviso de lint timeline_track_too_dense do HyperFrames.

content pode ser uma string simples ("Título: 5.69% anualizado\nNotas: ...") ou qualquer formato JSON que capture os dados. O agente decide o formato por cartão.

Outro opcional. Esta skill não fornece um outro final de marca fixo. Se o usuário quiser um cartão de encerramento, projete um você mesmo (marca d'água + slogan de uma linha, ~1.5-2s, fade in -> pausa curta -> fade out), anexe-o a cards[] e estenda composition.durationSeconds até seu endSec. Caso contrário, termine no último cartão de conteúdo.

7. Decidir Estratégia de Renderização

Confirmar Direção Visual com o Usuário (FAÇA ISSO PRIMEIRO)

Antes de começar a projetar cartões ou decidir limites, pergunte ao usuário para escolher a proporção de saída, o layout, ...

... [truncado para tradução]