Blur Image

Image component with animated shimmer placeholder and blur-to-clear loading effect.

src

width

height

Installation

<BlurImage src="/og-image.png" width={800} height={450} alt="Description" />

You can provide your own base64-encoded placeholder image:

<BlurImage
  src="/photo.jpg"
  width={800}
  height={450}
  alt="Photo"
  blurDataURL="data:image/png;base64,YOUR_BASE64_PLACEHOLDER..."
/>

Shimmer animation — A subtle shimmer overlay sweeps across while loading
Blur-to-clear transition — Image starts blurred and scales down as it loads
Default placeholder — Falls back to a neutral gray SVG placeholder
Custom placeholder support — Provide your own blurDataURL for branded loading states

The shimmer animation requires the shimmer keyframe in your CSS. Add this to your global styles:

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

For production, consider a server-side preprocessing step to generate low-resolution data URLs for all remote assets.