Creative Hub

Explorations in code and design from the creative web community

Featured Picks

WebGL Shader Techniques for Dynamic Image Transitions

Jan 22, 2025 by Arlind Aliu

Lines to Content Layout Animation

Apr 5, 2022 by Manoela Ilic

distortion filter GSAP hover page transition typography

Building a WebGL Carousel with React Three Fiber and GSAP

Apr 27, 2023 by Fabio Ottaviani

carousel GSAP postprocessing react React Three Fiber Three.js WebGL

Puddle in rain

Jun 20, 2025 by Faraz Shaikh

glsl rain React Three Fiber Three.js water WebGL

Shuffling Typography Animation

Feb 8, 2023 by Manoela Ilic

Featured Image for How to Unroll Images with Three.js

How to Unroll Images with Three.js

Jan 22, 2020 by Yuri Artiukh

3D scroll Three.js WebGL

CSS splatters

Nov 28, 2024 by David Aerne

particles physics

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

Oct 21, 2019 by Niccolò Miranda

distortion glsl GSAP hover Motion Trail Three.js WebGL

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

Hover Preview Effect with Mini Map

Mar 1, 2022 by Manoela Ilic

Fluffy Grass With Three.js

Feb 4, 2025 by Ebenezer

3D Three.js WebGL

Image Tiles Menu Animation

Apr 26, 2023 by Manoela Ilic

GSAP menu page transition

Magical Marbles in Three.js

Aug 2, 2021 by Matt Rossman

glsl marble reflection Three.js WebGL

Rotated 3D Letters and Image Hover Effect

Apr 28, 2021 by Manoela Ilic

3D hover menu typography

Thumbnail Hover Effect with SVG Filters

Jun 9, 2021 by Manoela Ilic

distortion filter hover svg

Layout with Reveal Animations and Content Preview

Jul 28, 2021 by Manoela Ilic

grid menu navigation page transition

Unreveal Effects for Content Previews

Nov 1, 2022 by Manoela Ilic

GSAP page transition

Cloudways

Focus on your clients, leave hosting config to Cloudways

No need to maintain servers. Cloudways handles all ops so you can focus on designs. Get 50% OFF for 3 months + 50 Free Migrations!

Learn with Tutorials

Surface Sampling in Three.js

Aug 31, 2021 by Louis Hoebregts

particles Three.js WebGL

Interactive 3D Bulge Text Effect with React Three Fiber

Mar 20, 2024 by Roman Jean-Elie

react React Three Fiber Three.js typography WebGL

Balloon Button

Aug 20, 2025 by Joshua Guo

3D button React Three Fiber Three.js WebGL

Digital meets Physical: Risograph Printing with WebGL

Jun 27, 2024 by Maximilian Berndt

Making CSS View Transitions Easy with Velvette

Jan 19, 2024 by Noam Rosenthal

page transition view transition

Animated WebGL Shaders with GSAP

Oct 8, 2025 by Andrea Biason

GSAP hover Three.js WebGL x-ray

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

Aug 27, 2024 by Jean Mazouni

distortion glsl hover Three.js WebGL

Matrix Sentinels

May 5, 2025 by MisterPrada

GSAP particles Three.js TSL WebGL

GSAP Highlights

Connected Grid Layout Animation

Aug 30, 2023 by Manoela Ilic

grid GSAP scroll

Pixelated Image Reveal – Osmo

Oct 20, 2024 by Osmo

On-Scroll Shape Morph Animations

Nov 16, 2023 by Manoela Ilic

clip-path GSAP morphing scroll

Consecutive Scroll Animations with One Element

Nov 20, 2024 by Manoela Ilic

GSAP layout scroll

WebGL Magazine

Sep 23, 2025 by Jean Mazouni

3D GSAP scroll Three.js WebGL

Palmer’s Draggable Product Grid

Sep 1, 2025 by Joffrey Spitzer

Reflection Scroll Effect

Feb 15, 2024 by Manoela Ilic

GSAP reflection scroll

Grid Flow Animation

Jul 27, 2023 by Manoela Ilic

grid GSAP loading navigation

WebGL

Sands of Time – A Particle Hourglass

Sep 27, 2025 by Techartist

3D glsl particles Three.js WebGL

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

Oct 21, 2019 by Niccolò Miranda

distortion glsl GSAP hover Motion Trail Three.js WebGL

Experimental Triangle Image Transitions with WebGL

Aug 27, 2020 by Yuri Artiukh

slideshow Three.js WebGL

Vortex Glass Sphere with TSL

Mar 10, 2025 by MisterPrada

3D glass GSAP procedural Three.js TSL WebGL webgpu

Saturn

Feb 2, 2016 by Karim Maaloul

3D planet Three.js WebGL

Waveform Visualiser

Oct 20, 2020 by Yugam Dhuriya

audio glsl Three.js visualizer WebGL

Reaction Diffusion

Oct 21, 2022 by Amanda Ghassaei

gpu io reaction diffusion WebGL

Halloween

Oct 31, 2018 by Karim Maaloul

depth halloween Three.js WebGL

Scroll-driven Animations

Infinite Circular Gallery with OGL

Feb 23, 2021 by Luis Bizarro

draggable glsl infinite OGL scroll WebGL

Vertical Zoom Slideshow

Apr 15, 2025 by Filip Zrnzevic

draggable GSAP scroll slideshow

On-Scroll Text Repetition Animation

Apr 13, 2022 by Manoela Ilic

GSAP repetition scroll typography

Sketch 025: Infinite Loop Scrolling (Horizontal)

Jan 11, 2023 by Manoela Ilic

Horizontal Smooth Scroll Layouts

Dec 8, 2020 by Manoela Ilic

locomotive scroll parallax scroll

Getting Creative with Infinite Loop Scrolling

Jan 11, 2023 by Manoela Ilic

Parallax Image Layers

Nov 12, 2024 by Osmo

GSAP parallax scroll

Crafting a Scrollable and Draggable Parallax Slider

Dec 1, 2020 by Ruud Luijten

draggable navigation parallax scroll slider

Grid-based Layouts & Effects

Infinite Layers Grid

Jun 11, 2025 by Jorge Toloza

grid GSAP infinite parallax

Layer Motion Slideshow

Jan 24, 2019 by Manoela Ilic

grid Motion Trail page transition slideshow typography

On Scroll Clipped Sections

Aug 12, 2024 by Jean Mazouni

grid GSAP parallax scroll

A Glitchy Grid Layout Slideshow

Jun 24, 2020 by Manoela Ilic

glitch grid hover magnetic navigation slideshow

Diagonal Slideshow

Aug 28, 2018 by Manoela Ilic

diagonal grid page transition slideshow

Inspiration for Grid Loading Animations

Apr 11, 2017 by Manoela Ilic

Exploration of On-Scroll Layout Formations

Sep 18, 2024 by Manoela Ilic

grid GSAP scroll

Hover Motion Intro Animation

May 29, 2024 by Manoela Ilic

filter grid GSAP hover intro page transition

State-to-state Animations

Preview to Full Content Page Transition

Apr 7, 2021 by Manoela Ilic

hover magnetic page transition

Tooltip to Gallery Transition

Dec 7, 2022 by Manoela Ilic

GSAP page transition tooltip

WebGL Video Transitions with Curtains.js

Oct 7, 2020 by Yuri Artiukh

page transition video video transition WebGL

Hover Motion Intro Animation

May 29, 2024 by Manoela Ilic

filter grid GSAP hover intro page transition

Gallery to Overlay Transition

Dec 23, 2024 by Osmo

GSAP page transition

Organic SVG Shape Morph Ideas

Sep 19, 2017 by Manoela Ilic

hover morphing page transition svg

Ideas for Grid to Slideshow Switch Animations

May 4, 2023 by Manoela Ilic

GSAP page transition

Large Image to Content Page Transition

Aug 3, 2022 by Manoela Ilic

GSAP page transition scroll

Slideshows

Vertical Zoom Slideshow

Apr 15, 2025 by Filip Zrnzevic

draggable GSAP scroll slideshow

Slice Revealer

Feb 6, 2018 by Manoela Ilic

page transition scroll slideshow

Motion Reveal Slideshow

Jul 26, 2018 by Manoela Ilic

page transition slideshow

Background Slideshow

Background Slideshow

Apr 17, 2013 by Manoela Ilic

Animated SVG Frame Slideshow

Nov 15, 2017 by Manoela Ilic

morphing slideshow svg

Elastic Content Slider

Elastic Content Slider

Feb 26, 2013 by Manoela Ilic

How to Create a Tiled Background Slideshow

Jun 11, 2014 by Manoela Ilic

Creative SVG Strokes Animation

Dec 5, 2017 by Alaric Baraou

Typography

Rotating Twisted 3D Typography with Three.js and Shaders

Jan 20, 2023 by Yuri Artiukh

3D glsl Three.js typography WebGL

Hyperspace Text

Jul 21, 2025 by Johan Karlsson

particles typography

Making Stagger Reveal Animations for Text

Jun 17, 2020 by Manoela Ilic

GSAP page transition typography

Animated Verbs

Aug 21, 2019 by Ryan Mulligan

On-Scroll Typography Animations

Jan 18, 2023 by Manoela Ilic

GSAP scroll typography

ASCII Text

Nov 2, 2021 by Juan Fuentes

ASCII Three.js typography WebGL

Morphing Gooey Text Hover Effect

Apr 28, 2020 by Manoela Ilic

gooey hover menu morphing navigation svg typography

Some More On-Scroll Typography Animations

Feb 22, 2023 by Manoela Ilic

GSAP scroll typography

Uncode

You deserve a stunning website.

Uncode is a pixel-perfect creative WordPress Theme for creating stunning websites.

Hover Interactions

Creative Link Effects

Aug 6, 2013 by Manoela Ilic

Inline to Menu Link Animation

Jun 23, 2021 by Manoela Ilic

hover menu navigation page transition typography

Rotated 3D Letters and Image Hover Effect

Apr 28, 2021 by Manoela Ilic

3D hover menu typography

Sticky Captions Concept

Sticky Captions Concept

Dec 13, 2012 by Manoela Ilic

caption concept grid hover

Inspiration for Text Styles and Hover Effects

May 13, 2015 by Manoela Ilic

hover link typography

Magnetic Buttons

Aug 5, 2020 by Manoela Ilic

button hover magnetic

BackgroundScaleClip_featured

Background Scale Hover Effect with CSS Clip-path

Mar 11, 2020 by Manoela Ilic

clip-path hover

Preview to Full Content Page Transition

Apr 7, 2021 by Manoela Ilic

hover magnetic page transition

Cursor Fun

Line Text Distortion on Hover

May 29, 2025 by Serhii Polyvanyi

cursor distortion hover line

Particles Cursor

May 16, 2022 by Kevin Levron

cursor particles Three.js WebGL

Custom Cursor Effects

Jan 31, 2019 by Stefan Kaltenegger

cursor GSAP hover

Wavy Lines SVG Version

Nov 14, 2024 by Antoine Wodniack

cursor noise svg

Canvas cursor

Dec 14, 2017 by Jesper Landberg

Sketch 009: Image Motion Trail (Perspective)

Mar 9, 2022 by Manoela Ilic

3D cursor hover Motion Trail repetition stack

Custom SVG Cursors with an Interactive Emitter Effect

Aug 24, 2022 by Marlène Bruhat

cursor filter svg

Sketch 005: Image Motion Trail (Opaque)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Creative

Hub

Discover more

3D200 ASCII3 astro3 audio27 blender4 blur7 book4 button44 calendar3 canvas44 carousel10 checkbox8 christmas5 circular9 clip-path29 clock4 cloth3 CSS Only31 cursor46 distortion52 Dithering3 draggable51 dropdown10 elastic19 exploding2 filter51 fire4 flip13 fluid19 form26 Framer Motion2 game19 generative art4 glass9 glitch7 glsl71 gooey9 grid130 GSAP152 halloween2 haxe6 hover138 infinite23 input16 instrument2 intro14 line8 link18 loading9 locomotive scroll10 magnetic6 marquee3 mask3 menu108 metaballs2 modal11 morphing32 Motion Trail24 navigation49 noise5 OGL9 overlay21 page transition125 parallax19 particles35 perlin-noise5 physics19 pixi.js4 postprocessing15 preloader15 progress9 rain4 react18 React Three Fiber30 reflection9 refraction4 repetition19 retro6 scroll144 search7 shape8 shopping cart10 slider29 slideshow113 sphere2 stack29 svg171 tabs9 Three.js219 tooltip11 TSL20 tunnel3 typography100 video7 video transition1 visualizer8 warp6 water13 web audio api7 WebGL280 webgpu20 zoom6