Fluid Image Reveal

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/fluid-image-reveal.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/fluid-image-reveal.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/fluid-image-reveal.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/fluid-image-reveal.json

---
import "@/components/motion-kit/fluid-image-reveal-element.ts";
---

<motion-fluid-image-reveal
  base-image="/images/before.jpg"
  reveal-image="/images/after.jpg"
  dissipation={0.96}
  pointer-size={0.005}
  blend-softness={0.22}
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/fluid-image-reveal-element.ts";

export default function Page() {
  return (
    <motion-fluid-image-reveal
      base-image="/images/before.jpg"
      reveal-image="/images/after.jpg"
      dissipation={0.96}
      pointer-size={0.005}
      blend-softness={0.22}
      className="w-full h-[500px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/fluid-image-reveal-element.ts";
</script>

<template>
  <motion-fluid-image-reveal
    base-image="/images/before.jpg"
    reveal-image="/images/after.jpg"
    :dissipation="0.96"
    :pointer-size="0.005"
    :blend-softness="0.22"
    class="w-full h-[500px]"
  />
</template>

<script>
  import "@/components/motion-kit/fluid-image-reveal-element.ts";
</script>

<motion-fluid-image-reveal
  base-image="/images/before.jpg"
  reveal-image="/images/after.jpg"
  dissipation={0.96}
  pointer-size={0.005}
  blend-softness={0.22}
  class="w-full h-[500px]"
/>

<script type="module" src="/components/motion-kit/fluid-image-reveal-element.js"></script>

<motion-fluid-image-reveal
  base-image="/images/before.jpg"
  reveal-image="/images/after.jpg"
  dissipation="0.96"
  pointer-size="0.005"
  blend-softness="0.22"
  class="w-full h-[500px]"
/>