Interactive demo

Picture stack

See Picture render format fallbacks with the same fade treatment.

Placeholder

Reveal

Replay

<Picture
  src="/fallback.jpg"
  alt="Art directed image"
  placeholder="blur"
  fadeType="soft-reveal"
  sources={[
    { srcSet: '/wide.jpg', media: '(min-width: 900px)' },
    { srcSet: '/photo.webp', type: 'image/webp' }
  ]}
/>