Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

MengTo's profile picture

Meng To

182,403 subscribers

217,368 görüntüleme • 2 gün önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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.
1:09

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

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.
0:49

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,245,018 görüntüleme • 6 gün önce

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.
0:57

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

144,302 görüntüleme • 17 gün önce

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.
0:31

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

518,676 görüntüleme • 10 gün önce

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:
0:38

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

128,838 görüntüleme • 9 gün önce

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:
2:18

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 görüntüleme • 24 gün önce

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.
0:34

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

461,772 görüntüleme • 19 gün önce

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.
1:02

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

110,887 görüntüleme • 3 gün önce

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:
0:49

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

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

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.
0:36

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

This blew up, so I added 60 more three.js components from experiments I made over the last two weeks. I'm still amazed by how well Claude Code can create variants from source code, so I went wild with new themes, environments, and interactions. Some three.js prompts I used: - Environment: mountain, city, bridge, desert, forest, space, stars, earth, moon - Colors: sunrise, blue sky, sunset, nighttime, pastel, vibrant, monotone, or based on the environment - Style: minimal, retro, glass, brutalist - Typography: serif, sans, pixel, tall, wide, letter spacing, min 11 px - Animation: orbit, physics, particles, ripples, braille, wisps, zoom, attract, explode - Interactions: scroll, hover, drag, click, reveal when visible I now have two Claude Max subs and two Codex Pro subs to keep up. I mainly use Opus for front-end and design, and Codex for everything else, including building this site and repo. This was my fastest launch ever, and it's already paying back all the time I spent creating these crazy experiments. To the 30 people who bought Pro or Lifetime, thank you. You're making it possible for me to keep spending so much time on this passion project.
0:39

This blew up, so I added 60 more three.js components from experiments I made over the last two weeks. I'm still amazed by how well Claude Code can create variants from source code, so I went wild with new themes, environments, and interactions. Some three.js prompts I used: - Environment: mountain, city, bridge, desert, forest, space, stars, earth, moon - Colors: sunrise, blue sky, sunset, nighttime, pastel, vibrant, monotone, or based on the environment - Style: minimal, retro, glass, brutalist - Typography: serif, sans, pixel, tall, wide, letter spacing, min 11 px - Animation: orbit, physics, particles, ripples, braille, wisps, zoom, attract, explode - Interactions: scroll, hover, drag, click, reveal when visible I now have two Claude Max subs and two Codex Pro subs to keep up. I mainly use Opus for front-end and design, and Codex for everything else, including building this site and repo. This was my fastest launch ever, and it's already paying back all the time I spent creating these crazy experiments. To the 30 people who bought Pro or Lifetime, thank you. You're making it possible for me to keep spending so much time on this passion project.

Meng To

95,271 görüntüleme • 4 gün önce

I open-sourced my 3d towers building site and the skills I used to create well-textured three.js models. The entire site is 1.38mb gzipped, including all models, sounds and textures. Site: Github repo: Skills: - threejs-towers - threejs-weather - threejs-landscape With an open-source project you get a way better starting point. All you need is to ask what to change, how to improve it, and rebuild it for a different theme. I added Cambodia, Vietnam and Turkey, plus storms and blizzards, and those came out perfectly with one prompt. The foundation is done, so adapting it and pairing it with your taste is what takes it further. Try modern towers, different backgrounds, weather and styles. SimCity, Civilization, Warcraft, C&C, etc. It's really fun.
0:53

I open-sourced my 3d towers building site and the skills I used to create well-textured three.js models. The entire site is 1.38mb gzipped, including all models, sounds and textures. Site: Github repo: Skills: - threejs-towers - threejs-weather - threejs-landscape With an open-source project you get a way better starting point. All you need is to ask what to change, how to improve it, and rebuild it for a different theme. I added Cambodia, Vietnam and Turkey, plus storms and blizzards, and those came out perfectly with one prompt. The foundation is done, so adapting it and pairing it with your taste is what takes it further. Try modern towers, different backgrounds, weather and styles. SimCity, Civilization, Warcraft, C&C, etc. It's really fun.

Meng To

53,716 görüntüleme • 16 gün önce

Latest peek at MoonBase One, playable in the browser with Three.js. I started this project with Opus 5, and now Grok 4.6 has been improving visuals for 2 days using Matt Shumer's gauntlet loop. Hope this inspires others to shoot for the stars with what you can build with AI ha ;) Try it out here: (best on desktop)
1:00

Latest peek at MoonBase One, playable in the browser with Three.js. I started this project with Opus 5, and now Grok 4.6 has been improving visuals for 2 days using Matt Shumer's gauntlet loop. Hope this inspires others to shoot for the stars with what you can build with AI ha ;) Try it out here: (best on desktop)

Ryan Campbell

11,800 görüntüleme • 8 gün önce

GitHub + Cursor is just INSANE GitHub has 28 million open-source projects that anyone can fork and build a new product So I built a new product: Repo to Docs The Agent will scan entire GitHub repo, analyze all files and create a knowledge base (docs) for AI coding tools: ↓
2:30

GitHub + Cursor is just INSANE GitHub has 28 million open-source projects that anyone can fork and build a new product So I built a new product: Repo to Docs The Agent will scan entire GitHub repo, analyze all files and create a knowledge base (docs) for AI coding tools: ↓

CJ Zafir

123,805 görüntüleme • 1 yıl önce

I applied Matt's prompt, ran it for a little over ten hours. About 1.3 million tokens on Opus 5. It created the game. I also made a video of it using Opus 5. Here's the video (and in my reply to this is a link to the actual game so you can play).
0:30

I applied Matt's prompt, ran it for a little over ten hours. About 1.3 million tokens on Opus 5. It created the game. I also made a video of it using Opus 5. Here's the video (and in my reply to this is a link to the actual game so you can play).

James Altucher

128,128 görüntüleme • 1 ay önce

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.
0:38

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

606,422 görüntüleme • 20 gün önce

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.
0:36

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.

Meng To

65,691 görüntüleme • 6 ay önce

This is probably the most complex workflow I’ve ever built, only with open-source tools. It took my 4 days. It takes four inputs: author, title, and style; and generates a full visual animated story in one click in ComfyUI . I worked on it for four days. There are still some bugs, but here’s the first preview. Here’s a quick breakdown: - The four inputs are sent to LLMs with precise instructions to generate: first, prompts for images and image modifications; second, prompts for animations; third, prompts for generating music. - All voices are generated from the text and timed precisely, as they determine the length of each animation segment. - The first image and video are generated to serve as the title, but also as the guide for all other images created for the video. - Titles and subtitles are also added automatically in Comfy. - I also developed a lot of custom nodes for minor frame calculations, mostly to match audio and video. - The full system is a large loop that, for each line of text, generates an image and then a video from that image. The loop was the hardest part to build in this workflow, so it can process either a 20-second video or a 2-minute video with the same input. - There are multiple combinations of LLMs that try to understand the text in the best way to provide the best prompts for images and video. - The final video is assembled entirely within ComfyUI. - The music is generated based on the LLM output and matches the exact timing of the full animation. - Done! For reference, this workflow uses a lot of models and only works on an RTX 6000 Pro with plenty of RAM. My goal is not to replace humans, as I’ll try to explain later, this workflow is highly controlled and can be adapted or reworked at any point by real artists! My aim was to create a tool that can animate text in one go, allowing the AI some freedom while keeping a strict flow. I don’t know yet how I’ll share this workflow with people, I still need to polish it properly, but maybe through Patreon. Anyway, I hope you enjoy my research, and let’s always keep pushing further! :)
0:55

This is probably the most complex workflow I’ve ever built, only with open-source tools. It took my 4 days. It takes four inputs: author, title, and style; and generates a full visual animated story in one click in ComfyUI . I worked on it for four days. There are still some bugs, but here’s the first preview. Here’s a quick breakdown: - The four inputs are sent to LLMs with precise instructions to generate: first, prompts for images and image modifications; second, prompts for animations; third, prompts for generating music. - All voices are generated from the text and timed precisely, as they determine the length of each animation segment. - The first image and video are generated to serve as the title, but also as the guide for all other images created for the video. - Titles and subtitles are also added automatically in Comfy. - I also developed a lot of custom nodes for minor frame calculations, mostly to match audio and video. - The full system is a large loop that, for each line of text, generates an image and then a video from that image. The loop was the hardest part to build in this workflow, so it can process either a 20-second video or a 2-minute video with the same input. - There are multiple combinations of LLMs that try to understand the text in the best way to provide the best prompts for images and video. - The final video is assembled entirely within ComfyUI. - The music is generated based on the LLM output and matches the exact timing of the full animation. - Done! For reference, this workflow uses a lot of models and only works on an RTX 6000 Pro with plenty of RAM. My goal is not to replace humans, as I’ll try to explain later, this workflow is highly controlled and can be adapted or reworked at any point by real artists! My aim was to create a tool that can animate text in one go, allowing the AI some freedom while keeping a strict flow. I don’t know yet how I’ll share this workflow with people, I still need to polish it properly, but maybe through Patreon. Anyway, I hope you enjoy my research, and let’s always keep pushing further! :)

Lovis Odin

58,841 görüntüleme • 11 ay önce

✨ To inspire more people to go build something now that we have AI to help us (especially non-tech people, cause I still know so many who are scared of building something): I added a [ BUILD IT ] button to It's like a mini-Lovable/Replit/v0: Any idea you see you like, you can click [ BUILD IT ], and it will use Opus 4.6 to build a landing page for it And then you can download the code it generated It's not a full startup of course, but a nice preview of what it can be, to give you an idea and inspire you to build it out further The code is live streamed also so you can see it being built 😊 Ironically this itself took me 1 hour to build with AI too Completely free and I pay for the tokens (please don't abuse it :D)
0:55

✨ To inspire more people to go build something now that we have AI to help us (especially non-tech people, cause I still know so many who are scared of building something): I added a [ BUILD IT ] button to It's like a mini-Lovable/Replit/v0: Any idea you see you like, you can click [ BUILD IT ], and it will use Opus 4.6 to build a landing page for it And then you can download the code it generated It's not a full startup of course, but a nice preview of what it can be, to give you an idea and inspire you to build it out further The code is live streamed also so you can see it being built 😊 Ironically this itself took me 1 hour to build with AI too Completely free and I pay for the tokens (please don't abuse it :D)

@levelsio

277,278 görüntüleme • 5 ay önce

Please try playing the bomb tag game made by my 4-year-old daughter! It is a voxel web game made with Three.js, created on Voxcinder, and it runs in the browser and also on mobile phones. You can start just by clicking! Feel free to play!
0:15

Please try playing the bomb tag game made by my 4-year-old daughter! It is a voxel web game made with Three.js, created on Voxcinder, and it runs in the browser and also on mobile phones. You can start just by clicking! Feel free to play!

takahiro(John Smith)

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