Loading video...

Video Failed to Load

Go Home

making websites w Claude Design? well we built hyperframes/website-to-hyperframes skill cuz websites are all just HTML + CSS + JS! and ofc, this launch video also made with hyperframes. comment "hyperframes" - i'll send you full codebase access for this video.

liu8in's profile picture

Bin Liu

5,915 subscribers

43,053 views • 3 months 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

We built our launch video in Claude Code using HyperFrames. Now it's yours. Open source, agent-native framework. HTML to MP4. $ npx skills add heygen-com/hyperframes RT + Comment "HyperFrames" to get the full source code of this launch video (must follow)
0:49

We built our launch video in Claude Code using HyperFrames. Now it's yours. Open source, agent-native framework. HTML to MP4. $ npx skills add heygen-com/hyperframes RT + Comment "HyperFrames" to get the full source code of this launch video (must follow)

HeyGen

2,981,841 views • 3 months ago

partnering with Claude - we want to allow your work to speak for themselves we tuned the HyperFrames MCP agent to specialize at making explainer videos documents get skimmed, video gets across. should we open source this launch video? made with hyperframes ofc.
0:54

partnering with Claude - we want to allow your work to speak for themselves we tuned the HyperFrames MCP agent to specialize at making explainer videos documents get skimmed, video gets across. should we open source this launch video? made with hyperframes ofc.

Bin Liu

49,607 views • 1 month ago

Your Hermes Agent can now build full videos with the official HyperFrames skill by HeyGen HyperFrames videos are HTML-native, so your agent has total control over the final output Video made entirely by Hermes using the HyperFrames skill
0:41

Your Hermes Agent can now build full videos with the official HyperFrames skill by HeyGen HyperFrames videos are HTML-native, so your agent has total control over the final output Video made entirely by Hermes using the HyperFrames skill

Nous Research

373,588 views • 2 months ago

alright - verdict is in - Motion Design is solved made with HyperFrames + Claude Design btw - HyperFrames is open source, star it on github and I'll send tutorial on how i made this with 2 prompts.
0:24

alright - verdict is in - Motion Design is solved made with HyperFrames + Claude Design btw - HyperFrames is open source, star it on github and I'll send tutorial on how i made this with 2 prompts.

Bin Liu

616,925 views • 3 months ago

Hyperframes is now an official Claude connector LLM answers are often dense pages of text that go unread we partnered with anthropic to fix that, HyperFrames runs as an mcp where you work docs get skimmed. video gets understood proof: this video was made with Hyperframes
0:54

Hyperframes is now an official Claude connector LLM answers are often dense pages of text that go unread we partnered with anthropic to fix that, HyperFrames runs as an mcp where you work docs get skimmed. video gets understood proof: this video was made with Hyperframes

HeyGen

751,606 views • 1 month ago

"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 a frame.md 2. Create a storyboard.md with the scenes 3. Pull animations from the HyperFrames repo 4. Generate and review static frames 5. Build the video with HyperFrames Studio You can also start simple by using the built-in /website-to-video skill to one shot a launch video from any URL. HyperFrames is 100% free and I love how it democratizes video creation for everyone. 📌 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:43

"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 a frame.md 2. Create a storyboard.md with the scenes 3. Pull animations from the HyperFrames repo 4. Generate and review static frames 5. Build the video with HyperFrames Studio You can also start simple by using the built-in /website-to-video skill to one shot a launch video from any URL. HyperFrames is 100% free and I love how it democratizes video creation for everyone. 📌 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

68,646 views • 1 month 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

35,896 views • 1 month ago

Creating with HyperFrames just got faster Drag elements in the studio to fix placement instead of prompting We also built the full component catalog right into the studio. Browse and add $ npx hyperframes@latest preview Follow @hyperframes_ for updates
0:36

Creating with HyperFrames just got faster Drag elements in the studio to fix placement instead of prompting We also built the full component catalog right into the studio. Browse and add $ npx hyperframes@latest preview Follow @hyperframes_ for updates

HeyGen

283,084 views • 2 months ago

Marketing Skills v1.9.0 is out. What shipped: 🆕 /image — AI image generation for marketing. Gemini, Flux, Ideogram, DALL-E, Midjourney. Blog heroes, social graphics, product mockups, and optimization workflows. 🆕 /video — AI video production. Hyperframes & Remotion pipelines, HeyGen & Synthesia avatars, Veo, Runway, Kling, Pika generation. Editing, repurposing, and distribution. Enhanced skills: • /social-content — short-form video section (TikTok, Reels, Shorts frameworks with hooks and scripting) • HeyGen integration — API setup, MCP server, avatar workflows • Hyperframes integration — HTML/CSS programmatic video rendering 📹 This launch video was made with Hyperframes! Also: plugin marketplace fix, phishing URL removal. Now shipping 40 skills and 52 tool integrations. Free, open source. npx skills add coreyhaines31/marketingskills
0:30

Marketing Skills v1.9.0 is out. What shipped: 🆕 /image — AI image generation for marketing. Gemini, Flux, Ideogram, DALL-E, Midjourney. Blog heroes, social graphics, product mockups, and optimization workflows. 🆕 /video — AI video production. Hyperframes & Remotion pipelines, HeyGen & Synthesia avatars, Veo, Runway, Kling, Pika generation. Editing, repurposing, and distribution. Enhanced skills: • /social-content — short-form video section (TikTok, Reels, Shorts frameworks with hooks and scripting) • HeyGen integration — API setup, MCP server, avatar workflows • Hyperframes integration — HTML/CSS programmatic video rendering 📹 This launch video was made with Hyperframes! Also: plugin marketplace fix, phishing URL removal. Now shipping 40 skills and 52 tool integrations. Free, open source. npx skills add coreyhaines31/marketingskills

Corey Haines

82,208 views • 2 months ago

Claude Fable 5 made this entire video by itself. I gave it a /goal prompt, went to the gym, and came back to this. Even the sound effects. Shoutout HyperFrames
3:17

Claude Fable 5 made this entire video by itself. I gave it a /goal prompt, went to the gym, and came back to this. Even the sound effects. Shoutout HyperFrames

Nate Herk

915,313 views • 1 month ago

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,871 views • 1 month 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 • 2 months 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 • 1 month ago

We made AI Engineer World Fair's official opening video with HyperFrames. And the team will be there live, so find us at our booth, and stick around for James Russo and Bin Liu's talk. See you there!
1:08

We made AI Engineer World Fair's official opening video with HyperFrames. And the team will be there live, so find us at our booth, and stick around for James Russo and Bin Liu's talk. See you there!

HeyGen

19,364 views • 24 days ago

Editing video used to mean timelines, keyframes, and constant back and forth HyperFrames removes that You write the video in HTML, preview it instantly, and render it locally • A URL becomes a video • A PDF becomes a walkthrough • Footage becomes something branded This is a different way to make video
2:10

Editing video used to mean timelines, keyframes, and constant back and forth HyperFrames removes that You write the video in HTML, preview it instantly, and render it locally • A URL becomes a video • A PDF becomes a walkthrough • Footage becomes something branded This is a different way to make video

HeyGen

29,002 views • 2 months ago

For making agentic videos - I did a deep dive into HyperFrames vs. Remotion using /last30days. Of course I had to make a video to go with the article! Take a look at both products. Which are you using?
1:00

For making agentic videos - I did a deep dive into HyperFrames vs. Remotion using /last30days. Of course I had to make a video to go with the article! Take a look at both products. Which are you using?

Matt Van Horn

29,852 views • 1 month 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

Seedream 5 is a storyteller's best friend! This scene was made ENTIRELY in Claude Code using the fal GenMedia CLI to generate the images, sound effects, and music. The main edit was done in Claude Code with the help of HyperFrames. Watch "Lord of Dreams" and the full workflow tutorial on YouTube:
1:10

Seedream 5 is a storyteller's best friend! This scene was made ENTIRELY in Claude Code using the fal GenMedia CLI to generate the images, sound effects, and music. The main edit was done in Claude Code with the help of HyperFrames. Watch "Lord of Dreams" and the full workflow tutorial on YouTube:

fal

29,217 views • 9 days 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

237,817 views • 14 days ago

our Claude Code agent used Omni, Seedance and HyperFrames to recreate this Google ad "re-imagining how HeyGen saved ~847 years of work for the multi-lingo Pyramid construction crew" pretty expensive video tho, almost costed us $100 worth of tokens, worth it?
1:46

our Claude Code agent used Omni, Seedance and HyperFrames to recreate this Google ad "re-imagining how HeyGen saved ~847 years of work for the multi-lingo Pyramid construction crew" pretty expensive video tho, almost costed us $100 worth of tokens, worth it?

Bin Liu

11,036 views • 19 days ago