Codrops

7 hours agoCommentShare

CodropsBeyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js | CodropsThe Codrops mark, rebuilt as a draggable solid and printed in ASCII on the GPU, where every character cell searches 95 glyphs for its own.

1 day agoCommentShare

CodropsFrom Rays to Meshes: Building Vercel’s Prism with vgpu | CodropsA look at how Vercel’s vgpu creates a performant prism effect using shaders, geometry, glass, and adaptive rendering.

1 day agoCommentShare

CodropsMore Three.js Speakers, More Ideas from Paris | CodropsNew voices from the first Three.js Conference share what they're building, experimenting with, and bringing to Paris.

2 days agoCommentShare

CodropsBreaking the Frame: Building a Real-Time Datamosh Effect with Three.js | CodropsA hands-on exploration of how Three.js, shaders, and codec-inspired techniques can turn a scene transition into a convincing real-time datamosh effect.

3 days agoCommentShare

CodropsBend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js | CodropsA playful Three.js experiment that turns the Eiffel Tower into a catapult, combining interactive physics with real-world 3D data from Cesium ion to launch yourself across Paris toward the Three.js conference.

4 days agoCommentLike (1)Share

Mehmet Kose liked this

CodropsVolatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js | CodropsA mesmerizing Three.js experiment where glass, wandering cubes, caustics, refractions, and sound come together in a fluid, interactive scene.

8 days agoCommentShare

CodropsGoodgrowth: Boot Sequences, Spinning Discs, and the Art of the Portfolio | CodropsDiscover the process behind Goodgrowth, from its console-inspired concept to the 3D, motion, sound, and technical details that bring the experience to life.

10 days agoCommentShare

CodropsBuilding a Mouse-Following Square Lens Effect with Three.js and GLSL | CodropsA 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.

11 days agoCommentShare

CodropsBlender to Three.js and Back: 10 Tips for a Better Workflow | CodropsA practical collection of tips for combining AI, Blender, and Blender MCP to streamline your Three.js workflow.

13 days agoCommentShare

CodropsSixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs | CodropsWhat building a Three.js lab around my own music taught me about the renderer.

15 days agoCommentShare

CodropsRun Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU | CodropsExploring the techniques behind an audio-reactive 3D scene, from custom geometry deformation and music analysis to scroll-driven morphing, damping, and performance optimization.

16 days agoCommentShare

CodropsRelighting Images with Depth Maps and Three.js | CodropsExplore 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.

17 days agoCommentShare

CodropsBuilding an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data | CodropsLearn how to build a dynamic testimonial hero in Webflow using CMS data, a custom JavaScript counter, and GSAP’s visual timeline.

18 days agoCommentShare

CodropsCreativity at Enterprise-Scale, Without Compromise: The OFF+BRAND. Story | CodropsTelling stories on some of the biggest canvases on the web, from Awwwards Site of the Year to the front door of Microsoft.

20 days agoCommentShare

CodropsInside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage | CodropsA 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.

22 days agoCommentShare

CodropsFrom Motion to Meaning: Denis Avramenko’s Approach to Interactive Design | CodropsA 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.

23 days agoCommentShare

CodropsCreating an Interactive 3D Cluster with Three.js, TSL and Three Start | CodropsA step-by-step tutorial on turning a simple icosahedron into a dynamic, interactive 3D cluster using Three.js, TSL, WebGPU, noise, interaction, and post-processing.

24 days agoCommentShare

CodropsExploring Procedural Geometry with Three.js and WebGPU | CodropsA deep dive into building a flexible Three.js Geometry Painter with WebGPU and TSL, from surface picking and procedural geometry to live controls, custom shaders, lighting, and post-processing.

25 days agoCommentShare

CodropsFrom Brand Systems to Cultural Worlds: Inside Antinomy and 27b | CodropsA look inside two connected studios building brands across strategy, design, and experience, with the same instinct for clarity, culture, and edge.

27 days agoCommentShare

CodropsDesigning a Flexible Digital Archive for Chems.Studio’s Creative Practice | CodropsA film-led website for Chems Studio, bringing years of creative direction and moving image together through a quiet, flexible digital framework.

28 days agoCommentShare

CodropsThe Department Is Open: Building the PX PUSH Website | CodropsHow a design subscription studio built its website around a single governing idea: an old, always-on machine, running underneath a modern Nuxt and Three.js stack.

29 days agoCommentShare

CodropsGarden Anomaly: A Tiny WebGPU and TSL Experiment | CodropsA tiny WebGPU and TSL experiment, tinkering with physics, deformations, and procedural audio, all tied together inside a sphere to play with.

30 days agoCommentShare

CodropsA Canvas for Individuality: Creating Websites That Feel Unmistakably Human with Readymag | CodropsA selection of websites that show why individuality, not trends, creates the most memorable experiences on the web.

31 days agoCommentShare

CodropsBuilding an Endless Interactive Glass Xylophone with Three.js | CodropsA scrolling helix of frosted glass bars that ring as you sweep across them, built in Three.js with instancing, a fluid simulation, and glass faked entirely in the shader.

32 days agoCommentShare

CodropsThe Story Is in the Interaction: Bonhomme’s Digital Experiences for Luxury Brands | CodropsBonhomme explores how brands come alive through digital, turning design and technology into immersive stories.

36 days agoCommentShare

CodropsBuilding an Infinite GSAP Scroll Gallery with Parallax and Flip Transitions | CodropsLearn how to build an infinite GSAP gallery with parallax scrolling, reveal animations, and Flip-powered fullscreen transitions.

37 days agoCommentShare

CodropsStudio Freight: Moving Missions Forward | CodropsA look inside Studio Freight’s mission driven approach to strategy, design, and digital experiences, and the bold work they create with teams shaping what comes next.

39 days agoCommentShare

CodropsBetween Print and Digital: The Making of MERSI’s Website | CodropsFLOT NOIR reimagines MERSI’s digital presence as a quiet, immersive space between architectural print and interactive web, combining a tailored Webflow build with precise motion and editorial storytelling.

42 days agoCommentShare

CodropsThe Art of Continuous Transformation: How Garden Eight Blends Integrity with Play | CodropsInside Garden Eight's approach to creating websites that are not only visually striking, but thoughtfully crafted to evolve, engage, and endure.

43 days agoCommentShare

CodropsBuilding Cerebrium: Making Serverless Infrastructure Tangible | CodropsGo behind the scenes of Cerebrium to explore the design, 3D, and WebGL techniques that turned complex AI infrastructure into an intuitive interactive experience.

44 days agoCommentShare

CodropsBuilding Ridgeline: Engineering a Real-Time 3D Experience in Webflow | CodropsA behind-the-scenes look at the engineering behind Ridgeline, covering the architectural decisions, Webflow integration, real-time terrain rendering, animation techniques, and performance optimizations that brought a cinematic 3D experience to life.

45 days agoCommentShare

CodropsMagnetic Commerce: Building the Dash Creative Website | CodropsHow a simple branding concept shaped the interaction design, animation, and WebGL implementation of the Dash Creative website.

46 days agoCommentShare

CodropsThe Craft Behind Memorable Digital Experiences: Inside Unseen Studio | CodropsA look inside Unseen Studio's approach to transforming abstract ideas, hidden stories, and complex concepts into experiences people can explore and remember.

49 days agoCommentShare

CodropsZERO: The Engineering Behind a Defiant Interactive Narrative | CodropsA technical breakdown of the pipeline, rendering techniques, and performance optimizations behind ZERO, an immersive scroll driven WebGL experience built for desktop and mobile.

50 days agoCommentShare

CodropsMeet the Speakers of the First Three.js Conference | CodropsBefore the spheres gather in Paris, we asked a few speakers to share what they're building, what they're thinking about, and one artifact they keep carrying from project to project.

51 days agoCommentShare

CodropsThe Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio | CodropsA behind-the-scenes look at how multiple animation, rendering, and interaction layers were unified into one performant web experience.

53 days agoCommentShare

CodropsWhere Stories Become Interactive Worlds: How makemepulse Brings Ideas to Life Across Web, XR, and Beyond | CodropsFor more than 15 years, makemepulse has combined creative storytelling and technical innovation to craft award-winning digital experiences across web, immersive media, and interactive installations.

56 days agoCommentShare

CodropsThe Sleepers: Creating an Atmospheric WebGL Experience with Lightweight Techniques | CodropsFrom swirling transitions and animated fog to mesh outlines and infinite worlds, here's a breakdown of the techniques behind it.

57 days agoCommentShare

CodropsBuilding an Interactive Wave Propagation Cube Grid with Three.js | CodropsA tutorial on how to create a minimalistic and customizable 3D wave grid background with Three.js.

58 days agoCommentShare

CodropsTen Years Away: Designing an Interactive Comic for Studio375’s Tenth Anniversary | CodropsThe story behind "Ten Years Away", a scroll-driven interactive comic created to celebrate Studio375's tenth anniversary, from its printed origins to its WebGL implementation.

59 days agoCommentShare

CodropsBuilding a Scroll-Driven 3D Gallery Using a Blender Camera Path with Three.js and GSAP | CodropsBuild a cinematic, scroll-driven 3D gallery using a camera path authored in Blender, rendered with Three.js, and animated with GSAP.

64 days agoCommentShare

CodropsFrom Years of Client Work to a Next.js + Sanity Starter Kit | CodropsHow years of refining my workflow became a headless foundation other developers can build on.

65 days agoCommentShare

CodropsSculpting a Digital Athlete: Capturing Stefanos Tsitsipas Beyond the Court | CodropsExplore the complete 3D workflow behind Stefanos Tsitsipas' digital character, from photogrammetry and rigging to animation and WebGL optimization.

66 days agoCommentShare

CodropsBuilding Persistent Page Transitions with WebGPU and Vanilla JavaScript | CodropsA step-by-step tutorial showing how to build seamless GPU-powered page transitions by combining a persistent WebGPU scene, DOM tracking, and a lightweight vanilla JavaScript router.

67 days agoCommentShare

CodropsInside Bisous: Designing an Editorial Experience for Cinematic CGI | CodropsA behind-the-scenes look at how editorial composition, purposeful motion, and minimalist design create a portfolio that lets cinematic CGI take the spotlight.

70 days agoCommentShare

CodropsEngineering the Web Experience Behind Shopify’s Spring ’26 Edition: Everywhere | CodropsA detailed look at the rendering architecture, custom tooling, and performance techniques behind Shopify's Spring '26 Edition: Everywhere.

71 days agoCommentShare

CodropsShaping Stories into Experience: The Work of Kevin Lam | CodropsA spotlight on Brisbane-based designer Kevin Lam, and his practice of turning brand stories into soulful experiences across digital, print and motion.

72 days agoCommentShare

CodropsTesting What Users Actually See with Vitest and Chromatic | CodropsEditor's note: Today, our friends at Chromatic are sharing an early look at their new visual testing plugin for Vitest.

73 days agoCommentShare

CodropsPodium: Building a Website Where Running Becomes Storytelling | CodropsHow we designed and built a portfolio that preserves cinematic storytelling through rhythm, motion, and restraint.

74 days agoCommentShare

CodropsDesigning Beyond the Surface: How DashDigital Turns Complexity into Clarity | CodropsResearch-led and strategy-driven, DashDigital believes the strongest digital work comes from understanding the problem before creating the solution.