Loading video...

Video Failed to Load

Go Home

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

134,202 views • 1 month ago •via X (Twitter)

44 Comments

Yash's profile picture
Yash1 month ago

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

Meng To's profile picture
Meng To1 month ago

that looks incredible. you should open source it

Sukuna Perpflow's profile picture
Sukuna Perpflow1 month ago

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

Meng To's profile picture
Meng To1 month ago

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

Sukuna Perpflow's profile picture
Sukuna Perpflow1 month ago

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 .

Meng To's profile picture
Meng To1 month ago

such a good resource. let me try that

BeRogue's profile picture
BeRogue1 month ago

👀 Have a look.

Coreţchi Vasile's profile picture
Coreţchi Vasile1 month ago

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

bimri's profile picture
bimri1 month ago

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

Meng To's profile picture
Meng To1 month ago

sure, can improve that

Chris Tran (ex-Riot)'s profile picture
Chris Tran (ex-Riot)1 month ago

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.

Meng To's profile picture
Meng To1 month ago

Yes here’s the video where I explained my process

Chris Tran (ex-Riot)'s profile picture
Chris Tran (ex-Riot)1 month ago

Amazing! Thank you for your generosity!

World of Claudecraft - wishlist now on Steam's profile picture
World of Claudecraft - wishlist now on Steam1 month ago

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

Vic eL's profile picture
Vic eL1 month ago

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?

Max Bevza's profile picture
Max Bevza1 month ago

this open source drop is actually insane

s.h's profile picture
s.h1 month ago

Beautiful.

Meng To's profile picture
Meng To1 month ago

it's a lot of playing with the details.

Rangga Suntya🔻's profile picture
Rangga Suntya🔻1 month ago

Thank you

Buswe's profile picture
Buswe1 month ago

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

Aj's profile picture
Aj1 month ago

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

TheCoderBTW's profile picture
TheCoderBTW1 month ago

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

Sylva 🚀's profile picture
Sylva 🚀1 month ago

👀

Linc's profile picture
Linc1 month ago

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

Chetan | 3D Websites Daily's profile picture
Chetan | 3D Websites Daily1 month ago

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

jake downs's profile picture
jake downs1 month ago

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

Viren Khatri's profile picture
Viren Khatri1 month ago

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

GaleForceAI's profile picture
GaleForceAI1 month ago

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?

Luca Capone | Vibe Coder's profile picture
Luca Capone | Vibe Coder1 month ago

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.

Meng To's profile picture
Meng To1 month ago

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

Rishabh Joshi's profile picture
Rishabh Joshi1 month ago

Should I opensource this then?

Reqeique's profile picture
Reqeique1 month ago

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

GCC Now 🇦🇪🇧🇭🇰🇼🇸🇦🇯🇴🇧🇭🇪🇭's profile picture
GCC Now 🇦🇪🇧🇭🇰🇼🇸🇦🇯🇴🇧🇭🇪🇭1 month ago

It was super slow isnt it?

Shaun's profile picture
Shaun1 month ago

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

AI Mastery Guide's profile picture
AI Mastery Guide1 month ago

130,000 blades, under 1MB

AI Apps API's profile picture
AI Apps API1 month ago

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.

Viren Khatri's profile picture
Viren Khatri1 month ago

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

Theo's profile picture
Theo1 month ago

When does it work on IOS safari

RemoteBrowser's profile picture
RemoteBrowser1 month ago

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?

Ecniv's profile picture
Ecniv1 month ago

so cool

Billionscyber Limited's profile picture
Billionscyber Limited1 month ago

Nice work🫡

Tanvir Ahammed | Product Designer's profile picture
Tanvir Ahammed | Product Designer1 month ago

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

(ツ)𝐒𝐚𝐦𝐲𝐋𝐞𝐯𝐲👀's profile picture
(ツ)𝐒𝐚𝐦𝐲𝐋𝐞𝐯𝐲👀1 month ago

@HirukaCh vas a tener laburo por eones.

Kevin Rajan's profile picture
Kevin Rajan1 month ago

this feels like ✨

Related Videos