Fake 3D Image

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

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

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

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

---
import "@/components/motion-kit/fake-3d-image-element.ts";
---

<motion-fake-3d-image
  color-src="/path/to/image.jpg"
  depth-src="/path/to/depth-map.jpg"
  x-threshold="8"
  y-threshold="8"
  sensitivity="0.25"
  class="w-full h-[400px]"
/>

import "@/components/motion-kit/fake-3d-image-element.ts";

export default function Page() {
  return (
    <motion-fake-3d-image
      colorSrc="/path/to/image.jpg"
      depthSrc="/path/to/depth-map.jpg"
      xThreshold={8}
      yThreshold={8}
      sensitivity={0.25}
      className="w-full h-[400px]"
    />
  );
}

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

<template>
  <motion-fake-3d-image
    color-src="/path/to/image.jpg"
    depth-src="/path/to/depth-map.jpg"
    :x-threshold="8"
    :y-threshold="8"
    :sensitivity="0.25"
    class="w-full h-[400px]"
  />
</template>

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

<motion-fake-3d-image
  colorSrc="/path/to/image.jpg"
  depthSrc="/path/to/depth-map.jpg"
  xThreshold={8}
  yThreshold={8}
  sensitivity={0.25}
  class="w-full h-[400px]"
/>

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

<motion-fake-3d-image
  color-src="/path/to/image.jpg"
  depth-src="/path/to/depth-map.jpg"
  x-threshold="8"
  y-threshold="8"
  sensitivity="0.25"
  class="w-full h-[400px]"
/>