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

Seamlessly export your designs to Wix Studio—and take them further.

polygon slideshow three.js webgl

Experimental Triangle Image Transitions with WebGL

5 years ago by Yuri Artiukh

grid hover locomotive-scroll page-transition scroll

Thumbnail to Full Width Image Animation

5 years ago by Manoela Ilic

button hover magnetic ui-element

Magnetic Buttons

5 years ago by Manoela Ilic

filter hover menu

Exploring Animations for Menu Hover Effects

5 years ago by Manoela Ilic

hover menu navigation

Creating a Menu Image Animation on Hover

5 years ago by Manoela Ilic

glitch grid hover magnetic navigation slideshow

A Glitchy Grid Layout Slideshow

5 years ago by Manoela Ilic

page-transition typography

Making Stagger Reveal Animations for Text

5 years ago by Manoela Ilic

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

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

All demo authors

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