A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.
'use client'
import { useRef } from "react"
import { ImageTrail } from "@/components/ui/image-trail"
const ImageTrailDemo = () => {
const ref = useRef<HTMLDivElement>(null)
// Unsplash images that definitely exist
const images = [
"https://cdn.21st.dev/assets/mirror/fd/fd76567bae065063f0aef003423a2455325e8f594175af78e9d205fcd9fdf2b1.jpg",
"https://cdn.21st.dev/assets/mirror/d0/d069396ffe22f2757574c2ff4aa26195816e2e449c0310cdf3cd8ce6aa2721d8.jpg",
"https://cdn.21st.dev/assets/mirror/e8/e8ce88e108a912ec29fd8cc0fe2013444c79505a830568527fa6acdf751c1d4f.jpg",
"https://cdn.21st.dev/assets/mirror/9e/9e454e2b4b962251911d18e77e723e54424ee4bd6026319577a898fc04688c71.jpg",
"https://cdn.21st.dev/assets/mirror/43/435bab41d096fac50dbd2d0f657345dce1a6b5d092b407db552a1ee0b83b5823.jpg",
"https://cdn.21st.dev/assets/mirror/d0/d006ecb1feea2948164d66c1245291b11d20fc68ff5845c55237c65b950700f2.jpg",
].map(url => `${url}?auto=format&fit=crop&w=300&q=80`)
return (
<div className="flex w-full h-screen justify-center items-center bg-white relative overflow-hidden">
<div className="absolute top-0 left-0 z-0" ref={ref}>
<ImageTrail containerRef={ref}>
{images.map((url, index) => (
<div
key={index}
className="flex relative overflow-hidden w-24 h-24 rounded-lg"
>
<img
src={url}
alt={`Trail image ${index + 1}`}
className="object-cover absolute inset-0 hover:scale-110 transition-transform"
/>
</div>
))}
</ImageTrail>
</div>
<h1 className="text-7xl md:text-9xl font-bold z-10 select-none bg-clip-text text-transparent bg-gradient-to-r from-neutral-950 to-neutral-500">
ALBUMS
</h1>
</div>
)
}
export { ImageTrailDemo }Part of Fancy Components — browse the full library on 21st.dev.