Canvas

God Rays

High-performance procedural god rays (crepuscular rays) effect with customizable colors, pulsating intensity, and distortion.


Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add god-rays

Import the component

Import the component into your Svelte file:
import { GodRays } from "$lib/motion-core";
import { GodRays } from "$lib/motion-core";

Usage

Props

0.350
1.000
1.000
1.000
<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}
/>

Props

GodRays

PropTypeDefault
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 ""