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 blender button React Three Fiber Three.js

Exporting a Cloth Simulation from Blender to an Interactive Three.js Scene

3 days ago by Joshua Guo

Interactive WebGL Backgrounds: A Quick Guide to Bayer Dithering

3 weeks ago by Seva Dolgopolov

Three.js TSL typography WebGL webgpu

Interactive Text Destruction with Three.js, WebGPU, and TSL

1 month ago by Lolo Armdz

3D React Three Fiber Three.js WebGL

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

1 month ago by Dominik Fojcik

audio GSAP Three.js WebGL

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

2 months ago by Filip Zrnzevic

grid GSAP infinite parallax

Building an Infinite Parallax Grid with GSAP and Seamless Tiling

2 months ago by Jorge Toloza

From our sponsor

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

glsl metaballs postprocessing Three.js WebGL

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

2 months ago by Yuki Kojima

Responsive text article cover image

postprocessing scroll Three.js typography WebGL

How to Create Responsive and SEO-friendly WebGL Text

3 months ago by Eemeli Haakana

elastic grid GSAP scroll

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

3 months ago by Manoela Ilic

3D Three.js Webflow

Building Interactive 3D Cards in Webflow with Three.js

3 months ago by Franco Beltramella

3D AI game rapier React Three Fiber Three.js

Building a Physics-Based Character Controller with the Help of AI

3 months ago by Ian Curtis

clip-path ecommerce grid GSAP

Animated Product Grid Preview with GSAP & Clip-Path

3 months ago by Gwen Bogaert

3D carousel GSAP page transition scroll

On-Scroll 3D Carousel

4 months ago by Manoela Ilic

From our sponsor

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

GSAP particles Three.js TSL WebGL

Matrix Sentinels: Building Dynamic Particle Trails with TSL

4 months ago by MisterPrada

grid GSAP page transition repetition

Animating in Frames: Repeating Image Transition

4 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

5 months ago by Andrew Woan

React Three Fiber Three.js TSL WebGL webgpu

WebGPU Scanning Effect with Depth Maps

5 months ago by deadrabbbbit

glsl Three.js typography

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

5 months ago by Paola Demichelis

grid Three.js WebGL

Building an Interactive Image Grid with Three.js

5 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

5 months ago by Matt Park

From our sponsor

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

3D glass GSAP procedural Three.js TSL webgpu

Rendering a Procedural Vortex Inside a Glass Sphere with Three.js and TSL

6 months ago by MisterPrada

Stylized Water Effects with React Three Fiber

3D React Three Fiber Three.js WebGL

Creating Stylized Water Effects with React Three Fiber

6 months ago by Thalles Lopes

3D glsl Three.js WebGL

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

6 months ago by Jatin Chopra

postprocessing React Three Fiber Three.js WebGL

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

6 months ago by Niccolò Fanton

cursor p5.js sketch

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

7 months ago by Jorge Toloza

astro GSAP template

Players Club: A Free Astro Template for Showcasing Music Artists

7 months ago by Manoela Ilic

3D Three.js WebGL

How to Make The Fluffiest Grass With Three.js

7 months ago by The Ebenezer

From our sponsor

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

3D circle circular GSAP Three.js typography

Building an On-Scroll 3D Circle Text Animation with Three.js and Shaders

7 months ago by David Faure

WebGL Shader Techniques for Dynamic Image Transitions

7 months ago by Arlind Aliu

generative art React Three Fiber Three.js WebGL

Creating Generative Artwork with Three.js

7 months ago by Eduard Fossas

shining particles mask by dominik fojcik

3D gpgpu postprocessing Three.js WebGL

Crafting a Dreamy Particle Effect with Three.js and GPGPU

8 months ago by Dominik Fojcik

canvas morphing

Creating the Morphing Effect of the Luma Dream Machine Website

9 months ago by Jean Mazouni

glsl infinite OGL scroll slideshow WebGL

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

9 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

9 months ago by Colin Demouge

3D React Three Fiber Three.js WebGL

Creating Dynamic Terrain Deformation with React Three Fiber

9 months ago by Oguzhan Tufenk

grid GSAP shopify shopping cart

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

9 months ago by Andrea Biason

1 2 3 … 16 Next »

All demo authors

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