Glass Pane

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

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

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

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

---
import "@/components/motion-kit/glass-pane-element.ts";
---

<motion-glass-pane
  image="/images/your-image.jpg"
  rotation={0}
  refraction={1}
  chromatic-aberration={1}
  panel-width={0.82}
  wave-frequency={0.0}
  wave-amplitude={0.0}
  speed={0.65}
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/glass-pane-element.ts";

export default function Page() {
  return (
    <motion-glass-pane
      image="/images/your-image.jpg"
      rotation={0}
      refraction={1}
      chromatic-aberration={1}
      panel-width={0.82}
      wave-frequency={0.0}
      wave-amplitude={0.0}
      speed={0.65}
      className="w-full h-[500px]"
    />
  );
}

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

<template>
  <motion-glass-pane
    image="/images/your-image.jpg"
    :rotation="0"
    :refraction="1"
    :chromatic-aberration="1"
    :panel-width="0.82"
    :wave-frequency="0.0"
    :wave-amplitude="0.0"
    :speed="0.65"
    class="w-full h-[500px]"
  />
</template>

<script>
  import "@/components/motion-kit/glass-pane-element.ts";
</script>

<motion-glass-pane
  image="/images/your-image.jpg"
  rotation={0}
  refraction={1}
  chromatic-aberration={1}
  panel-width={0.82}
  wave-frequency={0.0}
  wave-amplitude={0.0}
  speed={0.65}
  class="w-full h-[500px]"
/>

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

<motion-glass-pane
  image="/images/your-image.jpg"
  rotation="0"
  refraction="1"
  chromatic-aberration="1"
  panel-width="0.82"
  wave-frequency="0.0"
  wave-amplitude="0.0"
  speed="0.65"
  class="w-full h-[500px]"
/>