Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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.

Bin Liu

8,901 subscribers

43,284 views • 6 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

41 Comments

Peter Yang6 months ago

Is hyper frame part of heygen?

Bin Liu6 months ago

yea lol -

Pato6 months ago

hyperframes. also genuinely curious how complex the HTML output gets when you chain multiple design passes through Claude

Bin Liu6 months ago

here's the hyperframes repo that rendered the video in this post: - simply clone, then run `npx hyperframes preview` in the codebase!

Pato6 months ago

niice, ty! will check it out

X Citizen Journal6 months ago

hyperframes

OneManSaas6 months ago

How's the performance compared to traditional HTML/CSS workflows? Curious if the hyperframes approach adds any overhead or if it's actually faster for iterating on designs.

Bin Liu6 months ago

similar! btw - here's the hyperframes repo that rendered the video in this post: - simply clone, then run `npx hyperframes preview` in the codebase!

YabsssAI6 months ago

you're giving away full codebase access for the launch video just by commenting with the word "hyperframes", what kind of feedback or collaboration are you hoping to get from sharing it so openly

Eren Gündüz 🌟6 months ago

tried it and it burned half of my 5-hour Claude Pro limit for a 19s video. the output is pretty unusable and generic, feels like there’s a long way to go. lmk if you want feedback and the output.

Bin Liu6 months ago

thank you for the great feedback - not my own experience but would really love to get your prompt and your project zip so we can see where can we improve!

Eren Gündüz 🌟6 months ago

happy to see you're open to feedback. I'm sure this will evolve to something great.

CJ256 months ago

@Miguel07Code Hyperframes

Ape6 months ago

Hyperframes

rodrigo6 months ago

hyperframes

Yasir Hussain6 months ago

Hyperframes

Joulse6 months ago

This looks super useful

Louca6 months ago

hyperframes

Dylan Wilcox6 months ago

Hyperframes

Prem 🍁6 months ago

hyperframes

Muslim Musafir | Муслим Мусафир6 months ago

hyperframes

JoJo | AI Builders6 months ago

hyperframes. I’m increasingly feeling that code is everything… Maybe my Mac screen recording tool, built with vibe coding, should also catch up with the Agent era. It’s truly an amazing open-source project — thanks for all your hard work!

Shawn Smith6 months ago

Hyperframes

Omkar6 months ago

Hey Bin, created this…what do you think of this? Just with 1 prompt…

Ashish Choudhary 👨🏻‍💻🧔🏻👨‍👩‍👦6 months ago

Hyperframes

Youssef6 months ago

hyperframes

清华哥6 months ago

hyperframes

Ганаа6 months ago

Hyperframe

Karthik Sivacharan6 months ago

hyperframes

Rui Menoita6 months ago

hyperframes

Oleg VLD6 months ago

hyperframes

Dragu Jhn6 months ago

Hyperframes

Hunter Lapeyre6 months ago

hyperframes

Tyler Durden6 months ago

Hyperframes

Sevan Bomar6 months ago

Hyperframes

Kyle Stimpson6 months ago

hyperframes

Jay E6 months ago

Codebases

Thomas Nabseth6 months ago

hyperframes

J6 months ago

hyperframes

OrganicDNA6 months ago

Hyperframes

Bahia6 months ago

hyperframes

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)

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

3,015,514 views • 6 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.

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,975 views • 4 months 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

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

376,315 views • 5 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.

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

619,991 views • 6 months ago

Introducing the HyperFrames MCP in Claude Design The difference between prototyping a design and shipping it as video Animate in Claude Design, hit share, and hyperframes agent scores it, adds sfx, tightens the motion and renders the MP4 Just send it to HyperFrames. We'll take it from there.

Introducing the HyperFrames MCP in Claude Design The difference between prototyping a design and shipping it as video Animate in Claude Design, hit share, and hyperframes agent scores it, adds sfx, tightens the motion and renders the MP4 Just send it to HyperFrames. We'll take it from there.

HyperFrames

63,426 views • 2 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

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

753,200 views • 4 months ago

your agent builds the edit. you finish it. made this launch film for hyperframes studio… in hyperframes studio: captions, kinetic type, b-roll, music, then every tweak by hand on the timeline. it all lands back in the code. npx hyperframes preview Bin Liu HyperFrames

your agent builds the edit. you finish it. made this launch film for hyperframes studio… in hyperframes studio: captions, kinetic type, b-roll, music, then every tweak by hand on the timeline. it all lands back in the code. npx hyperframes preview Bin Liu HyperFrames

Hanif | AI For Productivity

14,780 views • 23 days ago

You can now edit HyperFrames’ Timeline directly! Drag in preview → video updates When Claude Code struggles with timing, you can give it a hand Experimental, open sourced in @hyperframes/player $ npx hyperframes upgrade RT + Comment "Timeline" for source code (must follow)

You can now edit HyperFrames’ Timeline directly! Drag in preview → video updates When Claude Code struggles with timing, you can give it a hand Experimental, open sourced in @hyperframes/player $ npx hyperframes upgrade RT + Comment "Timeline" for source code (must follow)

HeyGen

730,304 views • 6 months ago

Claude Mythos / Fable 5 solved motion graphics with HTML! this HyperFrames video was completely one-shotted by Mythos btw

Claude Mythos / Fable 5 solved motion graphics with HTML! this HyperFrames video was completely one-shotted by Mythos btw

Miguel Ángel

122,547 views • 4 months ago

HyperFrames, now natively in Claude Design Drop in the skill file, generate motion graphics, download project ask Claude Code or run command: $ npx hyperframes render Design to animation to MP4, all in one flow details in thread

HyperFrames, now natively in Claude Design Drop in the skill file, generate motion graphics, download project ask Claude Code or run command: $ npx hyperframes render Design to animation to MP4, all in one flow details in thread

HeyGen

580,662 views • 6 months 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

"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

70,122 views • 4 months ago

open-sourced new 25 HyperFrames carousel blocks added to the catalog made by our launch king @JakeFromHeyGen! install them all with $ npx hyperframes add carousel

open-sourced new 25 HyperFrames carousel blocks added to the catalog made by our launch king @JakeFromHeyGen! install them all with $ npx hyperframes add carousel

Miguel Ángel

19,839 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 ↓

HeyGen

36,600 views • 4 months ago

GPT-5.6 Sol Ultra Made a video of introducing GPT 5.6 tested with both remotion & hyperframes Remotion / HyperFrames

GPT-5.6 Sol Ultra Made a video of introducing GPT 5.6 tested with both remotion & hyperframes Remotion / HyperFrames

Athrix ☄️

32,309 views • 3 months ago

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

HeyGen

504,355 views • 5 months 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

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

284,467 views • 5 months ago

Claude Motion is here, and HyperFrames Studio works with it from day one. In Claude Motion, choose Send to and pick HyperFrames. Your video opens in Studio, where you can make edits and add music and sound effects. Claude Motion is in beta on Claude Team and Enterprise plans.

Claude Motion is here, and HyperFrames Studio works with it from day one. In Claude Motion, choose Send to and pick HyperFrames. Your video opens in Studio, where you can make edits and add music and sound effects. Claude Motion is in beta on Claude Team and Enterprise plans.

HyperFrames

64,850 views • 20 days ago

This week we're launching new skills for HyperFrames, each built around a workflow Today is pr-to-video Nobody reads pull requests. Now agents can turn them into a short explainer video npx skills add heygen-com/hyperframes New skill launching every day. Follow for more

This week we're launching new skills for HyperFrames, each built around a workflow Today is pr-to-video Nobody reads pull requests. Now agents can turn them into a short explainer video npx skills add heygen-com/hyperframes New skill launching every day. Follow for more

HeyGen

39,040 views • 4 months ago

🚨 Arkadaşlar, video üretimi konusunda çok ciddi bir yenilik geldi. HeyGen, HyperFrames adlı framework’ü tamamen açık kaynak olarak yayınladı. Bu araçla artık Claude Code kullanarak HTML yazmanız yeterli. HTML kodunuz doğrudan kaliteli bir MP4 videoya dönüşüyor. Nasıl çalışıyor? - Claude Code ile HTML + CSS + JavaScript yazıyorsunuz - HyperFrames bu kodu render ediyor ve profesyonel kalitede video üretiyor - Animasyonlar, geçişler, metin efektleri ve hatta karmaşık sahneler bile destekleniyor - Ajan-native tasarlandığı için Claude ile çok uyumlu çalışıyor Kurulum da son derece basit: ```bash npx skills add heygen-com/hyperframes

🚨 Arkadaşlar, video üretimi konusunda çok ciddi bir yenilik geldi. HeyGen, HyperFrames adlı framework’ü tamamen açık kaynak olarak yayınladı. Bu araçla artık Claude Code kullanarak HTML yazmanız yeterli. HTML kodunuz doğrudan kaliteli bir MP4 videoya dönüşüyor. Nasıl çalışıyor? - Claude Code ile HTML + CSS + JavaScript yazıyorsunuz - HyperFrames bu kodu render ediyor ve profesyonel kalitede video üretiyor - Animasyonlar, geçişler, metin efektleri ve hatta karmaşık sahneler bile destekleniyor - Ajan-native tasarlandığı için Claude ile çok uyumlu çalışıyor Kurulum da son derece basit: ```bash npx skills add heygen-com/hyperframes

DeepTechTR 🇹🇷

21,510 views • 6 months ago

Introducing 9 new code animations in HyperFrames Download them all with $ npx hyperframes add code

Introducing 9 new code animations in HyperFrames Download them all with $ npx hyperframes add code

Miguel Ángel

22,272 views • 4 months ago