Components
Starting preview...
A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/image-trail'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://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05",
"https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
"https://images.unsplash.com/photo-1426604966848-d7adac402bff",
"https://images.unsplash.com/photo-1472214103451-9374bd1c798e",
"https://images.unsplash.com/photo-1469474968028-56623f02e42e",
"https://images.unsplash.com/photo-1447752875215-b2761acb3c5d",
].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 }