Building Depth: Designing and Developing a 3D Renderer Inside Figma (opens on the source site)
A look at how Depth came together, from building a 3D renderer inside Figma to designing a website that explores what it can do.
Read at the sourceTHE COMPANY INDEX TRACKED BLOG
Codrops
Ideas, decisions, and lessons from the team.
tympanus.net (opens on the source site)LinkedIn X9Posts tracked
4 weeks agoLatest publication
0.8Posts / month over the last 12 months
Latest writing
9 of 9 postsGoodgrowth: Boot Sequences, Spinning Discs, and the Art of the Portfolio (opens on the source site)
Discover the process behind Goodgrowth, from its console-inspired concept to the 3D, motion, sound, and technical details that bring the experience to life.
Read at the sourceBuilding a Mouse-Following Square Lens Effect with Three.js and GLSL (opens on the source site)
A step-by-step tutorial on using Three.js and GLSL to create a mouse-following square lens effect with image distortion, RGB shifting, and animated shader effects.
Read at the sourceRun Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU (opens on the source site)
Exploring the techniques behind an audio-reactive 3D scene, from custom geometry deformation and music analysis to scroll-driven morphing, damping, and performance optimization.
Read at the sourceRelighting Images with Depth Maps and Three.js (opens on the source site)
Explore how depth maps, TSL, and WebGPU can be combined to turn flat 2D images into dynamic surfaces with realistic lighting, surface detail, and self-shadowing.
Read at the sourceBuilding an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data (opens on the source site)
Learn how to build a dynamic testimonial hero in Webflow using CMS data, a custom JavaScript counter, and GSAP’s visual timeline.
Read at the sourceCreativity at Enterprise-Scale, Without Compromise: The OFF+BRAND. Story (opens on the source site)
Telling stories on some of the biggest canvases on the web, from Awwwards Site of the Year to the front door of Microsoft.
Read at the sourceInside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage (opens on the source site)
A technical look at the making of HAOQI.DESIGN, exploring scroll sync, glass shaders, and the interplay of DOM, CSS, and WebGL in a retro-futurist portfolio.
Read at the sourceFrom Motion to Meaning: Denis Avramenko’s Approach to Interactive Design (opens on the source site)
A behind-the-scenes look at Denis Avramenko’s creative process, exploring his approach to motion, typography, interaction, and technology through a selection of digital projects.
Read at the source