Elevate your website's design with the Animated Dot Grid background. This premium WebGL component creates a mesmerizing, interactive aesthetic by rendering a precise grid of dots that react to three floating, invisible color blobs. As the blobs drift across the canvas, the underlying dots smoothly scale up and transition into vibrant colors, creating a dynamic neon gradient effect.
Engineered for top-tier performance, it is built with raw GLSL shaders and includes a built-in Intersection Observer. This smart visibility sensor automatically pauses the animation when the component is scrolled out of view, saving your users' CPU, GPU, and battery life. Perfect for modern SaaS, Web3, and creative agency landing pages looking for a high-tech touch.
Functions (Key Features):
⚡ WebGL Performance: Raw GLSL shader rendering ensures silky smooth 60fps animations without bloating your site.
🛑 Smart Visibility Sensor: Automatically pauses rendering when off-screen to conserve battery and system resources.
🌊 Dynamic Dot Reaction: Dots organically grow in size and blend into new colors as the invisible floating blobs pass over them.
📱 Responsive Auto-Scaling: Automatically adjusts dot size, spacing, and blob radius for perfect viewing on mobile and tablet devices.
🎨 Full Color Control: Granular control over the background, base dots, and the 3 distinct floating blob colors.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Sizing: Set the container's Width and Height to "Fill" (100%) to use it as a full-bleed background section. Ensure it sits behind your text and main content.
Colors: Define your Background, Base Dot Color, and the three Blob Colors to match your brand identity.
Grid Settings: Adjust the Dot Size and Dot Spacing to make the grid look denser or looser.
Animation: Tweak the Animation Speed, Blob Size, and Color Intensity to dial in the perfect dynamic gradient effect.
Alpheratz
