Light Rays Shader
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, giving you full control over 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 like pulsating animation, noise, distortion, and saturation allow you to shape the visual style precisely. Whether you want organic flickering light or clean, smooth beams, the flexibility is built in.
The component is optimized for performance and responsiveness, ensuring smooth rendering across devices. A fallback gradient is included for static environments, maintaining visual consistency even when WebGL is unavailable.
Light Rays is perfect for adding depth, focus, and atmosphere to modern web interfaces.
Key Features
- 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
Where to Use
- Hero section backgrounds
- Landing pages with cinematic visuals
- Creative agency websites
- Portfolio presentations
- Product highlight sections
- Experimental UI layouts
Best For
- Designers creating atmospheric visuals
- Agencies building modern web experiences
- Brands wanting cinematic backgrounds
- Portfolios with motion driven design
- Websites focused on depth and lighting
Why This Component Is Valuable
- Adds cinematic lighting without heavy assets
- Enhances depth and visual focus
- Fully customizable for different styles
- Lightweight and performance optimized
- Instantly elevates overall design quality
Refund Policy:
Due to the digital nature of my products, all sales are final, and refunds will not be issued. Please review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.
š ļø Support
If you have any issues, feel free to reach out:
š§ Email: mehrajdesign@gmail.com
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.