Scroll Mesh Gradient

Create an immersive, fluid browsing experience with the Scroll Mesh Gradient.

Create an immersive, fluid browsing experience with the Scroll Mesh Gradient . This advanced Framer component uses Framer Motion to tie beautiful, artifact-free background color transitions directly to the user's scroll depth. It features three heavily blurred blobs that float, rotate, and pulse organically in the background. By defining multiple Color Stages , the background and blob colors will morph seamlessly as users scroll past your defined thresholds. Optimized using pure CSS and framer-motion, it completely eliminates WebGL clipping lines, making it the perfect atmospheric backdrop for modern landing pages, storytelling sites, or creative portfolios. Functions (Key Features): 📜 Scroll-Linked Colors: Transitions smoothly between defined color palettes based on the user's scroll position. 💧 Organic Animation: Three blurred blobs float, rotate, and pulse continuously to make the background feel alive. ✨ Artifact-Free Blur: Uses native DOM rendering to ensure a perfectly smooth gradient without harsh WebGL canvas edges. 🎨 Multi-Stage Palettes: Define an unlimited number of color "Stages" (Base Color + 3 Blob Colors). 📏 Dynamic Sizing: Enable Animate Size for blobs that grow and shrink, or set a fixed Blob Size for consistency. How to Use: Insert: Place the Scroll Mesh Gradient component as the background of your webpage (set Width/Height to Fill or 100vh with position: fixed). Color Stages: In the properties panel, add a new stage for each section of your page. Set the base background color and 3 blob colors for each stage. Scroll Threshold: Adjust the Scroll Threshold (vh) . If set to 100, the colors will transition to the next stage every time the user scrolls down one full screen.

Scroll-driven soft mesh gradient.