Installation
Install the component
Run the following command to install the component and its dependencies:
npx @motion-core/cli add specular-bandnpx @motion-core/cli add specular-bandpnpm dlx @motion-core/cli add specular-bandpnpm dlx @motion-core/cli add specular-bandbunx @motion-core/cli add specular-bandbunx @motion-core/cli add specular-bandyarn dlx @motion-core/cli add specular-bandyarn dlx @motion-core/cli add specular-bandImport the component
Import the component into your Svelte file:
import { SpecularBand } from "$lib/motion-core";import { SpecularBand } from "$lib/motion-core";Usage
Props
0.800
0.200
30
1.000
<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}
/>
<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}
/>
Props
SpecularBand
| 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 | "" |