hyperframes-html-video
HyperFrames — Framework open-source de HeyGen para convertir HTML/CSS/animaciones en videos MP4 determinísticos. Built for AI agents.
ソース情報
- リポジトリ
- Ntizar/NtizarBrainMasterMind
- ソースの最終更新活動
- 2026年7月7日 07:40
- 検出された SKILL.md の言語
- スペイン語
- スター
- 2
- フォーク
- 0
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- hyperframes-html-video
- version
- 1.0.0
- description
- HyperFrames — Framework open-source de HeyGen para convertir HTML/CSS/animaciones en videos MP4 determinísticos. Built for AI agents.
- tags
- ["video","html","animation","mp4","rendering","agent","ffmpeg","gsap"]
# HyperFrames — HTML a Video Determinístico
## Resumen
[HyperFrames](https://github.com/heygen-com/hyperframes) (⭐34K) de HeyGen es un framework open-source que convierte HTML, CSS, media y animaciones seekables en videos MP4 determinísticos. Diseñado para ser usado por AI coding agents.
**Diferencia clave**: A diferencia de herramientas de screen-capture, HyperFrames genera videos determinísticos desde código HTML — mismo input = mismo output siempre.
## Cuándo usar
- Generar videos programáticamente desde HTML/CSS
- Crear contenido de video para AI agents
- Animaciones de datos a video (dashboards → video)
- Generación de contenido multimedia automatizado
## Patrón de uso
```bash
# Instalar como paquete npm
npm install hyperframes
# O usar como CLI
npx hyperframes render ./index.html --output output.mp4
```
```javascript
// Como librería Node.js
import { render } from 'hyperframes';
const result = await render({
html: './index.html',
css: './styles.css',
output: 'output.mp4',
width: 1920,
height: 1080,
fps: 30,
// GSAP animations son soportadas nativamente
});
```
```javascript
// Con GSAP para animaciones
import gsap from 'gsap';
// Las animaciones GSAP se renderizan automáticamente en el video
gsap.to('.element', { duration: 2, x: 100 });
```
## Features clave
| Feature | Descripción |
|---------|-------------|
| HTML → MP4 | Convierte cualquier HTML/CSS a video |
| GSAP nativo | Animaciones GSAP renderizadas automáticamente |
| Determinístico | Mismo input = mismo output siempre |
| AI Agent ready | Diseñado para ser usado por agentes de IA |
| Node.js + CLI | Usar como librería o como herramienta CLI |
| Seekable | Animaciones seekables para control preciso |
## Integración con otros skills
- **claude-design**: Generar diseño en HTML → HyperFrames para video
- **manim-video**: Alternativa para animaciones más complejas
- **baoyu-infographic**: Infografías HTML → video con HyperFrames
## Pitfalls
- **Node.js >= 22**: Requiere versión reciente de Node.js
- **ffmpeg**: Necesita ffmpeg instalado en el sistema para el encoding final
- **Limitaciones CSS**: No todos los efectos CSS son soportados (filter, blend-mode, etc.)
- **Tamaño**: Los videos pueden ser grandes. Usar compresión adecuada
## Referencias
- Docs: https://hyperframes.heygen.com
- Quickstart: https://hyperframes.heygen.com/quickstart
- Catalog: https://hyperframes.heygen.com/catalog/blocks/data-chart
---
**Hecho con ❤️ por David Antizar**
GitHubで見る