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.
WebGL powered dynamic light rays
Configurable light origin and direction
Adjustable spread, length, and intensity
Optional pulsating animation effect
Noise and distortion for organic motion
Saturation control for color styling
Smooth real time animation
Responsive across screen sizes
Fallback gradient for static rendering
Hero section backgrounds
Landing pages with cinematic visuals
Creative agency websites
Portfolio presentations
Product highlight sections
Experimental UI layouts
Designers creating atmospheric visuals
Agencies building modern web experiences
Brands wanting cinematic backgrounds
Portfolios with motion-driven design
Websites focused on depth and lighting
Adds cinematic lighting without heavy assets
Enhances depth and visual focus
Fully customizable for different styles
Lightweight and performance optimised
Elevates overall design quality instantly