Best of Codrops — June 2025

1. 1
   Article

   Codrops·44w

   Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

   A comprehensive guide to building an interactive 3D audio visualizer that combines Three.js for 3D rendering, Web Audio API for real-time sound analysis, and GSAP for smooth animations and draggable UI elements. The tutorial covers creating custom GLSL shaders for audio-reactive effects, implementing frequency analysis to drive visual distortions, and building a sci-fi interface with momentum-based interactions. The result is a glowing orb that pulses and morphs in sync with music while users can drag control panels around the screen.

   123

   5
2. 2
   Article

   Codrops·45w

   Building an Infinite Parallax Grid with GSAP and Seamless Tiling

   A comprehensive tutorial on creating an infinitely scrolling image grid with parallax effects using GSAP. Covers dynamic tile generation from Figma layouts, smooth scroll and drag interactions, seamless tiling for infinite scrolling, visibility animations with IntersectionObserver, and polished intro animations. The implementation uses mathematical calculations for positioning, linear interpolation for smooth motion, and performance optimizations for web animations.

   75
3. 3
   Article

   Codrops·42w

   Motion Highlights #10

   A curated collection of motion design and animation examples from creative professionals, featuring text animations, UI designs, portfolio pieces, and experimental motion graphics. Includes work from various studios and designers showcasing different animation techniques and styles, plus a recommendation for a free GSAP JavaScript animation course.

   18

   1
4. 4
   Article

   Codrops·46w

   Building a Real-Time Dithering Shader

   A detailed walkthrough of creating a real-time dithering shader using GLSL and WebGL. The implementation uses a 4x4 Bayer matrix for ordered dithering, supports optional pixelation and grayscale modes, and integrates with the postprocessing library as a composable effect. The shader transforms smooth gradients into stylized pixel patterns reminiscent of 8-bit graphics, offering customizable parameters like grid size and pixel ratio for retro visual effects in modern web applications.

   13

   2