Light Rays Shader: Free Backgrounds Component by Mohd Mehraj

Light Rays is a real time WebGL shader that creates cinematic beams of light with depth, motion, and atmosphere. Fully customizable and interactive, it adds a dramatic and immersive visual layer to any layout.

Light Rays is a high performance WebGL component that generates dynamic volumetric light beams in real time. Designed for Framer, it transforms static backgrounds into atmospheric lighting effects with smooth motion and depth.

The shader simulates directional light rays emitted from a configurable anchor point, allowing you to control where the light originates and how it flows across the screen. With adjustable direction, spread, and length, you can create anything from subtle ambient glow to strong cinematic beams.

Advanced controls such as pulsating animation, noise, distortion, and saturation give you full creative freedom over the visual style. These parameters allow the light to feel organic, flickering, or perfectly smooth depending on your design needs.

The component is optimized for performance and responsiveness, ensuring smooth rendering across devices. A fallback gradient is also included for static rendering environments, maintaining visual consistency even when WebGL is not active.

Light Rays is perfect for adding depth, focus, and atmosphere to modern web interfaces.