--- title: Best Codrops posts — March 2025 | daily.dev description: The most upvoted Codrops posts from March 2025, curated by the daily.dev community. canonical: https://daily.dev/sources/codrops/best-of/2025/03 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/codrops/best-of/2025/03 og:type: website og:site_name: daily.dev og:title: Best Codrops posts — March 2025 | daily.dev og:description: The most upvoted Codrops posts from March 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Codrops — March 2025 1. 1 [](https://daily.dev/posts/creating-stylized-water-effects-with-react-three-fiber-nghzd5bkl "Creating Stylized Water Effects with React Three Fiber") Article Codrops · 2y Creating Stylized Water Effects with React Three Fiber Learn how to create a stylized water effect using React Three Fiber, focusing on writing shaders, optimizing 3D assets, and maintaining good performance. This tutorial covers the step-by-step process, including creating 3D terrain, setting up the environment, handling materials, and adding dynamic water animation. Additionally, the tutorial touches on incorporating sound for an immersive experience. 130 5 2. 2 [](https://daily.dev/posts/animating-letters-with-shaders-interactive-text-effect-with-three-js-glsl-kogda2cwv "Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL") Article Codrops · 1y Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL Learn how to create an interactive text effect using Three.js and custom shaders. This tutorial covers the basics of creating a ShaderMaterial, using raycasting for mouse interactions, and applying a dynamic displacement effect. Enhance the visual experience with shadow effects and experiment with easing functions for smooth transitions. 120 3 3. 3 [](https://daily.dev/posts/building-an-interactive-image-grid-with-three-js-zb5pknals "Building an Interactive Image Grid with Three.js") Article Codrops · 1y Building an Interactive Image Grid with Three.js This tutorial guides you through creating a dynamic interactive image grid using Three.js, from grid setup and card initialization to advanced animations and shader effects. It explains the implementation using a pre-prepared repository, detail card position scaling, hover interactions based on mouse positions, and using custom shaders for visual effects. Tips for handling performance and customization options are included to optimize and enhance the grid's appearance and functionality. 110 2 4. 4 [](https://daily.dev/posts/webgpu-scanning-effect-with-depth-maps-slxrxidik "WebGPU Scanning Effect with Depth Maps") Article Codrops · 1y WebGPU Scanning Effect with Depth Maps An exploration of a scanning effect using depth maps, custom shaders, and WebGPU rendering with Three.js and react-three-fiber. The demo showcases three variations of the effect by combining depth information with post-processing to create dynamic visual depth. Techniques include image distortion through UV coordinate displacement, procedural dot grid masking, and continuous scan animation using GSAP. 50 1 [See all Codrops archives](/sources/codrops/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/codrops/best-of/2025/03#page","url":"https://daily.dev/sources/codrops/best-of/2025/03","name":"Best Codrops Posts — March 2025","description":"The most upvoted Codrops posts from March 2025, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/codrops/best-of/2025/03#items","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/creating-stylized-water-effects-with-react-three-fiber-nghzd5bkl","name":"Creating Stylized Water Effects with React Three Fiber"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/animating-letters-with-shaders-interactive-text-effect-with-three-js-glsl-kogda2cwv","name":"Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/building-an-interactive-image-grid-with-three-js-zb5pknals","name":"Building an Interactive Image Grid with Three.js"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/webgpu-scanning-effect-with-depth-maps-slxrxidik","name":"WebGPU Scanning Effect with Depth Maps"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/codrops/best-of"},{"@type":"ListItem","position":5,"name":"March 2025"}]}]} ```