Marca RoleModel para HyperFrames
Já temos ferramentas HyperFrames profundas. Comece a partir desse inventário, não do zero. Esta habilidade é apenas a camada de marca sobre ele: de onde vêm nossos valores, qual usar e o que não fazemos.
O inventário
Dois conjuntos estão instalados e seus nomes se sobrepõem. Saiba qual você está invocando.
Oficial (HeyGen), em ~/.claude/skills:
| habilidade | use quando |
|---|---|
hyperframes | autoria de composição, timing, mídia, fluxo de produção |
hyperframes-core | contrato de composição e atributos de timing data-* |
hyperframes-animation | regras de movimento, blueprints de cena, GSAP e outros runtimes |
hyperframes-keyframes | punch-ins, movimentos de câmera, reenquadramentos, keyframes seguros para busca |
hyperframes-creative | paletas, planejamento de batida, narração, padrões de composição |
hyperframes-audio | mixagem de uma faixa já posicionada — fades, ducking, automação |
hyperframes-cli | init, lint, check, preview, render, transcribe, tts |
hyperframes-registry | instalação de blocos e componentes |
media-use | obtenção ou geração de música, SFX, imagens, voz |
Padrão (nossos), em ~/.claude/skills/synced:
| habilidade | use quando |
|---|---|
hyperframes | nossa própria habilidade de composição — lê design.md, house-style.md |
hyperframes-cli | nossas próprias notas de CLI |
hyperframes-direction-harness | antes de um index.html final quando a direção não está bloqueada |
optics-context | qualquer coisa que também precise ser uma superfície de produto |
gsap | especificidades do GSAP |
impeccable | nosso padrão de artesanato |
Colisão de nomes.
hyperframesehyperframes-cliexistem em ambos os conjuntos. Quando for importante qual você obtém, diga explicitamente.
Não reafirme nenhuma de suas regras aqui. O contrato de composição, erros de lint, colisão de faixas, timelines pausadas — tudo isso pertence àquelas habilidades e é mantido lá. Uma segunda cópia desvia no momento em que elas lançam uma versão e ninguém percebe. Se uma regra estiver faltando, corrija-a upstream, não neste arquivo.
A marca atinge HyperFrames através de design.md
A habilidade hyperframes padrão já lê design.md da raiz do projeto como "a fonte da verdade para cores, fontes e restrições da marca", e é instruída a usar seus valores exatos em vez de inventar qualquer um. Esse é o gancho. Use-o.
O repositório da marca gera um:
cp rolemodel-brand/dist/design.md <video-project>/design.md
Ele é gerado de rolemodel-brand/tokens/brand.json por scripts/build-tokens.mjs, portanto não pode divergir dos tokens que todas as outras superfícies RoleModel usam. Nunca edite manualmente — altere brand.json e reexecute.
Esse arquivo carrega cor, tipo, a escala de movimento completa, os quatro princípios de movimento e as restrições abaixo. Uma vez no projeto, a habilidade existente faz o resto.
Para propriedades customizadas CSS na própria composição:
<link rel="stylesheet" href="rolemodel-brand/css/academy-theme.css">
<body data-theme="academy">
Escolhendo um token de movimento
Os valores completos estão em design.md. A regra para escolher é curta:
Escolha pelo que o elemento está fazendo, não por sua aparência.
- Algo chegando →
--duration-base+--ease-enter - A mesma coisa sendo descartada →
--duration-fast+--ease-exit. Sair é sempre mais rápido que chegar. - Algo já na tela mudando de lugar ou tamanho →
--ease-move - Um deliberado olhe-para-mim →
--ease-emphasis, a única curva que pode ultrapassar - Um grupo → um
--staggerentre irmãos, nunca todos de uma vez
Nunca escreva uma duração bruta ou um cubic-bezier bruto em uma composição. A mesma regra que o Studio aplica à cor, pela mesma razão.
O que não fazemos
Estas são vinculativas. Várias são aplicadas por npm run check no toolkit, e todas estão em design.md onde a habilidade de composição as lerá.
- Sem gradientes radiais, em lugar nenhum. A marca é linear — direção, não manchas.
- Sem wipes de quadro. Não desenhe um quadro, borda ou caixa branca ou com linha clara que varra a tela como uma transição de cena. Claude busca isso sem ser solicitado; é um floreio de modelo pronto, não nosso, e direciona a atenção para nada. Transicione cortando, ou revelando o conteúdo que entra em
--ease-enter. Nada desenha uma caixa ao redor do quadro. - Sem regras decorativas, sublinhados ou divisores. Não sublinhe um título, coloque uma linha divisória entre seções ou desenhe uma borda ao redor de um card, estatística, citação ou terço inferior. Claude busca isso para sinalizar estrutura; eles sinalizam apenas que algo foi adicionado. A separação vem do espaço, peso e fundo. A única regra sancionada no sistema é a barra curta da marca abaixo de um título, e
rm-titlea desenha — nunca adicione manualmente uma segunda. - Uma borda é uma borda sólida, não um fade. Isso rege como uma borda necessária é desenhada; não é licença para adicionar uma. Se nada é ambíguo sem a borda, não há borda.
- Laranja é apenas um acento — nunca um fundo.
- Sem ornamentos. Se um elemento não carrega informação ou direciona atenção, remova-o.
Quando a direção não está bloqueada
Não comece a escrever index.html. Use hyperframes-direction-harness — ele é construído exatamente para isso e produz um quadro revisável antes de qualquer composição:
01_intake.md → 02_design_direction.md → 03_critical_frame_plan.md
→ direction_board.html (Director Workbench, revisado)
→ 04_render_plan.md (pronto apenas após revisão)
→ entregue para a habilidade hyperframes
Ignore-o apenas para pequenas edições em uma composição existente — um typo, um ajuste de timing, uma cor, uma correção de lint.
Qual ferramenta resolve qual problema
HyperFrames compõe; não captura. Se o vídeo deve mostrar a UI real do produto, é a ferramenta errada.
| entrada | ferramenta | permanece atual? | |
|---|---|---|---|
| Gravar | sua tela | openscreen | não — regrave manualmente |
| Compor | um roteiro ou briefing | HyperFrames | reexecute o briefing |
| A partir de um teste | um trace do Playwright | playwright-recast | sim — reexecute o teste |
Use HyperFrames para os cards de título, terços inferiores e motion graphics que ficam sobre uma captura.
Narração, timing, entrega
Não sintetize narração dentro da composição.
rm-voice <project> --script opener --voice af_nova
Um clipe por linha, cada um medido, SRT escrito a partir de durações já conhecidas — então os timings são exatos por construção e uma edição de texto apenas ressintetiza o que mudou. Kokoro roda localmente: sem chave de API, e nada sobre um produto de cliente não lançado sai da máquina.
Um render e uma faixa de narração estão em relógios diferentes. playwright-recast comprime o tempo ocioso; a narração dura o tempo que as palavras levam. Queime uma faixa de legenda de 22 segundos em um render de 3,8 segundos e o cue 1 segura por todo o clipe enquanto o resto é silenciosamente descartado — parece que funcionou.
rm-mux --video demo.mp4 --audio narration.wav --srt narration.srt -o final.mp4
rm-share final.mp4 --project "Ridgeline Railing"
rm-share retorna um link que um cliente abre sem conta e deixa comentários com timestamp. rm-share --check diz se está configurado.
Antes de um projeto de cliente
export HYPERFRAMES_NO_TELEMETRY=1
A telemetria está ativada por padrão. Nomes de projeto e conteúdo de vídeo nunca são coletados, mas hyperframes auth login vincula seu e-mail da conta HeyGen ao seu uso e une atividade anônima anterior a ele. Coloque o opt-out no scaffolding.
Fixar a versão. HyperFrames é Apache-2.0 — sem contagem de assentos, sem limite de tamanho de empresa, razão pela qual é nosso padrão — mas é pré-1.0 e lança quase diariamente sem garantia de compatibilidade declarada. Um projeto de cliente que renderiza hoje deve renderizar da mesma forma em seis meses.
Créditos
O enquadramento de três níveis e o pipeline corte → storyboard → motion-graphics vieram de hyperframes-helper por Jay na RoboNuggets, usado sob CC BY 4.0. Mantenha a atribuição se você compartilhar isso novamente — essa é a licença.