๐ช๐ต๐ฎ๐ ๐๐ฒ ๐๐๐ฒ๐ฑ ๐๐ผ ๐ฝ๐ฎ๐ ๐ฎ ๐ช๐ฒ๐ฏ๐๐ ๐ฑ๐ฒ๐๐ฒ๐น๐ผ๐ฝ๐ฒ๐ฟ ๐ณ๐ผ๐ฟ, ๐ ๐ฏ๐๐ถ๐น๐ ๐๐ฒ๐๐๐ฒ๐ฟ๐ฑ๐ฎ๐ ๐ถ๐ป ๐ญ๐ฎ๐ฌ ๐บ๐ถ๐ป๐๐๐ฒ๐. ๐ง๐ฒ๐๐๐ถ๐ป๐ด ๐๐ต๐ฒ ๐ป๐ฒ๐ ๐๐ฒ๐บ๐ถ๐ป๐ถ ๐ฏ.๐ญ ๐ฃ๐ฟ๐ผ ๐คฏ
On our educational project
izum.study, we have a complex Three.js scene. Back in the day, we specifically hired a niche WebGL specialist to bring it to life.
Yesterday I decided to stress-test the new Gemini 3.1 Pro: could I recreate this animation from scratch using ONLY text?
๐ง๐ต๐ฒ ๐ฟ๐ฒ๐๐๐น๐ ๐ด๐ฒ๐ป๐๐ถ๐ป๐ฒ๐น๐ ๐ถ๐บ๐ฝ๐ฟ๐ฒ๐๐๐ฒ๐ฑ ๐บ๐ฒ.
Yes, I only built the first part so far (a wave of thousands of particles collapsing into a tornado and assembling into a perfect 3D sphere on scroll). ๐๐๐ ๐ ๐ฑ๐ถ๐ฑ ๐ถ๐ ๐บ๐๐๐ฒ๐น๐ณ ๐ถ๐ป ๐ท๐๐๐ ๐ญ๐ฎ๐ฌ ๐บ๐ถ๐ป๐๐๐ฒ๐!
๐ง๐ต๐ถ๐ ๐ธ๐ถ๐ป๐ฑ ๐ผ๐ณ ๐บ๐ฎ๐๐ต ๐ถ๐ป ๐๐๐ฆ๐ ๐๐ต๐ฎ๐ฑ๐ฒ๐ฟ๐ ๐ป๐ผ๐ฟ๐บ๐ฎ๐น๐น๐ ๐๐ฎ๐ธ๐ฒ๐ ๐ฑ๐ฎ๐๐:
โก The model wrote the Bezier curve logic on its own so particles move smoothly and never fly outside the screen boundaries.
โก It tightly synced the tornado math with scroll behavior through GSAP โ by itself.
โก It even solved the classic WebGL issue with GPU micro-precision errors on the first and last frames, making the animation completely seamless.
What used to require hardcore code and a separate budget โ now you just act as an art director and guide the model's logic.
๐๐ผ๐ ๐๐ผ๐๐น๐ฑ ๐๐ผ๐ ๐ฟ๐ฎ๐๐ฒ ๐๐ต๐ถ๐ ๐ฟ๐ฒ๐๐๐น๐ ๐ณ๐ผ๐ฟ ๐ฎ ๐ต๐ผ๐๐ฟ๐ ๐ผ๐ณ ๐ฝ๐ฟ๐ผ๐บ๐ฝ๐๐ถ๐ป๐ด? Score it from 1 to 10 ๐ฅ
And do you think I should take on the challenge and try to recreate the full animation from the site?