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