Canvas
God Rays
High-performance procedural god rays effect with customizable colors, pulsating intensity, and distortion.
Preview
Procedural crepuscular rays with color, spread, distortion, and pulsation controls.
Attributes
Installation
pnpm dlx motion-blocks add god-raysUsage
---import "@/components/motion-blocks/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 |