Light Rays
Dynamic light rays with customizable origin, colors, and mouse interaction.
Bynana UI
Welcome to the future of design
Usage
import LightRays from './LightRays';
<div style={{ width: '100%', height: '600px', position: 'relative' }}>
<LightRays
raysOrigin="top-center"
raysColor="#00ffff"
raysSpeed={1.5}
lightSpread={0.8}
rayLength={1.2}
followMouse={true}
mouseInfluence={0.1}
noiseAmount={0.1}
distortion={0.05}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| raysOrigin | RaysOrigin | "top-center" | Origin point of rays |
| raysColor | string | "#ffffff" | Color of the rays |
| raysSpeed | number | 1 | Animation speed |
| lightSpread | number | 1 | Spread of light |
| rayLength | number | 2 | Length of rays |
| followMouse | boolean | true | Follow mouse movement |
| mouseInfluence | number | 0.1 | Mouse influence strength |
| noiseAmount | number | 0.0 | Noise amount |
| distortion | number | 0.0 | Distortion amount |