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

All of these three.js designs are available as prompts you can give your agent. You can customize these and 390 more I made with your own content and screens. Astra gets both the detailed prompt and source code, which gives it a much stronger starting point. I'm adding at least 100 more over the next 30 days.

One thing people keep mentioning is that Astra is great at stealing designs, is that entirely true ?

Tools are becoming incredibly good at replicating references, so yes. In a way, it's a new era of open-source, because anything can become one. I think the true test is to be able to reshape into another, better thing we've always wanted to exist: games that were never made, liquid glass that was never replicated perfectly, animations that required libraries, etc.

the “keep comparing it to the reference” loop is the useful part. I tried something similar and it just polished the same 3 mistakes for an hour

Yep make the ai work harder

that compare loop is doing the real work

So many ways to ask your agent to loop and verify work. Let it work for as long as possible.

Astra writing the whole three.js stack is strong. For shops that cannot put the brief into a cloud API, the same job still needs open weights on GPUs on site.

Holy the level of detail on that gear and on those macbooks is insane.. Do you even use any tools to fine tune details manually, or everything is through prompting?

all prompting. astra is a beast.

I'd bet the code-first part is doing more of the real work here. keeping everything as text lets it diff and regenerate each pass, so it can actually keep comparing against your reference without losing state along the way.

how well does it handle performance optimization when generating raw three.js geometries from scratch?

you can make the perf adaptive to browser. agent can also just remove high-resource effects or set fallbacks.

Love those 3D+animated apple icons!

Love how it’s all code

Beautiful piece of work.

customizing 3D models in code sounds great, but some visual assets still add value

By assets I mean stuff you gotta embed that is not code. Good for reference but better if all code

impressive ideas there man! How long do these typically take ?

from a couple of hours to a day (while multi-tasking). needs a few direction/improvement prompts

customizable code opens up endless possibilities for unique three.js experiences

three.js in code makes the output way more useful because every camera, material, and light stays editable. i'm keeping an eye on astra for that compare loop.

open it up

You mean open source it? Which one

Astra making three.js UIs from code only? bro this is the future of web design

Thank you, Meng!! This will be very helpful.

That focus transition is such a nice touch. It gives the whole composition a real sense of depth.

Agreed, three js makes a lot of things possible

The ability to iterate on 3D elements just by feeding in references is a huge time saver. Building these directly in code makes the workflow so much more flexible.

looks insane but it still cant design rly

still a massive upgrade from sol

the compare loop is the useful bit. liquid glass is decoration; checking against the reference is where the browser stops being a slot machine.

liquid glass is notorious for being hard to replicate. astra was able to almost one-shot it.

liquid glass is exactly where the compare loop earns its keep. One-shot gets the reference close; repeated diffs are what stop the highlights, blur and spacing from quietly becoming a new design.

Liquid Glass, and ship the backdrop sampling with it. I built one for Kotlin Multiplatform: the shader maths is cheap, the cost is sampling the layer behind every frame, and most versions re-sample when the content behind has not moved. That is the part people cannot work out.

that compare loop is low-key magic fr

Nice

next prompt: "add a button that sells this site for $5000"

Code-only three.js is nicer for agents than dumping an assets folder. The catch is still your compare loop: who decides the render is close enough before Astra polishes forever?

This is seriously impressive. Procedural 3D from a few prompts is a huge unlock.

rip threejs devs and tools like @splinetool

🔥

Release the MacBook one. Then share your “compare + fix” prompt pattern as a mini 3D UI workflow guide.

the underrated part is that the output stays as code. you can diff it, review it, hand it to someone else. binary 3d assets always go stale the moment the person who made them moves on.

the three.js stuff is wild now

Designers at Apple