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

WebGL Hackathon (until 8 May): Create your unique Shader to win prizes ranging from $500 to $1000!

From our sponsor

Turn your creations into recurring revenue by selling templates on the Wix Studio Marketplace.

intro locomotive-scroll scroll

Image Stack Intro Animation

4 years ago by Manoela Ilic

hover menu navigation page-transition

Inline Menu Layout with Gallery Panel

4 years ago by Manoela Ilic

grid locomotive-scroll scroll

Scroll Animations for Image Grids

5 years ago by Manoela Ilic

curtains.js page-transition video video-transition webgl

WebGL Video Transitions with Curtains.js

5 years ago by Yuri Artiukh

cannon.js mirror react react-three-fiber reflection refraction three.js use-cannon

Creating Mirrors in React-Three-Fiber and Three.js

5 years ago by Gianmarco Simone

grid menu navigation page-transition slideshow

Menu to Inner Page Animation with Image Grid Background

5 years ago by Manoela Ilic

grid slideshow typography

Diagonal Thumbnail Slideshow Animation

5 years ago by Manoela Ilic

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

GSAP 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

GSAP page-transition typography

Making Stagger Reveal Animations for Text

5 years ago by Manoela Ilic

MotionGrid_featured

grid GSAP hover

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

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