Make motion videos with Claude Code and HyperFrames instead of Remotion
He describes a stack with no React and no Remotion team license: Claude Code writes videos as plain HTML and CSS, HyperFrames by HeyGen renders them and GSAP animates them.
Source
@ilaavl on X · 2026-10-19
Written in our own words. Credit to the original author. Link checked 2026-10-20.
What they did
He describes a stack with no React and no Remotion team license: Claude Code writes videos as plain HTML and CSS, HyperFrames by HeyGen renders them and GSAP animates them.
Result (as claimed)
Shared as a working workflow with the steps in the thread.
Tools they used
Cost: Claude Code: from $17/mo.
Set it up
Collect your inputs
List what goes in (raw footage, script, topic list or audio) and the exact output you want, for example 5 vertical clips under 45 seconds. Put inputs in one folder.
Set up the tools
Open Claude Code, HyperFrames, GSAP. Connect accounts only where needed and note any per-minute or per-credit limits on the free plan before you start.
Run one piece end to end
Make a single output first. Check pacing, captions, voice and framing by watching it on a phone.
Turn it into a repeatable recipe
Save the prompts and settings that worked as a template so the next run takes minutes, then batch.
Review before you post
Watch every output before publishing. Check rights for music, likeness and footage, and label AI content where the platform requires it.
Copy the full setup prompt
Paste into your agent and it will walk you through the setup, asking before anything that sends, posts or spends.
You are helping me set up this AI use case end to end in Claude Code. Goal: Make motion videos with Claude Code and HyperFrames instead of Remotion What the original author did: He describes a stack with no React and no Remotion team license: Claude Code writes videos as plain HTML and CSS, HyperFrames by HeyGen renders them and GSAP animates them. Reported result (as claimed by the author): Shared as a working workflow with the steps in the thread. Source: https://x.com/ilaavl/status/2112299305981616176 Tools they used: Claude Code, HyperFrames, GSAP Category: Creators & video Please: 1. Ask me 3 short questions about my situation (accounts I have, budget, what I want the output to look like). 2. Propose a step-by-step plan using these tools or cheaper alternatives, with the time and cost of each step. Use official pricing pages; say "check pricing" if unsure. 3. Then do the setup with me one step at a time, waiting for my OK before anything that sends messages, posts publicly, spends money or deletes data. 4. Finish with a checklist to run it again next time.
You are helping me set up this AI use case end to end in Codex. Goal: Make motion videos with Claude Code and HyperFrames instead of Remotion What the original author did: He describes a stack with no React and no Remotion team license: Claude Code writes videos as plain HTML and CSS, HyperFrames by HeyGen renders them and GSAP animates them. Reported result (as claimed by the author): Shared as a working workflow with the steps in the thread. Source: https://x.com/ilaavl/status/2112299305981616176 Tools they used: Claude Code, HyperFrames, GSAP Category: Creators & video Please: 1. Ask me 3 short questions about my situation (accounts I have, budget, what I want the output to look like). 2. Propose a step-by-step plan using these tools or cheaper alternatives, with the time and cost of each step. Use official pricing pages; say "check pricing" if unsure. 3. Then do the setup with me one step at a time, waiting for my OK before anything that sends messages, posts publicly, spends money or deletes data. 4. Finish with a checklist to run it again next time.
You are helping me set up this AI use case end to end in Grok Bot. Goal: Make motion videos with Claude Code and HyperFrames instead of Remotion What the original author did: He describes a stack with no React and no Remotion team license: Claude Code writes videos as plain HTML and CSS, HyperFrames by HeyGen renders them and GSAP animates them. Reported result (as claimed by the author): Shared as a working workflow with the steps in the thread. Source: https://x.com/ilaavl/status/2112299305981616176 Tools they used: Claude Code, HyperFrames, GSAP Category: Creators & video Please: 1. Ask me 3 short questions about my situation (accounts I have, budget, what I want the output to look like). 2. Propose a step-by-step plan using these tools or cheaper alternatives, with the time and cost of each step. Use official pricing pages; say "check pricing" if unsure. 3. Then do the setup with me one step at a time, waiting for my OK before anything that sends messages, posts publicly, spends money or deletes data. 4. Finish with a checklist to run it again next time.
The Daily 5
Get five new use cases tomorrow morning
Free. Real sources. Unsubscribe any time.
Guides for this use case
How to edit videos with Claude Code and Codex · How to vibe code an app with Claude Code · How to make faceless YouTube videos with AI · How to automate work with n8n and AI
Related use cases
Make editable motion graphics from HTML with Claude Code
Claude Code plus HyperFrames turns code into editable motion graphics, so a video can start with HTML instead of a timeline. Setup commands and a starter prompt shared.
Generate videos with code using Claude Code and Remotion
Built an automated video generation pipeline with Claude Code and Remotion.
Make an animated short where every frame is code
FRED Episode 1 is an animated short about a butler, a cat that will not eat and an errand at the end of a pier. Every frame is code: three.js sets and cut-out puppets in HyperFrames, built with Claude Code, with MOSS-TTS voices.
Turn sales training into narrated video lessons with Claude Code and HyperFrames
Instead of slides with a voiceover, he wrote a prompt that makes a narrated lesson with a role-play call, a weak and a strong reply, a recap and a quiz. Claude Code writes it and the open-source HyperFrames renders it.