Archive of creative open source demos

1 month ago 2

Featured Picks

Some Ideas for Fullscreen Image Slideshow Animations

On-Scroll Column & Row Animations

On-Scroll 3D Stack Motion Effect

Vortex Glass Sphere with TSL

3D Folding Layout Technique for HTML Elements

Creative WebGL Image Transitions

View all demos

The Creative Hub is a growing showcase of open source web demos, design experiments, interactive concepts, and creative ideas. It highlights original work by Codrops contributors alongside standout projects from around the web. Have something inspiring to share? Let us know.

Codrops Originals

Connected Grid Layout Animation

Sketchy Pencil Effect with Three.js Post-Processing

Gradient Mask Hover Effect from Evervault

Rotating Twisted 3D Typography with Three.js and Shaders

On-Scroll SVG Filter Effect

Surface Sampling in Three.js

Hover Preview Effect with Mini Map

More

Osmo

Access a growing library of resources & code snippets and start building websites people remember.

Learn with Tutorials

Interactive Text Effect with Three.js & GLSL

Magical Marbles in Three.js

Interactive 3D Bulge Text Effect with React Three Fiber

Interactive 3D Device Showcase with Threepipe

Crafting Scroll Based Animations in Three.js

Typography Motion Trail Effect with Three.js

More

GSAP Highlights

On-Scroll Expanding Image Animation within Typography

Gallery to Overlay Transition

Dec 23, 2024 by Osmo

Dec 2, 2024 by Osmo

Consecutive Scroll Animations with One Element

May 12, 2025 by GSAP

More

WebGL

Infinite Tubes with Three.js

VFX-JS text shadow effect

Jul 22, 2024 by Amagi

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

More

Scroll-driven Animations

On-Scroll Revealing WebGL Images

Pixel Scan effect with VFX-JS

Aug 29, 2024 by Amagi

On-Scroll Letter Animations

Distortion and Grain Effects on Scroll with Shaders in Three.js

Smooth scroll with skew effect

Blurry Text Reveal on Scroll

More

Grid-based Layouts & Effects

Fullscreen Hover Loop Effect

A Glitchy Grid Layout Slideshow

On-Scroll Perspective Grid Animations

Grid Layout with Motion Hover Effect and Content Preview

Direction Aware Hover Effect

Direction-Aware Hover Effect with CSS3 and jQuery

Grid Navigation Effects with jQuery

On-Scroll Column & Row Animations

More

State-to-state Animations

Expanding Grid Item Animation

Grid Item Animation Layout

Sketch 021: SVG Path Page Transition (Vertical)

Grid Layout with Motion Hover Effect and Content Preview

Inspiration for Article Intro Effects

Expanding Rounded Menu Animation

Menu to Inner Page Animation with Image Grid Background

More

Slideshows

Transition Effect with CSS Masks

InteractiveParticlesSlideshow

Interactive Particles Slideshow

Creative SVG Strokes Animation

Shape Slideshow with Clip-path

More

GSAP Course

Free access to 34 video lessons, projects, and hands-on demos for all levels.

Typography

Apr 26, 2025 by GSAP

Experimental On-Scroll Text Animations with SVG Clip-Path

Fancy SVG Letter Animation

Scroll-based SVG Filter Animations on Text

Heading Set Styling with CSS

Inspiration for Letter Effects

Inspiration for Text Styles and Hover Effects

More

Hover Interactions

Lines to Content Layout Animation

Ideas for CSS Button Hover Animations

Rotated 3D Letters and Image Hover Effect

Sketch 008: Image Motion Trail (Circle)

Making Gooey Image Hover Effects with Three.js

Ideas for Distorted Link Effects on Menus

BackgroundScaleClip_featured

Background Scale Hover Effect with CSS Clip-path

More

Read Entire Article