PromptsRush
Prompts

Browse

All PromptsThe full curated libraryPrompts GalleryVisual, Pinterest-style browsingImage PromptsMidjourney, DALL·E & SDXLVideo PromptsRunway, Kling & SoraText & TemplatesChatGPT & Claude system prompts

Discover

CategoriesExplore prompts by topicAI ModelsBest prompts per modelPrompt PacksCommunity, passcode-protectedSubmit a PromptShare with the community

For Creators

Turn prompts into followers

Share passcode-protected prompt packs and grow your audience with Auto DM.

Start sharing
Marketplace

Explore

Shared PromptsPasscode-protected prompt packsAI SkillsNewInstallable Agent SkillsDesign SystemsNewLive themes & design tokens

Contribute

Submit a PromptPublish a prompt packSubmit a SkillShip an Agent SkillSubmit a DesignShare a design system

New · Skills

Teach your AI new tricks

Install ready-made skills for Claude, ChatGPT, Gemini, n8n & more.

Browse skills
Learn

Learning Tracks

Prompt EngineeringWrite prompts that deliverAI SkillsBuild & ship Agent SkillsAI AutomationWorkflows, agents & MCPDesign SystemsOn-brand UI with AI

More

Learning HubAll tracks · 40+ lessonsBlogGuides, news & deep diveseBooksPremium prompt packs & guides

100% Free

Learn AI, the practical way

From fundamentals to advanced across four hands-on tracks — no fluff.

Explore the hub
Blog
LoginSign Up
PromptsRush

The ultimate directory for finding, sharing, and managing production-ready AI prompts, system instructions, and advanced templates.

TwitterGitHubYouTubeInstagramEmail

Platform

  • Home
  • Browse Prompts
  • Marketplace
  • Skills
  • Categories
  • Submit a Skill

Top Categories

  • Image PromptPopular
  • Video Prompts
  • Text Templates

Company

  • Privacy Policy
  • Terms of Service
  • Contact Us

Subscribe on YouTube

New AI prompt & skills tutorials every week.

Subscribe

© 2026 PromptsRush. Crafted with & Passion.

All systems operational
HomeBlogAI Tools
AI Tools

HeyGen Hyperframes Prompts for Editing Videos: 40+ Working Examples

40+ HeyGen Hyperframes editing prompts — captions, music, transitions, layout, audio-reactive motion, and the full slash-command workflow for AI-rendered videos.

P
PromptsRushJune 11, 2026
•19 min read5 views

Advertisement

HeyGen Hyperframes is the most interesting thing HeyGen has shipped this year, and almost nobody is talking about it correctly. It is not a feature inside the HeyGen avatar product — it is a developer-facing skill that turns natural-language prompts into rendered video, using HTML compositions and GSAP timelines, driven through Claude Code, Cursor, Codex, or GitHub Copilot CLI.

In practice that means you can write /hyperframes make the title 2x bigger in your IDE, and an actual MP4 comes out at the other end. No timeline software, no manual keyframing, no After Effects. Just prompts.

This post is the working library of editing prompts we use. 40+ examples across eight categories, every one tested against the official Hyperframes prompting guide, every one a real edit you would make in a real video. No BlogPrompt copy buttons here — just clean, copyable text. Lift any line into your terminal.

Recommended · HeyGenTop Pick

Create AI Avatar Videos in Minutes

Turn text into studio-quality videos with realistic AI avatars and voices in 175+ languages. No camera, no crew, no editing.

Try HeyGen Free

Affiliate link · We may earn a commission

What Hyperframes Actually Is

Quick correction for anyone who has read about Hyperframes as a "scene-based avatar feature." That is not what it is.

Hyperframes is a HeyGen-published skill that registers slash commands inside AI coding tools. You install it once with npx skills add heygen-com/hyperframes, and from then on, every prompt prefixed with /hyperframes routes to the Hyperframes pipeline. The pipeline:

  1. Reads your natural-language ask.
  2. Generates or edits a plain-HTML composition file plus a GSAP timeline.
  3. Optionally runs TTS, transcribes existing audio, or removes backgrounds from inputs.
  4. Renders the composition to MP4 at 1920×1080 / 30fps by default.

It runs in Claude Code, Cursor, Codex, GitHub Copilot CLI, and Claude Design. The CLI itself exposes init, lint, inspect, preview, render, and doctor. There is a companion skill, /website-to-hyperframes, that turns a URL into a finished video in one pass.

Pro tip: Always prefix your prompt with /hyperframes. The official guide is explicit: skip the slash command and the agent guesses at conventions, and you lose the skill context that makes the rest of the prompt actually work.

The Two Starting Patterns

Every Hyperframes session opens with one of two patterns. Pick the one that matches what you are starting from.

Cold start. Describe the video from scratch. Use this when there is no source material — you are generating something new.

/hyperframes Using a clean dark background, create a 10-second product intro with a fade-in title over subtle background music. 16:9, snappy motion, corporate tone.

Warm start. Hand the agent a source — a URL, a GitHub repo, a transcript — and ask it to produce a video from that material. Use this when the video has to be grounded in something specific.

/hyperframes Take a look at this GitHub repo https://github.com/example/project and explain its uses in a 60-second walkthrough video. Storytelling caption tone, medium-energy transitions, 9:16 vertical for social.

After the first render, you stop describing the whole video from scratch. You talk to the agent the way you would talk to a human editor — short, iterative, targeted at the thing you want to change.

The Vocabulary That Powers Good Edits

Hyperframes maps natural-language adjectives to framework settings. Knowing the vocabulary is half the prompt skill. From the official guide:

AxisVocabularyWhat it controls
Motion / easingsmooth, snappy, bouncy, springy, dramatic, dreamyGSAP eases on every animation
Caption tonehype, corporate, tutorial, storytelling, socialTypography + animation pairings
Transitionscalm (blur crossfade), medium (push slide), high (zoom through)Scene-to-scene cuts
Mood-based transitionswarm, cold, playful, dramaticColor and motion treatment
Audio-reactivebass → scale, treble → glow, amplitude → opacity, mids → shapeAnimation tied to audio frequency bands
Marker highlightshighlight sweep, hand-drawn circle, burst lines, scribble, rectangle outlineDrawn-on emphasis effects

When in doubt, use a vocabulary word from the table above instead of a custom description. "Bouncy" is a known mapping; "kind of springy but not too much" is interpreter-dependent.

Category 1 — Cold-Start Scene Creation (Prompts 1–6)

The first prompt of any new video. Aim to specify duration, aspect ratio, mood, and the key elements upfront. The rest you can refine after the first render.

  1. Simple product intro. /hyperframes Create a 10-second product intro with a fade-in title "Acme Pro 3", a thin underline that draws in, and corporate caption tone. Dark background, smooth motion, 1920×1080.
  2. Vertical social hook. /hyperframes Make a 15-second vertical 9:16 hook for a new launch. Hype caption tone with scale-pop on emotional keywords, high-energy transitions, audio-reactive bass → scale on the logo. Use assets/track.mp3 as background music.
  3. Tutorial intro card. /hyperframes Build a 6-second intro card for a tutorial titled "Set up Postgres in 5 minutes." Tutorial caption tone, calm transitions, snappy easing on the title slide-in. Add a lower third at 0:02 with my name "Alex Rivera" and role "Developer Advocate."
  4. Storytelling cold open. /hyperframes Open with a black frame. At 0:01, fade in a single sentence in white: "Two engineers walk into a kitchen at 2am." Storytelling caption tone, dreamy easing. Hold for 4 seconds. Total duration 6 seconds, 16:9.
  5. Data-driven scene. /hyperframes Create a 12-second scene that counts up from 0 to 1,247 over 4 seconds, then holds with the label "support tickets closed this month." Snappy motion on the counter, smooth easing on the label fade-in. Cool mood transition into the next scene.
  6. Talking-head bumper. /hyperframes Generate a 5-second bumper to insert before my talking-head video. Brand color accent, the words "Episode 12" in large type, episode title "Why Latency Wins" in smaller type below. Springy entrance animation, calm exit transition.

Category 2 — Caption Editing (Prompts 7–14)

Captions are the most-edited element of any Hyperframes video. The official guide explicitly recommends iterative caption edits over re-prompting from scratch.

  1. Resize the title. /hyperframes Make the title 2x bigger.
  2. Move overlapping captions. /hyperframes The captions are too small and they overlap the lower third. Move them up and shrink them.
  3. Change caption tone. /hyperframes Switch all captions to hype-style with scale-pop on emotional keywords. Keep the timing identical.
  4. Highlight brand names. /hyperframes Make brand names larger and apply the accent color. Bounce on the first appearance of each brand.
  5. Add a bounce. /hyperframes Add bounce easing to emotional keywords across the captions — words like "shocked", "love", "wait what".
  6. Caption timing fix. /hyperframes The third caption shows up half a second too early. Push it to 0:08.4 and shorten it to 1.2 seconds so it does not collide with the next scene.
  7. Add a hand-drawn circle. /hyperframes At 0:05, add a hand-drawn circle marker highlight around the word "free" in the caption. Hold for 0.8 seconds, then fade out.
  8. Replace caption with two-word style. /hyperframes Convert the captions to TikTok-style — two words per line, large bold typography, current word highlighted in the accent color. Keep the existing timing.

Category 3 — Music & Audio (Prompts 15–20)

Hyperframes uses Kokoro for local TTS (no API key required) and treats audio as a first-class composition input. Audio-reactive animation is one of the strongest features — and one of the most underused.

  1. Swap the background track. /hyperframes Replace the background music with assets/track.mp3. Match the existing volume curve.
  2. Duck for narration. /hyperframes Duck the background music to -18 dB whenever narration is playing, and ramp back up over 0.6 seconds when narration ends.
  3. Add Kokoro narration. /hyperframes Generate narration using Kokoro for the script in assets/script.txt. Use a marketing voice tone. Place the audio file at assets/narration.mp3 and reference it in the composition.
  4. Audio-reactive logo pulse. /hyperframes Make the logo pulse on the bass of the background track. Bass → scale, range 1.0 to 1.08. Smooth easing between beats.
  5. Cut music at a beat. /hyperframes The track has a clear drop at 0:12. Cut the music sharply at 0:11.7 for a 0.3-second silence, then resume on the drop. Snap the next scene transition to land on that drop.
  6. Voice selection by content type. /hyperframes Switch the narration voice to the tutorial-style Kokoro voice. The current voice is too marketing-flavoured for an educational explainer.
HeyGenTop Pick

Create AI Avatar Videos in Minutes

Turn text into studio-quality videos with realistic AI avatars and voices in 175+ languages. No camera, no crew, no editing.

Affiliate link · We may earn a commission

Try HeyGen Free

Category 4 — Transitions & Motion (Prompts 21–26)

The energy curve of a video is largely the transition vocabulary. Use the named levels — calm / medium / high — and the mood words for finer control.

  1. Calm everything down. /hyperframes Switch all transitions to calm — blur crossfade between scenes. Soften easing on entrance animations to smooth.
  2. High-energy hook. /hyperframes Make the first transition high-energy zoom-through. Keep the rest of the transitions medium so the opener pops without being exhausting.
  3. Mood-shift transition. /hyperframes The transition into scene 4 should feel cold. Use a desaturated push slide with a slight blue tint. Hold the color shift for 0.5 seconds before the next caption appears.
  4. Snappy entrance. /hyperframes Snappy entrance animation on every title element across all scenes. Use spring easing with a slight overshoot.
  5. Add a fade-out at the end. /hyperframes Add a fade-out at the end, 1.2 seconds, with the music ducking to silence over the same curve.
  6. Bouncy callout. /hyperframes The callout box at 0:07 should bounce into frame from the right with springy motion. Hold for 2 seconds, then exit with a calm fade. Add a hand-drawn underline beneath the text while it is visible.

Category 5 — Layout, Color & Framing (Prompts 27–31)

  1. Swap to dark mode. /hyperframes Swap to dark mode. Adjust caption colors so contrast stays above 4.5:1. Keep the accent color unchanged.
  2. Reframe to vertical. /hyperframes Reframe the entire composition to 9:16 vertical. Center subjects vertically. Move the lower third to the top-third area so it does not collide with platform UI overlays.
  3. Add a lower third. /hyperframes Add a lower third at 0:03 with my name "Alex Rivera" and title "Developer Advocate". Hold for 4 seconds, exit with a calm slide-out to the left.
  4. Brand color refresh. /hyperframes Update the accent color from #FF6B6B to #6366F1 across all scenes — title underlines, caption highlights, marker effects. Keep all other colors identical.
  5. Safe-margin pass. /hyperframes Audit all text elements for safe margins. Nothing should sit within 64px of any edge at 1080p. Move offenders inward and report the changes you made.

Category 6 — Timing, Length & Sync (Prompts 32–36)

  1. Trim to a target length. /hyperframes Trim the video to exactly 30 seconds. Compress scene 3 (currently 7 seconds) and scene 5 (currently 5 seconds) — both have dead air mid-scene. Keep the opening and closing 5 seconds untouched.
  2. Sync animation to a beat. /hyperframes Move the title bounce to land on the 0:04 downbeat of the background track. Shift the rest of the timeline by the resulting offset.
  3. Stretch scene without re-rendering. /hyperframes Scene 2 feels rushed at 3 seconds. Stretch it to 4.5 seconds. Slow the caption typewriter to match the new duration. Push every subsequent scene by the delta.
  4. Lock a pace. /hyperframes Lock the average scene length to 2.5 seconds across the whole video. Split any scene longer than 4 seconds. Merge any two adjacent scenes that are each under 1.5 seconds.
  5. Add a beat of breathing room. /hyperframes Add a 0.5-second hold between scene 4 and scene 5. Quiet the music slightly through the hold so the next caption lands with impact.

Category 7 — Warm-Start / Source-to-Video (Prompts 37–41)

Warm-start patterns are where Hyperframes is genuinely faster than any other workflow. You hand it source material and get a finished cut.

  1. URL to explainer. /website-to-hyperframes https://example.com/product-launch. Produce a 60-second explainer in storytelling tone. Pull the top three benefits from the page. 16:9, smooth motion, neutral mood.
  2. GitHub repo to walkthrough. /hyperframes Take a look at this GitHub repo https://github.com/example/cli-tool and explain what it does in a 45-second tutorial-style video. Show three code snippets from the README as on-screen text. Calm transitions.
  3. Transcript to highlight reel. /hyperframes Read the transcript at assets/podcast-transcript.txt. Pull the four strongest soundbites under 12 seconds each. Produce a 60-second highlight reel with hype-style captions, audio-reactive treble → glow on the speaker overlay.
  4. Blog post to vertical Short. /hyperframes Convert the blog post at assets/post.md into a 45-second 9:16 vertical Short. Hook in the first 3 seconds. Three key points with snappy transitions. End on a one-line CTA. Social caption tone.
  5. Slack thread to recap video. /hyperframes Read the thread export at assets/launch-thread.json. Build a 30-second internal recap video — names of contributors as on-screen text, the outcome as the closing card. Corporate caption tone, calm motion, dark mode.

Category 8 — Iteration & Polish (Prompts 42–46)

These are the small, surgical prompts you write after the first render to take the video from "rough" to "shippable." Iterate one element at a time — Hyperframes responds better to surgical edits than to full re-specifications.

  1. Just one fix. /hyperframes The exit on scene 3 feels abrupt. Add a 0.4-second fade and hold the final frame for 0.6 seconds before the cut.
  2. Final mix pass. /hyperframes Run a final pass — check caption safe areas, music ducking under narration, accent-color consistency, and no scene under 1.5 seconds. Report what you changed and what you left alone.
  3. Quality bump for delivery. /hyperframes Re-render at high quality preset. Keep 1920×1080 and 30fps — do not jump to 4K or 60fps. Output to /out/final.mp4.
  4. Asset-aware re-render. /hyperframes I updated assets/logo.png. Re-render only the scenes that reference it. Keep the other scene caches intact.
  5. Doctor before render. /hyperframes Run hyperframes doctor first, fix any issues it surfaces, then render to /out/final.mp4. Report the doctor output before re-rendering if it finds anything I should know about.

The Do's That Make Edits Land

From two weeks of running Hyperframes in production plus the official guide, the patterns that consistently produce good edits:

  • Always prefix with /hyperframes (or /website-to-hyperframes). The slash command loads skill context. Skip it and the agent guesses at conventions.
  • Specify duration, aspect ratio, mood, and key elements in the first prompt. All four upfront. Anything you skip becomes a re-render later.
  • After the first render, iterate one element at a time. "Make the title 2x bigger" is a better prompt than re-describing the whole video.
  • Use the vocabulary words. "Snappy", "bouncy", "calm transition", "hype tone" — these map to framework settings deterministically. Custom adjectives do not.
  • Provide explicit file paths. assets/track.mp3 beats "the music file." The agent does not know your filesystem.
  • Use warm-start patterns when you have source. URLs, repos, transcripts, blog posts — feed them in. The output gets richer when grounded in real material.
  • Run hyperframes lint and hyperframes doctor before render. Most broken renders come from a technical-rule violation that lint catches immediately.

The Don'ts That Break Renders

The official guide is explicit about anti-patterns. These are the ones that bite hardest.

  • Do not ask for React or Vue components. Hyperframes compositions are plain HTML by design. Asking for a framework component breaks the render pipeline.
  • Do not request 4K or 60fps casually. Defaults are 1920×1080 / 30fps. Bumping resolution or framerate without a real reason multiplies render time and storage cost.
  • Do not skip the slash command. Without /hyperframes, the model has no skill context.
  • Do not paste long error logs without context. Run hyperframes lint first and paste its output, not the raw stack trace.
  • Do not assume the agent knows your assets. Mention file paths explicitly every time.

And the technical rules — these are enforced by the skill automatically, but understanding them tells you why some prompts fail:

  1. All timelines must register on window.__timelines — the renderer must know about every animation.
  2. Video elements must be muted — audio belongs in separate <audio> elements.
  3. No Math.random() — breaks deterministic rendering across frames.
  4. Timeline construction must be synchronous — no await during GSAP setup.
  5. Timed elements need class="clip" plus data-start, data-duration, and data-track-index.

The guide warns plainly: "Breaking [these technical rules] produces incorrect renders." Best-practice rules like "add entrance animations to every scene" can be overridden — technical rules cannot.

Installing and Setting Up Hyperframes

One-time setup, from a fresh project:

  1. Install the skill: npx skills add heygen-com/hyperframes.
  2. Initialise a project: npx hyperframes init. This creates the composition scaffold, the asset folder, and the registry file.
  3. Verify the install: npx hyperframes doctor. Resolve anything it flags before your first prompt.
  4. Open the project in Claude Code, Cursor, Codex, or GitHub Copilot CLI. The /hyperframes slash command registers automatically.
  5. Try the simplest prompt: /hyperframes Create a 5-second intro with the title "Hello world" on a dark background. 16:9, smooth motion. Render it. If you get a clean MP4, the setup is good.

Companion skill: npx skills add heygen-com/website-to-hyperframes registers /website-to-hyperframes, which handles the URL-to-video pipeline end to end.

Where Hyperframes Fits in a Real Video Stack

Hyperframes is not a replacement for every video tool. It is a sharp specific lane. Where it wins:

  • Templated programmatic videos. 50 videos from a CSV, one composition. This is the lane where Hyperframes obliterates DaVinci, Premiere, and After Effects on time-to-output.
  • Quick promo / launch videos. A 30-second product video from a PRD or a landing page URL, in under 10 minutes of prompting.
  • Caption-heavy social cuts. The caption tone vocabulary plus audio-reactive animation makes Hyperframes a strong fit for short-form social.
  • Internal updates and recap videos. Slack export → recap. Sprint summary → highlight reel. Things that are not worth a manual edit but are worth a moving image.

Where Hyperframes is the wrong tool:

  • Anything with a real human on camera with subtle performance — that is HeyGen's avatar product or a real shoot, not Hyperframes.
  • Documentary-grade cinematic work — Hyperframes is fast and templated, not painterly.
  • Long-form content (over 5 minutes) — composition complexity grows past the iteration loop's comfort zone.

For the avatar lane, our full HeyGen review covers the platform that pairs with Hyperframes. For broader video model comparisons, see Gemini Omni vs Seedance 2.0 vs Kling 3.0 vs Wan 2.7.

A Full Hyperframes Editing Session, Start to Finish

To make the prompt patterns concrete, here is one real session — the prompts in the order we ran them last week to ship a 45-second product update video.

  1. /website-to-hyperframes https://example.com/changelog. 45-second product update video. Storytelling tone. Pull the top three updates. 16:9. Smooth motion.
  2. /hyperframes The opening title is too small. Make it 1.5x bigger and move it down 80px so it does not collide with the top safe margin.
  3. /hyperframes Switch caption tone from storytelling to hype-style with scale-pop on emotional keywords.
  4. /hyperframes Add a hand-drawn circle marker around the word "rebuilt" in scene 2. Hold 0.6 seconds, fade out.
  5. /hyperframes Replace the background music with assets/upbeat-corp.mp3. Duck to -18 dB under narration.
  6. /hyperframes Audio-reactive: bass → scale on the brand mark in the closing card. Range 1.0 to 1.06.
  7. /hyperframes Trim to exactly 45 seconds. Compress scene 3 — there is half a second of dead air at the end of it.
  8. /hyperframes Run hyperframes lint, fix anything it surfaces, then render at high quality to /out/changelog-final.mp4.

End-to-end time: 22 minutes including renders. Equivalent work in After Effects: a half-day, conservatively.

The Verdict

Hyperframes is the closest thing to "video as a programmable artifact" that anyone has shipped. It is not for every video — but in its lane (templated, caption-heavy, source-grounded, fast-turnaround), it is genuinely faster than the manual-editing workflow it replaces. And because the entire video is code, every prompt above composes into the next: the edit you make today is reusable as a template tomorrow.

The 40+ prompts above cover the everyday editing surface — captions, music, transitions, layout, timing, source ingestion, and polish. Run them on your first project for a week, save the variants that worked, and you will have your own internal editing library that beats anything any prompt-pack site can give you.

Recommended · HeyGenTop Pick

Create AI Avatar Videos in Minutes

Turn text into studio-quality videos with realistic AI avatars and voices in 175+ languages. No camera, no crew, no editing.

Try HeyGen Free

Affiliate link · We may earn a commission

Keep Reading

  • HeyGen Review 2026 — the full review of HeyGen's avatar product that pairs with Hyperframes.
  • Best HeyGen Alternatives in 2026 — if HeyGen is not the right fit for your channel.
  • Claude Fable 5 Prompts for Video Creators — the writing-layer prompt library that pairs with Hyperframes for script and SEO.
  • Gemini Omni vs Seedance 2.0 vs Kling 3.0 vs Wan 2.7 — AI video model comparison for the generation layer.
  • How to Create an AI Avatar for YouTube — the full avatar workflow.
  • Best AI UGC Ads Video Platforms in 2026 — for the social-cut and UGC lane.
  • Prompt Library — the full searchable collection.
❓

Frequently Asked Questions

10 questions answered

Hyperframes is a HeyGen-published developer skill that turns natural-language prompts into rendered MP4 video. It runs inside Claude Code, Cursor, Codex, GitHub Copilot CLI, and Claude Design. You install it with npx skills add heygen-com/hyperframes and prefix prompts with /hyperframes. Compositions are plain HTML driven by GSAP timelines, rendered at 1920×1080 / 30fps by default.
No. HeyGen's avatar product generates talking-head videos from a script and an avatar. Hyperframes is a completely separate skill that generates HTML/GSAP-based motion graphics — titles, captions, lower thirds, transitions, audio-reactive animation. The two pair well (avatar for the talking-head footage, Hyperframes for the surrounding motion graphics) but they are different products.
The slash command loads the skill context — the framework rules, the vocabulary mapping, the asset registry. Without it, the AI agent has no idea you are working inside Hyperframes and will guess at conventions. The official guide is explicit: skip the slash command and the agent stops producing valid compositions.
Yes — that is the entire point. After the first render, you talk to the agent the way you would talk to a video editor. “Make the title 2x bigger.” “Add a fade-out at the end.” “The captions overlap the lower third — move them up and shrink them.” The skill keeps the composition state and applies the targeted edit.
A cold start describes the video from scratch — “create a 10-second product intro with a fade-in title.” A warm start hands the agent source material (a URL, a GitHub repo, a transcript, a Markdown file) and asks it to produce a video grounded in that material. Warm starts produce richer, more specific output because the agent has real content to reference instead of inventing it.
The defaults are 1920×1080 resolution and 30 frames per second. The official guide explicitly warns against asking for 4K or 60fps unless you actually need it — bumping either multiplies render time. Quality presets are draft / standard / high. Use draft for iteration and high only for the final delivery render.
Because frame rendering must be deterministic. The renderer evaluates each frame independently and assumes identical inputs produce identical outputs. Math.random() introduces non-determinism, which means frames stop matching between passes and the video gets visual artifacts. Use seeded random helpers if you need pseudo-randomness.
No. The official guide is explicit: compositions are plain HTML. The render pipeline does not know how to handle React or Vue. If you ask the agent for a React component it will either refuse or produce something that does not render. Build motion graphics with HTML and CSS, animate them with GSAP, and let the skill handle the rest.
The skill itself runs locally through the AI coding tool you already have set up (Claude Code, Cursor, Codex, etc.). The local Kokoro TTS does not need an API key. If you are calling external services for assets — stock footage APIs, image generators, etc. — those keep their own keys. Hyperframes itself is configured via the npx hyperframes init flow.
Different lanes. Use the HeyGen avatar product for talking-head videos with a person on camera — explainers, courses, sales videos. Use Hyperframes for motion graphics, captioned social cuts, programmatic series videos, and anything where you want the video itself to be code. The two compose well — avatar for the person, Hyperframes for the bumpers, intros, lower thirds, and B-roll overlays.
Back to Blog

Table of Contents

In this article

  • 1What Hyperframes Actually Is
  • 2The Two Starting Patterns
  • 3The Vocabulary That Powers Good Edits
  • 4Category 1 — Cold-Start Scene Creation (Prompts 1–6)
  • 5Category 2 — Caption Editing (Prompts 7–14)
  • 6Category 3 — Music & Audio (Prompts 15–20)
  • 7Category 4 — Transitions & Motion (Prompts 21–26)
  • 8Category 5 — Layout, Color & Framing (Prompts 27–31)
  • 9Category 6 — Timing, Length & Sync (Prompts 32–36)
  • 10Category 7 — Warm-Start / Source-to-Video (Prompts 37–41)
  • 11Category 8 — Iteration & Polish (Prompts 42–46)
  • 12The Do's That Make Edits Land
  • 13The Don'ts That Break Renders
  • 14Installing and Setting Up Hyperframes
  • 15Where Hyperframes Fits in a Real Video Stack
  • 16A Full Hyperframes Editing Session, Start to Finish
  • 17The Verdict
  • 18Keep Reading

Recent Posts

Claude Opus 5 vs Gemini 3.6 Flash

Jul 25 · 8 min

33+ Best Prompts for Claude Opus 5

Jul 25 · 20 min

40+ Best Prompts for Gemini 3.6 Flash

Jul 25 · 21 min

Kimi K3 vs Fable 5: Detailed Comparison & Benchmarks

Jul 19 · 5 min

11+ Prompts to Redesign Existing Web Pages

Jul 13 · 18 min

Category

AI Tools

Advertisement

You May Also Like

AI Tools

Claude Opus 5 vs Gemini 3.6 Flash

Jul 258 min
AI Tools

33+ Best Prompts for Claude Opus 5

Jul 2520 min
AI Tools

40+ Best Prompts for Gemini 3.6 Flash

Jul 2521 min