Codrops·47wDeconstructing the 35mm Website: A Look at the Process and Technical Details
A technical breakdown of building an interactive 3D camera website using Three.js, covering edge detection with Sobel operators, mesh highlighting through render targets and raycasting, and scroll-triggered film roll animations. The tutorial demonstrates custom shader development, post-processing effects, and advanced WebGL techniques for creating engaging 3D web experiences.
Codrops·1yWebGPU Fluid Simulations: High Performance & Real-Time Rendering
Matsuoka's WebGPU-powered fluid simulations have demonstrated outstanding performance and visual appeal, showcasing the capabilities of WebGPU. He has developed two simulations, WebGPU-Ocean and WaterBall, focusing on high performance and realistic visualization. He used the MLS-MPM (Moving Least Squares Material Point Method) for simulation and Screen-Space Fluid Rendering for visualization, achieving real-time performance even on integrated GPUs. These techniques promise significant improvements in browser-based physics simulations, potentially matching the quality of simulations done with advanced engines in the future.
Codrops·1yCreating 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.
Codrops·44wCoding 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.
Codrops·1yAnimating 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.
Codrops·1yBuilding 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.
Codrops·1yNim is a free and open-source personal website template built with Next.js 15, React 19 and Motion-Primitives.
Nim is a free, open-source personal website template built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives. It offers customizable, pre-built motion components to simplify adding animations to websites. Designed for developers, designers, and founders, Nim is easy to customize, featuring a blog powered by MDX and various animated elements.
Codrops·1y10+ Best Web Design Tools & Resources For 2025 (Free & Paid)
Innovation in web design goes beyond aesthetics, requiring advanced tools that prioritize speed, security, and scalability. In 2025, web design will center around sophisticated eCommerce, data visualization, and seamless booking systems. Tools such as Trafft White Label for scheduling, wpDataTables for data handling, and LayerSlider for animations, offer robust solutions for modern web design needs. Choosing tools that provide regular updates, performance optimization, and flexibility will be crucial for staying ahead in web development.
Codrops·1yToddle.dev: The Future of Visual Web Application Development
Toddle.dev is a visual web application development tool that merges design and coding, eliminating the need for repetitive designer-to-developer handoffs. It provides a collaborative environment where designers can build UI directly and developers can engage in high flexibility coding, supported by robust version control and a community-driven module system. Toddle's unique selling point is its ability to blend the workflows of both designers and developers, offering performance and extensive customization without sacrificing creative freedom.
Codrops·1yMastering Carousels with GSAP: From Basics to Advanced Animation
Learn how to build and enhance carousels using the GreenSock Animation Platform (GSAP). This comprehensive guide covers everything from basic implementation with HTML and CSS to advanced animation techniques, including seamless loops, 3D transitions, parallax effects, and draggable interactions. Ideal for frontend designers and developers, the article offers practical examples to boost functionality and visual appeal.
Codrops·49wFrom SplitText to MorphSVG: 5 Creative Demos Using Free GSAP Plugins
The post explores the creative potential of GSAP's newly free premium plugins through five animation demos. It provides step-by-step guides for using plugins like SplitText, MorphSVG, Inertia, DrawSVG, and Physics2D to create interactive and animated web effects, such as text smashing and glowing dot grids. These examples highlight how GSAP can enhance web design and add playful elements to user interfaces. Resources are available for further exploration on CodePen and Webflow.
Codrops·42wFrom Static to Dynamic: 3 Micro-Animations Every Web Developer Can Master with Rive
Rive offers a powerful alternative to CSS and JavaScript animations for creating interactive web experiences. The tutorial demonstrates three practical animation patterns using a fictional plant care company: animated hero images that reveal hidden features on hover, interactive CTAs that respond to user input, and flexible layouts that adapt to different screen sizes. Rive animations are vector-based, lightweight, and can respond to real-time data through a JavaScript API, making them ideal for creating engaging micro-interactions that enhance user experience and conversion rates.
Codrops·46w3D Cards in Webflow Using Three.js and GLB Models
A comprehensive guide to creating interactive 3D cards in Webflow by integrating Three.js with GLB models. The tutorial covers the complete workflow from creating 3D models in Blender, setting up Three.js scenes with proper lighting and camera controls, and embedding the functionality into Webflow projects. Each card transforms from a flat UI element into an interactive 3D environment with real-time rendering, orbital controls, and atmospheric lighting effects.
Codrops·45wBuilding 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.
Codrops·1yCreating a Generative Artwork with Three.js
Learn how to create a generative artwork inspired by Brazilian artist Lygia Clarke using Three.js and React Three Fiber. The tutorial covers setting up the project, creating and breaking grid systems, adding color palettes, and incorporating a GUI with Leva for interactive controls. The guide provides step-by-step code examples and encourages creative experimentation with various artistic elements.
Codrops·1yBuilding a Fully-Featured 3D World in the Browser with Blender and Three.js
Explore the process of building an immersive 3D world in the browser using Blender and Three.js. Learn the creative and technical steps involved, from conceptualizing scenes to blocking, sculpting, and adding materials. Discover tips for optimization, texturing, and exporting assets to ensure your web-based 3D environment performs efficiently and looks stunning.
Codrops·18wSpain Collection: Evolving a Luxury Website into a Digital Ecosystem
A detailed case study of redesigning Spain Collection's luxury travel website into a comprehensive digital ecosystem. The project evolved from a single-purpose site into a platform managing 100+ experiences across trips, stays, weddings, and VIP services. The design approach emphasized editorial aesthetics inspired by high-end fashion, implemented through a modular WordPress system with 50+ flexible components. Technical implementation included ACF Flexible Content for content management, GSAP and TaxiJS for animations and transitions, and a custom WebGL/Three.js petal rain effect for the weddings section. The architecture solved complex UX challenges through smart filtering, modal-based navigation, and content correlation across multiple service categories while maintaining visual consistency and scalability.
Codrops·34wInteractive Video Projection Mapping with Three.js
A comprehensive guide to creating interactive video projection mapping effects in the browser using Three.js. The tutorial covers building 3D grids of cubes, applying video textures with custom UV mapping, using mask images to control cube visibility, and implementing smooth transitions between multiple video projections. Includes practical code examples for creating dynamic visual effects that simulate real-world projection mapping on digital surfaces.
Codrops·17wBuilding a Nostalgic 8-bit Universe with Modern Tech: A Vibe Coding Journey
A developer rebuilt their portfolio with an 8-bit retro aesthetic using a 95% AI-driven workflow governed by strict design constraints. The project implements custom pixel mask transitions using Bayer dithering, a singleton PixelationManager for Canvas optimization, and adaptive WebGL quality scaling to maintain 60 FPS. Key techniques include a .cursorrules "Design Constitution" that prevents AI from hardcoding values, atomic component development in Storybook, GSAP ScrollTrigger orchestration, and performance optimizations like offscreen canvas rendering and intersection observers. The approach demonstrates how to maintain design integrity and code quality while leveraging AI for rapid development.
Codrops·33w7 Must-Know GSAP Animation Tips for Creative Developers
Seven practical GSAP animation techniques including SplitText masking for efficient DOM manipulation, stagger direction control for varied animation flows, array value wrapping for creative effects, random string functions for dynamic animations, repeatRefresh for varying repeated animations, timeScale tweening for smooth playback control, and GSDevTools markers for debugging complex sequences.
Codrops·1yWebGPU 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.
Codrops·37wDesigner Spotlight: Julie Marting
Julie Marting is a Paris-based interactive designer at Hervé Studio who specializes in creating immersive digital experiences using 3D design and WebGL. Her portfolio includes projects for major brands like LVMH, Cartier, and Lacoste, focusing on playful interactions and emotional user engagement. She emphasizes the importance of meaningful design that transports users beyond the ordinary, using tools like Figma and Cinema 4D while prioritizing communication between designers and developers.
Codrops·23wBlood Sugar Battler: Building a Real Game as a Designer using AI
A designer shares their three-month journey building Blood Sugar Battler, a diabetes education game, using AI tools like Lovable.dev to handle coding while maintaining creative control. The article details the complete process: designing pixel art in Aseprite, implementing game mechanics (combo systems, power-ups, blood sugar tracking), solving mobile browser audio challenges, and optimizing performance with sprite sheets. Key lessons include the importance of clear AI prompts, GitHub integration from the start, mobile viewport handling, and understanding that AI translates intent into code but cannot make creative decisions or replace critical thinking.
Codrops·22wWindsurf x Metalab: Building a New Brand for the Future of AI Coding
Metalab partnered with Windsurf (formerly Codieum) to create a distinctive brand identity for their AI-powered developer tool. The design system, inspired by wind and waves to represent "limitless flow," features fluid gradients, bold typography, and dynamic motion elements. The brand strategy deliberately avoided the safe, technical aesthetic common in AI tools, instead opting for an expressive, vibrant approach. The comprehensive system spans marketing materials, product UI, and community assets, built around a wave motif that symbolizes the seamless developer experience. Shortly after the rebrand launch, Windsurf was acquired by Google for $2.4 billion, demonstrating the impact of aligned brand and product strategy.
Codrops·1yImplementing a Dissolve Effect with Shaders and Particles in Three.js
Learn how to create a dynamic dissolve effect using Three.js shaders and particles. This tutorial covers setting up the environment and lighting, crafting the dissolve effect with Perlin noise, creating a particle system, and applying the Unreal Bloom effect to make the edges and particles glow. Each step is detailed with code snippets and linked to specific commits for easy reference.