正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

This looks straight out of Blender, but it's all code in a single HTML file at about 186 KB. Astra can create these ultra-realistic 3D product demos for landing pages. A few three.js skills let you keep looping on the details, textures, lighting, and interactions until everything feels right.... show more

Meng To

187,959 subscribers

53,950 次观看 • 3 天前 •via X (Twitter)

艺术科学技术

Anya Rossi• Live Now

Private livecam show

26 条评论

Guido Rosso 的头像

Guido Rosso3 天前

Hey Meng, would leave to see what you can do with the Rive CLI

Shesaidmewakeup 的头像

Shesaidmewakeup3 天前

186 KB for a page that looks like a Blender export is the flex. The loop on lighting after that is where it usually falls apart.

Meng To 的头像

Meng To3 天前

Can’t wait to show the things I built with Astra ultra while tibo promised a reset

Yoozap 的头像

Yoozap3 天前

the looping part is what people skip. ai gets you to 70, the rest is you

Meng To 的头像

Meng To3 天前

Yep I started using a score technique

Yoozap 的头像

Yoozap3 天前

scoring how? model grading itself or you grading it

LikeUI 的头像

LikeUI2 天前

Please try to make it with Opus 5.5 🙏

0xrobinhood007 🟡 的头像

0xrobinhood007 🟡2 天前

Did you or @VanhDesign create this?

Meng To 的头像

Meng To2 天前

@VanhDesign Yep! DesignCode team

Crownz | AI & Design 的头像

Crownz | AI & Design2 天前

It’s good

M!ke 的头像

M!ke3 天前

Could not access the site

Meng To 的头像

Meng To2 天前

forgot to make it public. it is now

Flat 18 - Web Design & Development 的头像

Flat 18 - Web Design & Development3 天前

The single-file constraint is doing a lot of good work here. The right limits can make experimentation faster, not smaller.

Rajesh 的头像

Rajesh2 天前

How goated is your workflow setup man? Everything you put out is a Banger

Ee Venn Soh 的头像

Ee Venn Soh2 天前

Thanks for the share! What three.js skills from the library that we're leveraging? Or they're from wasn't clear from the tweet.

M!ke 的头像

M!ke3 天前

This is neat, Meng!

Matt 的头像

Matt2 天前

incredible

Faisal Ahmed 的头像

Faisal Ahmed2 天前

This is amazing! ❤️‍🔥

Erudite 的头像

Erudite3 天前

You’re lying to me, Astra produce that?

Meng To 的头像

Meng To3 天前

Astra is very capable. Can also work with blender

Kellig 的头像

Kellig2 天前

Sick 🔥

Maker Merchant | Design Tradesman 的头像

Maker Merchant | Design Tradesman2 天前

Is the demo gated would love to check it out

Meng To 的头像

Meng To2 天前

sorry, it's open now.

mitchivin 的头像

mitchivin2 天前

👀

Vatsal | The Vibepreneur 的头像

Vatsal | The Vibepreneur3 天前

did even threejs new it will do these things one day

sagihatan 的头像

sagihatan2 天前

Are you going to do a course how to get results like this with Astra?

相关视频

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.

Meng To

1,328,064 次观看 • 1 个月前

Opus 5 is so good at creating these exploded-view and wireframe three.js product sites. Give it a video reference and it can build the experience directly in three.js or Blender. Then keep improving the details, textures, and lighting with follow-up prompts. I got our entire design team to turn landing pages built around images and video into three.js sites. They're lighter and easier to prompt. Since everything is code, AI can make more precise changes with fewer iterations. The difference between the old image-based sites and the new three.js versions is staggering. I can also jump in after the team finishes and help refine the details. Btw, is getting 100K views a day, which is absolutely nuts. The repo reached 3.8K GitHub stars in 4 days. It's my fastest-growing open-source project by far. So I added 60 more components. I'm also looking for sponsors to help fund ThreeUI long-term so I can keep adding to it.

Opus 5 is so good at creating these exploded-view and wireframe three.js product sites. Give it a video reference and it can build the experience directly in three.js or Blender. Then keep improving the details, textures, and lighting with follow-up prompts. I got our entire design team to turn landing pages built around images and video into three.js sites. They're lighter and easier to prompt. Since everything is code, AI can make more precise changes with fewer iterations. The difference between the old image-based sites and the new three.js versions is staggering. I can also jump in after the team finishes and help refine the details. Btw, is getting 100K views a day, which is absolutely nuts. The repo reached 3.8K GitHub stars in 4 days. It's my fastest-growing open-source project by far. So I added 60 more components. I'm also looking for sponsors to help fund ThreeUI long-term so I can keep adding to it.

Meng To

233,584 次观看 • 1 个月前

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.

Meng To

467,269 次观看 • 1 个月前

This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: It's crazy how realistic it looks even though it's all code and under 1 MB (except images). You can tour every room, switch between seasons, see light rays through the house, and watch koi swim through realistic water. The secret sauce to ultra-realistic 3d in code is a loop like this: dream-loop gets the agent to generate a target image, compare the live 3d against it with a separate critic, and keep refining the result. Skill: Let me know if I should open-source the page.

This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: It's crazy how realistic it looks even though it's all code and under 1 MB (except images). You can tour every room, switch between seasons, see light rays through the house, and watch koi swim through realistic water. The secret sauce to ultra-realistic 3d in code is a loop like this: dream-loop gets the agent to generate a target image, compare the live 3d against it with a separate critic, and keep refining the result. Skill: Let me know if I should open-source the page.

Meng To

60,699 次观看 • 10 天前

I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: Let me know if I should open-source. Don't wanna share too many without people asking.

I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: Let me know if I should open-source. Don't wanna share too many without people asking.

Meng To

611,417 次观看 • 1 个月前

Guys, we need to talk about this. NOW! I’ve tested a lot of design tools - Paper , Replit ⠕ , Figma Make, and a few others in the same space, and honestly, there’s usually still a lot of struggle. But this feels different. You can start designing without any MCP connection, use an agent to help build the UX, edit directly on the canvas, and yes, it basically has the “Make it Pretty” magic button DANN© has been talking about for a while. And devs can actually work with it too. You can see the code right there. But that’s not even the craziest part. COMPONENTS! Actual components. I’m genuinely in shock. These guys are so good. Feels like the perfect time for a Contra challenge.

Guys, we need to talk about this. NOW! I’ve tested a lot of design tools - Paper , Replit ⠕ , Figma Make, and a few others in the same space, and honestly, there’s usually still a lot of struggle. But this feels different. You can start designing without any MCP connection, use an agent to help build the UX, edit directly on the canvas, and yes, it basically has the “Make it Pretty” magic button DANN© has been talking about for a while. And devs can actually work with it too. You can see the code right there. But that’s not even the craziest part. COMPONENTS! Actual components. I’m genuinely in shock. These guys are so good. Feels like the perfect time for a Contra challenge.

Victoria

35,702 次观看 • 4 个月前

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

Meng To

68,404 次观看 • 1 个月前

I asked Astra to create a Catan game in three.js and it came out incredibly well. I played it, and the animations make it so much fun. The instructions and info cards make the game easy to learn. It even has AI players and trading. Astra used another game I had started building as a reference. The more games I build, the more skills and assets I have for the next one. It can remix the UI, 3D models, pages, and sounds instead of rebuilding everything. Now I want to see how many other board games I can make from this foundation.

I asked Astra to create a Catan game in three.js and it came out incredibly well. I played it, and the animations make it so much fun. The instructions and info cards make the game easy to learn. It even has AI players and trading. Astra used another game I had started building as a reference. The more games I build, the more skills and assets I have for the next one. It can remix the UI, 3D models, pages, and sounds instead of rebuilding everything. Now I want to see how many other board games I can make from this foundation.

Meng To

576,697 次观看 • 17 天前

I'm building a library of three.js templates with variants and customizations. They're all copyable as prompts. These components are 100–200 KB each and written entirely in procedural js. They also come with skills your agent can use to customize them while keeping them looking amazing. I've spent so many hours fine-tuning each one with sunrise and sunset themes, plus different locations. I've been using them for all my recent landing pages. Let me know if I should open-source the tool with both free and paid templates. I've spent so many tokens on this.

I'm building a library of three.js templates with variants and customizations. They're all copyable as prompts. These components are 100–200 KB each and written entirely in procedural js. They also come with skills your agent can use to customize them while keeping them looking amazing. I've spent so many hours fine-tuning each one with sunrise and sunset themes, plus different locations. I've been using them for all my recent landing pages. Let me know if I should open-source the tool with both free and paid templates. I've spent so many tokens on this.

Meng To

627,160 次观看 • 1 个月前

Meet the new DesignMe This redesign has been on the backlog forever. Client work always came first, the team was busy, and our own site kept getting pushed to “later”. So I finally sat down and built it myself. Took 4 weeks and roughly 300 hours. But it’s finally live. The old site did the job, but it didn’t really show what DesignMe has become. The new site has 41 pages, 8 articles, deeper case studies, clearer services, and a much better foundation for where we’re going next. Really proud of the team and how far we've come. No more single landing pages and sticky sidebars. And this is just the beginning ↓

Meet the new DesignMe This redesign has been on the backlog forever. Client work always came first, the team was busy, and our own site kept getting pushed to “later”. So I finally sat down and built it myself. Took 4 weeks and roughly 300 hours. But it’s finally live. The old site did the job, but it didn’t really show what DesignMe has become. The new site has 41 pages, 8 articles, deeper case studies, clearer services, and a much better foundation for where we’re going next. Really proud of the team and how far we've come. No more single landing pages and sticky sidebars. And this is just the beginning ↓

Adrian

585,146 次观看 • 4 个月前

Astra can create beautiful three.js UIs entirely in code. You don't need an assets library or MCP to create detailed 3D models. These are all code and are easy to customize for your agent. Give Astra a video, URL, or code reference, then ask it to keep comparing the result against the reference and fixing mistakes. Liquid Glass, shaders, motion design, procedural three.js models, and full environments. All from a few prompts. Some prompts I used: "Recreate this in a single HTML file with three.js. Keep comparing it against the reference and fix any differences." "Add Liquid Glass buttons. On hover, animate the lighting around the borders and make the background gradients move slightly with the pointer. Add subtle particles." "Improve the lighting, edges, and modeling. Give the keys more depth and verify the result against the real MacBook." Too many projects I could open-source. Let me know which one should I release.

Astra can create beautiful three.js UIs entirely in code. You don't need an assets library or MCP to create detailed 3D models. These are all code and are easy to customize for your agent. Give Astra a video, URL, or code reference, then ask it to keep comparing the result against the reference and fixing mistakes. Liquid Glass, shaders, motion design, procedural three.js models, and full environments. All from a few prompts. Some prompts I used: "Recreate this in a single HTML file with three.js. Keep comparing it against the reference and fix any differences." "Add Liquid Glass buttons. On hover, animate the lighting around the borders and make the background gradients move slightly with the pointer. Add subtle particles." "Improve the lighting, edges, and modeling. Give the keys more depth and verify the result against the real MacBook." Too many projects I could open-source. Let me know which one should I release.

Meng To

105,156 次观看 • 19 天前

THIS GUY BUILT A HABBO HOTEL CLONE IN 2 HOURS WITH GPT-6 ASTRA he didn't use a game engine, blender, 3d models, or asset packs > astra spun up a local site on his pc > built the entire thing in svgs and javascript > every character, every piece of furniture, the floors, the walls, all vector shapes drawn in code > isometric rooms and animated avatars > lighting, shadows and depth all faked in 2d he ran astra ultra at 2x speed and it ate about 42% of his weekly usage on the $100 pro plan so roughly $42 and one afternoon assets were always the issue in the 3d space (you either learned blender or you paid someone) now you can literally describe it and it draws itself

THIS GUY BUILT A HABBO HOTEL CLONE IN 2 HOURS WITH GPT-6 ASTRA he didn't use a game engine, blender, 3d models, or asset packs > astra spun up a local site on his pc > built the entire thing in svgs and javascript > every character, every piece of furniture, the floors, the walls, all vector shapes drawn in code > isometric rooms and animated avatars > lighting, shadows and depth all faked in 2d he ran astra ultra at 2x speed and it ate about 42% of his weekly usage on the $100 pro plan so roughly $42 and one afternoon assets were always the issue in the 3d space (you either learned blender or you paid someone) now you can literally describe it and it draws itself

Om Patel

20,949 次观看 • 19 天前

Skills shopping cart for Claude Code In this video I show how I add Railway Skills to a “shopping cart”. After selecting the Skills I need, I copy a single command and they’re added directly to my project. I built to make the composition of Claude Code components as flexible as possible. You can install settings, hooks, subagents, and anything new that gets added to Claude Code will appear on the site. It’s fully open source and community-maintained. If you want to contribute, you’re welcome to fix or update components, download and use the existing ones, or simply support the project by leaving a star on GitHub. Repo:

Skills shopping cart for Claude Code In this video I show how I add Railway Skills to a “shopping cart”. After selecting the Skills I need, I copy a single command and they’re added directly to my project. I built to make the composition of Claude Code components as flexible as possible. You can install settings, hooks, subagents, and anything new that gets added to Claude Code will appear on the site. It’s fully open source and community-maintained. If you want to contribute, you’re welcome to fix or update components, download and use the existing ones, or simply support the project by leaving a star on GitHub. Repo:

Daniel San

20,460 次观看 • 8 个月前

This year has been incredible one for our Discover team. ❤️ We’ve redesigned the foundation of our UI, launched favorite a creator, collection pages, billboards, coming soon details views, and much more. So proud of this team and am excited for what’s to come 🚀. #Fortnite

This year has been incredible one for our Discover team. ❤️ We’ve redesigned the foundation of our UI, launched favorite a creator, collection pages, billboards, coming soon details views, and much more. So proud of this team and am excited for what’s to come 🚀. #Fortnite

Gene Steratore II

17,392 次观看 • 1 年前

I’m blown away by the quality of the landing pages that Opus 5 can create in Three.js. Prompting it with "orbit using mouse" is enough to create a 3D parallax effect. The same goes for "add particles to pointer." It’s like creating a living, breathing world. More prompts I used: - Add a butterfly that flies to the branch and flies away when I mouse over it. - During the intro, first load a wireframe of the branches, similar to the field-scanning effect in Death Stranding. - Add a scan effect to the card images while they load. Then I asked it to use the shader buttons and nav bar I made in previous projects. As explained in my last video, I started with an inspiration and the prompt, “Recreate this in Three.js in a single HTML file. Self-verify until perfect.” Opus 5 ran for two hours. All the code is less than 1 MB. Inspiration: Let me know if I should open-source this.

I’m blown away by the quality of the landing pages that Opus 5 can create in Three.js. Prompting it with "orbit using mouse" is enough to create a 3D parallax effect. The same goes for "add particles to pointer." It’s like creating a living, breathing world. More prompts I used: - Add a butterfly that flies to the branch and flies away when I mouse over it. - During the intro, first load a wireframe of the branches, similar to the field-scanning effect in Death Stranding. - Add a scan effect to the card images while they load. Then I asked it to use the shader buttons and nav bar I made in previous projects. As explained in my last video, I started with an inspiration and the prompt, “Recreate this in Three.js in a single HTML file. Self-verify until perfect.” Opus 5 ran for two hours. All the code is less than 1 MB. Inspiration: Let me know if I should open-source this.

Meng To

529,998 次观看 • 1 个月前

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch

GREG ISENBERG

512,753 次观看 • 4 个月前

Every company I've worked at, product graphics were always a bottleneck. They're important assets because they help sell the value of the product. But what happens when the product is constantly evolving? I built a tool (inspired by what George Bugg started) where I turned all of out atoms/components into HTML so that anyone internally can create their own product graphics. Because we have amazing guidelines (shoutout Shivani and team) I was able to give it specific constraints, rules, and guidelines. So much more potential for this tool, e.g, product animation or creating demos. I even got a Slack bot to generate graphics without me even touching the tool.

Every company I've worked at, product graphics were always a bottleneck. They're important assets because they help sell the value of the product. But what happens when the product is constantly evolving? I built a tool (inspired by what George Bugg started) where I turned all of out atoms/components into HTML so that anyone internally can create their own product graphics. Because we have amazing guidelines (shoutout Shivani and team) I was able to give it specific constraints, rules, and guidelines. So much more potential for this tool, e.g, product animation or creating demos. I even got a Slack bot to generate graphics without me even touching the tool.

Paul Jun

101,962 次观看 • 3 个月前

You can enroll in my animation course for the next 10 days! It's the perfect way to learn the theory behind great animations, but also how to build them in code. Now with a skill file for agents. We'll cover all of these components and more, source code included.

You can enroll in my animation course for the next 10 days! It's the perfect way to learn the theory behind great animations, but also how to build them in code. Now with a skill file for agents. We'll cover all of these components and more, source code included.

Emil Kowalski

560,677 次观看 • 8 个月前

Gemini 4 Pro on under the name (gemini-3.7-flash) Create a 3D model of WallE in three.js.. This looks so cute and good.. the tiny animations are so nice.. None of these extra interactions were prompted! It made all those by itself! I'll let you guys be the judge of this one..

Gemini 4 Pro on under the name (gemini-3.7-flash) Create a 3D model of WallE in three.js.. This looks so cute and good.. the tiny animations are so nice.. None of these extra interactions were prompted! It made all those by itself! I'll let you guys be the judge of this one..

Bee

23,083 次观看 • 6 天前

I had an early access to GPT-6 Astra and I can say, everyone in the world now has a 3D designer at their fingertips. I gave it an image of a house and asked to create it in 3D with all the details including toys, appliances and furniture. This a full 3D model reconstruction in Blender with geometry that you can manually tweak and run 60fps as a locally rendered "game" on device.

I had an early access to GPT-6 Astra and I can say, everyone in the world now has a 3D designer at their fingertips. I gave it an image of a house and asked to create it in 3D with all the details including toys, appliances and furniture. This a full 3D model reconstruction in Blender with geometry that you can manually tweak and run 60fps as a locally rendered "game" on device.

Tom Krcha

1,440,481 次观看 • 21 天前