Create Professional Animated Videos with Claude Code Using HyperFrames

What HyperFrames does

HyperFrames is an open-source video rendering framework built by HeyGen. It lets you generate animated video content programmatically — by describing what you want rather than editing a timeline.

Once installed as a skill in Claude Code, you can generate product demos, social content, animated infographics, data visualizations, and portfolio reels using plain English prompts. The framework handles transitions, text animations, timing, and rendering.

For business owners and content creators, this means professional video output without video editing software or design skills.

How to install HyperFrames in Claude Code

HyperFrames installs as a skill using the npx skills command. Run this in your terminal once and the /hyperframes command becomes available inside any Claude Code or Cursor session.

bashCopy
npx skills add heygen-com/hyperframes

Setting it up in Claude Code

Once HyperFrames is installed, paste this prompt into Claude Code to verify the setup and generate your first test video.

promptCopy
I've just installed the HyperFrames skill using: npx skills add heygen-com/hyperframes

Please:
1. Confirm the /hyperframes skill is active and accessible
2. Check that all dependencies are installed correctly
3. Generate a simple 5-second test video: white background, my name fades in centered, then fades out
4. Tell me where the output file is saved and how to preview it
5. If anything isn't working, diagnose the issue and fix it

Setting it up in Codex

The setup in Codex follows the same process — install the skill via npx, then use this prompt to verify and run a test.

promptCopy
I've installed the HyperFrames skill via: npx skills add heygen-com/hyperframes

Verify the install is working, then create a 5-second test video with a clean white background and centered animated text. Show me the output path and confirm the render completed without errors.

Starter prompts by content type

Use any of these with /hyperframes in Claude Code. Swap the bracketed placeholders for your actual content.

• Product demo: Using /hyperframes, create a 15-second product intro — fade in the app name, show 3 key features as animated text cards with slide-up transitions, end with a CTA screen. Clean minimal style.
• App walkthrough: Using /hyperframes, create a 10-second app walkthrough with a phone mockup in the center, screen transitions that swipe left between 3 screens, and a subtle background pulse animation.
• Social hook video: Make a 9:16 TikTok-style hook video about [your topic] using /hyperframes, with bouncy captions synced to a TTS narration.
• Instagram carousel video: Using /hyperframes, create a 12-second carousel-style video — 4 slides with bold headlines that scale in, 3-second hold on each, smooth crossfade between slides, dark background with white text.
• Animated infographic: Using /hyperframes, create a 20-second animated infographic comparing [A] vs [B] — start with a split screen, animate stats counting up on each side, end with a winner reveal.
• Data visualization: Turn this CSV into an animated bar chart race using /hyperframes. Bold colors, labeled bars, running counter in the corner.
• Portfolio reel: Using /hyperframes, create a 30-second portfolio reel — fade in my name and title, cycle through 5 project images with a Ken Burns zoom effect, end with a contact CTA.
• PDF to pitch video: Summarize the attached PDF into a 45-second pitch video using /hyperframes. Key stats as animated text overlays with a professional blue and white color scheme.

Use cases for business owners

HyperFrames is most useful for content types that previously required a video editor or motion designer. It doesn't replace high-production creative work, but it covers the repeatable, systematic video needs that come up every week.

• Product and feature announcements for social media
• Animated versions of Instagram carousels for Reels and TikTok
• Client-facing report summaries turned into 60-second video briefs
• Proposal and pitch decks converted into narrated video walkthroughs
• Data visualizations for weekly business metrics

Frequently asked questions

• Is HyperFrames free to use? HyperFrames is open source. Check the HeyGen GitHub repository for current licensing details and any usage limits on rendering.
• Does it work with Cursor as well as Claude Code? Yes. The npx skills install command works in any AI coding agent that supports the skills protocol — Claude Code, Cursor, and compatible editors.
• What video formats does it output? HyperFrames outputs standard video files. Check the docs at github.com/heygen-com/hyperframes for supported output formats and resolution options.

Demo prompt 1: Shape Morph Ring Animation

This is a production-level prompt that generates a seamless looping motion graphic — a ring of 8 shapes that morph through 8 geometric forms with GSAP. Paste it directly into Claude Code with /hyperframes active.

promptCopy
Using /hyperframes, create a 5-second seamless looping video (1080x1920, 30fps) of a shape-morphing ring animation centered on screen. Background is a soft mint green (#B8E6C8). The shapes are a deep forest green (#1B4332).

Setup: 8 identical shapes are arranged in a circle around the center point, evenly spaced at 45° intervals. Each shape is positioned on the ring at a consistent radius from center. The entire ring rotates slowly and continuously clockwise (one full rotation takes ~10 seconds, so across the 5-second loop it completes a half turn). Each individual shape also rotates on its own axis, always facing tangentially along the ring.

The morph sequence plays continuously across the 5 seconds. Shapes transition smoothly through these geometric forms:

Phase 1 (0s–0.6s) — Diamonds/Rosette: 8 shapes as a mix of squares and 45°-rotated diamonds, edges nearly touching, forming an 8-pointed star cutout in the negative space at center. Alternating shapes rotated 45° relative to neighbors.
Phase 2 (0.6s–1.2s) — Organic Blobs: corners round dramatically, shapes become soft organic blobs with high border-radius, overlapping slightly to create a scalloped flower ring.
Phase 3 (1.2s–1.8s) — Teardrops/Petals: shapes elongate into teardrop forms, pointed end facing center, round end facing outward. Arranged in a pinwheel — each petal tilted slightly clockwise, creating a spinning flower/windmill pattern.
Phase 4 (1.8s–2.5s) — Leaves: shapes shrink slightly into leaf/marquise shapes (pointed at both ends). Ring radius expands so there are visible gaps between each leaf.
Phase 5 (2.5s–3.2s) — Semicircles: shapes morph into half-circles, flat edge facing inward, round edge facing outward. Gear-like ring pattern. Ring radius contracts slightly.
Phase 6 (3.2s–3.8s) — Rounded Triangles: shapes become guitar-pick/rounded-triangle forms, still rotating individually, creating a turbine-like pattern.
Phase 7 (3.8s–4.3s) — Squares: shapes grow into larger rounded squares, spread out on a wider ring radius. Each square slightly rotated on its own axis, creating a loose octagonal arrangement. A faint thin circular guide line may be visible behind the shapes.
Phase 8 (4.3s–5.0s) — Arrows: shapes morph into arrow/chevron shapes pointing inward toward center, tightly packed, forming a starburst/snowflake pattern. This transitions seamlessly back to Phase 1 for the loop.

Key motion principles:
- All shape morphs use smooth easing (power2.inOut) — no hard cuts between forms
- Ring rotation is constant and linear for a hypnotic feel
- Individual shape rotation is slightly faster than ring rotation
- Ring radius subtly breathes — expanding during looser arrangements (leaves, squares) and contracting during tighter ones (rosette, arrows)
- The morph animates border-radius, scale, aspect ratio, and rotation simultaneously

Implementation: Each of the 8 shapes can be a single div with CSS transforms (translate for ring position, rotate for individual angle) and animated border-radius/width/height/clip-path for shape morphing. Use GSAP timeline with morphSVG or clip-path interpolation.

Export as MP4 for Instagram Reel.

Demo prompt 2: Infinite Horizontal Carousel

This generates a seamlessly looping Instagram post carousel inside phone-shaped frames with real scrolling physics. Replace the placeholder colors with your actual thumbnail images.

promptCopy
Using /hyperframes, create a 5-second seamless looping video (1080x1080, 30fps) of an infinite horizontal carousel showcasing Instagram post thumbnails inside phone-shaped frames.

Background: Soft warm off-white (#F0EDE8), flat, no texture.

Card structure: 3 phone-shaped cards visible at all times, arranged horizontally across the center of the frame. Each card is a tall rounded rectangle (aspect ratio ~9:16, roughly 320px wide × 570px tall at base scale) with large rounded corners (24px radius). Each card displays one of the provided Instagram thumbnail images as its full-bleed background (object-fit: cover).

Card hierarchy:
- Center card (hero): scaled up slightly (scale: 1.05), vertically centered, subtle phone notch detail (~60px wide × 6px tall, dark semi-transparent) near the top edge inside the card, faint drop shadow (0 8px 32px rgba(0,0,0,0.12))
- Side cards (left and right): slightly smaller (scale: 0.95), shifted down ~8px from center, no notch detail, slightly lower opacity (0.9). Partially cropped by frame edges — about 30–40% of each side card clipped off-screen.
- Gap between cards: ~24px spacing

Animation — constant horizontal scroll:
All cards translate continuously to the left at a constant linear speed (no easing). Speed calibrated so one full card-width passes every ~1.7 seconds — across the 5-second loop, all thumbnails cycle through the center position and the final frame matches the first frame exactly. As a card exits the left edge, it reappears on the right edge. Duplicate the card set so cards always enter from the right.

The scale, opacity, shadow, and notch of each card animate smoothly as it transitions between side and center positions — scaling up as it approaches center, scaling back down as it leaves. Use smooth power2.inOut ease for scale/opacity transitions tied to X position.

Thumbnail placeholders: card 1 = coral #FF6B6B, card 2 = sky blue #4ECDC4, card 3 = warm yellow #FFE66D, card 4 = lavender #A8A4CE.

Mood: Clean, professional, satisfying — like a polished portfolio presentation or app store feature carousel. No text overlays, no UI chrome beyond the phone notch. No voiceover.

Export as MP4 for Instagram Reel.

Frequently asked questions

Is HyperFrames free to use? HyperFrames is open source under the Apache 2.0 license. The skill itself is free. Rendering runs locally via headless Chrome and FFmpeg, so there are no per-render costs.

Does it work with Cursor as well as Claude Code? Yes. The npx skills install command works in any AI coding agent that supports the skills protocol — Claude Code, Cursor, and compatible editors.

How detailed do the prompts need to be? The starter prompts are minimal — Claude and HyperFrames fill in most decisions automatically. The two demo prompts above show what's possible when you specify exact colors, dimensions, timing, and animation physics. Start simple and add detail iteratively.