Demos Hub

Our curated collection of 500+ free demos, prototypes, animations, templates, layouts, UI styles, and experimental design concepts. Download and use freely under MIT.

glsl×

glsl metaballs postprocessing Three.js WebGL

How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL

1 month ago by Yuki Kojima

glsl Three.js typography

Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL

4 months ago by Paola Demichelis

3D glsl Three.js WebGL

Implementing a Dissolve Effect with Shaders and Particles in Three.js

5 months ago by Jatin Chopra

glsl infinite OGL scroll slideshow WebGL

How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders

7 months ago by Oluwaseyi Oluwadare

Framer Motion glsl perlin-noise React Three Fiber Three.js

How to Code a Shader Based Reveal Effect with React Three Fiber & GLSL

8 months ago by Colin Demouge

glsl React Three Fiber Three.js WebGL

How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber

11 months ago by Oguzhan Tufenk

From our sponsor

Codrops is hosted by Liquid Web — trusted dedicated servers built for speed and reliability. Get yours today.

distortion glsl hover Three.js WebGL

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

11 months ago by Jean Mazouni

glsl scroll Three.js WebGL

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js

12 months ago by Jan Kohlbach

blur glsl OGL scroll WebGL

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

1 year ago by Jorge Toloza

WebGPU Reaction-Diffusion Compute Shader demo screenshot

Reaction-Diffusion Compute Shader in WebGPU

1 year ago by Robert Leitl

3D glsl Three.js typography

Rotating Twisted 3D Typography with Three.js and Shaders

2 years ago by Yuri Artiukh

glsl GSAP OGL slideshow WebGL

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

4 years ago by Francesco Michelini

glsl marble reflection Three.js WebGL

Magical Marbles in Three.js

4 years ago by Matt Rossman

From our sponsor

Meco is a new way to read newsletters separate from your inbox

Shaders on Scroll by Faboolea

glsl scroll Three.js WebGL

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

4 years ago by Fabienne Bielmann

blob distortion glsl sphere Three.js WebGL

Twisted Colorful Spheres with Three.js

4 years ago by Mario Carrillo

3D glsl Three.js typography WebGL

Kinetic Typography with Three.js

5 years ago by Mario Carrillo

$Featured image for the tutorial Scroll, Refraction and Shader Effects with Three.js and React$

distortion glsl parallax react React Three Fiber scroll Three.js WebGL

Scroll, Refraction and Shader Effects in Three.js and React

6 years ago by Paul Henschel

distortion glsl GSAP hover Motion Trail Three.js WebGL

How to Create Motion Hover Effects with Image Distortions using Three.js

6 years ago by Niccolò Miranda

canvas distortion glsl hover menu navigation pixi.js WebGL

How to Build an Underwater-Style Navigation Using PixiJS

6 years ago by Liam Egan

blotter.js distortion glsl typography WebGL

Text Distortion Effects using Blotter.js

6 years ago by Manoela Ilic