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.

3D React Three Fiber Three.js WebGL

How To Create Kinetic Image Animations with React-Three-Fiber

1 week ago by Dominik Fojcik

audio GSAP Three.js WebGL

Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

1 month ago by Filip Zrnzevic

glsl metaballs postprocessing Three.js WebGL

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

1 month ago by Yuki Kojima

elastic grid GSAP scroll

Elastic Grid Scroll: Creating Lag-Based Layout Animations with GSAP ScrollSmoother

2 months ago by Manoela Ilic

3D Three.js Webflow

Building Interactive 3D Cards in Webflow with Three.js

2 months ago by Franco Beltramella

3D carousel GSAP page transition scroll

On-Scroll 3D Carousel

2 months ago by Manoela Ilic

From our sponsor

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

GSAP particles Three.js TSL WebGL

Matrix Sentinels: Building Dynamic Particle Trails with TSL

2 months ago by MisterPrada

grid GSAP page transition repetition

Animating in Frames: Repeating Image Transition

3 months ago by Manoela Ilic

3D blender GSAP Three.js WebGL

Building a Fully-Featured 3D World in the Browser with Blender and Three.js

3 months ago by Andrew Woan

React Three Fiber Three.js TSL WebGL webgpu

WebGPU Scanning Effect with Depth Maps

4 months ago by deadrabbbbit

glsl Three.js typography

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

4 months ago by Paola Demichelis

grid Three.js WebGL

Building an Interactive Image Grid with Three.js

4 months ago by Samuel Jarry

3D glass React Three Fiber reflection refraction Three.js WebGL

Playing with Light and Refraction in Three.js: Warping 3D Text Inside a Glass Torus

4 months ago by Matt Park

From our sponsor

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

Stylized Water Effects with React Three Fiber

3D React Three Fiber Three.js WebGL

Creating Stylized Water Effects with React Three Fiber

5 months ago by Thalles Lopes

3D glsl Three.js WebGL

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

5 months ago by Jatin Chopra

postprocessing React Three Fiber Three.js WebGL

Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality

5 months ago by Niccolò Fanton

cursor p5.js sketch

Building a Playful Stop-Motion Crayon Cursor in p5.js

5 months ago by Jorge Toloza

3D Three.js WebGL

How to Make The Fluffiest Grass With Three.js

5 months ago by The Ebenezer

WebGL Shader Techniques for Dynamic Image Transitions

6 months ago by Arlind Aliu

shining particles mask by dominik fojcik

3D gpgpu postprocessing Three.js WebGL

Crafting a Dreamy Particle Effect with Three.js and GPGPU

7 months ago by Dominik Fojcik

From our sponsor

Learn to build web apps with Next.js, the world's most popular full-stack framework, in this course on Scrimba.

glsl infinite OGL scroll slideshow WebGL

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

8 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

grid GSAP shopify shopping cart

From Product to Cart: Adding Guiding Animations to the Shopping Experience

8 months ago by Andrea Biason

filter Framer Motion gooey react svg

How to Create a Gooey Search Interaction with Framer Motion and React

8 months ago by Oguzhan Tufenk

distortion scroll typography

How to Create an Organic Text Distortion Effect with Infinite Scrolling

8 months ago by Jorge Toloza

3D Three.js TSL webgpu

Interactive 3D with Three.js BatchedMesh and WebGPURenderer

9 months ago by Christophe Choffel

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

Master JavaScript animation with GSAP—free access to 34 video lessons, projects, and hands-on demos for all levels.

distortion glsl hover Three.js WebGL

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

11 months ago by Jean Mazouni

3D Three.js WebGL

Interactive 3D Device Showcase with Threepipe

12 months ago by Palash Bansal

3D React Three Fiber Three.js WebGL

Origami: 12 Free Animated 3D Objects

12 months ago by deadrabbbbit

glsl scroll Three.js WebGL

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

1 year ago by Jan Kohlbach

React Three Fiber Three.js TSL WebGL

How to Create a Liquid Raymarching Scene Using Three.js Shading Language

1 year ago by Ben McCormick

blur glsl OGL scroll WebGL

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

1 year ago by Jorge Toloza

Digital meets Physical: Risograph Printing with WebGL

1 year ago by Maximilian Berndt

hover typography

Hover Animations for Terminal-like Typography

1 year ago by Manoela Ilic

Shape Lens Blur Effect with SDFs and WebGL

1 year ago by Guillaume Lanier

1 2 3 … 13 Next »

All demo authors

Would you like to join us as a contributor? Let us know.