codrops

A single Next.js instance using ~500MB of RAM versus ~30MB with Svelte. For the Lesse Studio team, that difference sparked a complete rethink of their stack, leading them down a rabbit hole of self-hosting, optimization, and rebuilding their agency website from scratch: tympanus.net/codrops/?p=1...

Stacked thumbnails unfold into a fluid image strip in this GSAP MotionPath experiment by Iqbal Muthahhary. Learn how a handful of dynamically calculated control points can create surprisingly organic gallery transitions: tympanus.net/codrops/2026...

Houmahani Kane taught herself to code, built interactive experiences for major brands, and carved out a place for herself in the industry through curiosity, resilience, and years of dedication to her craft. We're honored to share her story today: tympanus.net/codrops/?p=1...

We taught technology how to inform, entertain, and persuade. But can it help people heal? Andrew Woan explores a simple but intriguing idea: what if websites could serve as places of care, reflection, and emotional growth rather than tools for attention and engagement? tympanus.net/codrops/2026...

Today we have Joe Taylor sharing a great tutorial on building a seamless infinite scroll experience with GSAP and Lenis: tympanus.net/codrops/2026... Infinite looping, parallax depth, snap scrolling, and smooth motion, all broken down in a clean and approachable way.

For Adrien Vanderpotte, the best interfaces aren’t simply designed — they emerge through experimentation, iteration, timing, and feel. In our latest Developer Spotlight he reflects on motion, shaders, and crafting digital experiences that stay with people: tympanus.net/codrops/?p=1...

Learn how to build a scroll-driven 3D cube gallery in Webflow with GSAP. ✨ Francesco Castronuovo shows how to combine CMS-powered content, fullscreen image transitions, Split Text animations, and 3D transforms into one seamless scrolling experience: tympanus.net/codrops/?p=1...

Follow a route, animate the journey, and turn scrolling into a cinematic experience. ✨ Tom Miller shows how to create lightweight scroll-driven SVG map animations with GSAP, without relying on a map API: tympanus.net/codrops/2026...

To celebrate the launch of 50 new effects, Made With Gsap is breaking down a satisfyingly playful gravity-based mouse trail effect for us today! Download the effect for free — and don’t miss the discount at the end of the article: tympanus.net/codrops/2026...

Beige computers, glossy office ads, golden ties, and the remains of an ironic business rebrand. Shader Development Studio takes us inside the making of Shader.se, a scroll-driven 3D experience shaped by corporate satire, 80s business tech & seamless scene transitions: tympanus.net/codrops/2026...

From Eurovision Village to Dior and award-winning interactive experiences, Merlin crafts digital work where motion, technology and design move as one. Explore the story behind the Amsterdam-based Code Boutique in our latest Studio Spotlight: tympanus.net/codrops/2026...

From rethinking their identity to building a motion driven system where type, structure, and interaction work as one, Obys shares the story behind their new website and visual language: tympanus.net/codrops/?p=1...

Today we’re stoked to have Vittorio Retrivi from basement.studio share an incredible exploration of the emerging HTML in Canvas proposal. From shader powered UI effects to interactive 3D interfaces, this article is packed with inspiring experiments: tympanus.net/codrops/?p=1...

Some studios build websites. Others build a feeling. Le:mma Studio crafts immersive digital experiences shaped by atmosphere, motion, and storytelling. In our latest spotlight, founder Artemii Lebedev shares a closer look into the studio's world: tympanus.net/codrops/2026...

Scroll-driven storytelling, layered scenes, interactive 3D. Instorier is exploring a different workflow for immersive web experiences — without stitching every interaction together manually. Try it for free: instorier.com?ref=codrops #promoted

Today, Thibault Guignand explores the making of his portfolio redesign, where WebGL shaders, scroll interactions, and UI transitions all sync through a single motion system powered by GSAP: tympanus.net/codrops/2026...

Reverse-engineering animations is one of the best ways to level up your skills. Today we got Ayotomiwa Wale-Durojaye break down his process of rebuilding Claude AI's mascot animations from scratch, frame by frame, purely in code using SVG and GSAP. Learn along: tympanus.net/codrops/2026...

Today, Lyon-based Akaru share how they craft digital platforms where design and performance are inseparable. Deliberate work, beautiful results. Read their studio spotlight: tympanus.net/codrops/?p=1...

What does it really take to design a portfolio that stands out and feels true to your work? In our latest article, Artem Shcherban shares his two year journey of creating a layered, interaction driven portfolio that moves beyond the traditional gallery: tympanus.net/codrops/2026...

She wanted to be a painter. Today, she designs immersive digital worlds. In today's spotlight, Sofia Papadopoulou shares her journey from canvas to code, along with insights and selected works. Read it here: tympanus.net/codrops/2026...

Have you tried Instorier yet? It's a different way to build for the web: think scroll-driven timelines, layered scenes, and interactive 3D, all working together without wiring everything up from scratch. Try it free: instorier.com?ref=codrops #promoted

What does it look like when a portfolio is shaped by both engineering and belief? Joseph Santamaria breaks down the process behind an incredible 3D experience built with Three.js, GSAP, and a deeper sense of purpose: tympanus.net/codrops/2026...

In today's spotlight, we step inside Rhumb Studio, the two-person practice of Jack Redley and Mael Ruffini, shaped by curiosity and a shared way of thinking about the web: tympanus.net/codrops/2026...

Susurrus turns a Three.js scene into a living watercolor world using a Kuwahara shader, post-processing, and subtle interaction to shape mood in real time. Xianyao Wei breaks down the process behind this meditative experiment: tympanus.net/codrops/2026...

Today, Tomoya Okada breaks down the making of 4WIDE, a website that pushes visual expression through distortion, blur, and motion. Read about the technical decisions, creative risks, and performance trade-offs behind bringing the experience to life: tympanus.net/codrops/2026...

GSAP's easeReverse lets reversed animations use their own easing instead of simply playing the original curve backward. In today's demo, we explore how it works in a playful clip-path menu interaction: tympanus.net/codrops/?p=1...

Today, Ming Jyun Hung breaks down False Earth, an incredible WebGPU-powered world where the heavy lifting happens on the GPU: procedural grass, VAT animation, compute shaders, indirect draw, LOD, and GPU-driven culling. Go behind the scenes: tympanus.net/codrops/?p=1...

Bjørn Fjellstad shares the story behind Instorier, a tool built to make immersive storytelling on the web more approachable. Learn how to use it to build a Moon journey shaped by scroll, timelines, layered scenes, 3D atmosphere, and interaction: tympanus.net/codrops/2026...

Most portfolios show the work. This one starts with rain, memory, and a world inspired by films that defined a generation. Today, Giulio Collesei shares the fascinating story of his portfolio shaped by cinematic scenes and cyberpunk atmosphere: tympanus.net/codrops/2026...

What started as a self-taught journey grew into a studio known for craft, curiosity, and ambitious experimentation. In our latest spotlight, Lusion shares how that journey became standout digital work for Porsche, Google, Coca-Cola, and more: tympanus.net/codrops/2026...

How do you turn a type specimen into an experience? For Exat, Studio Size pushed the typography showcase beyond the static page, using scroll, motion, and interaction to reveal the logic, range, and character of Hot Type's most ambitious typeface yet: tympanus.net/codrops/2026...

A single direct message changed everything. In our latest spotlight, Chanh M. Ho reflects on the curiosity, persistence, and quiet leaps of faith that led to his first SOTD — and the creative journey that followed, from Vietnam to award-winning work on the web: tympanus.net/codrops/2026...

In our latest tutorial, Iqbal Muthahhary walks us through building page transitions in Astro with Barba.js and GSAP, starting with a synced reveal and moving into more expressive effects with WebGL, SVG morphing, overlays, and animated pseudo-elements. Follow along: tympanus.net/codrops/2026...

Shaped by more than a year of iteration, R—K '26 brings together editorial layout, measured motion and WebGL atmosphere into an experience built around presence rather than excess. Ravi Klaassens takes us through the making of it: tympanus.net/codrops/2026...

Today, Nicolas Garnier shares a behind-the-scenes look at the stunning Maxima Therapy website, walking us through the creative and technical process behind a playful React + GSAP build with a bit of AI dabbling: tympanus.net/codrops/?p=1...

Few devs bring the same level of care, taste, and technical skill to the web as Edoardo Lunardi. He's sharing his journey with us today, along with reflections on the projects he's most proud of and the philosophy of craft, performance, and detail behind his work: tympanus.net/codrops/?p=1...

You can build visuals to turn heads. Or you can build them to explain complex ideas. Damar Aji Pramudita does the latter beautifully in his tutorial, where he breaks down how he turned dithering into a visual experience with Three.js, instancing, and custom shaders: tympanus.net/codrops/2026...

Today we have a great deep dive by @arnaudrocca.bsky.social on how he built his portfolio as a system with reusable GSAP motion, custom text transitions, and fluid WebGL interactions. A beautiful look at what happens when motion becomes part of the interface itself: tympanus.net/codrops/2026...

Today, we're spotlighting Malvah.Studio 😍 Recognized by Awwwards as Studio of the Year, they invite us inside a practice shaped by clarity, restraint, and confidence, where intention, craft, and a strong sense of self matter more than noise or spectacle: tympanus.net/codrops/2026...

A little Sunday inspiration ✨ Beautiful animations, clever interactions, and playful motion experiments... all in one fresh roundup from the creative community! Come see what's been moving 👀 tympanus.net/codrops/2026...

In our latest case study, Gaspard Silvestre from Le Fruit unpacks the making of Pell Mell, a beautifully restrained digital experience where editorial rhythm, subtle motion, and structure come together with remarkable clarity: tympanus.net/codrops/2026...

We’re so excited to shine a light on María Vargas today! From graphic design in Argentina to incredible UI work for Riot Games and PlayStation, her path is packed with talent, ambition, and creative fire: tympanus.net/codrops/?p=1... Today is her birthday, which makes it even more special! 🎮✨🎉

Far from the usual studio portfolio, San Rita feels like a territory of its own, shaped by topography, vintage map textures, and a real sense of place. 🗺️ In our latest case study, Sébastien Lempens and Julien Sister break down the making of this amazing project: tympanus.net/codrops/2026...

We're kicking off this week with a fantastic tutorial! Cullen Webber explores how mouse trails, fluid simulation, dual-scene compositing & post effects come together in Three.js to produce a cinematic X-ray reveal effect: tympanus.net/codrops/2026...

A Japanese book cover, a tactile visual language, and a portfolio shaped by concept rather than surface references. Jackie Zhang walks us through the thinking and interaction details behind a unique portfolio: tympanus.net/codrops/2026...

In our latest Spotlight, award-winning digital designer Yeva Tykhonova shares her view of design as a bridge between human emotion and the digital world, and reflects on what makes digital experiences feel truly human: tympanus.net/codrops/2026...

Beautiful transitions meet smart architecture in Mael Ruffini’s latest tutorial: a persistent Three.js scene in Webflow, powered by GSAP and Barba.js for fluid, gallery-like navigation. A great example of motion design serving both style and structure: tympanus.net/codrops/2026...

A quiet freelance month turned into something much bigger. Jonas Reymondin used the downtime to completely rethink his portfolio & he wrote the whole journey down for us: tympanus.net/codrops/?p=1...

Today's spotlight is all about giving yourself fully to the craft. Huy Nguyen shares how curiosity, self-direction, and a willingness to take risks led him from uncertainty to building MONOLOG: tympanus.net/codrops/?p=1...

In this practical how-to, Hiroki Watanabe shows how to build beautiful fullscreen image transitions using SVG masks and GSAP’s ScrollTrigger, from blinds-style reveals to dynamic grid effects. Learn how these techniques work: tympanus.net/codrops/2026...

What if scroll felt like moving through a mood? This beautiful tutorial by Houmahani Kane shows how to build a scroll-reactive 3D gallery with Three.js where depth, color palettes, and scroll velocity shape the atmosphere of the scene. Follow along: tympanus.net/codrops/2026...

Small team. Big ideas. In this studio spotlight, Obys shares how their small team approaches big digital projects, using storytelling, structure, and thoughtful design systems. Read the full story: tympanus.net/codrops/2026...

What happens when Swiss editorial design meets WebGL experiments? Corentin Bernadou shares the story behind his redesigned portfolio — from notebook sketches to Three.js geometries, GSAP motion, and playful grid interactions. A great case study: tympanus.net/codrops/?p=1...

What if designers could work with WebGL shaders visually? In today's article, Unicorn Studio creator George Hastings shares the story behind the tool and how it makes expressive, interactive graphics possible directly in the browser: tympanus.net/codrops/?p=1...

How do you design a culture-driven digital capsule? Gil Huybrecht & Jesper Landberg break down the making of "The Lookback" for Better Off® Studio — from GSAP flip transitions to infinite scroll and a surf-inspired 3D view. Read the case study: tympanus.net/codrops/2026...

A year ago, the legendary matsuoka-601 shared an incredibly detailed breakdown of the techniques behind his viral real-time fluid simulation built with WebGPU. It hasn’t aged a day — it’s still absolutely stunning. If you haven’t read it yet, make sure you do: tympanus.net/codrops/2025...

We are kicking off the week with an epic tutorial by @theoplawinski.com 🔥 Build a scroll-driven animated grid with GSAP's ScrollTrigger & Lenis and learn how to structure layout, timelines, and scroll progress into one cohesive system. Follow along: tympanus.net/codrops/2026...

The very first Three.js Conference is happening and we’re proud to support it as official sponsors 💙 Huge respect to David Ronai (@Makio64) for organizing it all, and to Hervé Studio for bringing threejs.paris to life. Go behind the scenes 👇 tympanus.net/codrops/?p=1...

In our latest tutorial by Valentin Mor you'll learn how to build a lightweight SPA router with true async crossfade page transitions using Vanilla JavaScript, GSAP, and Vite — no framework required. Check it out: tympanus.net/codrops/?p=1...

Architecture meets motion. Grégory Lallé and Thomas Monavon share how Telha Clarke's new identity became a refined, scroll-driven experience powered by GSAP & smart UI decisions: tympanus.net/codrops/?p=1...

Today, we have Matt Greenberg breaking down how he turned a flat product grid into a spatial 3D experience with React Three Fiber and custom GLSL, focusing on damping instead of timelines, mutable refs over React state, and an architecture that maintains 60fps: tympanus.net/codrops/?p=1...

Composite rendering in WebGL goes far beyond post-processing. Jeremy Chang from Active Theory breaks down render targets, fullscreen passes, and shader-driven transitions — and shows how to architect scalable Three.js experiences: tympanus.net/codrops/2026...

Brooklyn grit. Darkroom tones. Italic rebellion. Serhii Polyvanyi of BL/S® walks us through the making of Jason Bergh’s cinematic portfolio shaped by film-cut transitions with UI details pulled from the edge of a 35mm strip: tympanus.net/codrops/2026...

In today's in-depth tutorial, David Faure shows how to build a smooth horizontal parallax gallery from a clean DOM/CSS/JS setup to a GPU-powered WebGL (Three.js) version with shaders for that extra-fluid feel! Follow along: tympanus.net/codrops/2026...

In this new case study, Joffrey Spitzer walks through the making of his minimalist Astro + GSAP portfolio shaped by precise motion, refined text reveals, and smooth, considered transitions. Packed with thoughtful, practical code examples: tympanus.net/codrops/?p=1...

Our latest tutorial by Matis Dené explores a scroll-driven, infinitely looping 3D image tube built with React Three Fiber. You'll learn shader-based deformation, inertial motion, seamless looping, and how to sync DOM and WebGL into one cohesive motion system: tympanus.net/codrops/?p=1...

Since 2006, Metalab has helped build some of the internet's most familiar products. In our latest Studio Spotlight, their team shares how they've shipped 475+ products by combining craft-first design, durable systems, and hands-on execution: tympanus.net/codrops/2026...

Minimal design doesn’t mean static. A deep, insight-rich behind-the-build of the award-winning 1820 Productions site by Balky Studio. Designed by Williams Alamu and developed by Carter Ogunsola. The perfect weekend read: tympanus.net/codrops/?p=1...

From burnout to building the work he always wanted. In our latest Designer Spotlight, Jordan Gilroy shares how learning Webflow gave him back control — and reignited his love for design. An inspiring story about doubt, growth, and starting again: tympanus.net/codrops/?p=1...

In today's tutorial, Sujen Phea shows how to build a GPU-enhanced procedural snake in Three.js, where organic motion emerges from steering behaviors, endless Bézier curves, and shader-driven rendering. 🐍 Follow along: tympanus.net/codrops/?p=1...

What makes a digital experience feel truly human? We're so stoked to spotlight Exo Ape today. A studio driven by narrative, motion, and the belief that the most powerful digital journeys are crafted slowly, with care, character, and a very human touch. Dive in: tympanus.net/codrops/?p=1...

A little Sunday inspiration ✨ New Motion Highlights with UI animations and motion design to refresh your creative brain before the week begins: tympanus.net/codrops/2026...

In today’s spotlight, Vladyslav Penev shares how his work on StringTune, StringTune-3D, and real client projects shaped his approach to building production-ready motion and interaction systems. Read the full spotlight: tympanus.net/codrops/2026...

Learn how to build a multi-page WebGL image gallery with shader reveals, smooth scrolling & seamless transitions using GSAP, Three.js, Astro & Barba.js. By Chakib Mazouni. Read it here: tympanus.net/codrops/?p=1...

We’re so excited to spotlight Daniele Buffa today! From a childhood surrounded by art in Rome to crafting beautifully polished, motion-forward digital work in London, Daniele shares the experiences, influences, and mindset behind his approach to design: tympanus.net/codrops/2026...

One year on, Hector Arellano's WebGPU fluid simulation article is still a gem: a 13-year journey through fluid simulations, WebGL hacks, and modern WebGPU breakthroughs. If you missed it, it’s well worth the revisit: tympanus.net/codrops/2025...

Inspired by the Gommage effect from Clair Obscur: Expedition 33, today's tutorial by Thibault Introvigne breaks down how to create a cinematic dissolve in WebGPU and Three.js, using MSDF text, particle effects, TSL shaders, and selective bloom. Read it here: tympanus.net/codrops/?p=1...

Today we are highlighting Dylan Brouwer who spent years in design-led roles before taking the leap into full-time freelance, embracing motion and no-code to build expressive sites without waiting to become a "traditional" developer: tympanus.net/codrops/2026...

Today we have a tutorial by Iqbal Muthahhary on creating smooth CSS Grid layout transitions with the GSAP Flip plugin, showing how to resize and reorder items with minimal JavaScript while maintaining clean, continuous motion: tympanus.net/codrops/2026...

Naked City Films needed a site that stayed in motion without losing control. Today, Savoir Faire takes us behind the scenes of a process where restraint, rhythm, and custom systems shape an experience that behaves like film: tympanus.net/codrops/?p=1...

Today we’re highlighting art director Victorine Snijders as she shares her creative journey. ✨ From student projects to global brands like Nike, Google, and BMW, she uses design as a tool to solve real, human problems: tympanus.net/codrops/2026...

Today we have Valentin Descombes walking us through the creation of a scroll-driven dual-column text animation. Learn how opposing sine-wave motion, GSAP, and thoughtful performance choices come together to create a smooth, expressive scrolling experience: tympanus.net/codrops/?p=1...

A site for sore eyes 👀 Toyfight break down how they showcased Flim with Webflow + GSAP, from clean page transitions and SplitText/ScrollTrigger text reveals to Lottie playback tricks, cursor-follow “eyes,” and Rapier-powered physics. tympanus.net/codrops/2026...

We're kicking off this week with a behind-the-scenes look at Obys’ Design Books and how the team transformed a simple reading list into a tactile web library with stacked-page navigation, paper textures, and smooth motion. Read it here: tympanus.net/codrops/2026...

The browser as cinema 🎬 The Spark is a story-first, scroll-driven web experience where motion, sound, UI, and performance work as one. Learn how The Digital Panda engineered narrative, emotion, and technical restraint into a truly immersive piece: tympanus.net/codrops/?p=1...

From "what’s a string?" to Awwwards Sites of the Day 🐐 Meet Nathan Dallaire, a Toronto-based creative frontend turning Next.js, GSAP & Sanity into beautifully obsessive, high-end web experiences. Honest, funny, and wildly talented: tympanus.net/codrops/2026...

Today we have a fantastic masterclass by Edoardo Lunardi on creating an infinite, interactive image space! Learn how to create a pannable image canvas in R3F using chunk-based rendering and performance-first optimizations for buttery-smooth exploration: tympanus.net/codrops/2026...

Today we have a tutorial by Junichi Kasahara showing how to turn a video into 3D voxel cubes—then switch into physics so the cubes drop and scatter. Learn how to create this satisfying drop: tympanus.net/codrops/2026...

Pretty epic what Pablo Stanley pulled off with Efecto: a real time WebGL playground for dithering, ASCII, and CRT style effects, built with no prior shader experience. In our first article of the year, he shares the full story: tympanus.net/codrops/?p=1...

What helps teams take creative risks, speak up, and learn faster? Our latest article is a long read in Andrew Woan's signature style on psychological safety, self-awareness, and why they quietly shape the quality of creative work. Set aside some time and read it here: tympanus.net/codrops/2025...

In our latest case study, Artemii Lebedev shares how "Frequency Breathwork" became a site that embodies breath with cyclical flow, subtle motion, and WebGL strings powered by Three.js + the Web Audio API. Read it here: tympanus.net/codrops/2025...

Thanks to all of you, 2025 was a big year at Codrops! 💙 A year shaped by curiosity, experimentation, and a lot of amazing work from the community. Thanks to everyone who was part of it! Here's a look back at what we've been up to: tympanus.net/codrops/2025...

Last motion highlights of the year, and it's such a good one! 😍 A carefully curated set of animations to watch, rewind, and get inspired by: tympanus.net/codrops/2025...

What happens when you let AI build fast—but never guess? Harry Chuang reveals how he created a nostalgic 8-bit universe using a 95% AI-driven workflow, governed by a strict “Design Constitution” that turns AI into a compliance officer, not a stylist. Read it here: tympanus.net/codrops/2025...