Motion Core

Canvas

Glitter Cloth

Animated silk-like cloth shader with fine glitter noise and subtle vignette depth shading.

ogl

Installation

Install the component

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

Import the component

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

Usage

Props

1.000
1.000
0.020
4.000
50
0.500
<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}
/>

<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}
/>

Props

GlitterCloth

PropTypeDefault
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 ""