Founder at @designcodeio and aura.build. I teach designers code and developers design. My three.js templates: threeui.com

Singapore
Pinned Tweet
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: threeui.com Repo: github.com/MengTo/threeui I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.
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.
172
841
9,136
1,329,069
Meng To retweeted
Opus 5.5 sculpted every part of this ship in code, including the dragon, sails, and architecture. I can't say it has bad taste anymore. But it still needs steering, so I tried a new way of prompting. Live site: ship.mengto.here.now I asked Opus to score every part of the scene: the ship, water, landscapes, buildings, and their individual parts. Then I asked it to keep improving each part until it scored at least 8 out of 10, depending on my token and time budget. The key is to let it work as long as possible. The longer it works, the better it gets, until it reaches a point where I need to course correct. For me, Opus 5.5 reaches a level of detail and realism that no other model does.
57
49
964
45,917
I recorded a 47-minute tutorial on how I use Opus 5.5 to create designs with gorgeous three.js scenes. I've been using Mobbin MCP to give my agents strong references, then letting Opus bring them together into a full landing page with multiple sections and a consistent design. Opus also created a super detailed brand guide, logo explorations, and some amazing ad creatives. Went way beyond my expectations. Live site: sunset.mengto.here.now Site made during the tutorial, with prompts: sunset-tutorial.mengto.here.…
Paid partnership (ad)
23
31
427
24,483
Meng To retweeted
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: opxy.mengto.here.now Our team has been adding five landing pages and dozens of components to threeui.com every week. Reusing the same components and skills has improved the quality so much.
22
62
1,044
56,809
Opus 5.5 is next level. I’m genuinely impressed by the three.js details. I generated a playable boat scene through Japanese landscapes with dynamic weather, day and night lighting, realistic textures and 3D characters. Live site: valley.mengto.here.now The water reflections, physics, scenery and architecture are insane. I could look at this all day.
252
394
6,383
450,580
This blew up. I'm sharing the full prompt below. 👇 The source code is available on threeui.com along with 450 more. 150 are free and open-source. For beginners, I'm teaching how to prompt these from scratch in my courses on designcode.io --- Create from scratch a fully interactive 3D scene of a traditional wooden riverboat being poled upstream through a mountain river valley in feudal Japan during cherry-blossom season. The visual style should be cinematic and painterly rather than photorealistic, while still being exceptionally rich, detailed, polished, and visually sophisticated. Build the valley terrain, river, riverbanks, rocks, cherry trees, maples, pines, forest, ground cover, temple architecture, boat, boatman, villagers, sky, clouds, distant mountains, lighting, materials, water, reflections, petals, mist, particles, wildlife, weather, a full day-and-night cycle, sound, animation, camera work, composition, atmospheric depth, and color grading. The final result should feel like a premium, high-production 3D artwork, not a prototype, technical demo, or low-quality scene. Start from a completely blank page. Do not reuse or depend on any previous project or scene. You may create the assets yourself or use reliable, trusted, open-source assets and libraries when necessary. Mandatory requirements: No text of any kind may appear anywhere inside the scene, including the loading screen. No titles, names, logos, descriptions, credits, labels, or control instructions in any language. Any loading indicator must be purely graphic. Deliver the entire project as one final standalone page file that can be opened directly in a web browser, with assets embedded inside it as much as reasonably possible and no runtime requests to external CDNs. The valley must feel like one continuous, believable place. A winding river flows down a long valley that narrows into a gorge upstream. It has a deep channel and shallow pebbled margins. Its banks vary between gravel bars and steeper earthen banks. Forested valley walls rise into rounded mountains, and far ranges fade layer by layer into haze. Build these landmarks along the river: - An arched vermilion wooden bridge on piers that stand in the water. - A torii gate at the bridge's end. - A path to stone steps and a temple terrace held up by dry-stone retaining walls. - A main hall with a curved tile hip-and-gable roof, upturned corners, bracket sets, a railed veranda, and lattice doors. - A five-storey pagoda with a ringed spire on a knoll. - Stone lanterns along the approach. - A small wayside shrine in a clearing on the far bank. - A tunnel of small vermilion torii climbing the bank upstream to a hillside shrine. - A rope fence with paper streamers. - Bells hanging from the roof corners that swing in the wind. For vegetation, place hero cherry trees by hand, including a weeping cherry. Give them gnarled, leaning trunks, let some overhang the water, and cover them in dense blossom. Add Japanese maples, cloud-pruned pines, and a dense mixed forest of cedars and broadleaf crowns on the slopes. Cover the ground with wind-blown grass, reeds, spring wildflowers, ferns, clipped azalea shrubs, mossy boulders, and exposed roots at the water's edge. All foliage must move in one shared, gusting wind, and the blossoms must glow when backlit. The hero boat is a takasebune-style river cargo boat. It needs a planked hull with real thickness, ribs, thwarts, floorboards, and iron clamps. Give it a reed-mat canopy on bamboo hoops, a cargo of rice bales, crates, and a glazed jar, plus coiled rope, a bow lantern on an arching bamboo pole, and a sculling oar stowed at the stern quarter. A boatman in a straw cape stands on a raised bow platform and poles the boat with a long bamboo pole, using his whole body: hips drop, the spine leans into the push, the feet stay planted, and both hands grip the pole firmly. The cape reacts to the wind and to each stroke. The pole must never pass through the hull, the hands, or anything else. Add two villagers. A woman under a red oiled-paper umbrella stands at the bridge rail watching the boats. An old monk sweeps petals off the temple approach. Both breathe and move subtly. The water must be the centrepiece. It needs: - Accurate reflections of everything above it. - Refraction and depth-based color absorption, with the pebbled riverbed visible in the shallows. - Ripples that follow the flow. - Faster water and white foam collars around boulders and bridge piers, with foam trailing downstream. - A convincing wake that follows the boat: a bow wave, V-shaped arms, and a disturbed band along the hull. - Rafts of petals drifting in the slack water along the banks. Fill the valley with life and particles: - Petals tumble from each cherry canopy and through the air. - Petals ride the current downstream and settle on the banks, the steps, and the bridge deck. - Dust motes glow only inside the sunbeams. - Banks of low river mist drift over the water. - Flocks of birds wheel over the valley, and a pair of herons sometimes crosses the river ahead of the boat. - Fireflies come out at dusk. Run a continuous day-and-night cycle of several minutes that loops: dawn, morning, afternoon, a thunderstorm, golden hour, sunset, blue hour, moonlit night, pre-dawn. The sun travels a real arc, the moon takes over as the key light at night, and shadows follow whichever one is lit. Sky color, clouds with silver-gold linings, fog, ambient light, exposure, and the color grade all change with the hour. At night, show stars, a faint Milky Way band, and a cratered moon. The afternoon storm thickens the clouds into a dark overcast. It brings rain streaks, splash crowns on the river, and branching lightning that lights the clouds and the whole valley. Surfaces turn wet and glossy, then dry slowly through sunset. After dusk: - The stone lanterns and the hall's doors glow. - Paper lanterns set adrift on the river (tōrō nagashi) flow past and part around the boat. - Pale spirit wisps with comet-like trails drift above the water. Each one lights the water, mist, and banks around it and appears in the reflections. Golden hour is the signature look: a low warm sun up the valley, long shadows, god rays through the trees and mist, backlit blossoms, and a warm haze. Add a quiet synthesized soundscape of flowing river, rain, and thunder that rolls in after each flash, with a keyboard toggle to mute it. The boat must travel upstream on its own. An autopilot threads it between rocks and bridge piers without ever touching them. The viewer can take over with WASD or the arrow keys. Steering needs momentum, turning inertia, water drag, and a heel into turns. Banks, rocks, and piers push the boat back physically. After a short idle period, the autopilot resumes. A third-person chase camera follows the boat with drag-to-orbit, scroll-to-zoom, and a slow cinematic drift. It must never dip below the banks or into tree canopies. Holding a key fast-forwards the time of day. When the boat reaches the head of the gorge, the scene fades into mist and restarts downstream, so the journey loops forever. The water, boat, boatman, foliage, petals, and camera must all be animated naturally and smoothly. Avoid artificial slow motion or sluggish movement. The boat should feel like it is genuinely being pushed upstream against the current. Do not rely on primitive geometric shapes as the finished result. The trees, architecture, boat, characters, and rocks need carefully shaped geometry and clearly visible small-scale details: bark, roof tiles, rafters, joinery, planking, rope lashings, and bamboo nodes. Use detailed, scanned, or high-quality textures for rock, bark, ground, stone walls, and wood. Everything must rest on the ground or the water. Nothing may float, and no objects may intersect. Lighting must reveal the geometry and materials clearly at every hour. Use soft shadows, ambient occlusion in crevices and at roots, light shafts, bloom, and a filmic grade. Shadow sides must stay readable, never crushed to black. Maintain a strong balance between visual quality and real-time performance, including on high-density (Retina) displays, preserving smooth interaction and animation without making an obvious sacrifice in quality. Automatically use the most appropriate skills, tools, libraries, techniques, and available assets needed to achieve the best result. Do not wait for me to specify which technologies to use. Actually test the finished result in a desktop web browser. Capture screenshots at morning, during the storm, at golden hour, and at night. Inspect the browser console for errors, and fix every visible or technical issue you find. That includes distorted geometry, black screens, failed asset loading, broken animation, poor composition, rendering artifacts, floating or intersecting objects, the boat or pole clipping through anything, and camera problems. At the end, verify that the final file opens and works directly, that the scene contains no text whatsoever, and that there are no remaining runtime or loading errors. Then finish the task with only a brief response.
4
3
46
5,447
I've been using Hyper3D inside Codex to create 3D assets, especially ultra-detailed models for my landing pages. It's pretty crazy how fast the market is moving now that Astra, Opus 5, and Fable are getting so good at 3D. My current workflow is procedural three.js for environments, then Blender + Hyper3D for the more detailed models.
🚀 Introducing #HYPER3D Agentic Mode. AGI optimizes your input and chooses how to model it. Generate editable N-GONS #3D model for #CAD, building & industrial product. 📏Adjust dimensions. 🏃‍♀️Add animation. Towards Production-Ready, to Agent-Ready. This is Vibe Modeling👇
6
14
282
36,291
I recorded a 41-minute tutorial on how I use Astra to create insane three.js websites in Codex. I've been using DiffUI to brainstorm UIs before moving into code. It's fast and cheap, generates multiple variants and lets me branch ideas, sections, logos, and other components. Then I use "Copy for agent" and bring everything into Codex where I add transparent PNG layers, animations, and three.js skills. Live sites: cardgame.mengto.here.now renaissance.mengto.here.now 3D skills: github.com/MengTo/Skills Get $20 in credits on DiffUI: diffui.ai/?invite=inv_6ca449…
Paid partnership (ad)
33
68
739
54,211
I made a learning site for grades 1–7 with books for math, English, and science. My kids loved it. I used GPT-6 Astra with the Hyper3D Rodin MCP to create the 3D shelf souvenirs, candles, lamps, and pins. What stood out was the speed and quality. Rodin gave me richly detailed, high-quality, production-ready assets for the site. You can see the detail in the metalwork on the candelabra and lantern.
21
18
291
22,229
Here's how I made the decorations. I connected Hyper3D Rodin MCP to Codex using their setup prompt, then asked GPT-6 Astra for a fantasy candelabra and lantern that matched the site. Here's the MCP tool: bit.ly/4rh5iZ8 GPT-6 called Rodin to generate detailed, high-quality 3D models, then handled the code to integrate them into the website. Having generation and integration in the same workflow made the process faster and easier. You can see the models go from the Rodin preview into the working site. Generation took about 10 minutes and used 1 credit total. Roughly $1 for both assets in my run.
5
22
3,476
GPT-6 Astra is amazing for motion design, especially when you're presenting a UI or an app. I asked it to create a Codex promo using PerspectiveUI from my ThreeUI library. Then I kept refining it: a midnight-blue nebula, stars forming a 6, progressive blur, 3D camera moves, close-ups of typing, and text particles. I finished by cutting it to 30 seconds, six distinct scenes, and three prompts from our conversation. Live site: motion.mengto.here.now
29
42
765
54,651
I open-sourced this scrolling virtual-tour landing page, along with 8 new three.js skills. They cover room-to-room tours controlled by scrolling, sky rays, sky backgrounds, falling leaves, four seasons, high-resolution textures, high-poly models, and retina rendering. Live site: seijaku.mengto.here.now Source: github.com/MengTo/seijaku Skills: github.com/MengTo/Skills
This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: seijaku.mengto.here.now 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: github.com/achimala/dream-lo… Let me know if I should open-source the page.
13
25
293
24,790
This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: seijaku.mengto.here.now 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: github.com/achimala/dream-lo… Let me know if I should open-source the page.
32
51
591
65,724
Meng To retweeted
I built a multiplayer Catan-inspired game entirely with Astra. It's free to play: settlecoast.com It's mobile-friendly and has narration, guides, customizations, multiple expansions and a game lobby where anyone can join, chat, and use voice chat. It took 4 days to build and hundreds of dollars in tokens. Becoming a game dev in 2026 wasn't on my bingo card, but here we are. AI has advanced so much that you can finally make the game you've always dreamed of, even without a team.
155
130
2,037
181,081
Meng To retweeted
I built StoryComet with Fable 5.1 in three days. 15 animated children's books in five languages, with translated voiceovers, covers and UI. storycomet.app Parents can track progress. Kids can take quizzes, collect pins and 3D souvenirs, and switch languages on the fly. Six books teach English, Spanish, French, Japanese or Chinese. My three-day workflow: - Day 1: prototype (and post on X) - Day 2: 9 more books, languages, progress, quizzes, pins and souvenirs - Day 3: polish, domain name, supabase, accounts, Stripe and optimization The first three books are 100% free so you can try the whole experience. Members unlocks the other 12 at early-bird pricing. The 3D models and tokens cost me hundreds of dollars, so your support means a lot.
214
383
4,327
447,429
So I'm adding learning books for math, science, and languages using the same concept. It's still early, but my kids loved the stories! For some reason, they don't like doing homework on paper. Hopefully, creating a world around it and making it interactive and rewarding will work better. I'm trying different themes like Harry Potter and origami. A lot of people want to create their own, so I'll make a specific course about this and include the source code. For now, you can take my Fable 5.1 game development course and join my webinars: designcode.io/courses/build-…
I built StoryComet with Fable 5.1 in three days. 15 animated children's books in five languages, with translated voiceovers, covers and UI. storycomet.app Parents can track progress. Kids can take quizzes, collect pins and 3D souvenirs, and switch languages on the fly. Six books teach English, Spanish, French, Japanese or Chinese. My three-day workflow: - Day 1: prototype (and post on X) - Day 2: 9 more books, languages, progress, quizzes, pins and souvenirs - Day 3: polish, domain name, supabase, accounts, Stripe and optimization The first three books are 100% free so you can try the whole experience. Members unlocks the other 12 at early-bird pricing. The 3D models and tokens cost me hundreds of dollars, so your support means a lot.
36
19
432
34,614