Shader BackgroundPro

Add a living, GPU-rendered background to any hero, section or card. Pick one of 34 hand-tuned shader presets, from soft mesh gradients and aurora skies to liquid chrome, retro grids and nebula warps. Then make it yours with colors, speed, scale, intensity and grain, all from the Framer properties panel, with live updates on the canvas.

Shader Background Pro is built to be polite on real sites. It pauses when offscreen or in a background tab, caps frame rate and pixel density, respects reduced-motion settings, recovers from lost WebGL contexts and shows a static fallback where WebGL isn't available. An optional pause button keeps it accessible.

Features:

• 34 animated WebGL presets (mesh gradient, aurora, silk, liquid chrome, caustics, retro grid, lava, voronoi, holographic and more)

• Preset or custom color palettes

• Speed, scale, intensity, grain and seed controls

• Cursor Reaction toggle: let the background follow the cursor (with adjustable strength), or switch it off for a calm, static-pointer look

• Optional tap ripple, scroll parallax and logo/content overlay

• Accessible pause button that appears on hover and keyboard focus

• Respects prefers-reduced-motion (shows a still or slows down)

• Performance controls: FPS cap, DPR cap, offscreen and hidden-tab pausing

• Static poster frame on the Framer canvas and in thumbnails

• Graceful fallback when WebGL is unavailable, plus context-loss recovery

• Fills any frame size and works in every breakpoint