Interactive demo

Provider defaults

Set a shared visual language once and let components inherit it.

Neon editorial image sample — Image inherits the provider theme

BackgroundImage inherits it too

Neon editorial picture sample — Picture keeps the same choreography

Provider theme

Inherited duration900ms

Replay

<ImageConfigProvider
  value={{
    placeholder: 'skeleton',
    fadeType: 'zoom-blur',
    duration: 900,
    color: '#ff3d81',
    easing: easings.cinematic,
    lazy: false,
    skeleton: {
      baseColor: '#111018',
      highlightColor: '#2b2535',
      accentColor: 'rgb(255 61 129 / 46%)',
      speed: 1050,
      sheenColor: 'rgb(255 255 255 / 78%)',
      angle: 118,
      size: '66%'
    }
  }}
>
  <Image src="/gallery.jpg" alt="Gallery" />
  <BackgroundImage src="/hero.jpg" />
  <Picture src="/art.jpg" sources={sources} />
</ImageConfigProvider>