Components
A customizable image loader component that displays an animated grid overlay while the image loads. The grid cells blink initially, then fill with colors sampled from the image, expand to cover gaps, and fade out to reveal the final image with smooth transitions.
Loading preview...
import ImageLoader from "@/components/ui/image-loading";
export default function DemoOne() {
return (
<div className="min-h-screen flex items-center justify-center p-8">
<ImageLoader
src="https://res.cloudinary.com/dctgknnt7/image/upload/v1758636339/middle_vqdg9p.jpg"
alt="Mountain landscape"
width="500px"
height="630px"
gridSize={15}
cellGap={15}
cellShape="square"
cellColor="#cbd5e1"
blinkSpeed={2000}
transitionDuration={500}
fadeOutDuration={600}
loadingDelay={3500}
className="rounded-lg overflow-hidden"
/>
</div>
)
}