A cursor-following trail of images that fade and fly away, used as an interactive hero or background effect.
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>
);
}