Image Trail

Heroes 29

About

A cursor-following trail of images that fade and fly away, used as an interactive hero or background effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Trail to your project and fits it to your theme.

Code

How Image Trail is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ImageTrail } from "@/components/ui/image-trail";

const images = [
  "https://cdn.21st.dev/assets/mirror/ca/ca0f36cf8a170455b0fa016125cef62c02a68cef1c36afacd22d4dca5350f769.jpg",
  "https://cdn.21st.dev/assets/mirror/89/89748a64dcaa9afbd7500f0f0070d4d4fa7f3be8fa355c5cce610b74f2dddce2.jpg",
  "https://cdn.21st.dev/assets/mirror/b2/b24a1113bc22b8fca3bc83abd44eac50be6f0a37e9cd951883e66cabcd9606e7.jpg",
  "https://cdn.21st.dev/assets/mirror/21/2139e8abfdbbd0b4fb6f4017858e8ef4af678a44d6207e895040328aa310c4c2.jpg",
  "https://cdn.21st.dev/assets/mirror/95/95b797e840b37395e03dfa11825a77f51198e7da5247d5c0d295164b16739585.jpg",
  "https://cdn.21st.dev/assets/mirror/09/09008b09ebd04014508c6c962db6fe2dcf574b22b21ce56879a0fb908274ad74.jpg",
  "https://cdn.21st.dev/assets/mirror/7c/7c261ad2bd00b747594a1141550b2f7ea432fb27b9d3c381464bb7b2d8d8f65c.jpg",
  "https://cdn.21st.dev/assets/mirror/27/27b385d1779efe78b4c9be6c61c89ae819421da9975b2a32c1fba42141c89e3d.jpg",
];

export default function ImageTrailDemo() {
  return (
    <div className="relative w-full h-screen overflow-hidden bg-black">
      <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 pointer-events-none px-4 text-center">
        <h1 className="text-4xl sm:text-5xl font-bold text-white">
          Scientific Discovery
        </h1>
        <p className="text-white/70 max-w-md">
          Move your cursor across the space to reveal the hidden knowledge
          stream.
        </p>
      </div>
      <ImageTrail
        images={images}
        imageWidth={250}
        imageHeight={320}
        threshold={50}
        duration={1.6}
      />
    </div>
  );
}