Native Design Tokens: The Foundation of Consistent, Scalable, Open Design
In Articles,
Explore how structured design decisions are transforming design systems through Penpot’s native tokens, real-world workflows, and open standards.
All Posts
Browse through all articles, tutorials, roundups, and experiments on Codrops.
Designer Spotlight: Luca Franceschetti
In Articles, by Luca Franceschetti
Explore the eclectic and expressive world of Italian digital designer Luca Franceschetti, where playful experimentation meets refined UI design.
Building a Fully-Featured 3D World in the Browser with Blender and Three.js
In Tutorials, by Andrew Woan
Go behind the scenes of an immersive 3D museum built with Blender and Three.js, and explore the creative process, technical decisions, and browser-ready workflow that brought it to life.
Case Study: Ciel Rose
In Articles, by Yanis Lebzar and Gabriel Foulon
Explore how storytelling and subtle design come together in a filmmaker duo’s portfolio.
Designer Spotlight: Vítor Cardoso
In Articles, by Vitor Cardoso
Explore the work of Vítor Cardoso, an award-winning Freelance Designer from Portugal, as he shares his design approach, inspiration and selected projects that defined his journey.
Warhol Arts: A Digital Playground of Pop, Pixels, and Pure Motion
In Articles, by Serhii Polyvanyi
A deep dive into the code, craft, and chaos behind a pop-art-inspired digital experience powered by GSAP and Webflow.
WebGPU Scanning Effect with Depth Maps
In Playground, by deadrabbbbit
An exploration of a scanning effect using depth maps, custom shaders, and WebGPU rendering.
Case Study: Troa 25′ Folio
A look at how Troa reimagined their portfolio — focusing on performance, sustainability, and a clean, thoughtful design.
Developer Spotlight: Jorge Toloza
In Articles, by Jorge Toloza
From self-taught beginnings to crafting motion-driven, interactive experiences—this is a look at Jorge Toloza’s journey and the projects that shaped his approach to creative development.
Design in Motion: The Animation Principles Behind Green Stack
A concept-to-site journey in Webflow, shaped by design, dev, and bold animation principles.
Stas Bondar ’25: The Code & Techniques Behind a Next-Level Portfolio
In Articles, by Stas Bondar
A look behind stabondar.com — a creative portfolio featuring advanced web animations with GSAP, Three.js, and physics-based effects.
Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL
In Tutorials, by Paola Demichelis
A beginner-friendly tutorial that explores how to create a dynamic text displacement effect using Three.js and custom shaders.
Motion Highlights #3
In UI Interactions and Animations Roundups, by Manoela Ilic
Fresh animation ideas and motion design trends to fuel your inspiration.
Designer Spotlight: Huy Phan
Award-winning designer Huy Phan shares his journey, creative philosophy, and the stories behind his most impactful digital experiences.
Developer Spotlight: Jean Mazouni
In Articles, by Jean Mazouni
In this spotlight, Jean Mazouni showcases some of his favorite freelance work as a web developer and shares his passion for WebGL technologies.
StringTune: The JavaScript Library Born from a Design Agency’s Workflow
In Articles, by Fiddle.Digital
Learn how to use this flexible JavaScript library for animations, smooth scrolling, and interactive effects.
Building an Interactive Image Grid with Three.js
In Tutorials, by Samuel Jarry
In this tutorial, we’ll create an interactive image grid using Three.js, covering setup, animations, and shaders.
Case Study: Motoyoshi Takamitsu
In Articles, by Garden Eight
An exploration of the design and development of photographer Motoyoshi Takamitsu’s portfolio website.
