Blog post

Designing in the Open: How Community Collaboration Is Shaping Penpot’s AI Future | Codrops

Open source projects usually begin with a simple belief: software becomes more capable, more resilient, and more meaningful when it is created in the open. For Penpot, this belief is not a slogan. It...

Chris’ Corner: Cloud Four

This is an appreciation post for the Cloud Four Blog. It’s one of those must-subscribes. I find myself adding almost every post they put out to my archive of posts to dig into. So since I’m...

From Basement to Breakthroughs: Inside the Studio Powering the Internet’s Boldest Brands | Codrops

We’re basement, a small but mighty branding and digital studio based in Mar del Plata and Buenos Aires, Argentina. We partner with the world’s most ambitious startups and scale-ups to unlock growth at...

The Mechanics Behind a Scroll-Driven Circular 3D Carousel with Three.js and Post-Processing | Codrops

For his 2026 portfolio, Gionatan Nese came up with “just a little idea”: to transform every image into a circle that responds to your mouse movements while maintaining the appearance of a movie. Yes...

From a Single Story to Countless Worlds: Pavel Mazhuga’s Path in Creative Development | Codrops

My name is Pavel Mazhuga, I’m a creative frontend developer from Krasnoyarsk, Russia. I’ve been working in frontend since 2017. It so happened that I started as a creative developer right away: my...

Simulating Life in the Browser: Creating a Living Particle System for the UntilLabs Website | Codrops

Until Labs is advancing one of the most meaningful problems in modern healthcare: preserving the possibility of life. So when at basement.studio we set out to design their homepage, we didn’t want an...

Chris’ Corner: HTML

There’s a new term in town: soft navigations. Basically it means “single page app” (SPA) style navigations where page stuff changes, and the URL changes, but the browser didn’t do a traditional...

Building With Perfect Pitch: How Fiddle.Digital Composes High-Performance Digital Experiences | Codrops

We are Fiddle.Digital Design Agency, founded by Dmytro Troshchylo and Olga Skrypka in 2017. Later, another important person joined us, Vladyslav Penev. Dmytro serves as the creative and art director...

From Illusions to Optimization: The Creative WebGL Worlds of Adrián Gubrica | Codrops

Hey everyone, what an honour to be in this lovely community! I’m Adrián, Creative Developer at OFF+BRAND. studio, specialising in building highly performant interactive WebGL experiences. As a curious...

Crafting Nature Beyond Technology: A Project from Roots to Leaves | Codrops

After the summer, I knew that I would have some free time, so I took it as an opportunity to create a website that would matter to me and also serve as a playground to test new stuff and improve my...

Zero to Live: The Anima × Codrops Hackathon | Codrops

We’re teaming up with Anima to challenge designers and developers everywhere to bring their ideas to life — from concept to a live prototype — in just one week. Learn modern web...

Two Portfolios, One Process: Where Design, Motion, and Code Come Together | Codrops

Every strong collaboration begins the moment a designer and a developer start speaking the same language. Learn modern web animation using GSAP 3 with 34 hands-on video lessons and...

Chris’ Corner: Web Components

Jump to Docs Navigation I’d never heard of a CEM before. That’s a “Custom Elements Manifest” or a custom-elements.json file in your project. It’s basically generated documentation about all the web...

From a Founder’s Restless Urge to a Rule-Breaking Studio: The Unfiltered Creative Evolution of Zajno | Codrops

Based in Delaware, USA, we’re a digital design studio focused on breaking away from formulaic work. No templates or shortcuts—just unconventional, carefully crafted websites and apps that reflect each...

Building The Monolith: Composable Rendering Systems for a 13-Scene WebGL Epic | Codrops

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now → To build this monolithic project with 13...

The Geometry of Movement: A Shopify-Powered Digital Tribute to Raymond Templier’s Modernist Vision | Codrops

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now → A pioneer of modern jewelry, Raymond...

Letting the Creative Process Shape a WebGL Portfolio | Codrops

This case study walks through the entire creative process I went through while building my website. It is organized into five chronological steps, each representing a key stage in the project’s...

Creating Wavy Infinite Carousels in React Three Fiber with GLSL Shaders | Codrops

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now → After coming across various infinite...

Why Design Awards Matter and How Readymag Rethinks Them | Codrops

Design awards influence the web more than many people realize. They set standards, shift aesthetics, and influence which designers get seen.  As a website design tool, Readymag has taken part in and...

Chris’ Corner: Kagi Blog Typography

I’ve been using Kagi for search for the last many months. I just like the really clean search results. Google search results feel all junked up with ads and credit-bereft AI sludge, like the...

Building a Different Kind of Agency: Inside 14islands’ People-First Creative Vision | Codrops

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now → We’re 14islands, a creative agency...

One Canvas to Rule Them All: How INK Games’ New Site Handles Complex 3D | Codrops

We set out to create a digital presence that reflects INK Games’ ambition and showcases the scale of their work in a way that feels bold, modern, and unmistakably theirs. Learn...

Behind the KAI Design Dept. Experience: WebGL Line Blur, Video Scrubbing, and 3D Animation | Codrops

This project showcases the website created for the design department of KAI Corporation, a Japanese company with 117 years of craftsmanship rooted in blade-making. The site reflects the refined...

How to Build Cinematic 3D Scroll Experiences with GSAP | Codrops

In this tutorial, we’ll explore two examples on how GSAP can act as a cinematic director for 3D environments. By connecting scroll motion to camera paths, lighting, and shader-driven effects, we’ll...

417: Iframe Allow Attribute Saga

There was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously. The...

Chris’ Corner: Cursors

CSS has a bunch of cursors already. Chances are, you’re not using them as much as you should be. Well, should is a strong word. I can’t cite any evidence offhand that special cursors is some absolute...

Windsurf x Metalab: Building a New Brand for the Future of AI Coding | Codrops

Codieum was gaining serious traction. The AI-powered developer tool was charting its own course in a crowded space, even before it had a brand to match. Momentum was building, but something felt...

Blood Sugar Battler: Building a Real Game as a Designer using AI | Codrops

This all started as an experiment just to see if I could do it. I’m a designer who always wanted to make a game. Not a polished prototype concept or a cute interactive thing, but an honest-to-goodness...

Building a 3D Infinite Carousel with Reactive Background Gradients | Codrops

In this tutorial, you’ll learn how to build an elegant, infinitely looping card slider that feels fluid, responsive, and visually cohesive. The key idea is to have a soft, evolving background gradient...