Interactive demo

Image fade lab

Tune the placeholder, fade timing, and lazy behavior on the core Image component.

Image

normal img, properly dressed

Stable dimensions, native attributes, placeholder, and reveal animation on one component.

Placeholder

Reveal

Duration900ms

Object fit

Replay

<Image
  src="/gallery.jpg"
  alt="Gallery image"
  width="100%"
  height="100%"
  placeholder="skeleton"
  fadeType="zoom-blur"
  duration={900}
  fit="cover"
/>