Canvas
Glitter Cloth
An OGL shader surface with animated silk folds, glitter sparkle, and vignette depth shading.
Preview
An animated shader field for silky fabric folds with glitter highlights and a subtle vignette.
Attributes
Installation
pnpm dlx motion-blocks add glitter-clothUsage
---import "@/components/motion-blocks/glitter-cloth-element.ts";--- <motion-glitter-cloth color="#6c87bc" speed={1} brightness={1} blend-strength={0.02} noise-scale={4} vignette-strength={15} vignette-power={0.25} vignette-opacity={1} class="w-full h-[500px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
color Primary color of the glitter cloth (accent and shadow colors are auto-derived). | string | "#6c87bc" |
speed Animation speed of the cloth folds and sparkle. | number | 1 |
brightness Overall brightness multiplier of the fabric. | number | 1 |
blend-strength How strongly the noise blends with the base color (vividLight mode). | number | 0.02 |
noise-scale Scale of the noise texture (lower = larger grain). | number | 4 |
vignette-strength Intensity of the vignette darkening at edges. | number | 15 |
vignette-power Power curve of the vignette falloff. | number | 0.25 |
vignette-opacity Opacity of the vignette effect (0 = disabled). | number | 1 |