Canvas
God Rays
High-performance procedural god rays effect with customizable colors, pulsating intensity, and distortion.
- lit
- ogl
Preview
Procedural crepuscular rays with color, spread, distortion, and pulsation controls.
Attributes
Installation
pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/god-rays.jsonUsage
---
import "@/components/motion-kit/god-rays-element.ts";
---
<motion-god-rays
color="#FFFFFF"
background-color="#17181A"
anchor-x={0.5}
anchor-y={1.2}
direction-x={0}
direction-y={-1}
speed={1}
light-spread={1}
ray-length={1}
pulsating={false}
fade-distance={1}
saturation={1}
noise-amount={0}
distortion={0}
intensity={1}
class="w-full h-[500px]"
/>API Reference
| Attribute | Type | Default |
|---|---|---|
color Color of the god rays light source. | string | "#FFFFFF" |
background-color Background color of the canvas. | string | "#17181A" |
anchor-x X position of the light source (0-1 range). | number | 0.5 |
anchor-y Y position of the light source (can be outside 0-1 range). | number | 1.2 |
direction-x X component of the ray direction vector. | number | 0 |
direction-y Y component of the ray direction vector (downward). | number | -1 |
speed Animation speed of the ray shimmer. | number | 1 |
light-spread How much the light spreads from the source. | number | 1 |
ray-length Maximum length of the rays. | number | 1 |
pulsating Whether the rays pulsate over time. | boolean | false |
fade-distance Distance at which rays fade out. | number | 1 |
saturation Color saturation of the rays (1 = full, 0 = grayscale). | number | 1 |
noise-amount Amount of noise variation in the rays. | number | 0 |
distortion Strength of the sine-wave distortion. | number | 0 |
intensity Overall brightness and intensity of the rays. | number | 1 |