Card 3D

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

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

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

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

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

<motion-card-3d
  image="/path/to/image.jpg"
  width="3.2"
  height="2"
  depth="0.08"
  radius="0.15"
  class="w-full h-[400px]"
/>

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

export default function Page() {
  return (
    <motion-card-3d
      image="/path/to/image.jpg"
      width={3.2}
      height={2}
      depth={0.08}
      radius={0.15}
      className="w-full h-[400px]"
    />
  );
}

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

<template>
  <motion-card-3d
    image="/path/to/image.jpg"
    :width="3.2"
    :height="2"
    :depth="0.08"
    :radius="0.15"
    class="w-full h-[400px]"
  />
</template>

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

<motion-card-3d
  image="/path/to/image.jpg"
  width={3.2}
  height={2}
  depth={0.08}
  radius={0.15}
  class="w-full h-[400px]"
/>

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

<motion-card-3d
  image="/path/to/image.jpg"
  width="3.2"
  height="2"
  depth="0.08"
  radius="0.15"
  class="w-full h-[400px]"
/>