---
title: "Ambient Shaders — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Muhmad Hmdo · Backgrounds. Ambient Shaders brings five handcrafted WebGL backgrounds to your Framer site each one reacts to your visitors' cursor and clicks…"
canonical: "https://framer.elliotli.dev/component/ambient-shaders"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Ambient Shaders

# Ambient Shaders

Five interactive shader background

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

![Ambient Shaders preview image 1](https://framer.elliotli.dev/og/component/ambient-shaders/a7713303a25a677f/1600x1200.jpg)

## Summary

Ambient Shaders brings five handcrafted WebGL backgrounds to your Framer site each one reacts to your visitors' cursor and clicks in real time.

## Description

**Ambient Shaders brings five handcrafted WebGL backgrounds to your Framer site**

each one reacts to your visitors' cursor and clicks in real time.

Drop it on any frame as a background, hero, or full-page wallpaper. Every

parameter is exposed in the property panel: pick a shader, dial in speed,

intensity, and scale, choose a preset palette, or switch to Custom Colors

and set your own three-color gradient.

Runs at 60fps on modern devices, scales down gracefully via the Quality

control, and respects your layout — use it fixed, fluid, or inside any

container.

INCLUDED SHADERS

-   Mercury: liquid metal surface that ripples under the cursor
    
-   Plasma: warping energy field, click sends a shockwave
    
-   Cells: living voronoi tissue that leans toward the cursor
    
-   Aurora: drifting light ribbons steered by cursor wind
    
-   Warp: hyperspace tunnel that tracks the cursor
    

FEATURES

-   5 WebGL shaders, 20 curated palettes
    
-   Custom 3-color palette mode
    
-   Cursor & click interaction (toggleable)
    
-   Speed / Intensity / Scale controls
    
-   Quality slider (DPR cap) for performance tuning
    
-   Optional credit badge with link
    
-   Touch-friendly, responsive, zero dependencies
    

PERFORMANCE

_Refund Policy: All sales are final. No refunds._

**Free email support:**[framer@muhmad.me](mailto:framer@muhmad.me)

**More Components:**[sbarah.com](https://sbarah.com)

**Thanks >**

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

-   All · #7741

## Details

- **Author**: Muhmad Hmdo
- **Price**: $5.00
- **Published**: 2026-05-04
- **Updated**: 2026-10-19
- **Added**: 2026-04-17
- **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