plugin CX Codex GP ChatGPT official · OpenAI

hyperframes · openai — Codex plugin for HTML video

Q: How do I install hyperframes in Codex?

The skills need Node.js version 22 or later and FFmpeg on `PATH`. They run the CLI with `npx hyperframes`.

Q: What does hyperframes require?

Node.js version 22 or later and FFmpeg on `PATH`. The skills invoke the CLI through `npx hyperframes`.

Create and render videos from HTML compositions with GSAP animation, captions, and audio-reactive visuals. The plugin also includes a workflow for turning a website into a video.

Open on GitHub

What hyperframes does

Five skills cover composition authoring with HTML, CSS, and GSAP, the HyperFrames CLI, reusable components, GSAP animation techniques, and website capture. Use them to build compositions with transitions or captions, add registry components, then preview or render the result with hyperframes.

The skills invoke the CLI through npx hyperframes. They require Node.js version 22 or later and FFmpeg on PATH; without FFmpeg, the CLI cannot render video. Available commands include init, lint, preview, render, transcribe, tts, doctor, and browser.

What it helps with

build an HTML video composition with GSAP
render a composition through the HyperFrames CLI
add reusable transitions and effects from the registry
capture a website and turn it into a video
create captions or voiceovers for a video

Example prompts for the agent

Build an HTML and CSS video composition with GSAP animation, then prepare it for rendering with hyperframes.
Run hyperframes lint on the project and open a preview with hyperframes preview.
Capture a website and produce a video using the website-to-hyperframes workflow.

Questions about hyperframes

How do I install hyperframes in Codex?

The skills need Node.js version 22 or later and FFmpeg on PATH. They run the CLI with npx hyperframes.

What does hyperframes do?

It provides skills for creating video from HTML compositions, including animation, captions, CLI rendering, and website capture.

What does hyperframes require?

Node.js version 22 or later and FFmpeg on PATH. The skills invoke the CLI through npx hyperframes.

Source text

hyperframes · Apache-2.0

# hyperframes

OpenAI Codex plugin for [HyperFrames](https://hyperframes.heygen.com) — an open-source video rendering framework where HTML is the source of truth for video.

## What's included

Five skills for authoring and rendering video:

- **hyperframes** — composition authoring (HTML + CSS + GSAP), visual styles, palettes, house style, motion principles, transitions, captions, audio-reactive visuals
- **hyperframes-cli** — `hyperframes init / lint / preview / render / transcribe / tts / doctor / browser`
- **hyperframes-registry** — `hyperframes add` to install reusable blocks and components (social overlays, shader transitions, data viz, effects)
- **gsap** — tweens, timelines, easing, stagger, performance
- **website-to-hyperframes** — 7-step pipeline that captures a URL and produces a finished video

## Requirements

The skills invoke the `hyperframes` CLI via `npx hyperframes`, which needs:

- Node.js ≥ 22
- FFmpeg on `PATH`

See [hyperframes.heygen.com/quickstart](https://hyperframes.heygen.com/quickstart) for full setup.

## Source of truth

The skills are authored in [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) (under `skills/` at the repo root) and mirrored here. File issues about skill content on that repo.

Similar plugins

All plugins for Design →

hyperframes by other authors comes first.

hyperframes HeyGen Renders deterministic MP4 videos from HTML and CSS via agent prompts. Useful for creating animated clips and styled captions. ★ 72,481repo stars example-skills official anthropics A collection of Claude skill examples for web testing, MCP work, design and documents. Use it to inspect skill structure or start a custom skill from a template. ★ 183,839repo stars impeccable pbakaus Hands your agent a designer's vocabulary: 24 commands like polish, audit and bolder, so UI feedback stops being “make it pretty”. ★ 88,212repo stars playground official Anthropic Builds a single-file HTML playground with visual controls, a live preview and a prompt you can copy back into Claude. ★ 44,635repo stars frontend-design official Anthropic A Claude skill that pushes frontend work toward distinctive typography, palettes and animation instead of the usual AI-generated layouts. ★ 44,635repo stars visual-explainer nicobailon Turn architecture explanations, diffs, and requirement comparisons into styled HTML pages that open in a browser. Useful when terminal diagrams become hard to read. ★ 10,630repo stars

From the same set360

The whole set →