Canvas
High-performance procedural god rays (crepuscular rays) effect with customizable colors, pulsating intensity, and distortion.
npx @motion-core/cli add god-raysimport { GodRays } from "$lib/motion-core";import { GodRays } from "$lib/motion-core";<script lang="ts">
import { GodRays } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof GodRays>>;
let {
color = "#FFFFFF",
intensity = 0.35,
speed = 1,
lightSpread = 1,
rayLength = 1,
pulsating = false,
}: Props = $props();
</script>
<GodRays
class="h-full min-h-96 w-full"
{color}
{intensity}
{speed}
{lightSpread}
{rayLength}
{pulsating}
/>
| Prop | Type | Default |
|---|---|---|
color | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#FFFFFF" |
backgroundColor | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#17181A" |
anchorX | number | 0.5 |
anchorY | number | 1.2 |
directionX | number | 0.0 |
directionY | number | -1.0 |
speed | number | 1.0 |
lightSpread | number | 1.0 |
rayLength | number | 1.0 |
pulsating | boolean | false |
fadeDistance | number | 1.0 |
saturation | number | 1.0 |
noiseAmount | number | 0.0 |
distortion | number | 0.0 |
intensity | number | 1.0 |
class | string | "" |