Halo

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add halo

Import the component

Import the component into your Svelte file:

import { Halo } from "$lib/motion-core";

import { Halo } from "$lib/motion-core";

Usage

Props

Rotation Speed

0.500

Background

Camera Distance

3.000

FOV

Intensity

2.200

<script lang="ts">
	import { Halo } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof Halo>>;

	let {
		rotationSpeed = 0.5,
		backgroundColor = "#17181A",
		cameraDistance = 3,
		fov = 55,
		intensity = 2.2,
	}: Props = $props();
</script>

<Halo
	class="h-full min-h-96 w-full"
	{rotationSpeed}
	{backgroundColor}
	{cameraDistance}
	{fov}
	{intensity}
/>

Props

Prop	Type	Default
`rotationSpeed`	`number`	`0.5`
`backgroundColor`	`stringnumber[number, number, number]{ r: number; g: number; b: number }`	`"#17181A"`
`cameraDistance`	`number`	`3.0`
`fov`	`number`	`55.0`
`sunX`	`number`	`0.0`
`sunY`	`number`	`0.0`
`sunZ`	`number`	`1.0`
`intensity`	`number`	`1.0`
`class`	`string`	`""`