Glitter Cloth

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/glitter-cloth.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/glitter-cloth.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/glitter-cloth.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/glitter-cloth.json

---
import "@/components/motion-kit/glitter-cloth-element.ts";
---

<motion-glitter-cloth
  color="#ff6900"
  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]"
/>

import "@/components/motion-kit/glitter-cloth-element.ts";

export default function Page() {
  return (
    <motion-glitter-cloth
      color="#ff6900"
      speed={1}
      brightness={1}
      blend-strength={0.02}
      noise-scale={4}
      vignette-strength={15}
      vignette-power={0.25}
      vignette-opacity={1}
      className="w-full h-[500px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/glitter-cloth-element.ts";
</script>

<template>
  <motion-glitter-cloth
    color="#ff6900"
    :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]"
  />
</template>

<script>
  import "@/components/motion-kit/glitter-cloth-element.ts";
</script>

<motion-glitter-cloth
  color="#ff6900"
  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]"
/>

<script type="module" src="/components/motion-kit/glitter-cloth-element.js"></script>

<motion-glitter-cloth
  color="#ff6900"
  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]"
/>