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.
225 posts tagged with
Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience
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.
False Earth: From WebGL Limits to a WebGPU-Driven World
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.
Animating 160,000 Cubes in Three.js to Visualize Dithering
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.
Arnaud Rocca’s Portfolio: From a GSAP-Powered Motion System to Fluid WebGL
In Articles, by Arnaud Rocca
An exploration of how reusable GSAP animations, custom text transitions, and fluid WebGL interactions shape a distinctive portfolio experience.
Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js
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.
Building Seamless 3D Transitions with Webflow, GSAP, and Three.js
In Tutorials, by Mael Ruffini
Build a single, persistent Three.js scene in Webflow and drive smooth, GSAP-powered page transitions with Barba.js.
Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds
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.
Inside Corentin Bernadou’s Portfolio: Swiss-Inspired Layouts, WebGL Geometry, and Thoughtful Motion
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.
WebGL for Designers: Creating Interactive, Shader-Driven Graphics Directly in the Browser
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.
From Flat to Spatial: Creating a 3D Product Grid with React Three Fiber
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.
Composite Rendering: The Brilliance Behind Inspiring WebGL Transitions
In Articles, by Jeremy Chang
Explore composite rendering in WebGL and how render targets power seamless transitions and advanced scene compositing.
Creating a Smooth Horizontal Parallax Gallery: From DOM to WebGL
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.
Reactive Depth: Building a Scroll-Driven 3D Image Tube with React Three Fiber
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.
Building an Endless Procedural Snake with Three.js and WebGL
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.
Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js
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.
WebGPU Gommage Effect: Dissolving MSDF Text into Dust and Petals with Three.js & TSL
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.
Infinite Canvas: Building a Seamless, Pan-Anywhere Image Space
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.