Falling Rays
Rays falling from top like rain of light
falling-rays-tw
Customize
Tweak the props liveColors
#5227FF#FF9FFCRay Settings
15
0.004
Pulse
0.1
0.01
0.3
Effects
0.5
0.1
Props
| Name | Type | Default | Description |
|---|---|---|---|
color1 | string | "#1a00ff" | Primary ray color (hex). |
color2 | string | "#ff0080" | Secondary/Edge ray color (hex). |
rayCount | number | 37 | Number of falling rays. |
rayWidth | number | 0.005 | Base width of the rays. |
pulseSpeed | number | 0.4 | Speed of the falling light pulses. |
pulseWidth | number | 0.03 | Length of the light pulses. |
trailLength | number | 0.5 | Length of the trailing fade effect. |
motionBlur | number | 0.3 | Intensity of the motion blur smearing. |
bgGlow | number | 1.2 | Intensity of the background ambient glow. |
className | string | "" | Additional CSS classes for the container. |
style | React.CSSProperties | {} | Inline styles for the container. |
color1stringPrimary ray color (hex).
Default:
"#1a00ff"color2stringSecondary/Edge ray color (hex).
Default:
"#ff0080"rayCountnumberNumber of falling rays.
Default:
37rayWidthnumberBase width of the rays.
Default:
0.005pulseSpeednumberSpeed of the falling light pulses.
Default:
0.4pulseWidthnumberLength of the light pulses.
Default:
0.03trailLengthnumberLength of the trailing fade effect.
Default:
0.5motionBlurnumberIntensity of the motion blur smearing.
Default:
0.3bgGlownumberIntensity of the background ambient glow.
Default:
1.2classNamestringAdditional CSS classes for the container.
Default:
""styleReact.CSSPropertiesInline styles for the container.
Default:
{}