Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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... show more

Peter Yang

284,398 subscribers

193,897 görüntüleme • 3 ay önce •via X (Twitter)

Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

33 Yorum

Kenny profil fotoğrafı

Kenny3 ay önce

The repo for HyperFrames:

Matt Van Horn profil fotoğrafı

Matt Van Horn3 ay önce

@Miguel07Code It’s so good. Big fan.

Peter Yang profil fotoğrafı

Peter Yang3 ay önce

Full interview and tutorial is now live! Watch here:

Miguel Ángel profil fotoğrafı

Miguel Ángel3 ay önce

tomorrow will be amazing

Sharq Wy profil fotoğrafı

Sharq Wy3 ay önce

@joshua_xu_ Codex+HyperFrames kills AP/FinalCut

Feifei Qiu profil fotoğrafı

Feifei Qiu3 ay önce

Perfect timing. I am learning how to make better product videos, cool animations, etc. Definitely gonna watch this. I made this video with Claude yesterday. Definitely lots of room for improvement

Sam Wasserman profil fotoğrafı

Sam Wasserman3 ay önce

@Miguel07Code Been using it a ton it’s really great

James Russo profil fotoğrafı

James Russo3 ay önce

@Miguel07Code Can’t wait to see the interview

Lima profil fotoğrafı

Lima3 ay önce

The AI video stack is splitting: Runway/Sora for cinematic, HyperFrames for explainers and product demos. HTML means the agent controls every frame programmatically. Free and open source.

Hamel Husain profil fotoğrafı

Hamel Husain3 ay önce

Looks really cool

toni profil fotoğrafı

toni3 ay önce

The real story here is that the tool isn't the product - the workflow knowledge is. Free tools are everywhere. What people actually pay for is knowing how to use them right.

AI Mastery Guide profil fotoğrafı

AI Mastery Guide3 ay önce

Making videos directly through HTML with Codex and Claude Code is such an unexpected approach 🤯

Dobby el elfo doméstico profil fotoğrafı

Dobby el elfo doméstico3 ay önce

HTML para video suena raro hasta que recuerdas que medio internet ya es un render pipeline con ansiedad. Lo bonito es poder tratar una animación como código: revisar, testear, revertir y culpar al CSS con pruebas.

Sakura | Emerging Tech profil fotoğrafı

Sakura | Emerging Tech3 ay önce

@grok explain the impact to the future.

Kevin profil fotoğrafı

Kevin3 ay önce

I'm using HyperFrames for everything! It's the best

DebamitroChakraborti profil fotoğrafı

DebamitroChakraborti3 ay önce

I tried it out, but I feel Remotion is still way ahead.

Virang Jhaveri profil fotoğrafı

Virang Jhaveri3 ay önce

Screen studio + hyperframes is the best mix

Ivan Koh profil fotoğrafı

Ivan Koh3 ay önce

this is awesome thanks for sharing!

Roey | AI & Tech profil fotoğrafı

Roey | AI & Tech3 ay önce

The question is... which jobs will it take? I can't keep up with the pace of new things that come every day. I need a vacation!🙄

Mo RezaAli profil fotoğrafı

Mo RezaAli3 ay önce

The bigger opportunity isn’t generating video with HTML. It’s treating video as a programmable medium that AI can rapidly iterate on, much like we already do with interfaces and code.For builders who need high-quality product explainers or demos without a production team, this dramatically improves both speed and cost. The real advantage will come when these workflows become more repeatable and less dependent on heavy prompting.

Will Cheung profil fotoğrafı

Will Cheung3 ay önce

Vibe coding videos is so early and has so much potential.

rads profil fotoğrafı

rads3 ay önce

@ot_gbzp very cool

Valerio Milana profil fotoğrafı

Valerio Milana3 ay önce

Recently, I have been making lots of interactive slide presenations and videos using Claude Code and various libraries. People at my company are loving them and my impact has increased noticeably

Ishaan profil fotoğrafı

Ishaan3 ay önce

@joshua_xu_ I can vouch for this. Hyper frames with a combination of remotion is absolutely fantastic

Wes Eklund profil fotoğrafı

Wes Eklund3 ay önce

omg I wanna try this

Jerel Velarde profil fotoğrafı

Jerel Velarde3 ay önce

Yo @HyperFrames_ is cooking

Michael Wall profil fotoğrafı

Michael Wall3 ay önce

Woohoo! You went right to the source, thank you for making a video as well!!!

Mu profil fotoğrafı

Mu3 ay önce

It’s basic just like remotion

Ray profil fotoğrafı

Ray3 ay önce

This looks simply good 👍

Anup Jha | Engineering tools profil fotoğrafı

Anup Jha | Engineering tools3 ay önce

You can do this too with open design

Daniel Endara profil fotoğrafı

Daniel Endara3 ay önce

Bookmarked! Thanks Peter!

Ryan Merket profil fotoğrafı

Ryan Merket3 ay önce

Already using it in production to make shorts and long videos automagically

Ali AlphaQ profil fotoğrafı

Ali AlphaQ3 ay önce

Impressive demo. What innovative applications do you envision? Events like these accelerate creative breakthroughs exponentially.

Benzer Videolar

You can now run Claude Code locally for FREE. → Using open-source models → Locally and fully private → Full agent + tool workflows Here's the FULL step-by-step tutorial to get it all set up in less than 10 minutes:

You can now run Claude Code locally for FREE. → Using open-source models → Locally and fully private → Full agent + tool workflows Here's the FULL step-by-step tutorial to get it all set up in less than 10 minutes:

Alvaro Cintas

1,319,857 görüntüleme • 8 ay önce

"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 görüntüleme • 3 ay önce

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Santiago

86,565 görüntüleme • 4 ay önce

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

0xSero

25,695 görüntüleme • 6 ay önce

Free and open source Alternative to Cursor's composer feature directly in Replit Cursor's composer is getting a lot of buzz because it lets anyone create apps using just English. "Aider" lets you do exactly the same thing: - Without having to pay a subscription - Using Claude 3.5 Sonnet - Right in Replit You don't need to know how to write a single line of code to use it. Nor do you have to synchronize anything: You generate the code, test and deploy your app all in one place! -------------- Let me know if you'd like a quick tutorial on how to install it in Replit (less than 2 minutes).

Free and open source Alternative to Cursor's composer feature directly in Replit Cursor's composer is getting a lot of buzz because it lets anyone create apps using just English. "Aider" lets you do exactly the same thing: - Without having to pay a subscription - Using Claude 3.5 Sonnet - Right in Replit You don't need to know how to write a single line of code to use it. Nor do you have to synchronize anything: You generate the code, test and deploy your app all in one place! -------------- Let me know if you'd like a quick tutorial on how to install it in Replit (less than 2 minutes).

Paul Couvert

86,007 görüntüleme • 2 yıl önce

Three skills I use every day in Claude Code and Codex to solve my hardest problems: 1️⃣ /agent-watchdog When I have one agent like Codex working on a task and I don't fully trust it's going to do everything right, I'll open up another one like Claude Code and tell it to watchdog the Codex thread. You can copy the Codex deep link into Claude Code and it'll look at the prompt you sent, watch the Codex thread until it's done, then compare the Codex solution to how it was planning to solve it and automatically fix anything that Codex missed. It can also test the work of the other agent end-to-end. Similar to the idea of OpenRouter's new Fusion feature, I've definitely found that two models thinking through a problem and checking each other's work can be wildly more impactful than just one. 2️⃣ /plan-arbiter Similar ideas as /agent-watchdog - but with this one you have both make plans, compare plans, negotiate the differences, and make a final plan to execute. I find Claude Code is better at writing plans, but Codex is faster and cheaper to execute on them. Then I usually have Claude Code watchdog the Codex work and fix anything that was missed. 3️⃣ /read-the-damn-docs One thing that drives me crazy with coding agents is they're so reluctant to look up docs. They'll just guess and guess and guess at the right API surface for things, or the right solution to an integration of two things. Once I explicitly tell it to look up the docs, it says "Oh, I see the answer," and it fixes the problem. So I made the /read-the-damn-docs skill. Add it and your agents will know when and how to do efficient web searches to look up docs for the types of problems you really should look up docs for. All of these are totally open source over on my GitHub. If you try them, let me know your feedback. Will link to them below:

Three skills I use every day in Claude Code and Codex to solve my hardest problems: 1️⃣ /agent-watchdog When I have one agent like Codex working on a task and I don't fully trust it's going to do everything right, I'll open up another one like Claude Code and tell it to watchdog the Codex thread. You can copy the Codex deep link into Claude Code and it'll look at the prompt you sent, watch the Codex thread until it's done, then compare the Codex solution to how it was planning to solve it and automatically fix anything that Codex missed. It can also test the work of the other agent end-to-end. Similar to the idea of OpenRouter's new Fusion feature, I've definitely found that two models thinking through a problem and checking each other's work can be wildly more impactful than just one. 2️⃣ /plan-arbiter Similar ideas as /agent-watchdog - but with this one you have both make plans, compare plans, negotiate the differences, and make a final plan to execute. I find Claude Code is better at writing plans, but Codex is faster and cheaper to execute on them. Then I usually have Claude Code watchdog the Codex work and fix anything that was missed. 3️⃣ /read-the-damn-docs One thing that drives me crazy with coding agents is they're so reluctant to look up docs. They'll just guess and guess and guess at the right API surface for things, or the right solution to an integration of two things. Once I explicitly tell it to look up the docs, it says "Oh, I see the answer," and it fixes the problem. So I made the /read-the-damn-docs skill. Add it and your agents will know when and how to do efficient web searches to look up docs for the types of problems you really should look up docs for. All of these are totally open source over on my GitHub. If you try them, let me know your feedback. Will link to them below:

Steve (Builder.io)

43,089 görüntüleme • 3 ay önce

Claude Code Teams as a flow diagram Just run: npx claude-code-templates@latest --teams You’ll get a full view of how the lead and the team communicate: messages, tasks, and the tools they executed. The more observability you have into your Claude Code agents’ workflows, the better your workflows, and the better the results. Open source project:

Claude Code Teams as a flow diagram Just run: npx claude-code-templates@latest --teams You’ll get a full view of how the lead and the team communicate: messages, tasks, and the tools they executed. The more observability you have into your Claude Code agents’ workflows, the better your workflows, and the better the results. Open source project:

Daniel San

85,478 görüntüleme • 7 ay önce

"I am a Claude Code maximalist. I try to live in it all day if I can." Carl Vellotti 🥞 has gone deeper on Claude Code than any PM I know. In my new episode, he showed me how to connect Claude Code to: → Google Workspace: Prep for meetings → Linear: Create tickets from PRDs → Slack: Share status updates → Reddit: Monitor subreddit discussions He does all of the above using skills and MCPs in his personal Claude Code OS. Some quotes from Carl: "Connecting Claude Code to the apps that you use at work makes it way more powerful." "Why would you need to go to all these websites if you can just get the info right here?" "I use this consult-the-council skill to get Claude, ChatGPT, and Grok to all review my work in one shot." 📌 Watch now: Thanks to our sponsors: Granola - The best AI meeting notes app I've ever used: Replit ⠕ - Create beautiful prototypes and full stack apps:

"I am a Claude Code maximalist. I try to live in it all day if I can." Carl Vellotti 🥞 has gone deeper on Claude Code than any PM I know. In my new episode, he showed me how to connect Claude Code to: → Google Workspace: Prep for meetings → Linear: Create tickets from PRDs → Slack: Share status updates → Reddit: Monitor subreddit discussions He does all of the above using skills and MCPs in his personal Claude Code OS. Some quotes from Carl: "Connecting Claude Code to the apps that you use at work makes it way more powerful." "Why would you need to go to all these websites if you can just get the info right here?" "I use this consult-the-council skill to get Claude, ChatGPT, and Grok to all review my work in one shot." 📌 Watch now: Thanks to our sponsors: Granola - The best AI meeting notes app I've ever used: Replit ⠕ - Create beautiful prototypes and full stack apps:

Peter Yang

142,157 görüntüleme • 7 ay önce

you can make videos like this using AI. all you need are the right tools and prompts, and I’ll show you how to get them on freepik using Seedream 4 on this thread 🧵👇

you can make videos like this using AI. all you need are the right tools and prompts, and I’ll show you how to get them on freepik using Seedream 4 on this thread 🧵👇

TechHalla

16,505 görüntüleme • 1 yıl önce

I installed a new Visual Studio Code extension to help me write code. But this extension doesn't get in your way. It doesn't try to write code for you. It only gives you hints and recommendations about your code. I like that. Like a second pair of eyes, looking over my shoulder and telling me how I can do things better. The extension is Traycer. You can install it directly from inside Visual Studio Code. It's free forever for anyone working on open-source projects (and if you aren't, you can use it for free until the end of June.) I recorded a super-duper-quick video to show you how this extension works. I know code generation is a huge thing, but I really appreciate tools that help me do what I do better. Thanks to the Traycer team for helping me with the extension and collaborating with me on this post!

I installed a new Visual Studio Code extension to help me write code. But this extension doesn't get in your way. It doesn't try to write code for you. It only gives you hints and recommendations about your code. I like that. Like a second pair of eyes, looking over my shoulder and telling me how I can do things better. The extension is Traycer. You can install it directly from inside Visual Studio Code. It's free forever for anyone working on open-source projects (and if you aren't, you can use it for free until the end of June.) I recorded a super-duper-quick video to show you how this extension works. I know code generation is a huge thing, but I really appreciate tools that help me do what I do better. Thanks to the Traycer team for helping me with the extension and collaborating with me on this post!

Santiago

101,068 görüntüleme • 2 yıl önce

I'm giving away Claude Code for FREE. Yes, you read that right -- the world's best AI, now completely FREE. My mission is to get the next billion people to write great software. I believe EVERYONE should have access to the best AI, but so many are constrained by costs. I'm solving this by: disrupting the world's fastest growing industry = AI + with the most proven business model = Ads You can actually try it out now -- just one line of code, and you unlock all the powers of Claude Code, for free. how it works: 1. sign up on Giga AI Free 2. change Claude Code env variables to use our inference endpoint 2. to support the free usage, we'll add ads inside the AI responses (only contextual and relevant ads, no spam) Since we get too many signups, there's a waitlist, but we'll be rolling it out to the maximum people as we can. Watch the video to get started & comment and retweet to get access first.

I'm giving away Claude Code for FREE. Yes, you read that right -- the world's best AI, now completely FREE. My mission is to get the next billion people to write great software. I believe EVERYONE should have access to the best AI, but so many are constrained by costs. I'm solving this by: disrupting the world's fastest growing industry = AI + with the most proven business model = Ads You can actually try it out now -- just one line of code, and you unlock all the powers of Claude Code, for free. how it works: 1. sign up on Giga AI Free 2. change Claude Code env variables to use our inference endpoint 2. to support the free usage, we'll add ads inside the AI responses (only contextual and relevant ads, no spam) Since we get too many signups, there's a waitlist, but we'll be rolling it out to the maximum people as we can. Watch the video to get started & comment and retweet to get access first.

Namanyay

488,748 görüntüleme • 11 ay önce

Codex can now make launch videos. Introducing the Motion MCP for Codex Connect it to motion through the MCP, give it your assets and describe what you want. Codex builds the scenes, animations and transitions directly inside motion. This video was created using the MCP 👇

Codex can now make launch videos. Introducing the Motion MCP for Codex Connect it to motion through the MCP, give it your assets and describe what you want. Codex builds the scenes, animations and transitions directly inside motion. This video was created using the MCP 👇

Motion

94,852 görüntüleme • 17 gün önce

How I have Claude automate anything I do on my computer just by showing it: I use the free Clips app and hit record to start recording. Then I just do the action - like navigating to Rippling and approving any unapproved time off - and I’ll often just talk out loud as I do it explaining any add’l details like I would when showing a human. The Clips app captures everything on your screen and everything you say, and transforms it into a format Claude can “see and hear”. You'll then get a link that you can easily share with Claude (or humans too). I’ll paste it to Claude and say something like, "automate this for me every day at 8:00 AM." The link has special metadata that agents like Claude can discover. It exposes APIs to see the full transcript with timestamps and grab screenshots of what was on your screen at any of those timestamps. Once it's created the routine, you can go to the Routines tab in Claude Code desktop app. This also works with the CLI, Claude Cowork, Codex etc. You’ll see your new routine there, and you can just hit Run Now to have it start running it. Video attached shows this step by step. The Clips apps is free and open source - I’ll link to it and the source code in the thread.

How I have Claude automate anything I do on my computer just by showing it: I use the free Clips app and hit record to start recording. Then I just do the action - like navigating to Rippling and approving any unapproved time off - and I’ll often just talk out loud as I do it explaining any add’l details like I would when showing a human. The Clips app captures everything on your screen and everything you say, and transforms it into a format Claude can “see and hear”. You'll then get a link that you can easily share with Claude (or humans too). I’ll paste it to Claude and say something like, "automate this for me every day at 8:00 AM." The link has special metadata that agents like Claude can discover. It exposes APIs to see the full transcript with timestamps and grab screenshots of what was on your screen at any of those timestamps. Once it's created the routine, you can go to the Routines tab in Claude Code desktop app. This also works with the CLI, Claude Cowork, Codex etc. You’ll see your new routine there, and you can just hit Run Now to have it start running it. Video attached shows this step by step. The Clips apps is free and open source - I’ll link to it and the source code in the thread.

Steve (Builder.io)

25,473 görüntüleme • 3 ay önce

Tutorial: How to make a creative coding animation with Claude 2 and OpenProcessing Claude 2 is one of my favorite coding tools. Here's a demo how you can learn programming and write a simple animation with it in minutes. You can run the code at OpenProcessing. Links in comment

Tutorial: How to make a creative coding animation with Claude 2 and OpenProcessing Claude 2 is one of my favorite coding tools. Here's a demo how you can learn programming and write a simple animation with it in minutes. You can run the code at OpenProcessing. Links in comment

Kris Kashtanova

18,369 görüntüleme • 3 yıl önce

Today we're launching iMessage video ads in Claude. Faceless video is the best-performing ad format right now — and Claude can now generate a full one end to end, in one prompt. Here's how it works: 1. Install: npx gooseworks install --all 2. Run: /goose-video make an iMessage ad for [your product] Claude writes the script, generates the photos in the thread, animates the conversation, and closes on your brand. SFX, music, end card, all of it. The trick: it's just HTML. No video generation models, so it's fast and cheap — and it works because it doesn't look like an ad. It's that easy. But this is just the start. We have created a library with 100+ open-source skills for growth that some of the fastest growing startups in the world are using every day to run ads, content, competitor research, gtm, seo and more. Comment Goose and I'll DM you the full open-source skill library.

Soham Mehta

50,641 görüntüleme • 2 ay önce

tradingview + ai is miraculous claude code vs codex for tradingview automation this is a major unlock for anyone using trading view now you dont need expensive developers to build indicators and strategies for you claude code and codex can connect directly to tradingview and build anything you want but one does it way better

tradingview + ai is miraculous claude code vs codex for tradingview automation this is a major unlock for anyone using trading view now you dont need expensive developers to build indicators and strategies for you claude code and codex can connect directly to tradingview and build anything you want but one does it way better

Moon Dev

23,103 görüntüleme • 1 ay önce

do you like to dance? why do you like to dance?! would you like to learn to dance bachata or salsa with me? I am creating a global community using our app and the dream is to make it fun - install and sign up today so I can get in touch and get you started!

do you like to dance? why do you like to dance?! would you like to learn to dance bachata or salsa with me? I am creating a global community using our app and the dream is to make it fun - install and sign up today so I can get in touch and get you started!

Dancer Love Times

234,799 görüntüleme • 3 yıl önce

4 small but extremely useful things coding agents can do for you that many people don't know: 1. Copy things to your clipboard. If it generated something that needs to be copied & pasted somewhere, you can ask it to put it in your clipboard directly 2. Open HTML files in your browser, or open folders/files directly (e.g. play a video). No need to find it and manually open 3. Take screenshots. And make videos. For example, this video was entirely done by Claude Code. I just asked it to take screenshots of the HTML slide templates, and compile the images into a video using FFmpeg, showing them at 1 second interval 4. Manipulate files on your computer (e.g. organizing them into folders, renaming them, etc)

4 small but extremely useful things coding agents can do for you that many people don't know: 1. Copy things to your clipboard. If it generated something that needs to be copied & pasted somewhere, you can ask it to put it in your clipboard directly 2. Open HTML files in your browser, or open folders/files directly (e.g. play a video). No need to find it and manually open 3. Take screenshots. And make videos. For example, this video was entirely done by Claude Code. I just asked it to take screenshots of the HTML slide templates, and compile the images into a video using FFmpeg, showing them at 1 second interval 4. Manipulate files on your computer (e.g. organizing them into folders, renaming them, etc)

Zara Zhang

10,255 görüntüleme • 4 ay önce

New Release: Claudex Mode For the first time in mankind claude code and codex will be on the same team On the Blackbox CLI you can send the same task for Claude Code to implement and Codex to verify and test. You can choose more ways where they can collaborate on the same task to get the highest level of performance on your tasks

New Release: Claudex Mode For the first time in mankind claude code and codex will be on the same team On the Blackbox CLI you can send the same task for Claude Code to implement and Codex to verify and test. You can choose more ways where they can collaborate on the same task to get the highest level of performance on your tasks

BLACKBOX AI

304,664 görüntüleme • 7 ay önce