Elevate your Next.js 15 app with a smart BlurImage component! Smooth blur effects while images load—no janky placeholders.
1️⃣Why it’s a must-have:
-Seamless UX with blur placeholders
-Built on Next.js 15’s
-Lightweight: just React + CSS -Perfect for App Router apps!
2️⃣How it works:
-useState tracks load state
-CSS blur(5px) until loaded
-Pair with blurDataURL for AI images (Flux, anyone?)
3️⃣Make it yours:
-Tweak blur intensity
-Add transitions for polish
-Test with Flux or OpenAI-generated images
4️⃣Ship better Next.js apps today! Try BlurImage & share your results—how’s it look with your stack? 👇
Top comments (2)
Love this, especially with blurDataURL for AI images - it really smooths out that loading gap for me.
Curious, have you tried adjusting the blur dynamically based on image type or size?
That's a good idea, I haven't tried it yet.