Light Rayss
Light Rays simulates volumetric light beams originating from any edge or corner of the canvas. The rays animate smoothly over time, fade naturally with distance, and can subtly follow cursor movement to create a living, responsive backdrop.
Light Rays is a shader-powered WebGL component that renders soft, cinematic beams of light spilling across your layout. Designed for modern hero sections and immersive backgrounds, it creates depth, atmosphere, and motion without distracting from content.
Built with high-performance GPU shaders, Light Rays supports directional control, organic distortion, optional pulsation, and cursor-based interaction. Whether you’re aiming for a calm glow or dramatic god-ray energy, this component adapts effortlessly to your design.
Key Features
Real-time shader-based light rays
Multiple ray origin positions (edges & corners)
Smooth animated motion with adjustable speed
Organic distortion and noise for realism
Optional pulsating light effect
Cursor-following interaction
Adjustable saturation and fade distance
Transparent background support
Performance-optimized and Framer-ready
