Creative Hub

Explorations in code and design from the creative web community

Featured Picks

Grid Layout Transitions with GSAP Flip

Jan 20, 2026 by Iqbal Muthahhary

WebGL Snake Animation

Feb 10, 2026 by Sujen Phea

3D procedural snake Three.js WebGL

Pixel Voxel Drop

Jan 5, 2026 by Junichi Kasahara

3D physics rapier Three.js video WebGL

Atmospheric Depth Gallery

Mar 9, 2026 by Houmahani Kane

3D scroll Three.js WebGL

Rendering HTML into a canvas

Apr 12, 2026 by Cullen Webber

3D Sneaker Grid with React Three Fiber

Feb 24, 2026 by Matt Greenberg

3D grid React Three Fiber Three.js WebGL

On-Scroll Text Motion

Dec 19, 2025 by Manoela Ilic

GSAP scroll typography

Pixel Image Effect with Three.js

Feb 2, 2026 by Chakib Mazouni

astro barba.js GSAP scroll 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

Tooltip to Gallery Transition

Dec 7, 2022 by Manoela Ilic

GSAP page transition tooltip

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

Sketch 004: Repetition Hover Effect (Filter)

Feb 27, 2022 by Manoela Ilic

filter hover repetition

Sketch 007: Image Motion Trail (Rotation)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Infinite Canvas

Jan 7, 2026 by Edoardo Lunardi

draggable infinite React Three Fiber scroll Three.js WebGL

Sketch 006: Image Motion Trail (Semi-transparent)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Sketch 005: Image Motion Trail (Opaque)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Surface Sampling in Three.js

Aug 31, 2021 by Louis Hoebregts

particles Three.js WebGL

Divi

Automatically Generate an Entire Divi Website in 2 Minutes

Create a complete website in seconds with AI-generated content or Starter Sites—fully styled, dynamic, and easy to customize with Divi’s intuitive builder.

Learn with Tutorials

WebGPU Ocean

Jan 10, 2025 by matsuoka-601

fluid water webgpu

ASCII Shader with OGL

Nov 13, 2024 by Andrico Karoulla

glsl OGL perlin-noise

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

Gooey Search Interaction with Framer Motion and React

Nov 18, 2024 by Oguzhan Tufenk

filter Framer Motion gooey react svg

Codrops Fan Museum in Three.js

Apr 8, 2025 by Andrew Woan

3D blender GSAP room Three.js WebGL

Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality

Feb 11, 2025 by Niccolò Fanton

postprocessing React Three Fiber Three.js WebGL

Cinematic 3D Scroll Experiences with GSAP

Nov 19, 2025 by Joseph Santamaria

3D GSAP React Three Fiber scroll Three.js WebGL

3D Typing Effects with Three.js

Nov 8, 2022 by Ksenia Kondrashova

Three.js typography WebGL

GSAP Highlights

Infinite Layers Grid

Jun 11, 2025 by Jorge Toloza

grid GSAP infinite parallax

wonjyou (hero and h2 guides)

Sep 27, 2025 by Carl Schooff

GSAP typography

Grid Layout Transitions with GSAP Flip

Jan 20, 2026 by Iqbal Muthahhary

Super Mario Scrollable Timeline

Feb 28, 2022 by Adam Kuhn

GSAP retro scroll

Pixel Image Effect with Three.js

Feb 2, 2026 by Chakib Mazouni

astro barba.js GSAP scroll Three.js WebGL

free for all!

Apr 26, 2025 by GSAP

exploding GSAP svg typography

GSAP Infinite Parallax Carousel

Oct 22, 2025 by Nemanja Kočović

carousel draggable GSAP infinite parallax

Reflection Scroll Effect

Feb 15, 2024 by Manoela Ilic

GSAP reflection scroll

WebGL

Spotify visualiser

Dec 2, 2025 by Chakib Mazouni

canvas grid GSAP infinite spotify Three.js visualizer WebGL

Animated WebGL Shaders with GSAP

Oct 8, 2025 by Andrea Biason

GSAP hover Three.js WebGL x-ray

Audio-Reactive Visuals with Dynamic Particles in Three.js

Dec 19, 2023 by Tiago Canzian

audio particles Three.js WebGL

Rotating Loading Animation of 3D Shapes with Three.js

Feb 3, 2021 by Yuri Artiukh

3D distortion loading shape Three.js WebGL

Interactive Repulsion Effect with Three.js

Dec 6, 2018 by Ion D. Filho

hover Three.js WebGL

ProceduralClouds_featured

How to Create Procedural Clouds Using Three.js Sprites

Jan 28, 2020 by Robert Borghesi

procedural Three.js WebGL

Ordered Dithering – A Close-Up Look

Dec 2, 2025 by Damar Berlari

anime.js Dithering Three.js WebGL

High-speed Light Trails in Three.js

Nov 13, 2019 by Daniel Velasquez

light Three.js time lapse WebGL

Scroll-driven Animations

On-Scroll Shape Morph Animations

Nov 16, 2023 by Manoela Ilic

clip-path GSAP morphing scroll

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Jul 2, 2024 by Jorge Toloza

blur glsl OGL scroll WebGL

Scroll-Driven 3D Image Tube with R3F

Feb 17, 2026 by Matis Dené

3D infinite React Three Fiber scroll Three.js WebGL

On-Scroll Pixelated Image Loading Effect

May 24, 2023 by Manoela Ilic

GSAP loading scroll

Sticky Grid Scroll

Mar 2, 2026 by Theo Plawinski

grid GSAP scroll sticky

Sticky Table Headers & Columns

Jan 9, 2014 by Terry Mun

Alternate Column Scroll Animation

Dec 21, 2021 by Manoela Ilic

grid locomotive scroll page transition scroll

Exploration of On-Scroll Layout Formations

Sep 18, 2024 by Manoela Ilic

grid GSAP scroll

Grid-based Layouts & Effects

Connected Grid Layout Animation

Aug 30, 2023 by Manoela Ilic

grid GSAP scroll

Hover Motion Intro Animation

May 29, 2024 by Manoela Ilic

filter grid GSAP hover intro page transition

Grid Item Animation Layout

Apr 15, 2015 by Manoela Ilic

grid page transition

Cutoutlayout_featured

Crafting a Cutout Collage Layout with CSS Grid and Clip-path

Feb 5, 2020 by Bri Camp Gomez

clip-path grid parallax

Tiny Grid Layout Animation

Jul 13, 2022 by Manoela Ilic

grid GSAP page transition

Grid Layout with Motion Hover Effect and Content Preview

May 23, 2018 by Manoela Ilic

grid hover page transition

Grid To Full Preview

May 27, 2025 by Gwen Bogaert

clip-path ecommerce grid GSAP

BlueprintResponsiveIconGrid

Responsive Icon Grid

Jul 1, 2013 by Manoela Ilic

State-to-state Animations

Page Transitions in Astro with Barba.js & GSAP

Apr 8, 2026 by Iqbal Muthahhary

astro barba.js GSAP page transition

Morphing Page Transition

Aug 8, 2017 by Manoela Ilic

morphing page transition svg

Making CSS View Transitions Easy with Velvette

Jan 19, 2024 by Noam Rosenthal

page transition view transition

Sketch 021: SVG Path Page Transition (Vertical)

Apr 10, 2022 by Manoela Ilic

page transition svg

Crossroads Slideshow

Apr 3, 2019 by Manoela Ilic

page transition slider slideshow

Stack to Content Layout Transition

May 11, 2022 by Manoela Ilic

GSAP menu page transition slideshow

Ideas for Grid to Slideshow Switch Animations

May 4, 2023 by Manoela Ilic

GSAP page transition

Card Expansion Effect with SVG clipPath

Jun 18, 2015 by Claudio Calautti

clip-path grid page transition svg

Slideshows

Vertical Showcase Slider with jQuery and CSS Transitions

Vertical Showcase Slider with jQuery and CSS Transitions

Oct 1, 2012 by Manoela Ilic

slider slideshow

Sliced Dual Image Layout

Sep 28, 2017 by Manoela Ilic

clip-path menu slideshow

Multi-Layout Slideshow

Aug 10, 2016 by Manoela Ilic

React Slider with Parallax Hover Effects

Aug 20, 2019 by Ryan Mulligan

carousel hover parallax react slider slideshow

Wobbly Slideshow Effect

Oct 24, 2014 by Manoela Ilic

elastic slideshow svg

Shape Slideshow with Clip-path

Mar 10, 2021 by Manoela Ilic

clip-path shape slideshow

Draggable Dual-View Slideshow

Jun 26, 2014 by Manoela Ilic

3D draggable slider slideshow

Animated Image Pieces

Jul 26, 2017 by Manoela Ilic

fragment slideshow

Typography

Typography Motion Trail Effect with Three.js

Jul 21, 2021 by Georgi Nikolov

Motion Trail postprocessing Three.js typography WebGL

Some More On-Scroll Typography Animations

Feb 22, 2023 by Manoela Ilic

GSAP scroll typography

Layer Motion Slideshow

Jan 24, 2019 by Manoela Ilic

grid Motion Trail page transition slideshow typography

Lines to Content Layout Animation

Apr 5, 2022 by Manoela Ilic

distortion filter GSAP hover page transition typography

Distributed Letters Animation Layout

Mar 24, 2021 by Manoela Ilic

grid hover page transition typography

Circular SVG Text Animation

Mar 3, 2021 by Manoela Ilic

circular hover intro page transition svg typography

On-Scroll Sliced Text Animation

Dec 5, 2023 by Manoela Ilic

GSAP scroll typography

three-text

Nov 3, 2025 by Jeremy Tribby

Three.js typography WebGL

Hover Interactions

Grid Item Reveal Animation on Hover

Mar 13, 2024 by Manoela Ilic

grid GSAP hover

Organic Shape Animations with SVG clipPath

Jun 28, 2017 by Manoela Ilic

clip-path hover morphing shape

DistortedLink_featured

Distorted Link Effects with SVG Filters

Mar 4, 2020 by Manoela Ilic

distortion filter hover line link svg

Sketch 003: Repetition Hover Effect (Rotated)

Feb 27, 2022 by Manoela Ilic

hover repetition

Simple CSS Line Hover Animations for Links

Feb 10, 2021 by Manoela Ilic

CSS Only hover line link svg

Ideas for Subtle Hover Effects

Jun 19, 2014 by Manoela Ilic

Interactive Repulsion Effect with Three.js

Dec 6, 2018 by Ion D. Filho

hover Three.js WebGL

Direction Aware Hover Effect

Direction-Aware Hover Effect with CSS3 and jQuery

Apr 9, 2012 by Manoela Ilic

direction aware grid hover

Cursor Fun

Flair cursor follower

Apr 26, 2025 by GSAP

cursor GSAP Motion Trail

GSAP Cursor Trailer Effect

Aug 31, 2025 by Nemanja Kočović

cursor GSAP Motion Trail

Show cursor image on hover

Jul 3, 2025 by GSAP

cursor GSAP hover

Sketch 009: Image Motion Trail (Perspective)

Mar 9, 2022 by Manoela Ilic

3D cursor hover Motion Trail repetition stack

Canvas cursor

Dec 14, 2017 by Jesper Landberg

Sketch 006: Image Motion Trail (Semi-transparent)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Sketch 013: Custom Cursor (two circles with filter effect)

Apr 10, 2022 by Manoela Ilic

cursor filter svg

WebGL Fluid Simulation With Your Text

Aug 13, 2024 by Ksenia Kondrashova

cursor fluid glsl WebGL

Creative

Hub

Discover more

3D215 ASCII4 astro5 audio28 blender4 blur8 book4 button44 calendar3 canvas46 carousel12 checkbox8 christmas5 circular9 clip-path29 clock4 cloth4 CSS Only32 cursor50 distortion52 Dithering6 draggable53 dropdown10 elastic21 exploding2 filter51 fire4 flip14 fluid20 form26 Framer Motion2 game20 generative art4 glass10 glitch7 glsl74 gooey9 grid137 GSAP192 halloween2 haxe6 hover141 infinite29 input16 instrument2 intro14 line9 link18 loading9 locomotive scroll10 magnetic6 marquee3 mask4 menu109 metaballs3 modal11 morphing37 Motion Trail25 navigation49 noise5 OGL9 overlay22 page transition127 parallax20 particles36 perlin-noise5 physics21 pixi.js4 postprocessing15 preloader15 progress9 rain4 react18 React Three Fiber37 reflection9 refraction5 repetition19 retro6 scroll170 search7 shape11 shopping cart10 slider29 slideshow116 sphere3 stack29 svg177 tabs9 Three.js257 tooltip11 TSL26 tunnel5 typography110 video8 video transition1 visualizer9 warp6 water14 web audio api8 WebGL314 webgpu29 zoom6