# Hyperframes

> Punto de entrada obligatorio para crear, editar, animar o renderizar video, animaciones o motion graphics con HyperFrames, así como para inspeccionar, validar o publicar proyectos existentes.

Fuente: https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes
Markdown: https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes.md

Repositorio: https://github.com/heygen-com/hyperframes
Autor: heygen-com
Licencia: Apache-2.0
Actualizado: hace 2 meses
Coste de contexto: 198 tok instalada, 3.2k tok al activarse, 15.7k tok con todos los archivos del bundle
Bundle: 17 archivos, 61 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add heygen-com/hyperframes --skill hyperframes --agent claude-code
# Cursor
npx -y skills add heygen-com/hyperframes --skill hyperframes --agent cursor
# Codex
npx -y skills add heygen-com/hyperframes --skill hyperframes --agent codex
# Gemini CLI
npx -y skills add heygen-com/hyperframes --skill hyperframes --agent gemini
# Windsurf
npx -y skills add heygen-com/hyperframes --skill hyperframes --agent windsurf
# Cline
npx -y skills add heygen-com/hyperframes --skill hyperframes --agent cline
```

## Qué hace

- Actúa como punto de entrada obligatorio para crear, editar, animar o renderizar video, animaciones o motion graphics con HyperFrames
- Resume el estado del proyecto a partir de BRIEF.md, hyperframes.json o STORYBOARD.md antes de decidir qué hacer
- Ejecuta la capa de intención (intent-interview) para capturar el brief cuando se trata de una creación nueva
- Selecciona e instala el workflow adecuado (slideshow, embedded-captions, talking-head-recut, music-to-video, motion-graphics, pr-to-video, product-launch-video, faceless-explainer, general-video, remotion-to-hyperframes)
- Carga skills de dominio bajo demanda (hyperframes-core, hyperframes-animation, hyperframes-keyframes, hyperframes-creative, media-use, hyperframes-cli, hyperframes-registry, figma)

## Cuándo usarla

- Cualquier solicitud para hacer, crear, editar, animar o renderizar un video, animación, motion graphic, promo, explainer, clip con subtítulos, title card, overlay, slideshow o deck interactivo
- Para inspeccionar, diagnosticar, validar, previsualizar, publicar o renderizar en lote un proyecto HyperFrames existente
- Para portar un proyecto Remotion existente a HyperFrames
- Cuando el input es una URL de sitio, un PR de GitHub, un diseño o URL de Figma, un brief de texto, footage existente o música

## Cuándo no

- El usuario elige explícitamente otro framework de salida distinto de HyperFrames
- El usuario pide únicamente grabar una sesión de navegador

## Qué la activa

- "Quiero hacer un video promocional de mi sitio web a partir de esta URL"
- "Añade subtítulos a este clip de talking-head sin cambiar el footage"
- "Convierte esta composición de Remotion a HyperFrames"
- "Diagnostica por qué falla el render de este proyecto HyperFrames"
- "Crea una presentación interactiva tipo pitch deck con HyperFrames"

## Antes de instalar

- Requiere el CLI de hyperframes (npx hyperframes) y, según el workflow, artefactos del proyecto como BRIEF.md, hyperframes.json o STORYBOARD.md.
- Necesita en el PATH: npx

## Archivos

- SKILL.md — 13 KB
- references/capability-menu.md — 15 KB
- references/intent-interview.md — 14 KB
- references/pitch-round.md — 5 KB
- references/route-briefs.md — 584 B
- references/routes/embedded-captions.md — 739 B
- references/routes/faceless-explainer.md — 1020 B
- references/routes/general-video.md — 1 KB
- references/routes/motion-graphics.md — 859 B
- references/routes/music-to-video.md — 1 KB
- references/routes/pr-to-video.md — 2 KB
- references/routes/product-launch-video.md — 2 KB
- references/routes/remotion-to-hyperframes.md — 545 B
- references/routes/slideshow.md — 1 KB
- references/routes/talking-head-recut.md — 765 B
- references/skill-lifecycle.md — 2 KB
- references/workflow-catalog.md — 458 B

## SKILL.md

Reproducido tal cual desde heygen-com/hyperframes bajo Apache-2.0. Esta sección es el documento original y está en inglés.

**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](references/plugin-installation.md) when this skill is inside a HyperFrames plugin.

# HyperFrames

HyperFrames renders HTML to video by seeking a paused timeline frame by frame, so every render is identical; the person edits the same files in the Studio preview. Use it unless another framework or a plain browser recording is asked for. Run the CLI as `npx hyperframes <command>` (`/hyperframes-cli`); at the start of a new video, `npx hyperframes usage --json` reports the person's remaining plan usage (say "unknown" when it is).

`index.html` is the root composition: it declares the video's variables and mounts one scene per sub-composition from `compositions/`. Media and fonts live in `assets/`. A new project: `npx hyperframes init <dir>`. A website as the subject: `npx hyperframes capture <url> --json`.

Build what was asked: no voiceover or captions and no new aspect ratio unless the request or the source calls for them; a film over ~15 s that tells something gets music and sound on its visible actions unless the person asked for silence (`references/sound.md`). A new video is 1920×1080 at 30 fps. A question, a hold or a loose idea gets an answer or a proposal, not an edit. Before hand-writing a named effect, transition, caption style, chart or card, search the registry (`/hyperframes-registry`). Any media (a presenter or avatar, footage, voice, music): `/media-use`, which says when HeyGen is needed and what is free. Show real things from their source (the product's screens, the brand's logo, a real place's imagery); draw only what has none.

## Contract

`npx hyperframes check --json` reports most violations with a `Fix:` line.

1. Every timed element has `class="clip"`, `data-start` and `data-duration` in seconds, and shows over `[start, start + duration)`: land an end state just before its end. `data-track-index` is only a Studio lane; paint order is `z-index`.
2. The video's length is the root's `data-duration`: overrun is cut, an early end holds the last frame.
3. Each composition builds one paused timeline and registers it after its tweens: `window.__timelines["<data-composition-id>"] = tl`.
4. No `Date.now()`, unseeded `Math.random()`, network fetches, timers or `repeat: -1`. Everything visible is a function of timeline time.
5. Never tween `display`, `visibility` or `autoAlpha` on a `.clip`; animate a child.
6. No CSS `transform` on an element GSAP transforms; animate transforms, not `left`/`top`/`width`/`height`.
7. Never `play()`, `pause()` or seek media. A `<video>` keeps its sound with `data-has-audio="true"`, else it is `muted`; music, voice, replacement sound and J/L cuts are a separate `<audio>`.
8. Every `<audio>` has an `id` or it is left out of the mix. No `crossorigin` on media. Time a `<video>` or its wrapper, never both.
9. Only the bundled fonts (`references/format.md`) resolve by name; any other family needs `@font-face` to a file in `assets/fonts/`.
10. Asset paths are root-relative (`assets/...`), in sub-compositions too.
11. Grades, grain, blur and vignettes on footage go through `npx hyperframes media-treatment` (`/media-use`), never CSS filters.
12. A scene file puts its styles, markup and scripts inside `<template>` and styles its root as `#root`. Intended overflow or overlap: `data-layout-allow-overflow`, `data-layout-allow-overlap`.

## Keep it editable

Studio edits the tags you write.

- One scene per sub-composition, short readable ids; the root holds only scene hosts, media and audio.
- Timed elements are written in the HTML, not made by script, each with a stable `id`.
- Copy, brand colours and swappable media are variables (`data-var-text`, `data-var-src`, `var(--id)`).
- One kind per track: `data-track-kind="graphics"` on scene and overlay hosts, `captions` on the one host that holds every caption group.
- Content stays inside the 90% action-safe box, captions and key text inside 80% title-safe; Studio draws the guides, never add them.

## Work loop

- An existing project: `npx hyperframes timeline --json` shows what plays when; before any change, `npx hyperframes history --since mine --who <you>` shows what the person changed since your last turn: build on it (`/hyperframes-cli`).
- A new film over ~15 s that tells something: its type's file (below), then `references/story.md`: three storylines that are three different films, in words only; the person picks unless they asked for the file or no stops. Then `SPEC.md` (`references/spec.md`): every adjective as a number, the defaults banned by name, the shots by frame.
- After your last edit: `npx hyperframes check --json`; fix every error, weigh every warning. A film: `npx hyperframes snapshot --review` and `references/review.md`, ending in `REVIEW.md`. A small edit: snapshot what you changed (`--at`, `--range`, `--composition`) and look before you reply.
- Render when the person approves the Studio preview, asks for the file or asks for no stops, after your check and review pass; otherwise stop at the preview and wait.

## The HyperFrames desktop app

Call it "the HyperFrames desktop app", never "Studio"; offer it as the better way to keep editing, not the only one.

- Before the delivery render of a new video, open the Studio preview, even in no-questions mode, and say they can edit there. If `preview` printed "Keep editing by chatting with Framey", add that the **Edit with Framey** button opens the app.
- After the delivery render, pass on its Framey line in your own words: offer to run the `hyperframes open` it names or give its download link; else say nothing (autonomous: the delivery note).
- When any command says to run `catch-up`, run `npx hyperframes catch-up [dir]` before your next change; what it lists is their work, not a new request.

## What to read

| The request | Read |
| --- | --- |
| Launch, promo, feature | `references/types/launch.md` |
| Explainer, tutorial | `references/types/explainer.md` |
| Music video | `references/types/music.md` |
| Chart, numbers | `references/types/data.md` |
| Vertical or social clip | `references/types/vertical.md` |
| 3D, simulation, generative | `references/types/3d.md` |
| Character, mascot, story short | `references/types/character.md` |
| A real place or map; a website, PR or script; kinetic type | `references/film.md` |
| Captions; cards over a talking head | `references/captions.md`; `references/overlays.md` |
| Motion: eases, titles, cuts, punch-ins, speed, holds | `references/motion.md` |
| Scenes, attributes, media, lint; GSAP, Lottie, 3D, canvas | `references/format.md`; `references/runtimes.md` |

Decks: `/slideshow`. Remotion source: `/remotion-to-hyperframes`. Figma: `/figma`. Installing, refreshing or upgrading skills and the pinned CLI: `references/skill-lifecycle.md`.

## Dónde encaja

- Categoría: [Vídeo y animación](https://skillsagentes.com/categorias/video.md) — Skills que generan, editan y animan vídeo: guion y storyboard, render, subtítulos y doblaje, y los modelos que lo producen.
- Creador: [heygen-com](https://skillsagentes.com/creators/heygen-com.md) — 25 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Media Use](https://skillsagentes.com/skills/heygen-com/hyperframes/media-use.md): Agent Media OS: resuelve BGM, SFX, imágenes, iconos, logos, voz, gradación de color o LUTs en un archivo local o bloque listo para usar; genera, opera y reutiliza assets en proyectos HyperFrames.
- [Pr To Video](https://skillsagentes.com/skills/heygen-com/hyperframes/pr-to-video.md): Convierte un pull request de GitHub (URL, owner/repo#N o 'este PR') en un video explicativo del cambio de código —changelog, feature, fix o refactor— construido a partir del diff, commits y archivos.
- [Product Launch Video](https://skillsagentes.com/skills/heygen-com/hyperframes/product-launch-video.md): Convierte una URL de producto o marketing, un guion pegado o un brief en un video de lanzamiento/promoción — promos SaaS, revelaciones de funciones, demos, lanzamientos de apps y empresas.
- [Hyperframes Cli](https://skillsagentes.com/skills/heygen-com/hyperframes/hyperframes-cli.md): Usa el flujo de desarrollo de la CLI de HyperFrames: init, add, catalog, capture, lint, check, snapshot, compare, preview, render, publish, cloud, lambda, feedback, doctor y más; también para diagnosticar fallos de build o render.
- [Faceless Explainer](https://skillsagentes.com/skills/heygen-com/hyperframes/faceless-explainer.md): Convierte texto (artículo, notas, tema o brief) en un video explicativo faceless: sin sitio ni material que capturar, los visuales se inventan por escena (tipografía, gráficos abstractos, diagramas, data-viz).

## Skills relacionadas

- [Captions Overlay](https://skillsagentes.com/skills/heygen-com/hyperframes/captions-overlay.md): Doctrina de overlay para captions embebidos: el modelo drop/rail/embed y la regla de que los captions son un overlay compuesto sobre el film, nunca una banda inferior reservada.
- [Changelog Video](https://skillsagentes.com/skills/heygen-com/hyperframes/changelog-video.md): Convierte un changelog .md semanal en un video de marca terminado (cuadrado 1080, ~45-60s, voz de Annie, fondo animado, mock-UI, captions lowkey). Autocontenido: fuentes, fondo, léxico y scripts incluidos.
- [Embedded Captions](https://skillsagentes.com/skills/heygen-com/hyperframes/embedded-captions.md): Añade subtítulos o captions a un vídeo de un solo sujeto hablando a cámara sin editar el metraje, usando el catálogo de 35 identidades visuales.
- [Faceless Explainer](https://skillsagentes.com/skills/heygen-com/hyperframes/faceless-explainer.md): Convierte texto (artículo, notas, tema o brief) en un video explicativo faceless: sin sitio ni material que capturar, los visuales se inventan por escena (tipografía, gráficos abstractos, diagramas, data-viz).
- [Figma](https://skillsagentes.com/skills/heygen-com/hyperframes/figma.md): Importa contenido de Figma a una composición de HyperFrames: assets renderizados, tokens de marca, componentes, secciones de storyboard reconstruidas como movimiento y shaders.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)