Rays
Light rays effect, perfect for drawing attention
Lighten up your website
with light rays
Make your website stand out with moving light rays.
Installation
npx shadcn@latest add "https://optiqui.com/r/rays"
RaysProps
| Prop | Type | Description | Default |
|---|
| className | string | Additional classNames applied to rays container | - |
| rayColor | string | color of rays | white |
| rayWidth | string | width of ray in pixels | - |
| blurAmount | string | Blur of ray in pixels | 22px |
| castDirection | from-right | from-left | from-center | From what direction cast rays | from-left |
| animationDuration | number | Duration of animation | 5 |
| animationDelay | number | Delay of animation | 0.2 |
| staggerDelay | number | Stagger of each ray | 0.2 |
| rays | Ray[] | Custom array of rays | - |
Ray type
| Prop | Type |
|---|
| rotate | number |
| opacity | number |
| className | number |
| translateY | string |