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

Today, Gabriel Norman shares his journey, from teenage 3D experiments inspired by gaming culture to crafting award-winning WebGL experiences for some of the world’s most iconic luxury brands. A story about motion, typography, creative growth & finding your own rhythm: 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...

Discover the top 12 web design tools for 2026 – from AI-powered builders to creative resources for designers: tympanus.net/codrops/2026... #promoted

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

Compare the 8 best WordPress themes for designers in 2026—fast builds, clean UI, dependable updates, and WooCommerce depth for reliable, high-performance sites: tympanus.net/codrops/2026... #promoted

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

Discover the best 8 WordPress plugins for 2026 – animation, data UI, maps, grids, forms, builder & booking – to extend your site while keeping pages lean with smart setup: tympanus.net/codrops/2026... #promoted

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