Skip to content

component

Ambient Shaders

By Muhmad Haj Hmdo

Details

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 More Components: sbarah.com Thanks >

Introduction

Five interactive WebGL shader background

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750180838/148/228/309/79/15
  • All · #6967