Meng To
@MengTo • 184,403 subscribers
Founder at @designcodeio and https://t.co/Kpiogf225W. I teach designers code and developers design. My three.js templates: https://t.co/25OYbxYycG
Shorts
Videos
Astra built this three.js game with gorgeous graphics, then recreated every scene in Blender and made the trailer too. It feels like a massive upgrade from Sol for 3D graphics and front-end design. The UI feels way more polished and less like AI slop. The rocks, trees, monuments, and characters are all procedural code, keeping the game under 2 MB before the image and music assets. The level of autonomy is unbelievable. It needed very little steering, though I still had to keep pushing it to work harder on the details. The UI icons, buttons, and ornaments were made as transparent PNGs with GPT Image 2.
Meng To120,598 次观看 • 1 天前
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 To68,868 次观看 • 19 小时前
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 To1,290,682 次观看 • 16 天前
Fable 5.1 one-shot this Dark Souls meets Diablo game. All code, 222 KB total, zero asset files. Every texture, model and sound effect is generated procedurally. The whole sfx system is 7 KB of Web Audio synthesis. It nailed mechanics I only named in text: stamina, dodge rolls, barbarian skills, and a punishing Souls-style boss. The soul pickups and death animations came out way smoother than I expected. What gets me is how much it infers from a few genre references, with no screenshots or video to go on. Reaching this level used to take dozens of prompts in Sol or Opus 5. Anyone with taste can now make really fun games in the browser.
Meng To136,683 次观看 • 2 天前
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 To173,118 次观看 • 4 天前
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 To594,602 次观看 • 18 天前
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 To524,762 次观看 • 20 天前
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 To229,489 次观看 • 12 天前
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 To606,422 次观看 • 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.
Meng To464,501 次观看 • 29 天前
I pretty much one-shotted this Japanese garden landing page with MiniMax Code. It got the design and frontend right, then generated the ink-wash images, ambient video, and soundtrack inside the same project. I usually need Codex or Claude Code plus Higgsfield and several MCPs for a page like this. MiniMax had everything built in, and it's at a fraction of the token cost.
Meng To72,583 次观看 • 5 天前
I haven't released a new course in two years because I thought AI would replace education. I was wrong. In a sea of AI slop, good education has never felt more relevant. So I'm releasing DesignCode 5 with a new Codex masterclass. The new site was built entirely in Codex with lots of three.js components: I added homework, tests, certificates, a vault, and weekly live sessions. Pro and Lifetime members also get the Product Pass, with one year of Pro access to Framer, Mobbin, Aura, and more. GPT-5.6 Sol xHigh migrated ten years of content from a large CMS and Dropbox into Firebase. That made me realize I didn't need to build another CMS. With the right skills, Codex can handle video editing, writing, image generation, screen recording, and content updates. I'm spending less time managing everything and more time creating. It's never been more fun. I created a bunch of skills for this workflow. They're all in my repo, and the Three.js components are on Huge thanks to Framer and Mobbin for believing in me and giving our Pro and Lifetime students one year of Pro access. To every new student, welcome. I'll be there every week, giving you direct feedback and teaching you everything I know. DesignCode 5 is 50% off for early adopters right now. There's also a $499 Lifetime option for anyone tired of another subscription.
Meng To110,625 次观看 • 9 天前
I open-sourced the three.js site I built with Fable 5.1. I pushed the Kyoto theme further with tatami spaces, sliding doors, a 3D plastic menu, and a retro footer animation. It's surprising how much you can reshape when the whole experience is procedural code. Live site: GitHub:
Meng To40,540 次观看 • 3 天前
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 To98,643 次观看 • 14 天前
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 To131,716 次观看 • 19 天前
Insane what you can create with three.js nowadays. I made a game-quality 3D experience in the browser with water ripples, smoke effects, a 3D paper menu, underwater UI, and a peeling footer. The whole thing is pure code and only 183 KB. Seriously, no loading screen needed. I combined and components with a few direct prompts: - Open the hamburger menu as a 3D paper overlay {threeui 3D paper} - Add a peel effect to the footer {canvasui peel} - When the cursor passes through the heading, turn the letters into smoke {canvasui liquid object} Inspired by the amazing site. Let me know if I should open-source it.
Meng To37,422 次观看 • 6 天前
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 To144,302 次观看 • 27 天前