Infinite Gallery

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

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

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

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

---
import "@/components/motion-kit/infinite-gallery-element.ts";
---

<motion-infinite-gallery
  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
  speed="1"
  visible-count="8"
  class="h-[600px] w-full"
></motion-infinite-gallery>

import "@/components/motion-kit/infinite-gallery-element.ts";

export default function Page() {
  return (
    <motion-infinite-gallery
      images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
      speed="1"
      visible-count="8"
      class="h-[600px] w-full"
    />
  );
}

<script setup>
import "`@/components/motion-kit/infinite-gallery-element.ts`";
</script>

<template>
  <motion-infinite-gallery
    :images='JSON.stringify([{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}])'
    speed="1"
    visible-count="8"
    class="h-[600px] w-full"
  />
</template>

<script>
  import "@/components/motion-kit/infinite-gallery-element.ts";
</script>

<motion-infinite-gallery
  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
  speed="1"
  visible-count="8"
  class="h-[600px] w-full"
/>

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

<motion-infinite-gallery
  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
  speed="1"
  visible-count="8"
  class="h-[600px] w-full"
></motion-infinite-gallery>