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×

3D React Three Fiber Three.js WebGL

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

1 week ago by Dominik Fojcik

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

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

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

Stylized Water Effects with React Three Fiber

3D React Three Fiber Three.js WebGL

Creating Stylized Water Effects with React Three Fiber

4 months ago by Thalles Lopes

From our sponsor

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

3D glsl Three.js WebGL

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

5 months ago by Jatin Chopra

3D Three.js WebGL

How to Make The Fluffiest Grass With Three.js

5 months ago by The Ebenezer

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

3D Three.js TSL webgpu

Interactive 3D with Three.js BatchedMesh and WebGPURenderer

9 months ago by Christophe Choffel

3D Three.js WebGL

Interactive 3D Device Showcase with Threepipe

11 months ago by Palash Bansal

3D React Three Fiber Three.js WebGL

Origami: 12 Free Animated 3D Objects

12 months ago by deadrabbbbit

3D react React Three Fiber Three.js WebGL

Exploring a 3D Text Distortion Effect With React Three Fiber

1 year ago by Nine

From our sponsor

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

Exploring 3D Effects with 2D Optical Illusions

1 year ago by Nine

3D react React Three Fiber Three.js WebGL

3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting

2 years ago by Yuri Artiukh

3D cannon-es GSAP Three.js WebGL

Crafting a Dice Roller with Three.js and Cannon-es

2 years ago by Ksenia Kondrashova

3D glsl Three.js typography

Rotating Twisted 3D Typography with Three.js and Shaders

2 years ago by Yuri Artiukh

Getting Creative with Infinite Loop Scrolling

3 years ago by Manoela Ilic

Sketch 029: Infinite Loop Scrolling (3D Animation)

3 years ago by Manoela Ilic

3D game Three.js WebGL

How to Add More Fun to a Game: Extending “The Aviator”

3 years ago by Michel Helms

From our sponsor

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

3D hover Motion Trail repetition stack

Sketch 010: Image Motion Trail (Perspective)

3 years ago by Manoela Ilic

3D hover Motion Trail repetition stack

Sketch 009: Image Motion Trail (Perspective)

3 years ago by Manoela Ilic

3D hover menu typography

Rotated 3D Letters and Image Hover Effect

4 years ago by Manoela Ilic

3D grid hover magnetic page transition

Magnetic 3D Grid Interaction with Content Preview

4 years ago by Manoela Ilic

3D distortion loading shape Three.js WebGL

Rotating Loading Animation of 3D Shapes with Three.js

4 years ago by Yuri Artiukh

3D glsl Three.js typography WebGL

Kinetic Typography with Three.js

5 years ago by Mario Carrillo

3DCloth_featured

3D cannon.js cloth perlin-noise physics slideshow Three.js WebGL

How to Create a Physics-based 3D Cloth with Cannon.js and Three.js

5 years ago by Arno Di Nunzio

From our sponsor

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

3D Folding Layout Technique for HTML Elements

6 years ago by Daniel Velasquez

Featured image for Playing with Texture Projection in Three.js

3D perlin-noise texture Three.js WebGL

Playing with Texture Projection in Three.js

6 years ago by Marco Fugaro

Tutorial Physics with cannonjs and three.js

3D cannon.js menu physics Three.js typography WebGL

Building a Physics-based 3D Menu with Cannon.js and Three.js

6 years ago by Arno Di Nunzio

3D Mixamo Three.js WebGL

How to Create an Interactive 3D Character with Three.js

6 years ago by Kyle Wetton

3D blur generative art geometry Three.js WebGL

Simulating Depth of Field with Particles using the Blurry Library

6 years ago by Domenico Bruzzese

3D blender customizer Three.js WebGL

How to Build a Color Customizer App for a 3D Model with Three.js

6 years ago by Kyle Wetton

3D react svg Three.js WebGL

Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber

6 years ago by Paul Henschel

How to Create a Fake 3D Image Effect with WebGL

6 years ago by Yuri Artiukh

3D Three.js WebGL

Buildings Wave Animation with Three.js

6 years ago by Ion D. Filho

1 2 3 Next »