BlurImage
Image component with blur-in loading animation.
The BlurImage component displays an image that transitions from a blurred, grayscale placeholder to the sharp, full-color image once loaded.
Usage
---import { BlurImage } from '@publier/shell/components';---
<BlurImage src="/images/hero.png" alt="Hero screenshot" width={800} height={450} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | Image URL |
alt | string | required | Alt text for accessibility |
width | number | — | Intrinsic width (prevents layout shift) |
height | number | — | Intrinsic height |
class | string | — | Additional CSS classes |
Behavior
- Uses native lazy loading (
loading="lazy") - Starts blurred and grayscale via CSS filter
- Transitions to sharp and full-color on load
- Respects
prefers-reduced-motion— skips animation if enabled