Creative Hub

Explorations in code and design from the creative web community

Featured Picks

Scroll-Driven Polaroid Animation with GSAP

May 21, 2026 by Tom Miller

GSAP polaroid scroll

Clair Obscur: Expedition 33 WebGPU Gommage Effect

Jan 28, 2026 by Thibault Introvigne

Three.js TSL typography WebGL webgpu

Infinite Parallax Scroll with GSAP & Lenis

May 28, 2026 by Joe Ben Taylor

GSAP infinite parallax scroll

Scroll-Driven SVG Map Animation with GSAP

May 21, 2026 by Tom Miller

GSAP map scroll svg

Canvas Grid Mouse Effect

Apr 28, 2026 by Tom Miller

canvas cursor grid

HTML-in-Canvas Examples

May 13, 2026 by Vittorio Retrivi

canvas distortion fluid form particles React Three Fiber Three.js WebGL

Atmospheric Depth Gallery

Mar 9, 2026 by Houmahani Kane

3D scroll Three.js WebGL

3D Image Rotations on Scroll

Jun 18, 2026 by Manoela Ilic

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

Vortex Glass Sphere with TSL

Mar 10, 2025 by MisterPrada

3D glass GSAP procedural Three.js TSL WebGL webgpu

Infinite Layers Grid

Jun 11, 2025 by Jorge Toloza

grid GSAP infinite parallax

Building an On-Scroll 3D Circle Text Animation with Three.js and Shaders

Feb 3, 2025 by David Faure

3D circular GSAP Three.js typography WebGL

Grid Zoom Layout

Dec 1, 2021 by Manoela Ilic

grid page transition zoom

On-Scroll Text Repetition Animation

Apr 13, 2022 by Manoela Ilic

GSAP repetition scroll typography

Animate a Camera Fly-through on Scroll Using Theatre.js and React Three Fiber

Feb 14, 2023 by Andrew Prifer

React Three Fiber scroll theatre.js WebGL

Risograph Grain Light Effect in Three.js

Mar 7, 2022 by Robin Payot

noise Three.js WebGL

Origami: 12 Free Animated 3D Objects

Jul 30, 2024 by deadrabbbbit

3D React Three Fiber Three.js WebGL

Readymag

Create websites with Readymag

Works like a design tool, not a website builder. For visual thinkers.

Learn with Tutorials

Gooey Search Interaction with Framer Motion and React

Nov 18, 2024 by Oguzhan Tufenk

filter Framer Motion gooey react svg

WebGPU Reaction-Diffusion Compute Shader demo screenshot

Reaction-Diffusion Compute Shader in WebGPU

May 1, 2024 by Robert Leitl

glsl reaction diffusion webgpu

Dynamic Terrain Deformation with React Three Fiber

Nov 27, 2024 by Oguzhan Tufenk

3D React Three Fiber Three.js WebGL

R3F Experimental Carousels

Nov 26, 2025 by Colin Demouge

carousel glsl infinite React Three Fiber scroll Three.js WebGL

Infinite Canvas

Jan 7, 2026 by Edoardo Lunardi

draggable infinite React Three Fiber scroll Three.js WebGL

Thumbnail Flow Animation with GSAP MotionPath

Jun 4, 2026 by Iqbal Muthahhary

GSAP MotionPath stack

Telescope Zoom Animation on Scroll with GSAP

Oct 29, 2025 by Joffrey Spitzer

GSAP scroll zoom

Making CSS View Transitions Easy with Velvette

Jan 19, 2024 by Noam Rosenthal

page transition view transition

GSAP Highlights

Thumbnail Flow Animation with GSAP MotionPath

Jun 4, 2026 by Iqbal Muthahhary

GSAP MotionPath stack

8-Bit Snake Game

May 21, 2025 by Filip Zrnzevic

exploding game GSAP physics

Cinematic 3D Scroll Experiences with GSAP

Nov 19, 2025 by Joseph Santamaria

3D GSAP React Three Fiber scroll Three.js WebGL

GSAP EaseReverse Clip Menu

Apr 22, 2026 by Manoela Ilic

clip-path GSAP menu

Paths & Control Points

Oct 27, 2025 by Ross Anderson

GSAP scroll svg

Gallery to Overlay Transition

Dec 23, 2024 by Osmo

GSAP page transition

Animated WebGL Shaders with GSAP

Oct 8, 2025 by Andrea Biason

GSAP hover Three.js WebGL x-ray

Grid Layout Transitions with GSAP Flip

Jan 20, 2026 by Iqbal Muthahhary

WebGL

How to Create a Liquid Raymarching Scene Using Three.js Shading Language

Jul 15, 2024 by Ben McCormick

React Three Fiber Three.js TSL WebGL

Rotating Loading Animation of 3D Shapes with Three.js

Feb 3, 2021 by Yuri Artiukh

3D distortion loading shape Three.js WebGL

Wave 2D

Oct 21, 2022 by Amanda Ghassaei

3D fluid simulation Three.js water wave WebGL

3D Hand Controller

Oct 24, 2024 by Caio Bassetti

3D hand tracking Three.js webcam WebGL

Sketch 505

Dec 12, 2024 by Ikeda Ryou

input matter.js Three.js WebGL

Waveform Visualiser

Oct 20, 2020 by Yugam Dhuriya

audio glsl Three.js visualizer WebGL

VFX-JS text shadow effect

Jul 22, 2024 by Amagi

typography VFX-JS WebGL

Flow

Oct 9, 2014 by David Li

noise particles WebGL

Readymag

Create websites with Readymag

Works like a design tool, not a website builder. For visual thinkers.

Scroll-driven Animations

CRT-like effect with VFX-JS

Jun 25, 2025 by Amagi

distortion scroll VFX-JS WebGL

Dual Wave Text Animation on Scroll

Jan 15, 2026 by Valentin Descombes

GSAP scroll typography

Infinite Scroll Menu

An Infinitely Scrollable Vertical Menu

May 23, 2020 by Manoela Ilic

infinite menu scroll

CSS view-timeline shine effect

Mar 20, 2025 by Ryan Mulligan

CSS Only scroll

Smooth Scrolling Image Effects

Jul 23, 2019 by Manoela Ilic

Unique Collection

Sep 7, 2021 by Michal Zalobny

draggable scroll

ScrollTrigger GSAP Horizontal Clip Path

Feb 9, 2025 by Moussa Mamadou

clip-path GSAP scroll Webflow

On-Scroll Pixelated Image Loading Effect

May 24, 2023 by Manoela Ilic

GSAP loading scroll

Grid-based Layouts & Effects

Grid Layout Transitions with GSAP Flip

Jan 20, 2026 by Iqbal Muthahhary

Dynamic Grid with Transitions

Jun 19, 2013 by Manoela Ilic

Sticky Captions Concept

Sticky Captions Concept

Dec 13, 2012 by Manoela Ilic

caption concept grid hover

Diagonal Slideshow

Aug 28, 2018 by Manoela Ilic

diagonal grid page transition slideshow

Infinite scrollable and draggable (WebGL)grid

Dec 28, 2021 by Jesper Landberg

draggable grid scroll Three.js WebGL

Interactive Record Player

Jun 15, 2016 by Manoela Ilic

audio grid lp record player retro svg web audio api

Grid Layout with Motion Hover Effect and Content Preview

May 23, 2018 by Manoela Ilic

grid hover page transition

Adaptive Thumbnails Pile Effect with Automatic Grouping

Adaptive Thumbnail Pile Effect with Automatic Grouping

Nov 21, 2012 by Manoela Ilic

State-to-state Animations

Zoom Slider

Jul 6, 2015 by Manoela Ilic

page transition slider slideshow zoom

Expanding Rounded Menu Animation

Mar 15, 2022 by Manoela Ilic

GSAP menu page transition

Inline to Menu Link Animation

Jun 23, 2021 by Manoela Ilic

hover menu navigation page transition typography

Sketch 022: SVG Path Page Transition (Horizontal)

Apr 10, 2022 by Manoela Ilic

page transition svg

Rapid Image Layers Animation

Apr 7, 2020 by Manoela Ilic

grid hover intro page transition

Full Image Reveal Effect

Jun 12, 2018 by Manoela Ilic

page transition

Animated Grid Previews

Oct 31, 2018 by Manoela Ilic

grid menu page transition

Effect Ideas for Image Grids

Oct 15, 2015 by Manoela Ilic

grid page transition

Slideshows

Interactive Room Display

Nov 10, 2015 by Manoela Ilic

3D product slideshow

Portfolio Experiment

Mar 4, 2024 by Anton Bobrov

glsl scroll slideshow Three.js WebGL

Elastic Circle Slideshow

Jan 27, 2016 by Manoela Ilic

elastic slideshow

Layer Motion Slideshow

Jan 24, 2019 by Manoela Ilic

grid Motion Trail page transition slideshow typography

Motion Transition Effect

Dec 11, 2018 by Manoela Ilic

elastic Motion Trail slideshow

Fullscreen Scrolling Slideshow

Aug 17, 2022 by Manoela Ilic

GSAP scroll slideshow

Sliding Header Layout

Dec 23, 2014 by Manoela Ilic

grid page transition slideshow

Decorative Letter Animations

Jan 10, 2018 by Manoela Ilic

slideshow svg typography

Typography

Diagonal Thumbnail Slideshow Animation

Sep 1, 2020 by Manoela Ilic

grid slideshow typography

Rotated 3D Letters and Image Hover Effect

Apr 28, 2021 by Manoela Ilic

3D hover menu typography

On-Scroll Text Motion

Dec 19, 2025 by Manoela Ilic

GSAP scroll typography

Three.js Runic Alphabet

Apr 16, 2024 by Anton Bobrov

particles Three.js typography WebGL

Prada

Feb 19, 2025 by MisterPrada

GSAP particles Three.js typography WebGL

free for all!

Apr 26, 2025 by GSAP

exploding GSAP svg typography

Dual Wave Text Animation on Scroll

Jan 15, 2026 by Valentin Descombes

GSAP scroll typography

Techniques for Creating Textured Text

Dec 2, 2013 by Sara Soueidan

background-clip canvas svg texture typography

Hover Interactions

K72 Marquee Hover Animation

Jun 30, 2021 by Manoela Ilic

hover marquee menu navigation

Sketch 005: Image Motion Trail (Opaque)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Magnetic 3D Grid Interaction with Content Preview

Apr 21, 2021 by Manoela Ilic

3D grid hover magnetic page transition

Interactive Repulsion Effect with Three.js

Dec 6, 2018 by Ion D. Filho

hover Three.js WebGL

Hover Animations for Terminal-like Typography

Jun 19, 2024 by Manoela Ilic

hover typography

Making Gooey Image Hover Effects with Three.js

Oct 23, 2019 by Arno Di Nunzio

distortion GSAP hover slideshow Three.js WebGL

Rapid Image Layers Animation

Apr 7, 2020 by Manoela Ilic

grid hover intro page transition

Arrow Navigation Styles

May 28, 2014 by Manoela Ilic

hover navigation svg

Cursor Fun

Shooting Star

Feb 16, 2019 by Ko.Yelie

Sketch 005: Image Motion Trail (Opaque)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

May 26, 2021 by Manoela Ilic

crosshair cursor distortion hover menu svg

WebGL Fluid Experiment

Jun 1, 2015 by George Corney

cursor draggable fluid glsl particles WebGL

Show cursor image on hover

Jul 3, 2025 by GSAP

cursor GSAP hover

Flair cursor follower

Apr 26, 2025 by GSAP

cursor GSAP Motion Trail

Gooey cursor with svg filters and css blend modes

Gooey Cursor Effect

Jun 7, 2023 by Manoela Ilic

cursor filter gooey GSAP Motion Trail svg

Animated Custom Cursor Effects

Mar 24, 2020 by Manoela Ilic

cursor distortion filter hover svg

Creative

Hub

Discover more

3D217 ASCII4 astro5 audio28 blender4 blur8 book4 button46 calendar3 canvas48 carousel12 checkbox8 christmas5 circular9 clip-path30 clock4 cloth4 CSS Only32 cursor51 distortion53 Dithering6 draggable53 dropdown10 elastic23 exploding2 filter52 fire4 flip14 fluid21 form27 Framer Motion2 game20 generative art4 glass10 glitch7 glsl74 gooey9 grid138 GSAP205 halloween2 haxe6 hover144 infinite30 input16 instrument2 intro14 line9 link18 loading9 locomotive scroll10 magnetic7 marquee3 mask4 menu110 metaballs3 modal11 morphing37 Motion Trail26 navigation49 noise5 OGL9 overlay22 page transition127 parallax21 particles37 perlin-noise5 physics22 pixi.js4 postprocessing15 preloader15 progress9 rain4 react18 React Three Fiber38 reflection9 refraction5 repetition19 retro6 scroll176 search7 shape11 shopping cart10 slider29 slideshow116 sphere3 stack30 svg180 tabs9 Three.js260 tooltip11 TSL27 tunnel5 typography110 video8 video transition1 visualizer9 warp6 water14 web audio api8 WebGL317 webgpu30 zoom6