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

The Pantone Color of the Year 2025 web design assets that get you ahead of 2025’s web design trends

MotionGrid_featured

How to Create a Motion Hover Effect for a Background Image Grid

5 years ago by Manoela Ilic

3d glsl three.js typography webgl

Kinetic Typography with Three.js

5 years ago by Mario Carrillo

Infinite Scroll Menu

infinite menu scroll

An Infinitely Scrollable Vertical Menu

5 years ago by Manoela Ilic

gooey hover menu morphing navigation svg typography

Morphing Gooey Text Hover Effect

5 years ago by Manoela Ilic

distortion hover postprocessing three.js webgl

Interactive WebGL Hover Effects

5 years ago by Yuri Artiukh

grid hover intro page-transition

Rapid Image Layers Animation

5 years ago by Manoela Ilic

Marquee_featured

css-only hover marquee menu typography

CSS-Only Marquee Effect

5 years ago by Manoela Ilic

cursor distortion filter hover svg

Animated Custom Cursor Effects

5 years ago by Manoela Ilic

distortion filter hover line link svg typography

Ideas for Distorted Link Effects on Menus

5 years ago by Manoela Ilic

distortion glsl simplex noise three.js wave webgl

Create a Wave Motion Effect on an Image with Three.js

5 years ago by Mario Carrillo

BackgroundScaleClip_featured

clip-path hover

Background Scale Hover Effect with CSS Clip-path

5 years ago by Manoela Ilic

DistortedLink_featured

distortion filter hover line link svg

Distorted Link Effects with SVG Filters

5 years ago by Manoela Ilic

TextPath_featured

distortion filter scroll svg textPath typography

Animating SVG Text on a Path

5 years ago by Manoela Ilic

Soundbasedimagedistortion_featured

audio distortion p5.js Sound webgl

Audio-based Image Distortion Effects with WebGL

5 years ago by Yannis Yannakopoulos

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

Cutoutlayout_featured

clip-path grid parallax

Crafting a Cutout Collage Layout with CSS Grid and Clip-path

5 years ago by Bri Camp Gomez

ImageDragging_featured

draggable filter

Image Dragging Effects

5 years ago by Manoela Ilic

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

5 years ago by Daniel Velasquez

distortion page-transition slideshow three.js webgl

Creative WebGL Image Transitions

5 years ago by Yuri Artiukh

3d canvas distortion hover slideshow three.js webgl

Making Gooey Image Hover Effects with Three.js

5 years ago by Arno Di Nunzio

distortion glsl hover motion-trail three.js webgl

How to Create Motion Hover Effects with Image Distortions using Three.js

5 years ago by Niccolò Miranda

3d Mixamo three.js webgl

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

5 years ago by Kyle Wetton

3d blur generative-art geometry three.js webgl

Simulating Depth of Field with Particles using the Blurry Library

5 years ago by Domenico Bruzzese

distortion fluid hover ogl webgl

Mouse Flowmap Deformation with OGL

5 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

5 years ago by Kyle Wetton

audio three.js visualizer webcam webgl

How to Create a Webcam Audio Visualizer with Three.js

5 years ago by Ryota Takemoto

configurator distortion three.js webgl

A Configurator for Creating Custom WebGL Distortion Effects

5 years ago by Daniel Velasquez

carousel hover parallax react slider slideshow

React Slider with Parallax Hover Effects

6 years ago by Ryan Mulligan

« Previous 1 … 5 6 7 8 9 … 16 Next »

All demo authors

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