Make your website unforgettable with the Fluid Scroll Shader. This premium WebGL component renders a silky-smooth, animated color flow directly on the GPU. Unlike static CSS gradients, it features organic mathematical blending and a built-in cinematic grain overlay for a highly polished, modern aesthetic.
The true power lies in its scroll-driven capabilities: define multiple color "Stages", and watch as the gradient seamlessly morphs into new palettes as the user scrolls down your landing page. It calculates transitions based on viewport height (vh), making it the perfect atmospheric backdrop for SaaS sites, creative portfolios, and long-form editorial pages.
Functions (Key Features):
📜 Scroll-Linked Colors: Seamlessly interpolates between unlimited 4-color palettes based on the user's scroll depth.
⚡ WebGL Powered: Renders complex blending math and grain effects at a buttery-smooth 60fps.
🎞️ Cinematic Grain: Built-in, customizable noise overlay for a textured, premium look.
🌊 Fluid Motion: Colors drift and blend organically with adjustable animation speed.
📏 Stage Control: Define the scroll height (in vh) for each color stage to perfectly match your page layout.
How to Use:
Insert: Place the Fluid Scroll Shader component as your page background (Set Width/Height to Fill or 100vh with Position: Fixed).
Add Stages: In the properties panel, edit the Stages. Add a new stage for each visual section of your page.
Colors: Pick 4 colors (Color 1 to Color 4) for each stage to define its unique palette.
Height (vh): Set the Height for each stage (e.g., setting it to 100 means it will take one full screen scroll to transition to the next palette).
Texture & Motion: Adjust the Speed of the organic movement and dial in the Grain intensity for a textured finish.
Alpheratz
