Pixelated Image

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

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

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

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

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

<motion-pixelated-image
  image="https://picsum.photos/seed/pixelated/800/600"
  initial-grid-size="6"
  step-duration="0.15"
></motion-pixelated-image>

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

export default function Page() {
  return (
    <motion-pixelated-image
      image="https://picsum.photos/seed/pixelated/800/600"
      initial-grid-size="6"
      step-duration="0.15"
    />
  );
}

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

<template>
  <motion-pixelated-image
    image="https://picsum.photos/seed/pixelated/800/600"
    initial-grid-size="6"
    step-duration="0.15"
  />
</template>

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

<motion-pixelated-image
  image="https://picsum.photos/seed/pixelated/800/600"
  initial-grid-size="6"
  step-duration="0.15"
/>

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

<motion-pixelated-image
  image="https://picsum.photos/seed/pixelated/800/600"
  initial-grid-size="6"
  step-duration="0.15"
></motion-pixelated-image>