Installation
Install the component
Run the following command to install the component and its dependencies:
npx @motion-core/cli add god-raysnpx @motion-core/cli add god-rayspnpm dlx @motion-core/cli add god-rayspnpm dlx @motion-core/cli add god-raysbunx @motion-core/cli add god-raysbunx @motion-core/cli add god-raysyarn dlx @motion-core/cli add god-raysyarn dlx @motion-core/cli add god-raysImport 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}
/>
<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
| 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 | "" |