Creative Hub

Explorations in code and design from the creative web community

Featured Picks

Page Transitions in Astro with Barba.js & GSAP

Apr 8, 2026 by Iqbal Muthahhary

astro barba.js GSAP page transition

GSAP EaseReverse Clip Menu

Apr 22, 2026 by Manoela Ilic

clip-path GSAP menu

Grid Layout Transitions with GSAP Flip

Jan 20, 2026 by Iqbal Muthahhary

Skeleton Fluid Reveal

Mar 23, 2026 by Cullen Webber

hover Three.js WebGL webgpu x-ray

False Earth

Apr 21, 2026 by Ming Jyun Hung

procedural Three.js TSL WebGL webgpu

Infinite Canvas

Jan 7, 2026 by Edoardo Lunardi

draggable infinite React Three Fiber scroll Three.js WebGL

Dithering Process Visualization with Three.js

Apr 1, 2026 by Damar Aji Pramudita

Dithering Three.js WebGL

On-Scroll SVG Mask Transitions

Mar 11, 2026 by Hiroki Watanabe

GSAP mask scroll svg

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

Kinetic Images with React Three Fiber

Jul 9, 2025 by Dominik Fojcik

3D React Three Fiber spiral Three.js WebGL

3D Sneaker Grid with React Three Fiber

Feb 24, 2026 by Matt Greenberg

3D grid React Three Fiber Three.js WebGL

Interactive Video Projection Mapping with Three.js

Aug 27, 2025 by Victor Work

3D Three.js WebGL

Shaders on Scroll by Faboolea

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

Jul 13, 2021 by Fabienne Bielmann

glsl scroll Three.js WebGL

Sketch 028: Infinite Loop Scrolling (ScaleX and ScaleY Animation)

Jan 11, 2023 by Manoela Ilic

Sketch 023: Background/Theme Picker

Dec 20, 2022 by Manoela Ilic

GSAP page transition svg

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

Sketch 029: Infinite Loop Scrolling (3D Animation)

Jan 11, 2023 by Manoela Ilic

Retro pixel icon set

662 free pixel icons that take you back to the 80s

A nostalgic 32px grid pixel icon set inspired by the 80s. Fully free and ready for use in any creative project.

Get Pixel Icons

Learn with Tutorials

Interactive 3D Bulge Text Effect with React Three Fiber

Mar 20, 2024 by Roman Jean-Elie

react React Three Fiber Three.js typography WebGL

Scroll-Driven 3D Image Tube with R3F

Feb 17, 2026 by Matis Dené

3D infinite React Three Fiber scroll Three.js WebGL

Animated WebGL Shaders with GSAP

Oct 8, 2025 by Andrea Biason

GSAP hover Three.js WebGL x-ray

Crafting a Dice Roller with Three.js and Cannon-es

Jan 25, 2023 by Ksenia Kondrashova

3D cannon-es GSAP Three.js WebGL

Turning 3D Models to Voxel Art with Three.js

Mar 28, 2023 by Ksenia Kondrashova

GSAP Three.js WebGL

shining particles mask by dominik fojcik

Crafting a Dreamy Particle Effect with Three.js and GPGPU

Dec 19, 2024 by Dominik Fojcik

3D gpgpu postprocessing Three.js WebGL

WebGL Snake Animation

Feb 10, 2026 by Sujen Phea

3D procedural snake Three.js WebGL

Infinite Canvas

Jan 7, 2026 by Edoardo Lunardi

draggable infinite React Three Fiber scroll Three.js WebGL

GSAP Highlights

MotionPath – plot through points

Dec 1, 2025 by GSAP

Pixelated Image Reveal – Osmo

Oct 20, 2024 by Osmo

Pixel Image Effect with Three.js

Feb 2, 2026 by Chakib Mazouni

astro barba.js GSAP scroll Three.js WebGL

3D Text Scroll Animations

Nov 4, 2025 by David Faure

3D GSAP scroll typography

On-Scroll Text Motion

Dec 19, 2025 by Manoela Ilic

GSAP scroll typography

Palmer’s Draggable Product Grid

Sep 1, 2025 by Joffrey Spitzer

Connected Grid Layout Animation

Aug 30, 2023 by Manoela Ilic

grid GSAP scroll

On Scroll Clipped Sections

Aug 12, 2024 by Chakib Mazouni

grid GSAP parallax scroll

WebGL

Christmas Diorama

Jan 1, 2025 by Ricardo Oliva Alonso

3D christmas Three.js WebGL

Flow

Oct 9, 2014 by David Li

noise particles WebGL

CRT-like effect with VFX-JS

Jun 25, 2025 by Amagi

distortion scroll VFX-JS WebGL

WebGPU Scanning Effect with Depth Maps

Mar 31, 2025 by deadrabbbbit

3D React Three Fiber Three.js TSL WebGL webgpu

Rendering HTML into a canvas

Apr 12, 2026 by Cullen Webber

Moving Objects in 3D Space

Nov 1, 2025 by Damar Berlari

3D anime.js circular spiral Three.js WebGL

Mouse Flowmap Deformation with OGL

Sep 25, 2019 by Robin Delaporte

distortion fluid hover OGL WebGL

Webgl ripple image slider

Feb 25, 2019 by Jesper Landberg

glsl ripple slider WebGL

Sharp brutalist icon set

Sharp Icons, by Streamline

A brutalist, high-tech icon set built from pure geometry. Bold, raw, and designed to stand out in modern interfaces.

Download Sharp Icons

Scroll-driven Animations

Sketch 028: Infinite Loop Scrolling (ScaleX and ScaleY Animation)

Jan 11, 2023 by Manoela Ilic

On-Scroll Shape Morph Animations

Nov 16, 2023 by Manoela Ilic

clip-path GSAP morphing scroll

Vortex Gallery

Jan 23, 2025 by Chakib Mazouni

3D GSAP scroll Three.js WebGL

AutoSplit with ScrollTrigger

Apr 19, 2025 by GSAP

GSAP scroll typography

On-Scroll Text Repetition Animation

Apr 13, 2022 by Manoela Ilic

GSAP repetition scroll typography

Horizontal snapping sections (simple) – ScrollTrigger

May 23, 2020 by GSAP

GSAP scroll slideshow snap

WebGL Image Ring

May 16, 2025 by alphardex

circular draggable glsl scroll Three.js WebGL

Infinite 3D tunnel

Jan 13, 2026 by The Bugged Dev

3D grid GSAP infinite scroll Three.js tunnel

Grid-based Layouts & Effects

Expanding Grid Menu

Mar 28, 2018 by Manoela Ilic

Repeating Image Transition

Apr 28, 2025 by Manoela Ilic

grid GSAP page transition repetition

Magnetic 3D Grid Interaction with Content Preview

Apr 21, 2021 by Manoela Ilic

3D grid hover magnetic page transition

Draggable Menu with Image Grid Previews

Jun 19, 2019 by Manoela Ilic

draggable grid menu navigation page transition slider typography

BlueprintResponsiveIconGrid

Responsive Icon Grid

Jul 1, 2013 by Manoela Ilic

Grid Reveal Effects with Anime.js

Feb 13, 2019 by Manoela Ilic

grid page transition

A Glitchy Grid Layout Slideshow

Jun 24, 2020 by Manoela Ilic

glitch grid hover magnetic navigation slideshow

Cutoutlayout_featured

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

Feb 5, 2020 by Bri Camp Gomez

clip-path grid parallax

State-to-state Animations

Kinetic Typography Page Transition

Sep 29, 2021 by Manoela Ilic

grid GSAP intro page transition typography

Diagonal Slideshow

Aug 28, 2018 by Manoela Ilic

diagonal grid page transition slideshow

Distributed Letters Animation Layout

Mar 24, 2021 by Manoela Ilic

grid hover page transition typography

Async Page Transitions

Feb 26, 2026 by Valentin Mor

GSAP page transition

A Collection of Page Transitions

May 7, 2013 by Manoela Ilic

3D page transition

Creative WebGL Image Transitions

Nov 5, 2019 by Yuri Artiukh

distortion page transition slideshow Three.js WebGL

How to Create and Animate Rotated Overlays

Apr 18, 2019 by Manoela Ilic

menu overlay page transition

Inspiration for Article Intro Effects

May 22, 2014 by Manoela Ilic

page transition

Slideshows

Animated clip-path slider Concept

Sep 9, 2020 by Jake Whiteley

clip-path slideshow

Zoom Slider

Jul 6, 2015 by Manoela Ilic

page transition slider slideshow zoom

Sliding Triple View Layout

Sliding Horizontal Layout

Sep 5, 2013 by Manoela Ilic

navigation slideshow

Glitch Effect Slideshow

Mar 13, 2018 by Manoela Ilic

clip-path glitch menu slideshow

Portfolio Experiment

Mar 4, 2024 by Anton Bobrov

glsl scroll slideshow Three.js WebGL

Creative SVG Strokes Animation

Dec 5, 2017 by Alaric Baraou

Fullscreen Scrolling Slideshow

Aug 17, 2022 by Manoela Ilic

GSAP scroll slideshow

3DCloth_featured

How to Create a Physics-based 3D Cloth with Cannon.js and Three.js

Feb 11, 2020 by Arno Di Nunzio

3D cannon.js cloth perlin-noise physics slideshow Three.js WebGL

Typography

Fancy SVG Letter Animation

Sep 13, 2016 by Manoela Ilic

Shuffling Typography Animation

Feb 8, 2023 by Manoela Ilic

ASCII Text

Nov 2, 2021 by Juan Fuentes

ASCII Three.js typography WebGL

Letter Effects and Interaction Ideas (Part 2)

Jul 5, 2017 by Manoela Ilic

hover typography

Decorative Letter Animations

Jan 10, 2018 by Manoela Ilic

slideshow svg typography

Typography Motion Trail Effect with Three.js

Jul 21, 2021 by Georgi Nikolov

Motion Trail postprocessing Three.js typography WebGL

Marquee_featured

CSS-Only Marquee Effect

Mar 31, 2020 by Manoela Ilic

CSS Only hover marquee menu typography

Text Distortion Effects using Blotter.js

Feb 6, 2019 by Manoela Ilic

blotter.js distortion glsl typography WebGL

Hover Interactions

Inspiration for Inline Anchor Styles

Jun 4, 2014 by Manoela Ilic

Double Image Hover Effects with Clip-Path Animations

Mar 1, 2023 by Manoela Ilic

clip-path filter GSAP hover

React Slider with Parallax Hover Effects

Aug 20, 2019 by Ryan Mulligan

carousel hover parallax react slider slideshow

WebGL Distortion Hover Effects

Apr 10, 2018 by Robin Delaporte

distortion hover WebGL

Marquee_featured

CSS-Only Marquee Effect

Mar 31, 2020 by Manoela Ilic

CSS Only hover marquee menu typography

Image Distortion Effects with SVG Filters

Mar 12, 2019 by Manoela Ilic

distortion filter hover menu svg

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

Creative Button Styles

Creative Button Styles

Jun 13, 2013 by Manoela Ilic

Cursor Fun

Canvas cursor

Dec 14, 2017 by Jesper Landberg

Building a Playful Stop-Motion Crayon Cursor in p5.js

Feb 6, 2025 by Jorge Toloza

cursor p5.js sketch

3D transform on pointer move

Jul 24, 2024 by GSAP

Sketch 015: Custom Cursor (multiple circles with filter effect)

Apr 10, 2022 by Manoela Ilic

cursor filter Motion Trail svg

Fire trails

Jun 3, 2025 by Gianluca Lomarco

cursor fire glsl Motion Trail reflection Three.js WebGL

Image Trail Effects

Aug 7, 2019 by Manoela Ilic

cursor filter 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

Sketch 005: Image Motion Trail (Opaque)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Creative

Hub

Discover more

3D215 ASCII4 astro5 audio28 blender4 blur8 book4 button44 calendar3 canvas46 carousel12 checkbox8 christmas5 circular9 clip-path30 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 GSAP193 halloween2 haxe6 hover141 infinite29 input16 instrument2 intro14 line9 link18 loading9 locomotive scroll10 magnetic6 marquee3 mask4 menu110 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.js258 tooltip11 TSL27 tunnel5 typography110 video8 video transition1 visualizer9 warp6 water14 web audio api8 WebGL315 webgpu30 zoom6