Image Trail

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

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

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

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

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

const images = [
  "/images/trail-1.png",
  "/images/trail-2.png",
  "/images/trail-3.png"
];

const config = {
  imageLifespan: 600,
  removalTickMs: 16,
  mouseThreshold: 40,
  minMovementForImage: 5,
  inDuration: 600,
  outDuration: 800,
  maxRotationFactor: 3,
  baseRotation: 30,
  speedSmoothingFactor: 0.25,
  minImageSize: 80,
  maxImageSize: 120,
  staggerOut: 40
};
---

<motion-image-trail
  images={images}
  config={config}
  class="w-full h-[600px]"
/>

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

const images = [
  "/images/trail-1.png",
  "/images/trail-2.png",
  "/images/trail-3.png"
];

const config = {
  imageLifespan: 600,
  removalTickMs: 16,
  mouseThreshold: 40,
  minMovementForImage: 5,
  inDuration: 600,
  outDuration: 800,
  maxRotationFactor: 3,
  baseRotation: 30,
  speedSmoothingFactor: 0.25,
  minImageSize: 80,
  maxImageSize: 120,
  staggerOut: 40
};

export default function Page() {
  return (
    <motion-image-trail
      images={images}
      config={config}
      className="w-full h-[600px]"
    />
  );
}

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

const images = [
  "/images/trail-1.png",
  "/images/trail-2.png",
  "/images/trail-3.png"
];

const config = {
  imageLifespan: 600,
  removalTickMs: 16,
  mouseThreshold: 40,
  minMovementForImage: 5,
  inDuration: 600,
  outDuration: 800,
  maxRotationFactor: 3,
  baseRotation: 30,
  speedSmoothingFactor: 0.25,
  minImageSize: 80,
  maxImageSize: 120,
  staggerOut: 40
};
</script>

<template>
  <motion-image-trail
    :images="images"
    :config="config"
    class="w-full h-[600px]"
  />
</template>

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

  const images = [
    "/images/trail-1.png",
    "/images/trail-2.png",
    "/images/trail-3.png"
  ];

  const config = {
    imageLifespan: 600,
    removalTickMs: 16,
    mouseThreshold: 40,
    minMovementForImage: 5,
    inDuration: 600,
    outDuration: 800,
    maxRotationFactor: 3,
    baseRotation: 30,
    speedSmoothingFactor: 0.25,
    minImageSize: 80,
    maxImageSize: 120,
    staggerOut: 40
  };
</script>

<motion-image-trail
  images={images}
  config={config}
  class="w-full h-[600px]"
/>

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

<motion-image-trail
  images='["/images/trail-1.png","/images/trail-2.png","/images/trail-3.png"]'
  config='{"imageLifespan":600,"removalTickMs":16,"mouseThreshold":40,"minMovementForImage":5,"inDuration":600,"outDuration":800,"maxRotationFactor":3,"baseRotation":30,"speedSmoothingFactor":0.25,"minImageSize":260,"maxImageSize":340,"staggerOut":40}'
  class="w-full h-[600px]"
/>