Dithered Image

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

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

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

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

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

<motion-dithered-image
  image="/path/to/image.jpg"
  dither-map="bayer4x4"
  pixel-size="1"
  color="#ff6900"
  background-color="#17181A"
  threshold="0.0"
  class="w-full h-[400px]"
/>

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

export default function Page() {
  return (
    <motion-dithered-image
      image="/path/to/image.jpg"
      ditherMap="bayer4x4"
      pixelSize={1}
      color="#ff6900"
      backgroundColor="#17181A"
      threshold={0.0}
      className="w-full h-[400px]"
    />
  );
}

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

<template>
  <motion-dithered-image
    image="/path/to/image.jpg"
    dither-map="bayer4x4"
    :pixel-size="1"
    color="#ff6900"
    background-color="#17181A"
    :threshold="0.0"
    class="w-full h-[400px]"
  />
</template>

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

<motion-dithered-image
  image="/path/to/image.jpg"
  ditherMap="bayer4x4"
  pixelSize={1}
  color="#ff6900"
  backgroundColor="#17181A"
  threshold={0.0}
  class="w-full h-[400px]"
/>

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

<motion-dithered-image
  image="/path/to/image.jpg"
  dither-map="bayer4x4"
  pixel-size="1"
  color="#ff6900"
  background-color="#17181A"
  threshold="0.0"
  class="w-full h-[400px]"
/>