Create a breathtaking, cinematic journey through your website with the Scroll Dot Gradient background. This high-performance WebGL component renders a precise grid of dots that organically scale and shift in color as invisible floating blobs drift over them.
What sets this component apart is its Scroll-Driven Palettes. You can define an array of distinct color schemes, and as the user scrolls down your page, the entire aesthetic—the background, the base dots, and the glowing blobs—smoothly interpolates to the next palette. Built with raw GLSL shaders, it guarantees 60fps performance and includes a smart visibility sensor that pauses the GPU load when the component scrolls out of view, ensuring your site remains lightning fast.
Functions (Key Features):
📜 Scroll-Linked Colors: Seamlessly crossfades between multiple custom color palettes based on the user's scroll depth.
🌊 Dynamic Dot Interaction: Dots organically grow and blend colors as invisible floating blobs pass over them.
⚡ WebGL Efficiency: Raw GLSL shader rendering ensures perfectly smooth, high-fidelity animations.
🛑 Smart Visibility Sensor: Automatically pauses rendering when off-screen to save CPU/GPU and battery life.
📱 Responsive Auto-Scaling: Intelligently adjusts dot sizing and blob radiuses to look perfect on mobile devices.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Sizing & Position: Set the container's Width to "Fill" and Height to "100vh". Ensure its Position is set to Fixed so it stays behind your scrolling content.
Color Palettes: In the properties, edit the Color Palettes array. Add a new palette for each major section of your page.
Scroll Threshold: Adjust the Scroll Distance (e.g., 100 vh) to dictate how far the user must scroll to trigger the next color palette transition.
Grid & Animation: Fine-tune the Dot Size, Dot Spacing, and Animation Speed to achieve your desired futuristic look.
Alpheratz
