Canvas
Procedural specular light bands with hue-shifting color palettes and dynamic lens distortion.
npx @motion-core/cli add specular-bandimport { SpecularBand } from "$lib/motion-core";import { SpecularBand } from "$lib/motion-core";<script lang="ts">
import { SpecularBand } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof SpecularBand>>;
let {
color = "#FF6900",
backgroundColor = "#17181A",
speed = 0.8,
distortion = 0.2,
hueShift = 30,
intensity = 1,
}: Props = $props();
</script>
<SpecularBand
class="h-full min-h-96 w-full"
{color}
{backgroundColor}
{speed}
{distortion}
{hueShift}
{intensity}
/>
| Prop | Type | Default |
|---|---|---|
color | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#FF6900" |
backgroundColor | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#17181A" |
speed | number | 1.0 |
distortion | number | 0.2 |
hueShift | number | 30.0 |
intensity | number | 1.0 |
class | string | "" |