Create Dynamic 3D Effects with React Three Fiber & WebGPUCreate Dynamic 3D Effects with React Three Fiber & WebGPU
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
A flat photo is one thing. A depth map is a cheat code: it tells the shader what’s “near” and “far,” so the same image can bend, break, and breathe in 3D-ish ways without a full 3D scene. I’ve been playing with a scanning + depth setup in the browser: React Three Fiber, Three.js WebGPU, and TSL so the effects live in node materials — readable, tweakable, and ready to animate. Three moods from the same idea: Ocean Depths — sine waves distort the UVs, weighted by depth; a scan line rolls through with a cool screen-blended highlight. It reads like light moving through water. Digital Fragments — the image sorts into cells; deeper regions shift more, so the picture feels like it’s being re-sorted in place. Pointer movement nudges the distortion — “reality rearranged.” System Malfunction — noise and RGB split kick in only in a band around the scan; the glitch breathes with GSAP. The vibe is broken signal, not random noise. Add bloom on top and you get something that feels cinematic, not like a tech demo — even though under the hood it’s mostly math on textures.
Back to feed
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