Shader 3D Background

Description

This component renders a high-performance fullscreen WebGL shader animation inside Framer using a fully custom GLSL fragment shader. It supports reactive controls, viewport-based pausing, and dynamic uniforms such as time, iterations, speed, and scale.

Designed for Framer projects that require GPU-accelerated visual effects, this component draws a fullscreen quad and runs a radial, multi-iteration shader producing a vibrant ray-based energy field effect.

The system uses requestAnimationFrame, device-pixel-ratio scaling, WebGL blending, resize observers, and cleanup logic to ensure smooth performance and memory-safe teardown inside the Framer environment.

Key Features

• ✔️ Fully programmable GLSL fragment shader

• ✔️ Dynamic uniforms: time, resolution, iterations, scale, speed

• ✔️ Adjustable controls via Framer Property Controls

• ✔️ Automatically pauses when off-screen (optional)

• ✔️ Matches parent container size at all times via ResizeObserver

• ✔️ Proper WebGL context cleanup and resource disposal

• ✔️ Optional background layer for blending with other elements

• ✔️ Render-still fallback for Static Renderer Mode

Use Cases

• Animated hero backgrounds

• Reactive visualizers in landing pages

• Abstract UI effects for apps or websites

• Ambient animated themes

• Shader-driven design systems

This component provides a plug-and-play WebGL animation pipeline for Framer — ideal for creators who want custom shader visuals without relying on heavy libraries or external engines.