---
title: "Fluid Scroll Mesh — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Sirrah Space · Backgrounds. Elevate your website's aesthetics with the Fluid Scroll Mesh."
canonical: "https://framer.elliotli.dev/component/fluid-scroll-mesh"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Fluid Scroll Mesh

# Fluid Scroll Mesh

Scroll-driven fluid WebGL gradient

[View on Framer](https://framer.com/marketplace/components/fluid-scroll-mesh/?via=elliot-li)

![Fluid Scroll Mesh preview image 1](https://framer.elliotli.dev/og/component/fluid-scroll-mesh/2a0317608e5cbc5d/1600x1200.jpg)

## Summary

Elevate your website's aesthetics with the Fluid Scroll Mesh.

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8757

## Details

- **Author**: Sirrah Space
- **Price**: $7.00
- **Published**: 2026-02-27
- **Updated**: 2026-07-26
- **Added**: 2026-02-22
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background