canvas

Glitter Cloth

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

@threlte/core three

Installation

Install the component

Run the following command to install the component and its dependencies:

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

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

<GlitterCloth
	class="h-full min-h-96 w-full"
	vignettePower={0.5}
	vignetteStrength={50}
/>

Props

GlitterCloth

Prop	Type	Default
`color`	`THREE.ColorRepresentation`	`"#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`	`""`