---
title: "Fluid Mesh Gradient  — Framer component · Best of Framer"
description: "$20.00 · Framer component · by SOSOTAR · Backgrounds. Morphs with cursor move"
canonical: "https://framer.elliotli.dev/component/cursor-mesh-gradient"
---

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

# Fluid Mesh Gradient

Morphs with cursor move

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

![Fluid Mesh Gradient  preview image 1](https://framer.elliotli.dev/og/component/cursor-mesh-gradient/4b520e174f0033a9/1600x1200.jpg)

## Summary

Morphs with cursor move

## Description

_Move your cursor around the gradient to see it come alive._

⏹ ⏹ Great for ⏹ ⏹

-   **Interactive hero backdrop** behind headlines/CTAs
    

-   **Ambient page background** for marketing sites and portfolios
    

-   **High-touch “moment”** for product launches, events, or brand storytelling sections
    
-   Section transitions (paired with gradients/overlays) for depth and motion without video
    

⏹ ⏹ Features ⏹ ⏹

-   **Hero & background ready**: Designed to sit behind content and elevate landing pages, product heroes, and section dividers with dynamic ambience.
    

-   **Cursor-reactive motion**: Smooth, “liquid” response that feels premium.
    

-   **Autonomous drift + morph**: Movement continues naturally with no cursor input, keeping the page feeling alive.
    

-   **High-quality WebGL shader**: Single pass, procedural rendering, no image assets and no heavy DOM layers.
    

-   **Performance-minded**: GPU-driven animation with adaptive rendering behavior to maintain smooth playback and avoid visible jitter.
    

-   **Easy art direction**: Preset palettes plus custom colors (void + band stops) for quick brand matching.
    

-   **Control over feel**: Tune scale, distortion, grain, bloom, and lag to go from subtle luxury to bold kinetic energy.
    

-   **Robust in real pages**: Handles resize/visibility changes and maintains stable output in preview and runtime environments.
    

Made with ♡ by SOSOTAR. If you have any question, email [play@sosotar.com](mailto:play@sosotar.com)

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

-   All · #1143

## Details

- **Author**: SOSOTAR
- **Price**: $20.00
- **Published**: 2026-02-16
- **Updated**: 2026-08-12
- **Added**: 2026-02-03
- **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