Motion Core

Canvas

Halo

Atmospheric scattering (Rayleigh & Mie) based halo effect with dynamic camera rotation and sun light simulation.

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

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

<Halo
	class="h-full min-h-96 w-full"
	backgroundColor="#191A1D"
	intensity={2.2}
/>

Props

Halo

PropTypeDefault
rotationSpeed
number 0.5
backgroundColor
"THREE.ColorRepresentation" "#000000"
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 ""