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
StringTune-3D: Orchestrating WebGL through the DOM
Live demo: https://codesandbox.io/p/sandbox/stringtune-3d-filter-list-4v2z5q
Syncing HTML layouts with WebGL typically means verbose JS and 1-frame scroll lag. StringTune-3D solves this by enforcing the DOM as the strict single source of truth.
Instead of imperative Three.js glue code, 3D objects and materials are controlled exclusively via HTML attributes and CSS variables.
Mechanisms:
• Synchronous Mapping: Maps 3D meshes directly to CSS Grid/Flexbox bounding boxes, completely eliminating scroll jitter.
• CSS-to-Uniform: Parses properties like --filter into shader uniforms in real-time.
Zero manual matrix updates. Pure WebGL driven by CSS.
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
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.
Galaxy Generator! 🌌
Made with Three.js
You can tweak a lot of things here: https://galaxy-generator-sandy-ten.vercel.app
Very satisfying visuals.
Curious — are you using custom shaders or tweaking standard materials?
What if your facial expression became your controller? 🎮
I created a shooting game that trains your facial muscles by using your own expressions as the controller.
- 😊 Smile to power up your shots
- 😮 Open your mouth to fire a laser
- ⚡ Real-time 2D x 3D integration with Rive + React + Three.js
- 🎶 Sound, light, and animation working in sync
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?