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
Recently I've come across a useful tool for creating awesome gradients.
It comes with 1,200+ WebGL shader gradient presets and 14 different gradient types, so you can start from a library, tweak endlessly, and create something truly unique every time.
If you’d like to try it, drop a comment and I'll leave you the link to test it out.
This looks powerful 🔥 I’m always looking for better gradient tools would love to test it.
23/28 Tetris
Mondays can be a bit too serious so here's some playful Tetris 3D work done entirely in Framer using 3D transforms. Inspired by the Tetris game cover.
It's not obvious by now, I love exploring the possibilities of this feature.
Preview Link.
Love seeing 3D transforms used this way — feels playful but still very intentional.
I've seen it over and over, beautiful Figma designs, smooth Framer builds, then the site goes live and suddenly load times tank. Not because of bad code. Just because nobody stopped to think about image formats.
So I'm building something to fix that.
A plugin that lives inside your existing workflow, no extra tools, no manual conversion steps:
→ On Figma: export your assets directly as WebP, right from your design file
→ On Framer: compress and convert images to WebP before they ever hit production
Clean files. Faster sites. Better Core Web Vitals.
I'm building this for designers and developers who care about performance but don't want it to slow down their process. The best optimization is the one that happens automatically.
What's your current image workflow? Is this a pain point for you too?
This is badly needed. Image optimization is one of those silent killers of great builds.
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
aivideo
AI video tools are moving at warp speed. What tools are you using?
whennotai
As AI accelerates, creative judgment matters more. What part of your work stays human?