Canvas
Atmospheric scattering (Rayleigh & Mie) based halo effect with dynamic camera rotation and sun light simulation.
npx @motion-core/cli add halonpx @motion-core/cli add halopnpm dlx @motion-core/cli add halopnpm dlx @motion-core/cli add halobunx @motion-core/cli add halobunx @motion-core/cli add haloyarn dlx @motion-core/cli add haloyarn dlx @motion-core/cli add haloimport { Halo } from "$lib/motion-core";import { Halo } from "$lib/motion-core";<script lang="ts">
import { Halo } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof Halo>>;
let {
scale = 1,
offsetX = 0,
offsetY = 0,
rotation = 0,
rotationSpeed = 0.5,
backgroundColor = "#17181A",
cameraDistance = 3,
intensity = 2.2,
}: Props = $props();
</script>
<Halo
class="h-full min-h-96 w-full"
{scale}
{offsetX}
{offsetY}
{rotation}
{rotationSpeed}
{backgroundColor}
{cameraDistance}
{intensity}
/>
<script lang="ts">
import { Halo } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof Halo>>;
let {
scale = 1,
offsetX = 0,
offsetY = 0,
rotation = 0,
rotationSpeed = 0.5,
backgroundColor = "#17181A",
cameraDistance = 3,
intensity = 2.2,
}: Props = $props();
</script>
<Halo
class="h-full min-h-96 w-full"
{scale}
{offsetX}
{offsetY}
{rotation}
{rotationSpeed}
{backgroundColor}
{cameraDistance}
{intensity}
/>
| Prop | Type | Default |
|---|---|---|
scale | number | 1 |
offsetX | number | 0 |
offsetY | number | 0 |
rotation | number | 0 |
rotationSpeed | number | 0.5 |
backgroundColor | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#17181A" |
cameraDistance | number | 3.0 |
sunX | number | 0.0 |
sunY | number | 0.0 |
sunZ | number | 1.0 |
intensity | number | 1.0 |
class | string | "" |