Remotion
Remotion video creation skills — best practices, animations, audio, captions, 3D, and more for building...
CCCXGBCUPi
SkillMaxx / Design / Hyperframes
Hyperframes
HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.
- GitHub
- heygen-com/hyperframes ↗
- Stars
- ★ 65k
- Last updated
- Hands-on tests
- Tested ✓ in 3 of 5
Install
Tested ✓✓ Verified from docsOfficial docs ↗
/plugin install hyperframes@claude-plugins-officialTested ✓ on 2026-10-16: installed and loaded in a throwaway sandbox with no credentials.
Log excerpt
Installing plugin "hyperframes@claude-plugins-official"...✔ Successfully installed plugin: hyperframes@claude-plugins-official (scope: user)
$ verify:
❯ hyperframes@claude-plugins-official
Status: ✔ enabled1 run, latest 2026-10-16
Tested ✓✓ Verified from docsOfficial docs ↗
codex plugin add hyperframes@openai-curatedTested ✓ on 2026-10-16: installed and loaded in a throwaway sandbox with no credentials.
Tested from a local mirror of the official openai/plugins marketplace, because the CLI reserves the official name for signed-in users.
Log excerpt
Added plugin `hyperframes` from marketplace `openai-plugins-mirror`. Installed plugin root: /home/sbx/.codex/plugins/cache/openai-plugins-mirror/hyperframes/0.1.2 $ verify: hyperframes@openai-plugins-mirror installed, enabled 0.1.2 /workspace/agents/codex-mirror/plugins/hyperframes
1 run, latest 2026-10-16
Tested ✓✓ Verified from docsOfficial docs ↗
Auto-loaded from your Claude Code plugins (no extra setup per xAI docs)Tested ✓ on 2026-10-16: installed and loaded in a throwaway sandbox with no credentials.
Log excerpt
Installed 1 plugin(s) from claude-plugins-official: hyperframes $ verify: hyperframes-13cee189: hyperframes [git: https://github.com/heygen-com/hyperframes.git] (claude-plugins-official)
1 run, latest 2026-10-16
Not yet tested
No official Cursor instructions yet. We haven't found docs saying this works in Cursor.
Know it works? Tell us →Not yet tested
No official Pi instructions yet. We haven't found docs saying this works in Pi.
Know it works? Tell us →README
View on GitHub ↗<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="docs/logo/dark.svg"> <source media="(prefers-color-scheme: light)" srcset="docs/logo/light.svg"> <img alt="HyperFrames" src="docs/logo/light.svg" width="300"> </picture> </p>
<p align="center"> <a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/v/hyperframes.svg?style=flat" alt="npm version"></a> <a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/dm/hyperframes.svg?style=flat" alt="npm downloads"></a> <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache 2.0-blue.svg" alt="License"></a> <a href="https://nodejs.org"><img src="https://img.shields.io/badge/node->%3D22-brightgreen" alt="Node.js"></a> <a href="https://discord.gg/EbK98HBPdk"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Discord"></a> </p>
<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>
<p align="center"> <a href="https://www.hyperframes.dev/studio">Studio</a> | <a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> | <a href="https://hyperframes.heygen.com/showcase">Showcase</a> | <a href="https://www.hyperframes.dev/">Playground</a> | <a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> | <a href="https://hyperframes.heygen.com/introduction">Docs</a> | <a href="https://discord.gg/EbK98HBPdk">Discord</a> </p>
<p align="center"> <img src="https://github.com/user-attachments/assets/f6ff9fae-f33d-4f68-bd54-f3ed4ba6473b" alt="HyperFrames app opening from the Dock: native Mac and Linux app now available" width="800"> </p>
HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
Quick Start
With an AI coding agent
For Claude Code, install the versioned plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
Enable auto-update for the hyperframes marketplace in /plugin → Marketplaces,
then use /hyperframes:hyperframes. See the plugin guide
for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.
Preview from the source repo. Images are removed.
Similar alternatives
Runway API
Video generation at scale. Generate videos, images, and audio with Runway's API — batch ad campaigns, product...
CCCXGBCUPi
Figma
Figma design platform integration. Access design files, extract component information, read design tokens, and...
CCCXGBCUPi
Canva
Create, edit, review, resize, and brand-check Canva designs with the Canva MCP server.
CCCXGBCUPi