Motion Core

Canvas

Specular Band

Procedural specular light bands with hue-shifting color palettes and dynamic lens distortion.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add specular-band

Import the component

Import the component into your Svelte file: 
import { SpecularBand } from "$lib/motion-core";
import { SpecularBand } from "$lib/motion-core";

Usage

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

<SpecularBand
	class="h-full min-h-96 w-full"
	speed={0.8}
	backgroundColor="#191A1D"
/>

Props

SpecularBand

PropTypeDefault
color
"THREE.ColorRepresentation" "#FF6900"
backgroundColor
"THREE.ColorRepresentation" "#000000"
speed
number 1.0
distortion
number 0.2
hueShift
number 30.0
intensity
number 1.0
class
string ""