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.

From our sponsor

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

From our sponsor

Make designs interactive & publish as websites with Readymag. Transfer anything from Figma to Readymag in 4 clicks with a plugin

ProceduralClouds_featured

procedural Three.js WebGL

How to Create Procedural Clouds Using Three.js Sprites

5 years ago by Robert Borghesi

Featured Image for How to Unroll Images with Three.js

roll scroll Three.js unroll WebGL

How to Unroll Images with Three.js

5 years ago by Yuri Artiukh

3D Folding Layout Technique for HTML Elements

5 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

5 years ago by Marco Fugaro

Apple Fifth Avenue Cube featured image

cube glass regl WebGL

How to Create the Apple Fifth Avenue Cube in WebGL

5 years ago by Lorenzo Cadamuro

$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

5 years ago by Paul Henschel

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

5 years ago by Arno Di Nunzio

light Three.js time-lapse WebGL

High-speed Light Trails in Three.js

6 years ago by Daniel Velasquez

distortion page-transition slideshow Three.js WebGL

Creative WebGL Image Transitions

6 years ago by Yuri Artiukh

distortion GSAP hover slideshow Three.js WebGL

Making Gooey Image Hover Effects with Three.js

6 years ago by Arno Di Nunzio

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

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

distortion fluid hover OGL WebGL

Mouse Flowmap Deformation with OGL

6 years ago by Robin Delaporte

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

audio Three.js visualizer webcam WebGL

How to Create a Webcam Audio Visualizer with Three.js

6 years ago by Ryota Takemoto

configurator distortion Three.js WebGL

A Configurator for Creating Custom WebGL Distortion Effects

6 years ago by Daniel Velasquez

carousel hover parallax react slider slideshow

React Slider with Parallax Hover Effects

6 years ago by Ryan Mulligan

filter motion-trail

Image Trail Effects

6 years ago by Manoela Ilic

Smooth Scrolling Image Effects

6 years ago by Manoela Ilic

How to Add Smooth Scrolling with Inner Image Animations to a Web Page

6 years ago by Manoela Ilic

draggable grid menu navigation page-transition slider typography

Draggable Menu with Image Grid Previews

6 years ago by Manoela Ilic

draggable page-transition slider

Draggable Image Strip

6 years ago by Manoela Ilic

distortion grid Three.js WebGL

Creating Grid-to-Fullscreen Animations with Three.js

6 years ago by Daniel Velasquez

grid hover menu page-transition typography

Animated Image Columns

6 years ago by Manoela Ilic

canvas distortion glsl hover menu navigation pixi.js WebGL

How to Build an Underwater-Style Navigation Using PixiJS

6 years ago by Liam Egan

menu overlay page-transition

How to Create and Animate Rotated Overlays

6 years ago by Manoela Ilic

3D react svg Three.js WebGL

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

6 years ago by Paul Henschel

distortion draggable hover menu Three.js WebGL

How to Create a Sticky Image Effect with Three.js

6 years ago by Daniel Velasquez

page-transition slider slideshow

Crossroads Slideshow

6 years ago by Manoela Ilic

fragment Three.js WebGL

Exploding 3D Objects with Three.js

6 years ago by Yuri Artiukh

phenomenon scroll Three.js WebGL

How to Create Smooth WebGL Transitions on Scroll using Phenomenon

6 years ago by Colin van Eenige

distortion filter hover menu svg

Image Distortion Effects with SVG Filters

6 years ago by Manoela Ilic

motion-trail repetition slideshow typography

Text Trail Effect

6 years ago by Manoela Ilic

« Previous 1 … 6 7 8 9 10 … 17 Next »