Loading video...
Video Failed to Load
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... show more
134,202 views • 1 month ago •via X (Twitter)
44 Comments

Looks very great! I too tried to create 3d website using grok. Here's the post:

that looks incredible. you should open source it

Thanks buddy did this after your tokyo landing page, and skills. Keep sharing stuffs. ☺️

looks incredible. one thing i noticed is that i have to go through many iterations of asking to improve the textures, lighting, realism.

i tried uploading pbr texture, it improved, but it was repeat textures.. couldnt sort it. and if you see this open source of gras i try implementing same didnt work on my scene. i think we need cinema 4d mcp support .

such a good resource. let me try that

👀 Have a look.

130k instanced blades in under 1MB as a single HTML file is pure witchcraft. WebGL optimization at its finest.

this is good 🫡 work could you look into mobile experience... it's quite slow 🦥

sure, can improve that

Are there videos of you walking through this process? Would love to see exactly how you set up the loop for these things. The outcome is gorgeous. But the setup is probably really smart. :) I want the smart.

Yes here’s the video where I explained my process

Amazing! Thank you for your generosity!

130k instanced blades under 1 MB is impressive, thanks for open sourcing this

That’s so sick man. Respect. It does not work on my mobile iOS Safari yet. Do you have a hint how I could improve that if I want to use your repo as an example for that?

this open source drop is actually insane

Beautiful.

it's a lot of playing with the details.

Thank you

Open sourcing the skills behind it is the useful part, that procedural moss geometry is reusable well beyond this one scene.

Thanks for sharing bro. Means a lot for the community to vibe code

the moss root at 130k instanced blades is the part i want to see in person. how does it hold up on mobile safari?

👀

So clean, love it. Being a static HTML you should try Novence, Opus can set up the hosting for you.

yes 3d websites are too much fun!! love it - here is what i made..

pretty laggy on a 2020 macbook air M1, but it looks lovely

woah! your post inspired me to try and build a great looking hero section! will share it soon

Proper work on the moss. 250k instanced blades responding to pointer is a serious render budget. Are you handling LOD or just raw GPU instancing?

This is the whole shift. I'm 50, didn't write a line before last year, and I build the same way: describe the thing, let Opus close the gap I never learned. The skills part is what compounds.

it's crazy what you can do when you start trusting the AI more and become more of an art director

Should I opensource this then?

130k instanced blades in one scene and the whole thing fits under 1 MB. One draw call, or did you chunk it?

It was super slow isnt it?

This is the good kind of open source. Did the first frame look like the reference or did Opus need a few passes? I am always curious if a 1 pass can land a 99%er

130,000 blades, under 1MB

Packaging the interactions as skills is the part most people skip and then regret. A single HTML file is a demo, three named skills are something the model can reuse next month without you re-explaining the effect from scratch. Curious whether the 130k instanced blades came out of the first pass, or whether you had to push it toward instancing after a naive version tanked the frame rate.

I finally built it! Thanks for your inspiration and all the open source stuff! Here's the post:

When does it work on IOS safari

The 'orbit using mouse' prompt is a great example of how far procedural generation has come. Curious if you've tried pushing it with more complex interactions, like drag-to-rotate or scroll-driven camera paths?

so cool

Nice work🫡

You did such an amazing job, man! You're truly talented. 🔥

@HirukaCh vas a tener laburo por eones.

this feels like ✨
