Components
Image loading
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.
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>
)
}