Jake Moran@jake11moran
How I make launch videos with AI
How I make launch videos with AI
- post
- Saved
Written by AI
- TLDR
- Jake Moran turns product context into story angles, approved still-frame storyboards, then reusable HTML, CSS, and JavaScript launch-video scenes with HyperFrames.
- Best for
- Teams making launch videos with coding agents
- The tip
- Approve a contact-sheet storyboard before animation, and keep every on-screen product detail grounded in real UI.
- What you need
- Product context
- Real product screenshots or Figma frames
- A reference video if available
- Claude Code
- HyperFrames
- The prompt
Propose five story angles from this context, then turn the selected angle into a scene-by-scene storyboard.
our prompt- Start here
- Dump the launch context and source material
- Choose one of five story angles
- Approve one still frame per scene before animation
postThe source
Jake Moran@jake11moranMedia saved
- Highlights
Then I ask the agent to build one still frame per scene and lay them out in a grid - a contact sheet, basically a page of thumbnails, one for each row of the table.
Approve the visual sequence before spending time on motion.
The rule I push hardest: everything on screen is real UI. Anyone who uses the product knows what it looks like, and an invented button breaks it for all of them.
Real product details make the video credible to existing users.
A HyperFrames video is a folder of HTML files, so once a scene works, you can reuse it in the next video.
Working scenes become reusable launch-video templates.
- Excerpt
I've generated 20M+ views from videos made using HyperFrames. Here's how I start every launch video project. dump context and ideas, storyboard, animate. So what is HyperFrames? HyperFrames is an open source framework that turns HTML into video.
From x.com