Susurrus: Crafting a Cozy Watercolor World with Three.js and Shaders
In Articles, by Xianyao Wei
A behind-the-scenes look at blending NPR shading, sound, and interaction to shape a meditative WebGL scene.
In Articles, by Xianyao Wei
A behind-the-scenes look at blending NPR shading, sound, and interaction to shape a meditative WebGL scene.
In Articles, by Tomoya Okada
A look at designing and building the 4WIDE website, exploring how distortion, blur, and motion were used to create an expressive experience while balancing clarity and performance.
In Articles, by Ming Jyun Hung
A deep dive into building an infinite procedural landscape using WebGPU and Three.js, where compute shaders and indirect drawing bring millions of interactive grass blades to life.
In Tutorials, by Damar Aji Pramudita
A step-by-step breakdown of how I built a Three.js visual explainer on dithering by animating 160,000 cubes with custom shaders.
In Articles, by Arnaud Rocca
An exploration of how reusable GSAP animations, custom text transitions, and fluid WebGL interactions shape a distinctive portfolio experience.
In Tutorials, by Cullen Webber
Learn how to use Three.js to blend two scenes with a fluid simulation, creating a smooth, dynamic reveal effect.
In Tutorials, by Mael Ruffini
Build a single, persistent Three.js scene in Webflow and drive smooth, GSAP-powered page transitions with Barba.js.
In Tutorials, by Houmahani Kane
A tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.
In Articles, by Corentin Bernadou
An overview of how I redesigned my portfolio as a creative playground, blending editorial design, WebGL experiments, and thoughtful motion.
In Articles, by George Hastings
A look at how Unicorn Studio brings the power of WebGL shaders to designers through a layer-based workflow, making it easier to create expressive, interactive graphics directly in the browser.
In Tutorials, by Matt Greenberg
A practical walkthrough of building a curved 3D product grid with React Three Fiber and GLSL, covering shaders, animation, and performance.
In Articles, by Jeremy Chang
Explore composite rendering in WebGL and how render targets power seamless transitions and advanced scene compositing.
In Tutorials, by David Faure
Build a smooth horizontal parallax gallery in DOM/CSS/JS, then upgrade it to GPU-powered WebGL (Three.js) with shaders.
In Tutorials, by Matis Dené
Build a scroll-driven, infinitely looping 3D image tube in React Three Fiber powered by shaders, inertia, and a unified motion system.
In Tutorials, by Sujen Phea
A deep dive into building a GPU-enhanced procedural curve system in Three.js, where organic motion emerges from simple steering rules and endless Bézier paths.
In Tutorials, by Chakib Mazouni
Learn how to build a multi-page WebGL image gallery with scroll-triggered shader reveals, smooth scrolling, and seamless page transitions using GSAP, Three.js, Astro, and Barba.js.
In Tutorials, by Thibault Introvigne
Build a Three.js WebGPU scene where MSDF text dissolves with a noise-driven TSL shader while synchronized dust and spinning petal particles burst out, finished with selective bloom using MRT.
In Tutorials, by Edoardo Lunardi
Learn how to build an infinite, pannable image canvas with React Three Fiber. We’ll use chunk-based rendering and performance-first techniques to create a smooth, endlessly explorable image space.