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 AI game r3f rapier Three.js

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

2 days ago by Ian Curtis

clip-path ecommerce grid GSAP

Animated Product Grid Preview with GSAP & Clip-Path

3 days ago by Gwen Bogaert

3D carousel GSAP page-transition

On-Scroll 3D Carousel

3 weeks ago by Manoela Ilic

GSAP particles Three.js TSL WebGL

Matrix Sentinels: Building Dynamic Particle Trails with TSL

4 weeks ago by MisterPrada

grid GSAP page-transition repetition

Animating in Frames: Repeating Image Transition

1 month 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.

3D blender GSAP Three.js WebGL

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

2 months ago by Andrew Woan

react-three-fiber Three.js TSL WebGL webgpu

WebGPU Scanning Effect with Depth Maps

2 months ago by deadrabbbbit

glsl Three.js typography

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

2 months ago by Paola Demichelis

grid Three.js WebGL

Building an Interactive Image Grid with Three.js

2 months ago by Samuel Jarry

3D glass react-three-fiber refraction Three.js WebGL

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

3 months ago by Matt Park

Stylized Water Effects with React Three Fiber

3D react-three-fiber Three.js WebGL

Creating Stylized Water Effects with React Three Fiber

3 months ago by Thalles Lopes

From our sponsor

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

3D glsl Three.js WebGL

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

3 months ago by Jatin Chopra

react-three-fiber Three.js WebGL

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

4 months ago by Niccolò Fanton

cursor p5.js sketch

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

4 months ago by Jorge Toloza

3D Three.js WebGL

How to Make The Fluffiest Grass With Three.js

4 months ago by The Ebenezer

3D circle GSAP Three.js typography

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

4 months ago by David Faure

WebGL Shader Techniques for Dynamic Image Transitions

4 months ago by Arlind Aliu

From our sponsor

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

generative-art react-three-fiber Three.js WebGL

Creating Generative Artwork with Three.js

4 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

5 months ago by Dominik Fojcik

canvas morphing

Creating the Morphing Effect of the Luma Dream Machine Website

6 months ago by Jean Mazouni

glsl infinite OGL scroll slideshow WebGL

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

6 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

6 months ago by Colin Demouge

3D react-three-fiber Three.js WebGL

Creating Dynamic Terrain Deformation with React Three Fiber

6 months ago by Oguzhan Tufenk

From our sponsor

Generate & deploy to Vercel with 1 click. Next.js 14, Typescript, TailwindCSS + Shadcn UI

grid GSAP shopify shopping-cart

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

6 months ago by Andrea Biason

GSAP layout scroll

Consecutive Scroll Animations with One Element

6 months ago by Manoela Ilic

filter framer motion gooey react svg

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

6 months ago by Oguzhan Tufenk

glsl OGL perlin-noise

Creating an ASCII Shader Using OGL

7 months ago by Andrico Karoulla

distortion scroll typography

How to Create an Organic Text Distortion Effect with Infinite Scrolling

7 months ago by Jorge Toloza

3D Three.js TSL webgpu

Interactive 3D with Three.js BatchedMesh and WebGPURenderer

7 months ago by Christophe Choffel

3D hand tracking Three.js webcam WebGL

Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js

7 months ago by Caio Bassetti

3D grid scroll typography

Staggered (3D) Grid Animations with Scroll-Triggered Effects

8 months ago by Manoela Ilic

glsl react-three-fiber Three.js WebGL

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

9 months ago by Oguzhan Tufenk

distortion glsl hover Three.js WebGL

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

9 months ago by Jean Mazouni

distortion filter scroll svg typography

Scroll-based SVG Filter Animations on Text

9 months ago by Manoela Ilic

3D Three.js WebGL

Interactive 3D Device Showcase with Threepipe

10 months ago by Palash Bansal

3D react-three-fiber Three.js WebGL

Origami: 12 Free Animated 3D Objects

10 months ago by deadrabbbbit

1 2 3 … 16 Next »

All demo authors

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