Canvas
Animated silk-like cloth shader with fine glitter noise and subtle vignette depth shading.
npx @motion-core/cli add glitter-clothimport { GlitterCloth } from "$lib/motion-core";import { GlitterCloth } from "$lib/motion-core";<script lang="ts">
import { GlitterCloth } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof GlitterCloth>>;
let {
color = "#222326",
speed = 1,
brightness = 1,
blendStrength = 0.02,
noiseScale = 4,
vignetteStrength = 50,
vignettePower = 0.5,
}: Props = $props();
</script>
<GlitterCloth
class="h-full min-h-96 w-full"
{color}
{speed}
{brightness}
{blendStrength}
{noiseScale}
{vignetteStrength}
{vignettePower}
/>
| Prop | Type | Default |
|---|---|---|
color | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#FF6900" |
speed | number | 1.0 |
brightness | number | 1.0 |
blendStrength | number | 0.02 |
noiseScale | number | 4.0 |
vignetteStrength | number | 15.0 |
vignettePower | number | 0.25 |
vignetteOpacity | number | 1.0 |
class | string | "" |