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.

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

Meng To

188,975 subscribers

234,530 views • 1 month ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

46 Comments

Ray Fernando1 month ago

Bro this is insane. I'd love to have you on my stream to go over some of this stuff. I can't believe it!!

Meng To1 month ago

Anytime Ray! DM is open. Also, thanks so much for getting a sub!

Koosha1 month ago

Easy sell as i have been seeing posts about Threeui all over x and even through some of my colleagues Meng.

Meng To1 month ago

I depleted 2 of my Claude Max accounts this week. Yep, I'm addicted.

Romain ( Ξxos®)1 month ago

Opus 5 pushes the limits of 3D. Really interesting to use to illustrate hardware startup asset value in my case. Congrats!

Alex Lee1 month ago

browser use + existing logins is a pretty big upgrade 👀

Roh1 month ago

Beautiful!

Meng To1 month ago

newly discovered skill in the era of ai

Terenze1 month ago

So cool

Meng To1 month ago

the future of web design (and even games) is gonna be crazy with three.js

Terenze1 month ago

the possibilities seem endless!

Connor1 month ago

hi meng are you gonna claim the fees on your coin or no

Wuki1 month ago

ThreeUI is cheat code level design energy 🤝 pleasure to connect

Meng To1 month ago

I've been using it for all my new pages/components. Opus 5 is incredible at remixing.

Fortytwo1 month ago

did you test it on codex?

Meng To1 month ago

yep tested on codex too

Internet Labs1 month ago

Shifting an entire design team from static media to lightweight, prompt-friendly Three.js sites is a massive leap in how web experiences get built.

yac ☆☆☆☆1 month ago

Is down? Cant access it

Meng To1 month ago

can you try a vpn? i heard it might be region-based

AI Apps API1 month ago

ThreeUI being open source is a great move, that is what pulls people into three.js. Where these builds usually fall over is mobile, since the lighting and texture detail lands in the fragment shader and runs per pixel. Same look with less per pixel work is a good follow up prompt.

Fluxora1 month ago

Cooking 🤝 I have Claude on overdrive as well

Meng To1 month ago

claude the artist, codex the manager

Fluxora1 month ago

How many tabs would you be cranking on a good night ? 🤣

Joe Branton1 month ago

I’m sure you know this but you’d get way better looking layouts by designing at least the key frames in Paper or Figma and going from there. Cool stuff though and loving the three.js demos

rumisa omar1 month ago

搞过类似的三维产品页，Claude写three.js确实有一手，但复杂交互还是要手调。

Visualize Digital1 month ago

What about SEO? These three js sites are beautiful but what about core web vitals?

Meng To1 month ago

SEO is just the same. this is not all three.js, but a mix between html and 3d.

FlutterFlow1 month ago

whoa

Rakibul1 month ago

it's so cool

Lichforge1 month ago

That's definitely a neat website. Loving it!

SinAniS1 month ago

Building straight from a video reference is a strong workflow.

Justyn Clark1 month ago

Clever idea

THE_VAULT1 month ago

The fact that everything stays as code is the real unlock, not the visuals. Editing a wireframe three.js scene with follow-up prompts beats re-generating an image and hoping the next one matches.

⟁ndrew V1 month ago

🤯

Tak 🦞1 month ago

wow

紫苏子ACG1 month ago

Well-deserved👍

alex shaw1 month ago

Three.js on crack, basically

Chaitanya Shetty1 month ago

Pretty crazy Meng! Will definitely try this out

Jinyi Li1 month ago

this is the first time ‘make it more cinematic’ has become an actually executable engineering instruction.

Brian Hadu1 month ago

exploded-view and wireframe sites are really changing how we engage with products online and can lead to better user experiences

Bobberducker1 month ago

May be interested in sponsoring. Message me

Fajar M Reza1 month ago

Video-to-Three.js references could make interactive product demos cheaper for small design teams.

Zack1 month ago

That is very impressive what claude can do if you know what you're doing

Lost1 month ago

Awesome work, reach out if you’re looking to expand your team or want someone else to brain storm with, ive been addicted to making these sites recently and would love to collaborate with others.

AI_GOAT1 month ago

This quietly changes how landing pages are made. 🎯

Jinny Lee1 month ago

线框拓扑拆开还挂着 60fps，这一步比「好看 landing」难。KESTREL 字重压在深蓝 hex 网格上，信息层很干净。

Related Videos

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

FHILY👑

57,007 views • 4 months ago

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,341,721 views • 1 month ago

I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.

I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.

Meng To

147,233 views • 2 months ago

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. Live site: Our team has been adding five landing pages and dozens of components to every week. Reusing the same components and skills has improved the quality so much.

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. Live site: Our team has been adding five landing pages and dozens of components to every week. Reusing the same components and skills has improved the quality so much.

Meng To

60,082 views • 20 days ago

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

109,140 views • 1 month ago

I built a new open-source ocean using Three.js, i wanted to give it a little bit more time than the initial version that i published. - Pure WebGL2 GLSL, Fully procedural with clouds and light control. You can find all of the technical details in the repo Source code :

I built a new open-source ocean using Three.js, i wanted to give it a little bit more time than the initial version that i published. - Pure WebGL2 GLSL, Fully procedural with clouds and light control. You can find all of the technical details in the repo Source code :

Chiro Visuals

26,745 views • 2 months ago

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

534,928 views • 1 month ago

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:

Meng To

134,797 views • 1 month ago

Okay, Fable 5.1 is crazy good at creating three.js sites. It’s faster, understands complex design instructions better, and recreates references with surgical precision. The English is also much easier to read. With this much power, it’s hard to settle for static sites, especially when so many AI-made sites look generic. A few things I noticed though: - It still creates generic AI illustrations if you don’t specify the images. - Difficult 3D subjects like people and dogs still become 3D slop unless I use Higgsfield 3D models. - You still have to push it to improve the textures, lighting, modeling, and small details. - Taste still matters. I had to fix overlapping elements, negative space, and scroll behavior. - I used and for the particle, VHS, and CRT effects. - Because it works faster, I go through tokens like there’s no tomorrow. Inspired by I can open-source this if anyone is interested.

Okay, Fable 5.1 is crazy good at creating three.js sites. It’s faster, understands complex design instructions better, and recreates references with surgical precision. The English is also much easier to read. With this much power, it’s hard to settle for static sites, especially when so many AI-made sites look generic. A few things I noticed though: - It still creates generic AI illustrations if you don’t specify the images. - Difficult 3D subjects like people and dogs still become 3D slop unless I use Higgsfield 3D models. - You still have to push it to improve the textures, lighting, modeling, and small details. - Taste still matters. I had to fix overlapping elements, negative space, and scroll behavior. - I used and for the particle, VHS, and CRT effects. - Because it works faster, I go through tokens like there’s no tomorrow. Inspired by I can open-source this if anyone is interested.

Meng To

183,342 views • 1 month ago

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 views • 2 months ago

I turned Raz from Arena of Valor into an animated 3D character running directly in Three.js. 🔥🥊 This is my latest showcase for img2threejs v1.5.2 - and the new version is officially out. Image → TripoAI or Hyper3D → Rigging → Animation → VFX → Three.js. For this demo, I wanted to push beyond simply reconstructing a character. Raz needed to actually FEEL like Raz: explosive punches, fast movement, combat animation, and the fiery VFX around his attacks. The entire workflow was built through the img2threejs pipeline, turning visual references into a character that can be controlled, animated, and extended directly in code. And the best part: img2threejs v1.5.2 is available now. You can try the same pipeline yourself and see how far you can push AI-assisted 3D character creation for Three.js and WebGL. Open source. Built for experimentation. GitHub 👇 #ThreeJS #img2threejs #AI3D #ArenaOfValor

I turned Raz from Arena of Valor into an animated 3D character running directly in Three.js. 🔥🥊 This is my latest showcase for img2threejs v1.5.2 - and the new version is officially out. Image → TripoAI or Hyper3D → Rigging → Animation → VFX → Three.js. For this demo, I wanted to push beyond simply reconstructing a character. Raz needed to actually FEEL like Raz: explosive punches, fast movement, combat animation, and the fiery VFX around his attacks. The entire workflow was built through the img2threejs pipeline, turning visual references into a character that can be controlled, animated, and extended directly in code. And the best part: img2threejs v1.5.2 is available now. You can try the same pipeline yourself and see how far you can push AI-assisted 3D character creation for Three.js and WebGL. Open source. Built for experimentation. GitHub 👇 #ThreeJS #img2threejs #AI3D #ArenaOfValor

Nick

13,265 views • 1 month ago

Can't believe in less than 24 hours I created my own game with Claude and Three.js. Running in a browser at 120 FPS. All I had to do was give Claude the repo for Threejs and describe an MMO-like game for it to build from scratch. All the assets and mechanics you see are all from a prompt. As you can see, it is far from done but the progress is insane. Everyone should be using Three.js now without a doubt!

Can't believe in less than 24 hours I created my own game with Claude and Three.js. Running in a browser at 120 FPS. All I had to do was give Claude the repo for Threejs and describe an MMO-like game for it to build from scratch. All the assets and mechanics you see are all from a prompt. As you can see, it is far from done but the progress is insane. Everyone should be using Three.js now without a doubt!

NeilXbt

23,504 views • 1 month ago

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

468,445 views • 2 months ago

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

581,014 views • 1 month ago

I built a little sandboard in Three.js and webgpu to play with, and yes, on mobile multitouch is supported still a first draft, but i really like the feel of it You can play at: Source:

I built a little sandboard in Three.js and webgpu to play with, and yes, on mobile multitouch is supported still a first draft, but i really like the feel of it You can play at: Source:

Scott

30,141 views • 25 days ago

img2threejs 1.5.1 is out 🚀 Checkout: This release introduces a new approach to image → 3D → Three.js. Image → Tripo → img2threejs → reconstructed geometry → Three.js Instead of using the generated 3D model as the final asset, img2threejs uses it as a reference to rebuild the character into a representation that can be generated and rendered directly in Three.js. No Blender workflow, and no GLB required as the final output. The animation in the demo is still a bit rough because this release is focused on reconstruction, not animation. I’ll be improving that in the next release. Still experimental, but this is a big step toward where I want img2threejs to go.

img2threejs 1.5.1 is out 🚀 Checkout: This release introduces a new approach to image → 3D → Three.js. Image → Tripo → img2threejs → reconstructed geometry → Three.js Instead of using the generated 3D model as the final asset, img2threejs uses it as a reference to rebuild the character into a representation that can be generated and rendered directly in Three.js. No Blender workflow, and no GLB required as the final output. The animation in the demo is still a bit rough because this release is focused on reconstruction, not animation. I’ll be improving that in the next release. Still experimental, but this is a big step toward where I want img2threejs to go.

Nick

117,760 views • 1 month ago

A lot of people asked me for the sources of the Three.js Conf Paris badge, so here they are : It's a very DIY project and far from perfect, but that's also what makes it approachable: everything can be rebuilt with a soldering iron, a 3D printer and a few cheap components. I tried to document it as clearly as possible, so you can either build it as is or use it as a starting point for something else. If anything is unclear, just write to me :)

A lot of people asked me for the sources of the Three.js Conf Paris badge, so here they are : It's a very DIY project and far from perfect, but that's also what makes it approachable: everything can be rebuilt with a soldering iron, a 3D printer and a few cheap components. I tried to document it as clearly as possible, so you can either build it as is or use it as a starting point for something else. If anything is unclear, just write to me :)

Romain Briaux

11,385 views • 21 days ago

You know I had to do it!! gpt-6-astra (High), one prompt, Terreiro do Paço in Lisbon (Blender, not Three.js!) This one hits home personally 5 years ago, in college, I had a whole course in Computer Graphics. For the final project, every group had to recreate Praça do Comércio / Terreiro do Paço in Blender (our project delivery is in the comments). I wanted to see how Astra would perform. For one-shot, it's pretty damn good. Astra is a beast in Spatial 3d, and Blender is not like Three.js! It's significantly more complex, with a broader range of modeling, materials, lighting, etc. Generational leap (and I will run a few more prompts here)

You know I had to do it!! gpt-6-astra (High), one prompt, Terreiro do Paço in Lisbon (Blender, not Three.js!) This one hits home personally 5 years ago, in college, I had a whole course in Computer Graphics. For the final project, every group had to recreate Praça do Comércio / Terreiro do Paço in Blender (our project delivery is in the comments). I wanted to see how Astra would perform. For one-shot, it's pretty damn good. Astra is a beast in Spatial 3d, and Blender is not like Three.js! It's significantly more complex, with a broader range of modeling, materials, lighting, etc. Generational leap (and I will run a few more prompts here)

Gonçalo Canhoto 🇵🇹

315,450 views • 1 month ago

This is one of the wildest things I have built with AI so far 😱 Asked Claude Fable 5 to create a fully interactive 3D crime investigation board using Three.js and it did it in ONE Prompt. It took one more prompt to give it a polished UI inspired by a reference design that I created with GPT Image. What surprised me most was not how it looked. It was how it worked. Fable built a complete Verlet rope physics system with 46 particles in every thread. It handled gravity, damping, distance constraints and all other features of file upload, text and everything. The threads/ropes even lift naturally with pinned evidence instead of clipping through it. I never asked it to implement any of that. I only described the experience I wanted. Maybe that's how we should work with AI. Instead of writing long long specs, we should explain what we want as an experience and let AI do its thing. Anyway, every day Fable 5 raises the bar for what I think AI can build. More to this Live: Code:

This is one of the wildest things I have built with AI so far 😱 Asked Claude Fable 5 to create a fully interactive 3D crime investigation board using Three.js and it did it in ONE Prompt. It took one more prompt to give it a polished UI inspired by a reference design that I created with GPT Image. What surprised me most was not how it looked. It was how it worked. Fable built a complete Verlet rope physics system with 46 particles in every thread. It handled gravity, damping, distance constraints and all other features of file upload, text and everything. The threads/ropes even lift naturally with pinned evidence instead of clipping through it. I never asked it to implement any of that. I only described the experience I wanted. Maybe that's how we should work with AI. Instead of writing long long specs, we should explain what we want as an experience and let AI do its thing. Anyway, every day Fable 5 raises the bar for what I think AI can build. More to this Live: Code:

The Bugged Dev

105,432 views • 3 months ago

Remixing images with AI is so powerful in the design tool I can rebrand any image by going to any logo and prompt: Change to "BRAND NAME”. Also I can create any variation for icons, portraits, mockups, etc.

Meng To

41,308 views • 1 year ago