Meng To
@MengTo • 183,188 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
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,272,703 görüntüleme • 12 gün önce
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 To580,444 görüntüleme • 14 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.
Meng To522,784 görüntüleme • 16 gün önce
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 To227,820 görüntüleme • 8 gün önce
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 görüntüleme • 5 gün ö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.
Meng To606,422 görüntüleme • 26 gün önce
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 To34,330 görüntüleme • 2 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.
Meng To463,221 görüntüleme • 25 gün önce
I recorded a 21-min video to talk about how I'm changing my strategy for the AI era
Meng To42,308 görüntüleme • 3 gün önce
I recorded a 40-min tutorial on how to create three.js landing pages using Claude Code and Opus 5
Meng To266,731 görüntüleme • 19 gün ö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.
Meng To98,643 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:
Meng To130,926 görüntüleme • 15 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.
Meng To144,302 görüntüleme • 23 gün önce
I made this Three.js bookshelf inspired by the Stripe Press site. It scrolls horizontally, and you can open each book and flip through the pages. It took quite a few prompts to get the textures and small details right. I’m open-sourcing the code and prompt. Demo: GitHub: Inspiration:
Meng To156,137 görüntüleme • 1 ay önce
I made a page-flipping sketchbook inspired by Matthew Yu's concept. Books and pages are some of the most interesting UIs to explore. AI gives you the basics unless you hand it a solid open-source to work from. So I asked for drag to paginate, which took many fixes for shadows, clipping, alpha masks and logic. Then a magnifying glass that has to move out of the way when you flip a page. For images I used gpt image 2 and it's very good at these Singapore sketches. I also love adding minimal background textures like japanese paper, water painting and ornaments. That's where the personality comes from. FYI I'm using Claude Code on the desktop app. My Codex is utterly out of limits after GPT 5.6 Sol ate all my $200/m plan 2-3x faster than 5.5. From testing, Opus 5 at Extra is more efficient. Let me know if I should open-source this or give the prompts.
Meng To131,970 görüntüleme • 27 gün önce
I love the rise of free UI libraries built by designers who really care about the details. Beautiful UI has 17 polished patterns for AI-native products, from thinking and streaming states to tool calls, approval cards, and diffs. Every component includes the source code, so you can give it to your agent and adapt the interaction to your own product.
Meng To149,765 görüntüleme • 1 ay önce
I made a Dark Souls-inspired Three.js game with Sol Ultra using Codex Sites. It's fully playable in the browser. I handled the prompts, references, and libraries like img2threejs. The game has shield blocking, dodge rolls, archery, and a full inventory system. Still blows my mind that you can build a 3D game like this in a single afternoon.
Meng To169,453 görüntüleme • 1 ay ö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.
Meng To54,193 görüntüleme • 22 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:
Meng To68,404 görüntüleme • 1 ay önce