Creative Hub

Explorations in code and design from the creative web community

Featured Picks

On-Scroll SVG Mask Transitions

Mar 11, 2026 by Hiroki Watanabe

GSAP mask scroll svg

Page Transitions in Astro with Barba.js & GSAP

Apr 8, 2026 by Iqbal Muthahhary

astro barba.js GSAP page transition

Skeleton Fluid Reveal

Mar 23, 2026 by Cullen Webber

hover Three.js WebGL webgpu x-ray

Infinite Canvas

Jan 7, 2026 by Edoardo Lunardi

draggable infinite React Three Fiber scroll Three.js WebGL

On-Scroll Horizontal Parallax Gallery

Feb 19, 2026 by David Faure

parallax scroll Three.js WebGL

Dithering Process Visualization with Three.js

Apr 1, 2026 by Damar Aji Pramudita

Dithering Three.js WebGL

Atmospheric Depth Gallery

Mar 9, 2026 by Houmahani Kane

3D scroll Three.js WebGL

False Earth

Apr 21, 2026 by Ming Jyun Hung

procedural Three.js TSL WebGL webgpu

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

Telescope Zoom Animation on Scroll with GSAP

Oct 29, 2025 by Joffrey Spitzer

GSAP scroll zoom

Dynamic Terrain Deformation with React Three Fiber

Nov 27, 2024 by Oguzhan Tufenk

3D React Three Fiber Three.js WebGL

Infinite Canvas

Jan 7, 2026 by Edoardo Lunardi

draggable infinite React Three Fiber scroll Three.js WebGL

Players Club: A Free Astro Template for Showcasing Music Artists

Feb 5, 2025 by Manoela Ilic

astro GSAP template

Sketch 007: Image Motion Trail (Rotation)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

Sketch 027: Infinite Loop Scrolling (ScaleY and Opacity Animation)

Jan 11, 2023 by Manoela Ilic

Pixel Distortion Effect with Three.js

Jan 12, 2022 by Yuri Artiukh

distortion Three.js WebGL

GSAP EaseReverse Clip Menu

Apr 22, 2026 by Manoela Ilic

clip-path GSAP menu

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

Learn with Tutorials

Digital meets Physical: Risograph Printing with WebGL

Jun 27, 2024 by Maximilian Berndt

Interactive 3D Device Showcase with Threepipe

Aug 7, 2024 by Palash Bansal

3D Three.js WebGL

Gradient Mask Hover Effect from Evervault

May 17, 2023 by Manoela Ilic

css-mask hover typography

R3F Experimental Carousels

Nov 26, 2025 by Colin Demouge

carousel glsl infinite React Three Fiber scroll Three.js WebGL

Emissive Dissolve Effect with Three.js

Feb 17, 2025 by Jatin Chopra

3D glsl Three.js WebGL

Typography Motion Trail Effect with Three.js

Jul 21, 2021 by Georgi Nikolov

Motion Trail postprocessing Three.js typography WebGL

Animated WebGL Shaders with GSAP

Oct 8, 2025 by Andrea Biason

GSAP hover Three.js WebGL x-ray

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

May 26, 2021 by Manoela Ilic

crosshair cursor distortion hover menu svg

GSAP Highlights

8-Bit Snake Game

May 21, 2025 by Filip Zrnzevic

exploding game GSAP physics

On Scroll Clipped Sections

Aug 12, 2024 by Chakib Mazouni

grid GSAP parallax scroll

Connected Grid Layout Animation

Aug 30, 2023 by Manoela Ilic

grid GSAP scroll

Scroll-Based Layout Animations

Jul 20, 2023 by Manoela Ilic

Elastic Grid Scroll

Jun 3, 2025 by Manoela Ilic

elastic grid GSAP scroll

Scroll-Synced Image Slideshow with Timed Cues and Keyhole Effect

Jun 19, 2025 by Luis Riancho

GSAP scroll slideshow

On-Scroll 3D Carousel

May 7, 2025 by Manoela Ilic

3D carousel GSAP page transition scroll

WebGL Magazine

Sep 23, 2025 by Chakib Mazouni

3D GSAP scroll Three.js WebGL

WebGL

3D Tetris

Jan 8, 2024 by Kamil Macinski

3D cannon-es game Three.js WebGL

Fluid Simulation

Oct 21, 2022 by Amanda Ghassaei

fluid gpu io WebGL

Waveform Visualiser

Oct 20, 2020 by Yugam Dhuriya

audio glsl Three.js visualizer WebGL

Typography Motion Trail Effect with Three.js

Jul 21, 2021 by Georgi Nikolov

Motion Trail postprocessing Three.js typography WebGL

The Aviator

Apr 26, 2016 by Karim Maaloul

3D game 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

Skeleton Fluid Reveal

Mar 23, 2026 by Cullen Webber

hover Three.js WebGL webgpu x-ray

Liquid Distortion Effects

Oct 10, 2017 by Yannis Yannakopoulos

distortion pixi.js slideshow WebGL

Guidance signage icon set

Guidance: The free signage icon set

A refined wayfinding icon set using concave lines for improved clarity, stronger silhouettes, and distinctive visual identity.

Try Guidance Icons

Scroll-driven Animations

Custom curved corner scrollbars

Oct 25, 2025 by Chris Bolson

scroll scrollbar svg

On-Scroll 3D Stack Motion Effect

Mar 6, 2024 by Manoela Ilic

3D GSAP scroll stack

Exploration of On-Scroll Layout Formations

Sep 18, 2024 by Manoela Ilic

grid GSAP scroll

Pixel Image Effect with Three.js

Feb 2, 2026 by Chakib Mazouni

astro barba.js GSAP scroll Three.js WebGL

Portfolio Experiment

Mar 4, 2024 by Anton Bobrov

glsl scroll slideshow Three.js WebGL

Sketch 029: Infinite Loop Scrolling (3D Animation)

Jan 11, 2023 by Manoela Ilic

Horizontal snapping sections (simple) – ScrollTrigger

May 23, 2020 by GSAP

GSAP scroll slideshow snap

Organic Text Distortion Effect with Infinite Scrolling

Nov 6, 2024 by Jorge Toloza

distortion scroll typography

Grid-based Layouts & Effects

BlueprintViewModeSwitch

View Mode Switch

Jul 1, 2013 by Manoela Ilic

grid shopping cart

Push Animation on Grid Items

Jun 5, 2024 by Manoela Ilic

Grid Navigation Effects with jQuery

Jun 9, 2011 by Manoela Ilic

grid navigation

Google Grid Gallery

Mar 21, 2014 by Manoela Ilic

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

Jan 11, 2023 by Manoela Ilic

Draggable grid

Sep 18, 2023 by nemutas

astro draggable grid infinite scroll Three.js WebGL

Connected Grid Layout Animation

Aug 30, 2023 by Manoela Ilic

grid GSAP scroll

Sticky Captions Concept

Sticky Captions Concept

Dec 13, 2012 by Manoela Ilic

caption concept grid hover

State-to-state Animations

SVG Overlay and Infinite Menu Background Animation

Nov 2, 2021 by Manoela Ilic

infinite menu overlay page transition svg

Ideas for Pixel Page Transitions

Apr 5, 2023 by Manoela Ilic

GSAP page transition

Page Transitions in Astro with Barba.js & GSAP

Apr 8, 2026 by Iqbal Muthahhary

astro barba.js GSAP page transition

Inline Layout Switch Ideas

Nov 22, 2022 by Manoela Ilic

grid GSAP page transition

Flip Plugin GSAP – Horizontal Scroll Lenis

Feb 9, 2025 by Moussa Mamadou

GSAP page transition scroll Webflow

Image Layer Animations with Clip-Path

Oct 31, 2023 by Manoela Ilic

clip-path GSAP page transition

Developer/Designer Page Layout Concept

Apr 18, 2017 by Manoela Ilic

page transition

Simple Morphing Search

Nov 4, 2014 by Manoela Ilic

input morphing page transition search

Slideshows

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

Multi-Layout Slideshow

Aug 10, 2016 by Manoela Ilic

Zoom Slider

Jul 6, 2015 by Manoela Ilic

page transition slider slideshow zoom

Creative SVG Strokes Animation

Dec 5, 2017 by Alaric Baraou

Quotes Rotator

Quotes Rotator

Mar 29, 2013 by Manoela Ilic

infinite quote slideshow

CSS Grid Layout Slideshow

Jul 19, 2017 by Manoela Ilic

grid parallax slideshow

Morphing Devices

Morphing Devices

May 15, 2013 by Manoela Ilic

morphing slideshow

Creative WebGL Image Transitions

Nov 5, 2019 by Yuri Artiukh

distortion page transition slideshow Three.js WebGL

Typography

Animated Image Columns

May 16, 2019 by Manoela Ilic

grid hover menu page transition typography

Coding the Sliced Image Hover Effect from Quai Network

Jun 21, 2023 by Manoela Ilic

clip-path GSAP hover typography

Responsive text article cover image

Accessible WebGL Text

Jun 5, 2025 by Eemeli Haakana

postprocessing scroll Three.js typography WebGL

Gradient Mask Hover Effect from Evervault

May 17, 2023 by Manoela Ilic

css-mask hover typography

Shuffling Typography Animation

Feb 8, 2023 by Manoela Ilic

Clair Obscur: Expedition 33 WebGPU Gommage Effect

Jan 28, 2026 by Thibault Introvigne

Three.js TSL typography WebGL webgpu

How to Create (Animated) Text Fills

Feb 16, 2015 by yoksel

On-Scroll Letter Animations

Jan 20, 2021 by Manoela Ilic

locomotive scroll scroll typography

Hover Interactions

Inline Menu Layout with Gallery Panel

Nov 11, 2020 by Manoela Ilic

hover menu navigation page transition

Sketch 003: Repetition Hover Effect (Rotated)

Feb 27, 2022 by Manoela Ilic

hover repetition

Sketch 002: Repetition Hover Effect (Square)

Feb 27, 2022 by Manoela Ilic

hover repetition

Show cursor image on hover

Jul 3, 2025 by GSAP

cursor GSAP hover

Image Distortion Effects with SVG Filters

Mar 12, 2019 by Manoela Ilic

distortion filter hover menu svg

Simple CSS Line Hover Animations for Links

Feb 10, 2021 by Manoela Ilic

CSS Only hover line link svg

K72 Marquee Hover Animation

Jun 30, 2021 by Manoela Ilic

hover marquee menu navigation

Direction Aware Hover Effect

Direction-Aware Hover Effect with CSS3 and jQuery

Apr 9, 2012 by Manoela Ilic

direction aware grid hover

Cursor Fun

Fire trails

Jun 3, 2025 by Gianluca Lomarco

cursor fire glsl Motion Trail reflection Three.js WebGL

Flair cursor follower

Apr 26, 2025 by GSAP

cursor GSAP Motion Trail

Show cursor image on hover

Jul 3, 2025 by GSAP

cursor GSAP hover

Sketch 005: Image Motion Trail (Opaque)

Mar 9, 2022 by Manoela Ilic

cursor hover Motion Trail repetition stack

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

Apr 10, 2022 by Manoela Ilic

cursor filter Motion Trail svg

Soothe

Feb 21, 2022 by Guilherme Avila

cursor fluid gpgpu

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

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