技能 hyperframes
🎬

hyperframes

低风险 ⚙️ 外部命令🌐 网络访问📁 文件系统访问🔑 环境变量

Criar composições e animações de vídeo baseadas em HTML

Criar animações de vídeo requer aprender softwares especializados de produção de vídeo e pipelines de renderização complexos. O HyperFrames permite escrever HTML para definir composições de vídeo, usar GSAP para animações e renderizar vídeos profissionais com legendas, transições e áudio.

支持: Claude Codex Code(CC)
🥈 80 白银
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“hyperframes”。 Criar um simples cartão de título com o texto "Bem-vindo"

预期结果:

Uma composição HTML com posicionamento estático e animação de entrada GSAP que aparece com fade-in o texto do título.

正在使用“hyperframes”。 Adicionar legendas sincronizadas com meu arquivo de áudio

预期结果:

Uma composição com elementos de legenda no nível de palavra e dados de temporização derivados da transcrição.

正在使用“hyperframes”。 Criar uma dissolução cruzada entre duas cenas

预期结果:

Uma composição de duas cenas com transições de opacidade controladas por GSAP para continuidade visual suave.

安全审计

低风险
v1 • 4/26/2026

All 791 static findings are false positives. The skill is a legitimate HTML-based video composition framework with documented CLI commands, file operations for composition authoring, and optional API integrations for transcription/TTS services. The detected patterns are benign: hex color codes in palette files (misidentified as Ruby commands), relative file paths (../) in documentation, and CLI tool invocations that are expected behavior for a video production tool.

39
已扫描文件
3,777
分析行数
6
发现项
1
审计总数
低风险问题 (2)
SKILL.md:279-281SKILL.md:292-293SKILL.md:324-327
CLI Command Usage (Expected Behavior)
The skill instructs users to run CLI commands like `npx hyperframes lint`, `npx hyperframes inspect`, and `node scripts/animation-map.mjs` for video composition validation. These are documented authoring tools, not command injection vulnerabilities.
references/transcript-guide.md:120references/transcript-guide.md:133
Environment Variable Documentation for External APIs
The transcript-guide.md shows curl examples with `$OPENAI_API_KEY` and `$GROQ_API_KEY` placeholders. These are documentation examples showing users how to authenticate with external transcription APIs - not actual credential exfiltration.

风险因素

⚙️ 外部命令 (4)
SKILL.md:279 SKILL.md:280 SKILL.md:289 SKILL.md:325-327
🌐 网络访问 (1)
SKILL.md:42
📁 文件系统访问 (1)
SKILL.md:269
🔑 环境变量 (2)
references/transcript-guide.md:120 references/transcript-guide.md:133

检测到的模式

Hex Color Codes (False Positive)Relative Path References in Documentation (False Positive)Word Count Commands in Validation Instructions (False Positive)
审计者: claude

质量评分

73
架构
100
可维护性
87
内容
50
社区
86
安全
91
规范符合性

你能构建什么

Vídeos de marketing e redes sociais

Criar cartões de título animados, vitrines de produtos e conteúdo promocional com cores consistentes com a marca e transições profissionais.

Conteúdo educacional e explicativo

Construir vídeos explicativos animados com legendas, narração e destaques visuais que chamam a atenção para pontos-chave.

Apresentações de eventos e conferências

Gerar slides animados e destaques com transições suaves, efeitos tipográficos e elementos reativos ao áudio.

试试这些提示

Solicitação básica de composição 
Crie uma composição HyperFrames com um cartão de título que diga [TÍTULO] em um fundo escuro com o texto aparecendo com fade-in. Use a paleta clean-corporate.
Solicitação de vídeo com legendas 
Tenho um arquivo de áudio em [CAMINHO]. Crie uma composição HyperFrames com legendas no nível de palavra sincronizadas com o áudio. Use um fundo escuro com texto branco.
Solicitação de sequência de transição 
Crie uma sequência de transição de 3 cenas usando transições de dissolução cruzada, desfoque e page burn entre as cenas. Aplique a paleta de cores bold-energetic.
Solicitação de produção completa de vídeo 
Crie um vídeo HyperFrames completo com: cartão de título, 3 cenas de conteúdo com legendas, animações de fundo reativas ao áudio e transições suaves. O estilo deve ser [ESTILO].

最佳实践

  • Defina uma identidade visual (DESIGN.md ou visual-style.md) antes de escrever qualquer HTML de composição
  • Construa o layout estático primeiro, posicionando elementos onde eles aparecem no momento mais visível
  • Execute `hyperframes validate` para verificar contraste WCAG e `hyperframes inspect` para verificar o layout antes de renderizar
  • Use GSAP.from() para entradas e GSAP.to() para saídas, animando DE/PARA a verdade fundamental do CSS

避免

  • Não escreva composições com cores genéricas ou padrão - sempre aplique uma identidade visual definida
  • Não posicione contêineres de conteúdo de cena com posicionamento absoluto e dimensões codificadas
  • Não pule a validação de layout e contraste antes da renderização final

常见问题

O que é HyperFrames?
HyperFrames é uma estrutura de composição de vídeo baseada em HTML. Você escreve HTML com atributos data-* para temporização e CSS para estilização. O GSAP manipula a animação. A estrutura gerencia visibilidade de clipes, reprodução de mídia e sincronização de timeline.
Preciso instalar algo para usar esta skill?
Sim. Você precisa do CLI hyperframes instalado via npm e do motor de renderização (Puppeteer e FFmpeg) para saída de vídeo. Execute `npx hyperframes init` para configurar um projeto.
Posso adicionar legendas de um arquivo de áudio?
Sim. Você pode usar APIs externas de transcrição (OpenAI Whisper, Groq) ou transcrição local. A skill converte timestamps em elementos de legenda no nível de palavra sincronizados com seu áudio.
Como adiciono narração de voz?
Use o comando TTS integrado com modelos Kokoro-ONNX. Execute `npx hyperframes tts` com seu texto de roteiro. A skill suporta seleção de voz e gera arquivos de áudio.
Quais capacidades de animação estão disponíveis?
O GSAP potencializa todas as animações incluindo entradas, saídas, efeitos de texto e comportamentos reativos ao áudio. Você pode criar animações sincronizadas com batidas, efeitos de brilho e coreografias complexas usando a ferramenta de mapa de animação.
Como valido minha composição antes de renderizar?
Execute `npx hyperframes lint` para verificações de sintaxe, `npx hyperframes validate` para contraste WCAG e `npx hyperframes inspect` para verificação de layout. Corrija todos os avisos antes de renderizar.

开发者详情

作者

heygen-com

许可证

MIT

仓库

https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes/

引用

main

文件结构

📁 palettes/

📄 bold-energetic.md

📄 clean-corporate.md

📄 dark-premium.md

📄 jewel-rich.md

📄 monochrome.md

📄 nature-earth.md

📄 neon-electric.md

📄 pastel-soft.md

📄 warm-editorial.md

📁 references/

📁 transitions/

📄 catalog.md

📄 css-3d.md

📄 css-blur.md

📄 css-cover.md

📄 css-destruction.md

📄 css-dissolve.md

📄 css-distortion.md

📄 css-grid.md

📄 css-light.md

📄 css-mechanical.md

📄 css-other.md

📄 css-push.md

📄 css-radial.md

📄 css-scale.md

📄 audio-reactive.md

📄 captions.md

📄 css-patterns.md

📄 dynamic-techniques.md

📄 motion-principles.md

📄 transcript-guide.md

📄 transitions.md

📄 tts.md

📄 typography.md

📁 scripts/

📄 animation-map.mjs

📄 contrast-report.mjs

📄 data-in-motion.md

📄 house-style.md

📄 patterns.md

📄 SKILL.md

📄 visual-styles.md