Loading video...

Video Failed to Load

Go Home

"I've spent $30K on a launch video, now you can make one with code." Here's my new episode with Bin Liu and Jake Moran, where they shared their 5-step playbook for using HyperFrames to make professional launch videos in Codex and Claude Code: 1. Gather video assets and create...

petergyang's profile picture

Peter Yang

232,684 subscribers

68,646 views • 1 month ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

5 steps to create amazing videos like the one below from HTML for free: Install HyperFrames in your favorite coding harness (e.g., Codex or Claude Code). Then... 1. Gather your assets Create a project folder and add screenshots, logos, website captures, reference clips, and a frame md to give Hyperframes the raw material for your video. If you have a design md you can convert it to a frame md here: 📌 Watch Jake Moran cover all 5 steps live: ...or keep reading below 👇
0:54

5 steps to create amazing videos like the one below from HTML for free: Install HyperFrames in your favorite coding harness (e.g., Codex or Claude Code). Then... 1. Gather your assets Create a project folder and add screenshots, logos, website captures, reference clips, and a frame md to give Hyperframes the raw material for your video. If you have a design md you can convert it to a frame md here: 📌 Watch Jake Moran cover all 5 steps live: ...or keep reading below 👇

Peter Yang

24,954 views • 1 month ago

you don't have to spend days and $1000-$10,000 on your launch video!!! 22 hours since launched, and over $26,000 in revenue for SHIP OR DIE with a launch video i made in 1 hour for $3 bucks here is how i made the launch video (with code) and how you can make one like it too:
5:00

you don't have to spend days and $1000-$10,000 on your launch video!!! 22 hours since launched, and over $26,000 in revenue for SHIP OR DIE with a launch video i made in 1 hour for $3 bucks here is how i made the launch video (with code) and how you can make one like it too:

jack friks

121,643 views • 2 months ago

“We’ve got /loop, /goal, and workflows. They all get the agent to run for long periods of time.” Here’s my new episode with Thariq from the Claude Code team, where he shared how he plans, builds, and runs loops with Claude Code: → How /loop, /goal, and workflows work differently → Live demo: Editing launch videos with Claude → Using HTML artifacts to plan and learn Some quotes from Thariq: “We cut Claude Code’s system prompt by 80%. As models have gotten smarter, they need less direction, fewer constraints, and fewer examples.” “Planning is an iterative process of exploring, investigating, and finding out what you don’t know.” “One failure mode I see is that people glaze over AI’s plans. You want to make sure it’s something you read.” I've been wanting to interview Thariq for a long time and I learned so much from this epsiode. 📌 Watch now: Thanks to our sponsors: Riverside: All-in-one AI studio for podcasts and video Wispr Flow: 4x faster than typing with your voice
0:27

“We’ve got /loop, /goal, and workflows. They all get the agent to run for long periods of time.” Here’s my new episode with Thariq from the Claude Code team, where he shared how he plans, builds, and runs loops with Claude Code: → How /loop, /goal, and workflows work differently → Live demo: Editing launch videos with Claude → Using HTML artifacts to plan and learn Some quotes from Thariq: “We cut Claude Code’s system prompt by 80%. As models have gotten smarter, they need less direction, fewer constraints, and fewer examples.” “Planning is an iterative process of exploring, investigating, and finding out what you don’t know.” “One failure mode I see is that people glaze over AI’s plans. You want to make sure it’s something you read.” I've been wanting to interview Thariq for a long time and I learned so much from this epsiode. 📌 Watch now: Thanks to our sponsors: Riverside: All-in-one AI studio for podcasts and video Wispr Flow: 4x faster than typing with your voice

Peter Yang

186,950 views • 22 days ago

Introducing companion mode The difference between ordering a video and directing one Now your agent can pitch five angles, check in with a storyboard, then sketch frames to review You steer every step and only build when approved $ npx hyperframes@latest skills
1:12

Introducing companion mode The difference between ordering a video and directing one Now your agent can pitch five angles, check in with a storyboard, then sketch frames to review You steer every step and only build when approved $ npx hyperframes@latest skills

HeyGen

963,673 views • 19 days ago

Motion graphics used to take me an hour per scene (or more) Now I'm creating them in 3-5 minutes — without After Effects, without Premiere, without writing a single line of code. I'm a former LA filmmaker (still PGA). My entire video stack is now 3 tools: Claude Code + HyperFrames (from HeyGen) + Descript Here's how the workflow runs: 1. Drop my brand style guide into a folder (colors, fonts, components Claude reuses forever) 2. Paste a line from my Descript transcript into Claude Code: "Create a scene for this part of the video" 3. Claude Code reads my brand, generates the HyperFrames scene, renders it to MP4 4. Drag the MP4 into Descript, drop it on the matching line of the transcript 5. Done. 3-5 minutes per scene. The unlock is the brand style guide. Once Claude has your colors, fonts, and reusable components, every scene inherits your look automatically. Bonus — you can take a Claude Design export (.zip), hand it to Claude Code, and it'll convert the HTML into a HyperFrames video you can render and edit. I built a GitHub repo with all the skills pre-loaded. Non-developers can clone it, open Claude Code, and be rendering scenes in under 10 minutes. Full walkthrough (20 min video) below Repo (skills + brand template + music-from-transcript plugin): Bookmark this if you make videos. The brand-style-guide pattern alone will save you hours every week. If you're a creator or operator using AI for content — share this with someone who's still living in After Effects.
23:55

Motion graphics used to take me an hour per scene (or more) Now I'm creating them in 3-5 minutes — without After Effects, without Premiere, without writing a single line of code. I'm a former LA filmmaker (still PGA). My entire video stack is now 3 tools: Claude Code + HyperFrames (from HeyGen) + Descript Here's how the workflow runs: 1. Drop my brand style guide into a folder (colors, fonts, components Claude reuses forever) 2. Paste a line from my Descript transcript into Claude Code: "Create a scene for this part of the video" 3. Claude Code reads my brand, generates the HyperFrames scene, renders it to MP4 4. Drag the MP4 into Descript, drop it on the matching line of the transcript 5. Done. 3-5 minutes per scene. The unlock is the brand style guide. Once Claude has your colors, fonts, and reusable components, every scene inherits your look automatically. Bonus — you can take a Claude Design export (.zip), hand it to Claude Code, and it'll convert the HTML into a HyperFrames video you can render and edit. I built a GitHub repo with all the skills pre-loaded. Non-developers can clone it, open Claude Code, and be rendering scenes in under 10 minutes. Full walkthrough (20 min video) below Repo (skills + brand template + music-from-transcript plugin): Bookmark this if you make videos. The brand-style-guide pattern alone will save you hours every week. If you're a creator or operator using AI for content — share this with someone who's still living in After Effects.

JJ Englert

103,435 views • 3 months ago

Video components will be as popular as UI components soon using the same shadcn registry. That's why we made our own Catalog of components for HyperFrames, where you can build on top of them to make your own videos. Explore, create and share your videos with npx hyperframes publish! Some of the best creations will be featured here!
0:28

Video components will be as popular as UI components soon using the same shadcn registry. That's why we made our own Catalog of components for HyperFrames, where you can build on top of them to make your own videos. Explore, create and share your videos with npx hyperframes publish! Some of the best creations will be featured here!

Miguel Ángel

18,018 views • 3 months ago

You can now make videos like this using HTML. I didn’t believe it at first until the HyperFrames team showed me how they do it directly in Codex and Claude Code. Best of all, the tool is 100% free and open source. But you need to learn the right workflows to make the videos look great - including generating a frame.md, storyboards, and more. 📌 Subscribe to get our full tutorial tomorrow:
0:49

You can now make videos like this using HTML. I didn’t believe it at first until the HyperFrames team showed me how they do it directly in Codex and Claude Code. Best of all, the tool is 100% free and open source. But you need to learn the right workflows to make the videos look great - including generating a frame.md, storyboards, and more. 📌 Subscribe to get our full tutorial tomorrow:

Peter Yang

192,906 views • 1 month ago

"You cannot walk from point A to B inside OpenAI without hearing Codex get mentioned." Here's my new episode with Rohan Varma (Codex PM) on how he uses Codex as his everything app to: → Prototype designs with Image Gen → Turn repeated work into automations → Turn project context into live Codex Sites → Use one Codex thread to manage others Some quotes from Rohan: "[Ask Codex] for something that seems 10x more ridiculous than you ever think it could do. And it probably can do 90% of it." "Over the course of the day, I'm probably doing 3-4x more than I would have without Codex." "For me, every time I do anything I basically think, could Codex have done this?" 📌 Watch now: Thanks to our sponsors: Wispr Flow: 4x faster than typing with your voice Riverside: All-in-one AI studio for podcasts and video
0:29

"You cannot walk from point A to B inside OpenAI without hearing Codex get mentioned." Here's my new episode with Rohan Varma (Codex PM) on how he uses Codex as his everything app to: → Prototype designs with Image Gen → Turn repeated work into automations → Turn project context into live Codex Sites → Use one Codex thread to manage others Some quotes from Rohan: "[Ask Codex] for something that seems 10x more ridiculous than you ever think it could do. And it probably can do 90% of it." "Over the course of the day, I'm probably doing 3-4x more than I would have without Codex." "For me, every time I do anything I basically think, could Codex have done this?" 📌 Watch now: Thanks to our sponsors: Wispr Flow: 4x faster than typing with your voice Riverside: All-in-one AI studio for podcasts and video

Peter Yang

141,221 views • 1 month ago

we often get asked, how to uplevel my HyperFrames video so we open sourced 10 frame.md templates: i gave all 10 of them to Codex and made this showcase video we also have a free tool for creating a frame.md from your design.md 🎨 link in thread
0:38

we often get asked, how to uplevel my HyperFrames video so we open sourced 10 frame.md templates: i gave all 10 of them to Codex and made this showcase video we also have a free tool for creating a frame.md from your design.md 🎨 link in thread

Bin Liu

118,105 views • 2 months ago

Build an open-source AI video studio with this Next.js template using Veo 3 and Imagen 4 in the Gemini API. Create text-to-video, image-to-video, and edit videos in the browser for a specific time range.
0:23

Build an open-source AI video studio with this Next.js template using Veo 3 and Imagen 4 in the Gemini API. Create text-to-video, image-to-video, and edit videos in the browser for a specific time range.

Google AI Developers

41,423 views • 11 months ago

Want to turn a website into a launch video for your brand? This tutorial shows you how We used ollama as example, but the workflow works for any company. Every frame is HTML, CSS, and GSAP, written like a webpage and rendered with HyperFrames Follow the workflow below ↓
0:38

Want to turn a website into a launch video for your brand? This tutorial shows you how We used ollama as example, but the workflow works for any company. Every frame is HTML, CSS, and GSAP, written like a webpage and rendered with HyperFrames Follow the workflow below ↓

HeyGen

36,600 views • 2 months ago

HERMES AGENT CAN CREATE VIDEOS. NOT WITH AN API CALL. IT WRITES THE CODE, RENDERS THE SCENES, AND STITCHES THEM INTO AN MP4. the video attached to this post was generated by Hermes Agent using manim-video skill. three bundled video skills most people skip: 1. MANIM VIDEO 3Blue1Brown-style animated explainers. algorithm visualizations, equation derivations, architecture diagrams, data stories. the pipeline: PLAN → CODE → RENDER → STITCH → AUDIO → REVIEW Hermes writes a plan.md with narrative arc and scene list. then codes a Python script with one class per scene. renders each scene through Manim CE. stitches clips with ffmpeg. adds voiceover if you want it. requirements: → Python 3.10+ → Manim Community Edition v0.20+ → LaTeX (texlive-full) → ffmpeg → no GPU needed draft quality: manim -ql production quality: manim -qh 2. HYPERFRAMES complement to manim-video. use manim for math and algorithms. use hyperframes for everything else: motion graphics, talking-head with captions, product tours, social overlays, shader transitions. HTML is the source of truth. GSAP timeline for animation. CSS for appearance. HyperFrames engine captures frame-by-frame and encodes to MP4 or WebM with ffmpeg. 3. KANBAN VIDEO ORCHESTRATOR this is the advanced play. a multi-agent video production pipeline backed by Hermes Kanban. it creates profiles for each video role. a director profile decomposes the project into kanban tasks. renderer profiles pick up scenes and produce them. the orchestrator decides which skill fits each scene: manim-video for math, hyperframes for motion graphics, p5js for generative art, blender-mcp for 3D, ascii-video for terminal aesthetics. one prompt. multiple agents. one final video. HOW TO USE: enable any of these: /skills search manim /skills search hyperframes /skills search video or ask directly: "create a 60-second explainer video about how the self-improvement loop works in Hermes Agent. use manim style. dark background, amber and teal accents." Hermes writes the plan, codes every scene, renders, stitches, and delivers an MP4. you review and publish. comment MANIM and I'll send you the exact prompt I used to generate the video in this post. full Hermes NIGHT MODE WORKFLOW 👇
1:41

HERMES AGENT CAN CREATE VIDEOS. NOT WITH AN API CALL. IT WRITES THE CODE, RENDERS THE SCENES, AND STITCHES THEM INTO AN MP4. the video attached to this post was generated by Hermes Agent using manim-video skill. three bundled video skills most people skip: 1. MANIM VIDEO 3Blue1Brown-style animated explainers. algorithm visualizations, equation derivations, architecture diagrams, data stories. the pipeline: PLAN → CODE → RENDER → STITCH → AUDIO → REVIEW Hermes writes a plan.md with narrative arc and scene list. then codes a Python script with one class per scene. renders each scene through Manim CE. stitches clips with ffmpeg. adds voiceover if you want it. requirements: → Python 3.10+ → Manim Community Edition v0.20+ → LaTeX (texlive-full) → ffmpeg → no GPU needed draft quality: manim -ql production quality: manim -qh 2. HYPERFRAMES complement to manim-video. use manim for math and algorithms. use hyperframes for everything else: motion graphics, talking-head with captions, product tours, social overlays, shader transitions. HTML is the source of truth. GSAP timeline for animation. CSS for appearance. HyperFrames engine captures frame-by-frame and encodes to MP4 or WebM with ffmpeg. 3. KANBAN VIDEO ORCHESTRATOR this is the advanced play. a multi-agent video production pipeline backed by Hermes Kanban. it creates profiles for each video role. a director profile decomposes the project into kanban tasks. renderer profiles pick up scenes and produce them. the orchestrator decides which skill fits each scene: manim-video for math, hyperframes for motion graphics, p5js for generative art, blender-mcp for 3D, ascii-video for terminal aesthetics. one prompt. multiple agents. one final video. HOW TO USE: enable any of these: /skills search manim /skills search hyperframes /skills search video or ask directly: "create a 60-second explainer video about how the self-improvement loop works in Hermes Agent. use manim style. dark background, amber and teal accents." Hermes writes the plan, codes every scene, renders, stitches, and delivers an MP4. you review and publish. comment MANIM and I'll send you the exact prompt I used to generate the video in this post. full Hermes NIGHT MODE WORKFLOW 👇

YanXbt

32,494 views • 1 month ago

YC F24's Diffusion Studio (Diffusion Studio) is Canva for video editing, enabling everyone to create professional videos using AI in minutes. Congrats on the launch, Matthias Alexander Ruiz and konstantinpaulus!
1:26

YC F24's Diffusion Studio (Diffusion Studio) is Canva for video editing, enabling everyone to create professional videos using AI in minutes. Congrats on the launch, Matthias Alexander Ruiz and konstantinpaulus!

Y Combinator

30,094 views • 1 year ago

Claude Code with Sonnet 4.5 is actually incredible I gave it a prompt for a super complex app, and it one shot the entire thing In this video I walk you through how to use Claude Code to build a prompt library app you can start using immediately (no coding experience required):
19:42

Claude Code with Sonnet 4.5 is actually incredible I gave it a prompt for a super complex app, and it one shot the entire thing In this video I walk you through how to use Claude Code to build a prompt library app you can start using immediately (no coding experience required):

Alex Finn

40,955 views • 10 months ago

Are you making an AI avatar in 2024? Using HeyGen, you can now create your digital twin. Just record 30 seconds of video, type in any script, and you can generate up to four videos with your new avatar for free. The video and voice below are completely fake. Here’s mine 👇
0:23

Are you making an AI avatar in 2024? Using HeyGen, you can now create your digital twin. Just record 30 seconds of video, type in any script, and you can generate up to four videos with your new avatar for free. The video and voice below are completely fake. Here’s mine 👇

Allie K. Miller

37,513 views • 2 years ago

Introducing iMessage video ads in Claude We taught Claude to make iMessage video ads in one shot with a single skill. These iMessage ads are absolutely killing it on Meta right now. The skill teaches Claude to make a full video ad in one shot with iPhone frame, SFX, music, and end card. And it's just HTML. It doesn't use any video generation models, so it's cheap! Comment Goose below and I'll send you the skill.
0:26

Introducing iMessage video ads in Claude We taught Claude to make iMessage video ads in one shot with a single skill. These iMessage ads are absolutely killing it on Meta right now. The skill teaches Claude to make a full video ad in one shot with iPhone frame, SFX, music, and end card. And it's just HTML. It doesn't use any video generation models, so it's cheap! Comment Goose below and I'll send you the skill.

Shiv

241,541 views • 1 month ago

You can create seamless, infinite-length videos with Grok 4 Imagine by screenshotting the last frame of a video and using it to generate another video.
0:40

You can create seamless, infinite-length videos with Grok 4 Imagine by screenshotting the last frame of a video and using it to generate another video.

tetsuo

4,455,506 views • 1 year ago

Claude Code Can Now Watch ANY Video Here's how to give Claude the ability to watch & analyze any video. 0:00 - Claude Code Can Now Watch Any Video 0:21 - Demo: Analyzing a Grüns UGC Ad 1:32 - Inside the Video Analyzer Skill Output 2:53 - Why Gemini API 3:41 - How to Install the Skill in Claude Code 5:11 - Demo: TikTok Self-Tanner Ad Analysis 7:14 - From Analysis to Hook Variations for Your Brand
8:55

Claude Code Can Now Watch ANY Video Here's how to give Claude the ability to watch & analyze any video. 0:00 - Claude Code Can Now Watch Any Video 0:21 - Demo: Analyzing a Grüns UGC Ad 1:32 - Inside the Video Analyzer Skill Output 2:53 - Why Gemini API 3:41 - How to Install the Skill in Claude Code 5:11 - Demo: TikTok Self-Tanner Ad Analysis 7:14 - From Analysis to Hook Variations for Your Brand

Mike Futia

25,178 views • 3 months ago

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams
0:48

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 views • 4 months ago

ohhh my... Claude Code for Video Animations is insane. In 1 prompt you can create animated videos with Claude Code... w/ the new Remotion skill. And you can do this in the browser because uses Claude Code as the default agent. (Full prompt below 👇)
1:00

ohhh my... Claude Code for Video Animations is insane. In 1 prompt you can create animated videos with Claude Code... w/ the new Remotion skill. And you can do this in the browser because uses Claude Code as the default agent. (Full prompt below 👇)

The Agenteer

47,564 views • 6 months ago