How do I install hyperframes?

Run these in Claude Code: /plugin marketplace add heygen-com/hyperframes then /plugin install hyperframes@hyperframes. Then prompt normally.

Does hyperframes auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Content

Plugin

hyperframes

Write HTML. Render video. Built for agents.

FLOW.md

heygen-com@heygen-com

GitHub

Plugin Signal91/100Strong

maintained100

capable70

documented100

adopted98

Install on Claude Code

> /plugin marketplace add heygen-com/hyperframes
> /plugin install hyperframes@hyperframes

Stats

JavaScript Node React HTML CSS

+7 tags

Bash AWS Git GitHub Anthropic MCP Figma

40,265

Stars

3,834

Forks

Active

Maintenance

TypeScript

Language

Apache-2.0

License

58m ago

Last commit

5mo ago

Created

Repo: heygen-com/hyperframes

What's inside

Skills

/captions-overlayOverlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a /changelog-videoTurn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video"./cut-the-curveThe technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve /motion-doctrineGATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you /oversized-cursorHouse-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and /seam-craftRender-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam

Show all 25 skills

/embedded-captionsAdd captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual /faceless-explainerTurn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos,/figmaImport Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export./general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use /hyperframes-animationAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for /hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills,/hyperframes-coreThe HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers /hyperframes-creativeNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene /hyperframes-keyframesUse when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media /hyperframes-registryInstall, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json./hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML /media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when /motion-graphicsA short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet //music-to-videoTurn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a /pr-to-videoTurn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product /product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site /remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a /slideshowAuthor a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a /talking-head-recutPackage an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays

Agents

builderTurn `shot-plan.json` into one renderable HyperFrames composition (`compositions/index.html`). Everything stays in the HF ecosystem — HTML is the source of truth; a single **paused** GSAP timeline carries all motion; the engine seeks it. Category-specific build rules live in directorTurn a request into a `shot-plan.json` for a short (~3–30s) **design-led motion graphic**. You run in **two parts** around the asset-sourcing step: **Part 1 (plan)** before sourcing, **Part 2 (design)** after. You do NOT write composition code — that's the Builder. Schema:finalizePerform snapshot QA and one in-place repair pass. Dispatch only when Step 5 `lint`, `check`, or snapshot review reports a defect. The orchestrator owns final approval and render; this agent never renders.

Badges

README

Read on GitHub

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

Install the HyperFrames skills, then describe the video you want:

npx skills add heygen-com/hyperframes --full-depth

The picker opens with nothing pre-selected — the Core Skills group is all you need: the /hyperframes router installs each creation workflow on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas a non-interactive skills add without --skill installs all 19.

--full-depth does a full clone of the repo's current main. Without it, skills add fetches the skills.sh registry blob, which lags main by hours — you'd get an older copy of a skill. (hyperframes skills update already installs full-depth.)

Try a prompt like:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.

Skills

HyperFrames ships 19 skills agents load on demand. Read /hyperframes first — it's the router and capability map; it picks a workflow for any "make me a…" request — video, deck, or composition port — and points to the domain skills below.

Default to the core set — the router installs each creation workflow on demand. npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes --full-depth) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without --skill installs all 19. Use npx skills add heygen-com/hyperframes --all --full-depth to install all 19 deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill <name> --full-depth for just one (bare name, no leading /). Keep --full-depth — it installs the current main; without it skills add fetches the skills.sh blob, which lags by hours.

Installs stay lean after that: npx hyperframes init keeps the core set fresh (the router, the hyperframes-* domain skills, and media-use — plus whatever is already installed; /figma stays on demand) and never expands a partial install; the creation workflows install on demand — the router runs npx hyperframes skills update <workflow> before entering one. Nothing re-pulls the full set behind your back.

Upload to Codex

Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:

bun run package:codex-plugin

This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.

Router

Skill	Use when
`/hyperframes`	Read first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below.

Creation workflows

Skill	Use when
`/product-launch-video`	Any website — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s).
`/faceless-explainer`	Explaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz).
`/pr-to-video`	A GitHub pull request (PR URL, `owner/repo#N` ref, or "this PR") → changelog / feature-reveal / fix / refactor explainer, read via the `gh` CLI.
`/embedded-captions`	Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed.
`/talking-head-recut`	Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP.
`/motion-graphics`	A short, unnarrated, design-led motion graphic (~under 10s) — kinetic type, stat / chart hit, logo sting, lower-third, animated tweet / headline. MP4 or transparent overlay.
`/music-to-video`	A music track (audio file, video to pull audio from, or one generated from a mood brief) → a beat-synced video — lyric, slideshow, or kinetic promo; music drives pacing.
`/slideshow`	A presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
`/general-video`	Anything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback, and the home of companion mode (co-create with the full toolbox).
`/remotion-to-hyperframes`	Porting an existing Remotion (React) composition's source to HyperFrames HTML. One-way migration, not creation.

Domain skills (loaded on demand)

Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.

Skill	Covers
`/hyperframes-core`	The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules.
`/hyperframes-animation`	All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
`/hyperframes-keyframes`	Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `hyperframes keyframes` diagnostics for rendered motion.
`/hyperframes-creative`	Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
`/media-use`	The media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking.
`/hyperframes-cli`	CLI dev loop — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, plus HeyGen-hosted cloud rendering (`cloud render`) and AWS Lambda rendering (`lambda deploy / render / progress`).
`/hyperframes-registry`	Install and wire registry blocks and components into compositions via `hyperframes add`. Authoring a new block or component to contribute upstream.
`/figma`	Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition.

For visual design handoff workflows, see the Claude Design guide and Open Design guide.

Manually with the CLI

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

Requirements: Node.js 22+, FFmpeg

What You Can Build

Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix.

Product launch videos and feature announcements
PR walkthroughs with animated code diffs, narration, and captions
Data visualizations, chart races, and map animations
Social videos with kinetic captions, overlays, and music
Docs-to-video, PDF-to-video, and site-tour explainers
Reusable motion graphics for automated content pipelines

Frame.md

frame.md — your design system, ready for video.

Every brand has a design.md. None of them were written for a camera. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome.

The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.

Browse and remix them all at hyperframes.dev/design.

How It Works

Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.

HyperFrames Stack

HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.

Piece	Status	What it does
CLI	Available	Scaffold, preview, lint, inspect, and render local video projects
Core / Engine / Producer	Available	Parse compositions, drive headless Chrome, encode video, and mix audio
Catalog	Available	Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects
Agent skills	Available	Teach coding agents the video-production patterns that generic web docs miss
Studio	Available, evolving	Browser surface for previewing and editing compositions
AWS Lambda rendering	Available	Deploy a distributed render stack and drive renders from your laptop or CI
hyperframes.dev	Available	Community playground for previewing, iterating, sharing, and rendering HTML-native video projects
frame.md	Available	Invert your design system for the camera — a DESIGN.md superset an agent can compose video from

Catalog

Install ready-to-use blocks and components:

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

Browse the catalog at hyperframes.heygen.com/catalog.

Why HyperFrames?

HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
No build step: an index.html composition plays as-is and can be previewed directly in the browser.
Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.

HyperFrames vs Remotion

HyperFrames is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily.

	HyperFrames	Remotion
Authoring	HTML + CSS + seekable animation	React components
Build step	None; `index.html` plays as-is	Bundler required
Agent handoff	Plain HTML files	JSX / React project
Library-clock animations	Seekable, frame-accurate via adapters	Wall-clock animation patterns need care
Distributed rendering	Local and AWS Lambda render paths	Remotion Lambda, mature cloud renderer
License	Apache 2.0	Source-available Remotion License

Read the full comparison in the HyperFrames vs Remotion guide.

Documentation

Full documentation: hyperframes.heygen.com/introduction

Packages

Package	Description
`hyperframes`	CLI for creating, previewing, linting, and rendering compositions
`@hyperframes/core`	Types, parsers, generators, linter, runtime, and frame adapters
`@hyperframes/engine`	Seekable page-to-video capture engine using Puppeteer and FFmpeg
`@hyperframes/producer`	Full rendering pipeline for capture, encode, and audio mix
`@hyperframes/studio`	Browser-based composition editor UI
`@hyperframes/player`	Embeddable `<hyperframes-player>` web component
`@hyperframes/shader-transitions`	WebGL shader transitions for compositions
`@hyperframes/aws-lambda`	AWS Lambda SDK and deployment surface for distributed renders

Community

HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md. Open a PR if your team is using HyperFrames.

Questions and ideas: Discord
Bugs and feature requests: GitHub Issues
User research: Book a casual 30-minute conversation with the HyperFrames team — no preparation or sales pitch
Security reports: SECURITY.md
Contributions: CONTRIBUTING.md

Development Note

The repo uses Git LFS for golden regression-test baselines under packages/producer/tests/**/output.mp4 (about 240 MB of .mp4 files). If you're cloning the full repo for development, install Git LFS first:

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# Then, once per machine
git lfs install

If you only need source files, you can skip LFS content:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

License

Apache 2.0

File tree

1791

heygen-com/hyperframesView on GitHub

.agents/
  skills/
    captions-overlay/
      SKILL.md
    changelog-video/
      assets/
        bg-pattern.mp4
        bgm.mp3
        fonts/
          ABCSolarDisplay-Bold.woff2
          TT_Norms_Pro_Bold.woff2
          TT_Norms_Pro_Medium.woff2
          tt_norms_pro_mono_regular-webfont.woff2
          TT_Norms_Pro_Normal.woff2
      examples/
        master-skeleton.html
        script-tokens.json
      references/
        build-spec.md
        lexicon.json
        script-voice.md
        visualization-registry.md
      scripts/
        align-captions.mjs
      SKILL.md
    cut-the-curve/
      examples/
        gsap-implementation.md
      SKILL.md
    motion-doctrine/
      references/
        seam-gate.md
      scripts/
        seam-gate.mjs
        seam-stamp.mjs
      SKILL.md
    oversized-cursor/
      SKILL.md
    README.md
    seam-craft/
      SKILL.md
.claude/
.claude-plugin/
  marketplace.json
  plugin.json
  settings.json
  skills/
    captions-overlay/
      SKILL.md
    changelog-video/
      assets/
        bg-pattern.mp4
        bgm.mp3
        fonts/
          ABCSolarDisplay-Bold.woff2
          TT_Norms_Pro_Bold.woff2
          TT_Norms_Pro_Medium.woff2
          tt_norms_pro_mono_regular-webfont.woff2
          TT_Norms_Pro_Normal.woff2
      examples/
        master-skeleton.html
        script-tokens.json
      references/
        build-spec.md
        lexicon.json
        script-voice.md
        visualization-registry.md
      scripts/
        align-captions.mjs
      SKILL.md
    cut-the-curve/
      examples/
        gsap-implementation.md
      SKILL.md
    motion-doctrine/
      references/
        seam-gate.md
      scripts/
        seam-gate.mjs
        seam-stamp.mjs
      SKILL.md
    oversized-cursor/
      SKILL.md
    README.md
    seam-craft/
      SKILL.md
.codex/
.codex-plugin/
  plugin.json
  hooks.json
.cursor-plugin/
  plugin.json
.editorconfig
.env.example
.fallowrc.jsonc
.gitattributes
.github/
  actions/
    install-ffmpeg-windows/
      action.yml
    preflight/
      action.yml
    prepare-ffmpeg-bin/
      action.yml
  codeql/
    codeql-config.yml
  ISSUE_TEMPLATE/
    bug.yml
    config.yml
    feature.yml
  pull_request_template.md
  release.yml
  renovate.json
  workflows/
    canary-sunset.yml
    catalog-previews.yml
    ci.yml
    codeql.yml
    docs.yml
    fast-video-validation.yml
    fixtures/
      windows-canary.html
    player-perf.yml
    preview-regression.yml
    publish.yml
    regression.yml
    sync-skills-to-clawhub.yml
    windows-render.yml
.gitignore
.oxfmtrc.json
.oxlintrc.json
.prettierignore
ADOPTERS.md
AGENTS.md
assets/
  claude-code-icon-dark.svg
  claude-code-icon-light.svg
  icon.png
  logo.png
bun.lock
CLAUDE.md
CODE_OF_CONDUCT.md
commitlint.config.js
CONTRIBUTING.md
CREDITS.md
DESIGN.md
Dockerfile.test
docs/
DOCS_GUIDELINES.md
  AGENTS.md
  catalog/
    blocks/
      app-showcase.mdx
      apple-money-count.mdx
      beat-freeze-cut.mdx
      blue-sweater-intro-video.mdx
      camcorder-hud.mdx
      chromatic-radial-split.mdx
      cinematic-zoom.mdx
      code-3d-extrude.mdx
      code-diff.mdx
      code-highlight.mdx
      code-morph.mdx
      code-particle-assemble.mdx
      code-scroll.mdx
      code-shader-dissolve.mdx
      code-snippet-apple-terminal-basic.mdx
      code-snippet-apple-terminal-clear-dark.mdx
      code-snippet-apple-terminal-clear-light.mdx
      code-snippet-apple-terminal-grass.mdx
      code-snippet-apple-terminal-homebrew.mdx
      code-snippet-apple-terminal-man-page.mdx
      code-snippet-apple-terminal-novel.mdx
      code-snippet-apple-terminal-ocean.mdx
      code-snippet-apple-terminal-pro.mdx
      code-snippet-apple-terminal-red-sands.mdx
      code-snippet-apple-terminal-silver-aerogel.mdx
      code-snippet-apple-terminal-solid-colors.mdx
      code-snippet-dark-2026.mdx
      code-snippet-dark-modern.mdx
      code-snippet-dark-plus.mdx
      code-snippet-flight.mdx
      code-snippet-high-contrast-light.mdx
      code-snippet-high-contrast.mdx
      code-snippet-light-2026.mdx
      code-snippet-light-modern.mdx
      code-snippet-light-plus.mdx
      code-snippet-monokai.mdx
      code-snippet-solarized-light.mdx
      code-snippet-visual-studio-dark.mdx
      code-snippet-visual-studio-light.mdx
      code-typing.mdx
      cross-warp-morph.mdx
      data-chart.mdx
      domain-warp-dissolve.mdx
      editorial-flash-overlay.mdx
      flash-through-white.mdx
      flowchart-vertical.mdx
      flowchart.mdx
      freeze-frame-dressing.mdx
      glitch.mdx
      gravitational-lens.mdx
      hw-frame.mdx
      hw-path-text.mdx
      hw-pipeline.mdx
      hw-scribble-transition.mdx
      hw-text-cloud.mdx
      hw-title.mdx
      instagram-follow.mdx
      ios26-liquid-glass.mdx
      light-leak.mdx
      liquid-glass-context-menu.mdx
      liquid-glass-media-controls.mdx
      liquid-glass-notification.mdx
      liquid-glass-widgets.mdx
      logo-outro.mdx
      lower-third-bild.mdx
      lt-accent-underline.mdx
      lt-bold-block.mdx
      lt-clean-bar.mdx
      lt-color-block.mdx
      lt-dark-card.mdx
      lt-kicker-name.mdx
      lt-mask-reveal.mdx
      lt-side-rule.mdx
      lt-soft-pill.mdx
      lt-stack-bars.mdx
      macos-notification.mdx
      macos-tahoe-liquid-glass.mdx
      mk-background.mdx
      mk-callout-highlight.mdx
      mk-clone-wall-transition.mdx
      mk-line-graph.mdx
      mk-placeholder-grid.mdx
      mk-progress-stat.mdx
      mk-specs-list.mdx
      news-ticker.mdx
      north-korea-locked-down.mdx
      nyc-paris-flight.mdx
      organic-light-leak-overlay.mdx
      reddit-post.mdx
      ridged-burn.mdx
      ripple-waves.mdx
      sdf-iris.mdx
      spain-map.mdx
      spotify-card.mdx
      swirl-vortex.mdx
      thermal-distortion.mdx
      tiktok-follow.mdx
      transitions-3d.mdx
      transitions-blur.mdx
      transitions-cover.mdx
      transitions-destruction.mdx
      transitions-dissolve.mdx
      transitions-distortion.mdx
      transitions-grid.mdx
      transitions-light.mdx
      transitions-mechanical.mdx
      transitions-other.mdx
      transitions-push.mdx
      transitions-radial.mdx
      transitions-scale.mdx
      ui-3d-reveal.mdx
      us-map-bubble.mdx
      us-map-flow.mdx
      us-map-hex.mdx
      us-map.mdx
      vfx-iphone-device.mdx
      vfx-liquid-background.mdx
      vfx-liquid-glass.mdx
      vfx-magnetic.mdx
      vfx-portal.mdx
      vfx-shatter.mdx
      vfx-text-cursor.mdx
      vpn-youtube-spot.mdx
      whip-pan.mdx
      world-map.mdx
      x-post.mdx
      yt-comment-card.mdx
      yt-lcd-background.mdx
      yt-logo-intro.mdx
      yt-lower-third.mdx
      yt-prism-title.mdx
      yt-vertical-fill.mdx
    components/
      caption-blend-difference.mdx
      caption-clip-wipe.mdx
      caption-editorial-emphasis.mdx
      caption-emoji-pop.mdx
      caption-glitch-rgb.mdx
      caption-gradient-fill.mdx
      caption-highlight.mdx
      caption-kinetic-slam.mdx
      caption-matrix-decode.mdx
      caption-neon-accent.mdx
      caption-neon-glow.mdx
      caption-parallax-layers.mdx
      caption-particle-burst.mdx
      caption-pill-karaoke.mdx
      caption-texture.mdx
      caption-weight-shift.mdx
      grain-overlay.mdx
      grid-pixelate-wipe.mdx
      hw-arrow.mdx
      hw-boil.mdx
      hw-box-label.mdx
      hw-callout-circle.mdx
      hw-underline.mdx
      mk-emphasis-type.mdx
      mk-usage-arc.mdx
      morph-text.mdx
      motion-blur.mdx
      parallax-unzoom.mdx
      parallax-zoom.mdx
      shimmer-sweep.mdx
      texture-mask-text.mdx
      vignette.mdx
      yt-camera-move.mdx
      yt-circle-pointer.mdx
      yt-feather-highlight.mdx
      yt-screen-warp.mdx
    index.mdx
  changelog.mdx
  community/
    adopters.mdx
  concepts/
    compositions.mdx
    data-attributes.mdx
    determinism.mdx
    frame-adapters.mdx
    index.mdx
    variables.mdx
  contributing/
  contributing.mdx
    canary-rollouts.mdx
    catalog.mdx
    changelog-process.mdx
    release-channels.mdx
    testing-local-changes.mdx
  custom.css
  deploy/
    aws-lambda.mdx
    cloud.mdx
    gcp-cloud-run.mdx
    migrating-to-hyperframes-lambda.mdx
    overview.mdx
    templates-on-lambda.mdx
  developers/
    cli.mdx
    index.mdx
    overview.mdx
  docs.json
  examples.mdx
  favicon.svg
  go-further.mdx
  guides/
    4k-rendering.mdx
    authentication.mdx
    avatar-presenter.mdx
    captions-and-recuts.mdx
    choose-creation-path.mdx
    claude-design-hyperframes.md
    claude-design-send-to-hyperframes.md
    color-grading.mdx
    deploy.mdx
    design-tools.mdx
    export-and-share.mdx
    faceless-explainer.mdx
    feedback.mdx
    figma.mdx
    general-video.mdx
    gsap-animation.mdx
    hdr.mdx
    html-in-canvas.mdx
    hyperframes-vs-remotion.mdx
    mcp.mdx
    media-effects.mdx
    media.mdx
    motion-graphics.mdx
    music-to-video.mdx
    open-design-hyperframes.md
    performance.mdx
    pr-to-video.mdx
    product-launch-video.mdx
    remove-background.mdx
    rendering.mdx
    skills.mdx
    slideshow.mdx
    troubleshooting.mdx
    video-components.mdx
    voice-and-audio.mdx
  help.mdx
  introduction.mdx
  logo/
    dark.svg
    light.svg
    symbol-dark.svg
    symbol-light.svg
  packages/
    aws-lambda.mdx
... 1600 more

Showing a partial view of a very large repo.

More Flows by @heygen-com.

VerifiedPlugin

Content

heygen

AI agent skills for creating avatar videos. Your agent gets a face, a voice, and the ability to send video like a message. Works with Claude Code, OpenClaw, Codex, Cursor, and other AI coding agents.

@heygen-com

View Plugin

FAQ

hyperframes is a Claude Code plugin with 25 hand-picked skills for content work, indexed on Flowy. Install it with the command on its page. It includes captions-overlay, changelog-video, cut-the-curve. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is hyperframes?: Write HTML. Render video. Built for agents.
How do I install hyperframes?: Run these in Claude Code: /plugin marketplace add heygen-com/hyperframes then /plugin install hyperframes@hyperframes. Then prompt normally.
Does hyperframes auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is hyperframes free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Content

Plugin

hyperframes

Write HTML. Render video. Built for agents.

FLOW.md

heygen-com@heygen-com

GitHub

Plugin Signal91/100Strong

maintained100

capable70

documented100

adopted98

Install on Claude Code

> /plugin marketplace add heygen-com/hyperframes
> /plugin install hyperframes@hyperframes

Stats

JavaScript Node React HTML CSS

+7 tags

Bash AWS Git GitHub Anthropic MCP Figma

40,265

Stars

3,834

Forks

Active

Maintenance

TypeScript

Language

Apache-2.0

License

58m ago

Last commit

5mo ago

Created

Repo: heygen-com/hyperframes

What's inside

Skills

Show all 25 skills

Agents

Badges

README

Read on GitHub

Quick Start

With an AI coding agent

Install the HyperFrames skills, then describe the video you want:

npx skills add heygen-com/hyperframes --full-depth

The picker opens with nothing pre-selected — the Core Skills group is all you need: the /hyperframes router installs each creation workflow on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas a non-interactive skills add without --skill installs all 19.

--full-depth does a full clone of the repo's current main. Without it, skills add fetches the skills.sh registry blob, which lags main by hours — you'd get an older copy of a skill. (hyperframes skills update already installs full-depth.)

Try a prompt like:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

Skills

Upload to Codex

Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:

bun run package:codex-plugin

This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.

Router

Skill	Use when
`/hyperframes`	Read first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below.

Creation workflows

Skill	Use when
`/product-launch-video`	Any website — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s).
`/faceless-explainer`	Explaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz).
`/pr-to-video`	A GitHub pull request (PR URL, `owner/repo#N` ref, or "this PR") → changelog / feature-reveal / fix / refactor explainer, read via the `gh` CLI.
`/embedded-captions`	Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed.
`/talking-head-recut`	Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP.
`/motion-graphics`	A short, unnarrated, design-led motion graphic (~under 10s) — kinetic type, stat / chart hit, logo sting, lower-third, animated tweet / headline. MP4 or transparent overlay.
`/music-to-video`	A music track (audio file, video to pull audio from, or one generated from a mood brief) → a beat-synced video — lyric, slideshow, or kinetic promo; music drives pacing.
`/slideshow`	A presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
`/general-video`	Anything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback, and the home of companion mode (co-create with the full toolbox).
`/remotion-to-hyperframes`	Porting an existing Remotion (React) composition's source to HyperFrames HTML. One-way migration, not creation.

Domain skills (loaded on demand)

Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.

Skill	Covers
`/hyperframes-core`	The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules.
`/hyperframes-animation`	All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
`/hyperframes-keyframes`	Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `hyperframes keyframes` diagnostics for rendered motion.
`/hyperframes-creative`	Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
`/media-use`	The media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking.
`/hyperframes-cli`	CLI dev loop — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, plus HeyGen-hosted cloud rendering (`cloud render`) and AWS Lambda rendering (`lambda deploy / render / progress`).
`/hyperframes-registry`	Install and wire registry blocks and components into compositions via `hyperframes add`. Authoring a new block or component to contribute upstream.
`/figma`	Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition.

For visual design handoff workflows, see the Claude Design guide and Open Design guide.

Manually with the CLI

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

Requirements: Node.js 22+, FFmpeg

What You Can Build

Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix.

Product launch videos and feature announcements
PR walkthroughs with animated code diffs, narration, and captions
Data visualizations, chart races, and map animations
Social videos with kinetic captions, overlays, and music
Docs-to-video, PDF-to-video, and site-tour explainers
Reusable motion graphics for automated content pipelines

Frame.md

frame.md — your design system, ready for video.

The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.

Browse and remix them all at hyperframes.dev/design.

How It Works

Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.

HyperFrames Stack

HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.

Piece	Status	What it does
CLI	Available	Scaffold, preview, lint, inspect, and render local video projects
Core / Engine / Producer	Available	Parse compositions, drive headless Chrome, encode video, and mix audio
Catalog	Available	Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects
Agent skills	Available	Teach coding agents the video-production patterns that generic web docs miss
Studio	Available, evolving	Browser surface for previewing and editing compositions
AWS Lambda rendering	Available	Deploy a distributed render stack and drive renders from your laptop or CI
hyperframes.dev	Available	Community playground for previewing, iterating, sharing, and rendering HTML-native video projects
frame.md	Available	Invert your design system for the camera — a DESIGN.md superset an agent can compose video from

Catalog

Install ready-to-use blocks and components:

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

Browse the catalog at hyperframes.heygen.com/catalog.

Why HyperFrames?

HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
No build step: an index.html composition plays as-is and can be previewed directly in the browser.
Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.

HyperFrames vs Remotion

	HyperFrames	Remotion
Authoring	HTML + CSS + seekable animation	React components
Build step	None; `index.html` plays as-is	Bundler required
Agent handoff	Plain HTML files	JSX / React project
Library-clock animations	Seekable, frame-accurate via adapters	Wall-clock animation patterns need care
Distributed rendering	Local and AWS Lambda render paths	Remotion Lambda, mature cloud renderer
License	Apache 2.0	Source-available Remotion License

Read the full comparison in the HyperFrames vs Remotion guide.

Documentation

Full documentation: hyperframes.heygen.com/introduction

Packages

Package	Description
`hyperframes`	CLI for creating, previewing, linting, and rendering compositions
`@hyperframes/core`	Types, parsers, generators, linter, runtime, and frame adapters
`@hyperframes/engine`	Seekable page-to-video capture engine using Puppeteer and FFmpeg
`@hyperframes/producer`	Full rendering pipeline for capture, encode, and audio mix
`@hyperframes/studio`	Browser-based composition editor UI
`@hyperframes/player`	Embeddable `<hyperframes-player>` web component
`@hyperframes/shader-transitions`	WebGL shader transitions for compositions
`@hyperframes/aws-lambda`	AWS Lambda SDK and deployment surface for distributed renders

Community

HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md. Open a PR if your team is using HyperFrames.

Questions and ideas: Discord
Bugs and feature requests: GitHub Issues
User research: Book a casual 30-minute conversation with the HyperFrames team — no preparation or sales pitch
Security reports: SECURITY.md
Contributions: CONTRIBUTING.md

Development Note

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# Then, once per machine
git lfs install

If you only need source files, you can skip LFS content:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

License

Apache 2.0

File tree

1791

heygen-com/hyperframesView on GitHub

.agents/
  skills/
    captions-overlay/
      SKILL.md
    changelog-video/
      assets/
        bg-pattern.mp4
        bgm.mp3
        fonts/
          ABCSolarDisplay-Bold.woff2
          TT_Norms_Pro_Bold.woff2
          TT_Norms_Pro_Medium.woff2
          tt_norms_pro_mono_regular-webfont.woff2
          TT_Norms_Pro_Normal.woff2
      examples/
        master-skeleton.html
        script-tokens.json
      references/
        build-spec.md
        lexicon.json
        script-voice.md
        visualization-registry.md
      scripts/
        align-captions.mjs
      SKILL.md
    cut-the-curve/
      examples/
        gsap-implementation.md
      SKILL.md
    motion-doctrine/
      references/
        seam-gate.md
      scripts/
        seam-gate.mjs
        seam-stamp.mjs
      SKILL.md
    oversized-cursor/
      SKILL.md
    README.md
    seam-craft/
      SKILL.md
.claude/
.claude-plugin/
  marketplace.json
  plugin.json
  settings.json
  skills/
    captions-overlay/
      SKILL.md
    changelog-video/
      assets/
        bg-pattern.mp4
        bgm.mp3
        fonts/
          ABCSolarDisplay-Bold.woff2
          TT_Norms_Pro_Bold.woff2
          TT_Norms_Pro_Medium.woff2
          tt_norms_pro_mono_regular-webfont.woff2
          TT_Norms_Pro_Normal.woff2
      examples/
        master-skeleton.html
        script-tokens.json
      references/
        build-spec.md
        lexicon.json
        script-voice.md
        visualization-registry.md
      scripts/
        align-captions.mjs
      SKILL.md
    cut-the-curve/
      examples/
        gsap-implementation.md
      SKILL.md
    motion-doctrine/
      references/
        seam-gate.md
      scripts/
        seam-gate.mjs
        seam-stamp.mjs
      SKILL.md
    oversized-cursor/
      SKILL.md
    README.md
    seam-craft/
      SKILL.md
.codex/
.codex-plugin/
  plugin.json
  hooks.json
.cursor-plugin/
  plugin.json
.editorconfig
.env.example
.fallowrc.jsonc
.gitattributes
.github/
  actions/
    install-ffmpeg-windows/
      action.yml
    preflight/
      action.yml
    prepare-ffmpeg-bin/
      action.yml
  codeql/
    codeql-config.yml
  ISSUE_TEMPLATE/
    bug.yml
    config.yml
    feature.yml
  pull_request_template.md
  release.yml
  renovate.json
  workflows/
    canary-sunset.yml
    catalog-previews.yml
    ci.yml
    codeql.yml
    docs.yml
    fast-video-validation.yml
    fixtures/
      windows-canary.html
    player-perf.yml
    preview-regression.yml
    publish.yml
    regression.yml
    sync-skills-to-clawhub.yml
    windows-render.yml
.gitignore
.oxfmtrc.json
.oxlintrc.json
.prettierignore
ADOPTERS.md
AGENTS.md
assets/
  claude-code-icon-dark.svg
  claude-code-icon-light.svg
  icon.png
  logo.png
bun.lock
CLAUDE.md
CODE_OF_CONDUCT.md
commitlint.config.js
CONTRIBUTING.md
CREDITS.md
DESIGN.md
Dockerfile.test
docs/
DOCS_GUIDELINES.md
  AGENTS.md
  catalog/
    blocks/
      app-showcase.mdx
      apple-money-count.mdx
      beat-freeze-cut.mdx
      blue-sweater-intro-video.mdx
      camcorder-hud.mdx
      chromatic-radial-split.mdx
      cinematic-zoom.mdx
      code-3d-extrude.mdx
      code-diff.mdx
      code-highlight.mdx
      code-morph.mdx
      code-particle-assemble.mdx
      code-scroll.mdx
      code-shader-dissolve.mdx
      code-snippet-apple-terminal-basic.mdx
      code-snippet-apple-terminal-clear-dark.mdx
      code-snippet-apple-terminal-clear-light.mdx
      code-snippet-apple-terminal-grass.mdx
      code-snippet-apple-terminal-homebrew.mdx
      code-snippet-apple-terminal-man-page.mdx
      code-snippet-apple-terminal-novel.mdx
      code-snippet-apple-terminal-ocean.mdx
      code-snippet-apple-terminal-pro.mdx
      code-snippet-apple-terminal-red-sands.mdx
      code-snippet-apple-terminal-silver-aerogel.mdx
      code-snippet-apple-terminal-solid-colors.mdx
      code-snippet-dark-2026.mdx
      code-snippet-dark-modern.mdx
      code-snippet-dark-plus.mdx
      code-snippet-flight.mdx
      code-snippet-high-contrast-light.mdx
      code-snippet-high-contrast.mdx
      code-snippet-light-2026.mdx
      code-snippet-light-modern.mdx
      code-snippet-light-plus.mdx
      code-snippet-monokai.mdx
      code-snippet-solarized-light.mdx
      code-snippet-visual-studio-dark.mdx
      code-snippet-visual-studio-light.mdx
      code-typing.mdx
      cross-warp-morph.mdx
      data-chart.mdx
      domain-warp-dissolve.mdx
      editorial-flash-overlay.mdx
      flash-through-white.mdx
      flowchart-vertical.mdx
      flowchart.mdx
      freeze-frame-dressing.mdx
      glitch.mdx
      gravitational-lens.mdx
      hw-frame.mdx
      hw-path-text.mdx
      hw-pipeline.mdx
      hw-scribble-transition.mdx
      hw-text-cloud.mdx
      hw-title.mdx
      instagram-follow.mdx
      ios26-liquid-glass.mdx
      light-leak.mdx
      liquid-glass-context-menu.mdx
      liquid-glass-media-controls.mdx
      liquid-glass-notification.mdx
      liquid-glass-widgets.mdx
      logo-outro.mdx
      lower-third-bild.mdx
      lt-accent-underline.mdx
      lt-bold-block.mdx
      lt-clean-bar.mdx
      lt-color-block.mdx
      lt-dark-card.mdx
      lt-kicker-name.mdx
      lt-mask-reveal.mdx
      lt-side-rule.mdx
      lt-soft-pill.mdx
      lt-stack-bars.mdx
      macos-notification.mdx
      macos-tahoe-liquid-glass.mdx
      mk-background.mdx
      mk-callout-highlight.mdx
      mk-clone-wall-transition.mdx
      mk-line-graph.mdx
      mk-placeholder-grid.mdx
      mk-progress-stat.mdx
      mk-specs-list.mdx
      news-ticker.mdx
      north-korea-locked-down.mdx
      nyc-paris-flight.mdx
      organic-light-leak-overlay.mdx
      reddit-post.mdx
      ridged-burn.mdx
      ripple-waves.mdx
      sdf-iris.mdx
      spain-map.mdx
      spotify-card.mdx
      swirl-vortex.mdx
      thermal-distortion.mdx
      tiktok-follow.mdx
      transitions-3d.mdx
      transitions-blur.mdx
      transitions-cover.mdx
      transitions-destruction.mdx
      transitions-dissolve.mdx
      transitions-distortion.mdx
      transitions-grid.mdx
      transitions-light.mdx
      transitions-mechanical.mdx
      transitions-other.mdx
      transitions-push.mdx
      transitions-radial.mdx
      transitions-scale.mdx
      ui-3d-reveal.mdx
      us-map-bubble.mdx
      us-map-flow.mdx
      us-map-hex.mdx
      us-map.mdx
      vfx-iphone-device.mdx
      vfx-liquid-background.mdx
      vfx-liquid-glass.mdx
      vfx-magnetic.mdx
      vfx-portal.mdx
      vfx-shatter.mdx
      vfx-text-cursor.mdx
      vpn-youtube-spot.mdx
      whip-pan.mdx
      world-map.mdx
      x-post.mdx
      yt-comment-card.mdx
      yt-lcd-background.mdx
      yt-logo-intro.mdx
      yt-lower-third.mdx
      yt-prism-title.mdx
      yt-vertical-fill.mdx
    components/
      caption-blend-difference.mdx
      caption-clip-wipe.mdx
      caption-editorial-emphasis.mdx
      caption-emoji-pop.mdx
      caption-glitch-rgb.mdx
      caption-gradient-fill.mdx
      caption-highlight.mdx
      caption-kinetic-slam.mdx
      caption-matrix-decode.mdx
      caption-neon-accent.mdx
      caption-neon-glow.mdx
      caption-parallax-layers.mdx
      caption-particle-burst.mdx
      caption-pill-karaoke.mdx
      caption-texture.mdx
      caption-weight-shift.mdx
      grain-overlay.mdx
      grid-pixelate-wipe.mdx
      hw-arrow.mdx
      hw-boil.mdx
      hw-box-label.mdx
      hw-callout-circle.mdx
      hw-underline.mdx
      mk-emphasis-type.mdx
      mk-usage-arc.mdx
      morph-text.mdx
      motion-blur.mdx
      parallax-unzoom.mdx
      parallax-zoom.mdx
      shimmer-sweep.mdx
      texture-mask-text.mdx
      vignette.mdx
      yt-camera-move.mdx
      yt-circle-pointer.mdx
      yt-feather-highlight.mdx
      yt-screen-warp.mdx
    index.mdx
  changelog.mdx
  community/
    adopters.mdx
  concepts/
    compositions.mdx
    data-attributes.mdx
    determinism.mdx
    frame-adapters.mdx
    index.mdx
    variables.mdx
  contributing/
  contributing.mdx
    canary-rollouts.mdx
    catalog.mdx
    changelog-process.mdx
    release-channels.mdx
    testing-local-changes.mdx
  custom.css
  deploy/
    aws-lambda.mdx
    cloud.mdx
    gcp-cloud-run.mdx
    migrating-to-hyperframes-lambda.mdx
    overview.mdx
    templates-on-lambda.mdx
  developers/
    cli.mdx
    index.mdx
    overview.mdx
  docs.json
  examples.mdx
  favicon.svg
  go-further.mdx
  guides/
    4k-rendering.mdx
    authentication.mdx
    avatar-presenter.mdx
    captions-and-recuts.mdx
    choose-creation-path.mdx
    claude-design-hyperframes.md
    claude-design-send-to-hyperframes.md
    color-grading.mdx
    deploy.mdx
    design-tools.mdx
    export-and-share.mdx
    faceless-explainer.mdx
    feedback.mdx
    figma.mdx
    general-video.mdx
    gsap-animation.mdx
    hdr.mdx
    html-in-canvas.mdx
    hyperframes-vs-remotion.mdx
    mcp.mdx
    media-effects.mdx
    media.mdx
    motion-graphics.mdx
    music-to-video.mdx
    open-design-hyperframes.md
    performance.mdx
    pr-to-video.mdx
    product-launch-video.mdx
    remove-background.mdx
    rendering.mdx
    skills.mdx
    slideshow.mdx
    troubleshooting.mdx
    video-components.mdx
    voice-and-audio.mdx
  help.mdx
  introduction.mdx
  logo/
    dark.svg
    light.svg
    symbol-dark.svg
    symbol-light.svg
  packages/
    aws-lambda.mdx
... 1600 more

Showing a partial view of a very large repo.

More Flows by @heygen-com.

VerifiedPlugin

Content

heygen

AI agent skills for creating avatar videos. Your agent gets a face, a voice, and the ability to send video like a message. Works with Claude Code, OpenClaw, Codex, Cursor, and other AI coding agents.

@heygen-com

View Plugin

FAQ

What is hyperframes?: Write HTML. Render video. Built for agents.
How do I install hyperframes?: Run these in Claude Code: /plugin marketplace add heygen-com/hyperframes then /plugin install hyperframes@hyperframes. Then prompt normally.
Does hyperframes auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is hyperframes free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.