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.
Alpheratz
