Elevate your website's aesthetics with the Fluid Scroll Mesh. This high-performance WebGL shader generates a complex, organic mesh gradient that lives in the background of your page. Unlike standard CSS gradients, this component uses simplex noise mathematics to create mesmerizing liquid distortions and fluid motion directly on the GPU.
The standout feature is its scroll-linked color stages. As the user scrolls down the page, the shader smoothly interpolates between your custom 5-color palettes, creating a dynamic visual journey. It also includes a smart CSS fallback for the Framer editor to ensure your canvas never lags while designing. It is the perfect atmospheric backdrop for premium SaaS landing pages, Web3 projects, and creative portfolios.
Functions (Key Features):
📜 Scroll-Driven Colors: Smoothly morphs between endless 5-color palettes based on the user's scroll depth.
⚡ WebGL Performance: Renders complex fluid mathematics (Simplex noise) at buttery-smooth 60fps.
💧 Liquid Distortion: Precise controls for Warp (UV complexity) and Blob Size (noise density) for organic, liquid-like movement.
🛠️ Editor Safe: Automatically uses a lightweight CSS radial-gradient fallback while in the Framer canvas to keep editing fast.
🔄 Infinite Looping: Option to loop the last color stage back to the first for infinite scrolling pages.
How to Use:
Insert: Place the Fluid Scroll Mesh component as the bottom layer of your page. Set it to Position: Fixed with Width: Fill and Height: 100vh.
Color Stages: In the properties panel, add new Color Stages. Each stage requires 5 colors (Blob 1-4 and Base).
Scroll Trigger: Set the Change Every value (in vh). If set to 100, the gradient will fully transition to the next palette every time the user scrolls down one full screen height.
Physics: Tweak Speed, Warp, and Blob Size. Higher warp creates a turbulent liquid effect, while lower warp creates a soft, aurora-like sky.
Loop: Toggle Loop Colors on if your page is very long and you want the palettes to repeat.
Alpheratz
