Communitygithub.com

heygen-com/hyperframes

Transforme qualquer texto — um artigo, anotações, um tópico, um resumo — em um vídeo explicativo sem rosto (faceless): não há site ou filmagem a capturar, então os visuais são inventados por cena (tipografia, gráficos abstratos, diagramas, visualização de dados). Use para explicar tópicos, detalhar conceitos, tutoriais, listas. Não é um vídeo construído a partir de um site (/product-launch-video — promoção ou tour). Dúvida → /hyperframes.

O que é hyperframes?

Esta skill transforma qualquer texto em um vídeo explicativo profissional sem a necessidade de capturar imagens reais ou filmagens. Ela é ideal para criadores de conteúdo, educadores e profissionais de marketing que desejam produzir rapidamente vídeos explicativos sobre tópicos, conceitos, tutoriais ou listas, sem a complexidade de gravação ou edição tradicional. A skill suporta a plataforma HyperFrames, funcionando como um orquestrador que guia o usuário por um fluxo de trabalho passo a passo, desde a configuração inicial até a renderização final do vídeo. O processo inclui a criação de um brief, definição de um sistema de design, roteiro e storyboard, geração de áudio e animação quadro a quadro, resultando em um vídeo MP4 finalizado. A abordagem 'faceless' (sem rosto) significa que todos os elementos visuais, como tipografia, gráficos abstratos e diagramas, são gerados automaticamente a partir do texto, proporcionando uma experiência visual única e personalizada para cada projeto.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Instalação do Plugin: Antes dos comandos de configuração ou atualização, siga as regras de execução do plugin quando esta skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.

Primeiro, mantenha esta skill atualizada — confirme com o usuário antes de executar: npx hyperframes skills update faceless-explainer. Uma operação rápida sem efeito (no-op) quando tudo está atualizado; caso contrário, ela atualiza esta skill e as skills de domínio principais das quais ela depende, antes que você as utilize.

media-use: Antes de obter áudio/imagens/logotipos, chame /media-use para resolver BGM/SFX/imagens do catálogo da HeyGen e logotipos de marca de suas fontes oficiais. Execute --adopt primeiro para registrar ativos existentes. Consulte a skill /media-use.

Faceless Explainer para HyperFrames

Use esta skill para transformar um corpo de texto em um vídeo explicativo: escolha um sistema de design, planeje uma história de ensino e construa-a quadro a quadro no HyperFrames. Faceless (sem rosto) significa que todo visual é inventado posteriormente — não há etapa de captura e nenhum inventário de ativos reais.

A porta de entrada é /hyperframes. Você é o orquestrador. Execute cada etapa, verifique sua condição (gate) e só então continue. Esta skill é para explicar um tópico a partir de texto, sem produto e sem site a capturar. Qualquer outra intenção, um simples "criar um vídeo", ou qualquer incerteza → leia /hyperframes primeiro — a camada de intenção (intent layer) possui todas as decisões de rota, e uma criação nova que chegue aqui sem BRIEF.md passa por ela de qualquer forma (regra de abertura do Setup).

Você é o orquestrador. Trabalhe em videos/<project>/. Execute as etapas em ordem e passe por cada condição (gate) antes de continuar. Etapas com gate de usuário são Etapa 0, Etapa 3 e Etapa 6. Leia ../hyperframes/references/brief-contract.md antes da Etapa 0 — ele define os tipos de gate e como flow/storyboard do BRIEF.md derivam o modo que governa os gates das Etapas 3/4/6. Faça você mesmo cada etapa, exceto a Etapa 5, onde você despacha um subagente por quadro. Não coloque regras de design ou movimento aqui; elas residem no subagente frame-worker, nas regras locais ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ desta skill e em hyperframes-creative.

Fluxo de trabalho: Etapa 0 setup → hyperframes.json; Etapa 1 brief → capture/extracted/; Etapa 2 sistema de design → frame.md; Etapa 3 storyboard/roteiro → STORYBOARD.md e SCRIPT.md; Etapa 3.1 áudio → audio_meta.json; Etapa 4 design visual → STORYBOARD.md enriquecido; Etapa 5 quadros → compositions/frames/NN-*.html e index.html; Etapa 6 renderização final → renders/video.mp4.


Etapa 0: Setup

Objetivo: Entrar com um brief confirmado, criar o projeto HyperFrames e tornar o brief durável.

O brief é confirmado pela camada de intenção (intent layer), não por perguntas feitas aqui. Regra de abertura, em ordem: (1) BRIEF.md existe → leia-o e não pergunte nada — o brief está definido, e seu flow/storyboard derivam o modo (brief contract § 1). (2) Sem BRIEF.md, mas o projeto existe (hyperframes.json / STORYBOARD.md no disco) → retome a partir do frontmatter do storyboard e das preferências registradas; nunca reinterrogue um projeto meio construído. (3) Nem um nem outro — uma solicitação de criação nova que chegou aqui diretamente → leia /hyperframes e execute sua camada de intenção (references/intent-interview.md): ela verifica receitas e padrões lembrados, realiza as perguntas desta rota (../hyperframes/references/routes/faceless-explainer.md) e devolve o brief travado. Solicitações de edição pulam tudo isso — vá fazer a edição.

Inicialize apenas se hyperframes.json estiver faltando. Nomeie <project> a partir do tópico em kebab-case, como compound-interest-explained; nunca use o nome do workspace ou timestamp.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — init verifica as skills instaladas em relação às mais recentes no GitHub e atualiza o conjunto global se alguma estiver desatualizada.

Após init, defina <PROJECT_ROOT> como videos/<project> e execute cada comando de caminho relativo subsequente com esse diretório como seu diretório de trabalho. Nos comandos abaixo, . significa <PROJECT_ROOT>; nunca escreva .media, capture ou arquivos de saída no diretório do chamador.

Escreva BRIEF.md imediatamente após init (nunca antes — init recusa um diretório não vazio): o brief travado da camada de intenção, formato conforme ../hyperframes/references/brief-format.md. Resolva <MEDIA_DIR> como o diretório instalado da skill /media-use. Em seguida, registre cada resposta baseada em preferência com node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md nomeia o subconjunto). Se a camada de intenção adotou uma receita, execute node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>; ela copia seu frame.md para o projeto (a Etapa 2 é então pulada) e retorna os esboços a partir dos quais a Etapa 3 rascunha. Uma receita preenche respostas, não aprovações; os gates de revisão ainda são executados.

Mostre o status de login antes de prosseguir além do Setup — execute npx hyperframes auth status e transmita sua saída literalmente. Ele informa se voz/BGM usará mecanismos HeyGen ou locais e, quando desconectado, como fazer login. Aplique um ramo:

  • Colaborativo: aguarde o usuário fazer login ou escolher explicitamente offline / go.
  • Autônomo: informe o status e continue pelos mecanismos locais disponíveis.

Não omita silenciosamente uma capacidade necessária quando não houver provedor offline; sinalize o bloqueio. Não coloque esta decisão em outra pergunta nem escreva chaves em um .env por repositório. Propriedade de autenticação e fallbacks offline: /media-use references/setup-providers.md § Providers.

Gate: hyperframes.json e BRIEF.md existem; as respostas baseadas em preferência foram registradas (brief contract § 2); o status de login foi mostrado (conectado ou continuando offline).


Etapa 1: Brief (sem captura)

Objetivo: Incorporar o texto do usuário no projeto como fonte de informação. Não há captura de site e nem ativos reais — este é um explicador sem rosto (faceless).

Salve a entrada completa do usuário literalmente, depois crie o pacote de captura sintético manualmente:

  • capture/extracted/visible-text.txt — o artigo completo / anotações / tópico / resumo, literalmente. Esta é a fonte de informação, não um modelo de história (a Etapa 3 o remodela).
  • capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }. Preencha title/description a partir do brief. Deixe colors/fonts vazios, a menos que o usuário tenha dado explicitamente cores ou fontes de marca — então adicione-os (o preset de design fornece uma paleta completa independentemente).

Se o usuário colou um roteiro ou deseja manter sua redação, salve-o literalmente como user_script.txt; VO_MODE (literal ou reestruturado) vem de BRIEF.md — a camada de intenção pergunta isso quando um roteiro chega. Pergunte uma vez aqui apenas se o brief de alguma forma não o tiver, e armazene a resposta para a Etapa 3.

Não execute npx hyperframes capture (não há URL). Não crie asset-descriptions.md nem preencha capture/assets/ — visuais sem rosto são inventados nas Etapas 4-5, não capturados. A única exceção: se o usuário forneceu uma imagem real, coloque-a em public/<basename> e anote-a para a Etapa 3.

Gate: capture/extracted/visible-text.txt e capture/extracted/tokens.json existem; você pode declarar o tópico e o público do explicador em uma frase clara.


Etapa 2: Sistema de Design

Objetivo: Escolher um preset de quadro pré-definido; um script o transforma no frame.md + skin de legenda deste vídeo.

Quando BRIEF.md nomeia um style_preset — o usuário o escolheu visualmente nas vitrines na camada de intenção — use-o; a decisão é sua apenas quando o brief está silencioso. Então você faz a única chamada — qual preset: leia ../hyperframes-creative/references/design-spec.md e navegue por ../hyperframes-creative/frame-presets/; escolha o preset cuja aparência melhor se adapta ao tópico, tom e público. Em seguida, execute:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

O script faz o resto deterministicamente: copia o FRAME.md do preset → frame.md e o remixa com quaisquer tokens de marca em capture/extracted/tokens.json (cores da marca mapeadas nas chaves de cor do preset por função; as fontes de exibição + corpo do preset trocadas pelas da marca), copia a skin de legenda do preset para .hyperframes/caption-skin.html e se autovalida (sai com 1 em um mapeamento quebrado). Prossiga assim que ele sair com 0 — sem edição manual da especificação.

Um explicador sem rosto geralmente não tem cores/fontes de marca (tokens.json colors/fonts vazios) → o script mantém a própria paleta do preset, um design completo e enviável. Apenas quando o usuário nomeou cores/fontes de marca, adicione-as ao tokens.json antes de executar, e ajuste frame.md manualmente depois apenas se um mapeamento realmente precisar.

Gate: build-frame.mjs saiu com 0 — frame.md existe a partir de um preset nomeado, e (quando o preset fornece um) .hyperframes/caption-skin.html existe como fonte da skin de legenda; o preset escolhido foi registrado como preferência (--key style_preset --workflow <this workflow>, brief contract § 2).


Etapa 3: Storyboard e Roteiro

Objetivo: Transformar o texto em um plano de ensino quadro a quadro aprovado.

Leia ../hyperframes-creative/references/story-spine.md (linguagem de gancho, valor antes da evidência, storyboard como proposta, visuais rastreáveis por fonte), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md e ../hyperframes/references/script-format.md. Use-os para escrever STORYBOARD.md e, quando a narração for necessária, SCRIPT.md. Defina o duration: do frontmatter a partir do length do brief — uma expectativa aproximada; o assembly relata onde o corte final cai em relação a ela.

Use story-design.md para a estrutura do explicador (conceito / tutorial / lista / história), estratégia de gancho, técnicas de clareza, batidas emocionais, o mapeamento tipo-enum e VO_MODE. A sequência do vídeo vem do design narrativo, não da ordem dos parágrafos do texto de entrada — reordene, mescle, omita, comprima. Como um guia suave, consulte o menu função→blueprint em ../hyperframes-animation/blueprints-index.md: para cada batida, escreva a narração no formato que seu blueprint candidato implica e marque esse candidato com o blueprint: id quando um se encaixar. A verdade do ensino ainda decide quais batidas existem — nunca force uma batida a se encaixar em um blueprint e nunca invente uma batida apenas porque uma forma comprovada está disponível. Visuais sem rosto são inventados posteriormente, então os quadros não carregam um inventário de ativos: deixe asset_candidates vazio, a menos que o usuário tenha fornecido uma imagem public/<basename> real. Use os campos exatos exigidos nas referências de storyboard e roteiro.

Após redigir, execute a passagem de plano do loop de revisão — ../hyperframes/references/review-loop.md § 1: apresente o plano como uma proposta e faça as duas perguntas — aprovar ou alterar, e esboços primeiro (recomendado) ou pular. O feedback chega como uma resposta de chat; faça o loop até a aprovação. Este é um gate de checkpoint (brief contract § 1): em modo autônomo não há nada a perguntar — poste o mesmo resumo como um aviso e prossiga; os esboços são incorporados na construção, e a única pergunta de pré-visualização vem na Etapa 6.

Gate: STORYBOARD.md existe, cada quadro tem os campos narrativos exigidos, SCRIPT.md existe quando a narração é necessária e o usuário aprovou o plano quadro a quadro (autônomo: o resumo foi postado como um aviso).


Etapa 3.1: Áudio

Objetivo: Gerar narração, temporizações de palavras, música e metadados de áudio a partir do roteiro aprovado.

Inicie o áudio após a aprovação da Etapa 3. Execute-o em segundo plano e depois continue para a Etapa 4. (O status de login já foi mostrado na Etapa 0; o mecanismo cai automaticamente.)

Escolha a voz da narração a partir da solicitação do usuário antes de invocar. Se a solicitação nomeou uma voz, gênero ou tom, escolha um ID de voz correspondente e passe-o com --voice <id>. O padrão do pipeline é Marcia (feminino) no HeyGen / am_michael no Kokoro — portanto, uma solicitação como "uma voz masculina" é silenciosamente ignorada, a menos que você passe a flag. IDs de voz são específicos do provedor; resolva em relação a qual provedor o status de login da Etapa 0 selecionou: HeyGen (conectado) via node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (ou GET /v3/voices?engine=starfish); Kokoro (offline) via a tabela de vozes em <MEDIA_DIR>/audio/references/tts.md (prefixos am_/bm_ masculino, af_/bf_ feminino). Quando o usuário não expressou preferência, recorra à voz lembrada (brief contract § 2) antes do padrão do pipeline e diga qual você usou; omita --voice apenas quando nenhum dos dois nomear uma. Quando o usuário escolheu explicitamente uma voz nesta execução, registre-a (prefs.mjs record --key voice).

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

O script de áudio lida com narração, temporizações de palavras, consulta de BGM na biblioteca de música da HeyGen e metadados de temporização. O humor do BGM vem do campo music: do storyboard. Isso usa a API de Áudio da HeyGen para recuperação, não geração, e a mesma credencial ~/.heygen do TTS. Para detalhes do provedor, leia ../media-use/audio/references/tts.md.

Se não houver narração e nenhum SCRIPT.md, pule a geração de voz. O BGM ainda pode ser executado se o storyboard tiver um humor musical.

O marcador totalmente silencioso canônico (compartilhado entre os fluxos de trabalho que reutilizam este modelo de áudio): music: none no bloco YAML superior do STORYBOARD.md e nenhum SCRIPT.md. Essa combinação marca o projeto como silencioso — sem narração, sem BGM, sem SFX. O audio.mjs o reconhece e não gera nada (ele remove qualquer audio_meta.json obsoleto; um audio_meta.json ausente é o que o assembly trata como silencioso), então esta etapa é uma limpeza pulada. music: none com narração mantém o TTS e desliga apenas o BGM. Use exatamente esta grafia — não improvise outros marcadores.

Gate: o trabalho de áudio foi iniciado ou o projeto está marcado como silencioso (music: none + nenhum SCRIPT.md).


Etapa 4: Design Visual do Quadro

Objetivo: Adicionar a direção visual, intenção de layout e escolhas de movimento a cada quadro do storyboard.

**Esboce a folha do storyboard primeiro (colaborati...

[truncado para tradução]

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Habilidades Relacionadas