The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Declarative WebGL Particle Morphing
Demo: https://codesandbox.io/p/sandbox/ycqkng
Problem: Morphing 3D particles usually requires manual buffer management, GPGPU shaders, and imperative render loops. It’s boilerplate-heavy and disconnected from the DOM.
Approach: StringTune-3D treats the DOM as the strict single source of truth. WebGL instancing is controlled purely via CSS.
Mechanisms:
• Instancing: Set --particles-mode: instanced on a standard <div>.
• Geometry: Pass a .glb URL to the --instance-model CSS variable.
• Interpolation: Update the variable. The rule transition: --instance-model 0.8s ease forces the engine to intercept the state change and interpolate GPU buffers to match the CSS easing curve.
Zero manual buffer management. Pure CSS driving 3D geometry updates.
Very slick execution. The morphing fluidity feels incredibly refined 👌
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
This looks super smooth and immersive! The particle motion feels really well controlled and visually satisfying ✨🔥
Ever saved a module in your email editor, dropped it into a different template, and… everything looks different? Fonts changed, colors off, spacing weird.
In Stripo, modules inherit CSS from the template they land in. That's by design. It means when you drop a module into a client's template, it automatically matches their brand styles. No manual tweaking.
But sometimes you don't want that. You've built something with specific colors, fonts, and padding, and you need it to look exactly the same everywhere.
That's where inline styles come in. By saving CSS directly inside the module's HTML, you lock in the look. General Settings won't override it.
For freelancers juggling multiple client brands, this gives you the best of both worlds:
• Flexible modules that adapt to any template
• Rigid modules that stay pixel-perfect across projects
We broke it all down with examples here:
Curious: do you usually want your modules to adapt or stay locked? How do you handle it?
stripo.email
Stripo modules and CSS: Why they inherit template styles and how to keep your own — Stripo.email
Stripo modules and CSS logic are explained in our special article. Why are modules designed this way, and what are the benefits to the email design process? Find out in this overview.
Never even thought about this before — the inline styles tip alone just saved me from so many headaches!
𝗪𝗵𝗮𝘁 𝘄𝗲 𝘂𝘀𝗲𝗱 𝘁𝗼 𝗽𝗮𝘆 𝗮 𝗪𝗲𝗯𝗚𝗟 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗳𝗼𝗿, 𝗜 𝗯𝘂𝗶𝗹𝘁 𝘆𝗲𝘀𝘁𝗲𝗿𝗱𝗮𝘆 𝗶𝗻 𝟭𝟮𝟬 𝗺𝗶𝗻𝘂𝘁𝗲𝘀. 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗻𝗲𝘄 𝗚𝗲𝗺𝗶𝗻𝗶 𝟯.𝟭 𝗣𝗿𝗼 🤯
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?
Trending
Notion
Notion isn’t just where you work, it’s starting to work for you. What agents are you building?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
brandguidelines
Brand guidelines are becoming living systems, not static documents. What are you building for your clients?
aivideo
AI video tools are moving at warp speed. Which ones are you experimenting with?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?