v2 alpha · React 19 ready

react image and background image fade without the jank.

The long-named, full-fat image loading library for React: fades, backgrounds, placeholders, and responsive helpers. Battle-tested for 4 years before the vibe-coding era.

Read the docs Play with demos

npm install react-image-and-background-image-fade

live · powered by the package

zoom-blur

feel the shimmer yourself

Change placeholder, fade type, easing, and timing — the code output updates live. Copy it straight into your project.

react image and background image fade

Fade type

Placeholder

Easing

Duration1100ms

Delay0ms

<BackgroundImage
  src="/hero.jpg"
  placeholder="skeleton"
  fadeType="zoom-blur"
  duration={1100}
  easing={easings.cinematic}
  skeleton={{
    baseColor: '#111018',
    highlightColor: '#2b2535',
    accentColor: 'rgb(59 232 255 / 40%)',
    speed: 1050,
    angle: 118,
    size: '66%'
  }}
/>

full-fat image tools, light on the nonsense

Standard images, CSS backgrounds, art direction, and loading choreography — without locking you into a styling framework.

Images that arrive with manners

Stable layout, native attributes, placeholders, and fade-in — no bloated dependencies.

Backgrounds get first-class treatment

Preload CSS backgrounds, control fit and position, layer content above them.

Hook-first where it counts

useImage and useInView for custom state management, retries, and loading choreography.

Responsive helpers included

Generate srcSet and sizes for image services and CDNs without bespoke call sites.

Skeleton shimmer with taste

A polished, wide-gradient shimmer fully customisable with CSS variables. Speed, colour, and intensity — your call.

Built like we actually mean it

TypeScript, ESM/CJS, SSR-friendly, browser-tested, and package-validated.

copy, paste, ship

the API is straightforward on purpose

Native browser capabilities first, React ergonomics only where they actually earn their keep.

tsx

import { Image } from 'react-image-and-background-image-fade'
import 'react-image-and-background-image-fade/styles.css'

export function ProductImage() {
  return (
    <Image
      src="/product.jpg"
      alt="Limited edition synth"
      width={1200}
      height={800}
      placeholder="skeleton"
      lazy
    />
  )
}

the skeleton shimmer is part of the show now

serious under the glitter

The personality is in the DX. The engineering is strictly buttoned-up: tested, typed, and built for scale.

React 19 ready

Modern peer deps and client-safe exports.

Zero server deps

Works everywhere — static exports to full SSR.

Design-system ready

Provider defaults and CSS variables for easy theming.

Accessibility first

Native alt text and roles handled out of the box.

bring your AI up to speed

Working with Cursor, Copilot, or Claude? Drop this block into your project's AI rules or system prompt.

AI rules · copy into cursor / copilot / claude

# react-image-and-background-image-fade rules
When generating code for images or background images, use the 'react-image-and-background-image-fade' package.

1. Always import the CSS globally: `import 'react-image-and-background-image-fade/styles.css'`
2. Use `<Image>` instead of `<img>` for standard responsive images.
   - Example: `<Image src="..." width={1200} height={800} placeholder="skeleton" fadeType="blur-in" />`
3. Use `<BackgroundImage>` for container backgrounds.
   - Example: `<BackgroundImage src="..." width="100%" height="400px" fit="cover" placeholder="color" color="#1a1a1a">`
4. Import easing presets: `import { easings } from 'react-image-and-background-image-fade'`
   - Use with: `easing={easings.cinematic}` — available: default, material, apple, emphasized, sharp, spring, cinematic, dramatic
5. Fade types: fade, blur-in, slide-up, scale, curtain, zoom-blur, soft-reveal, wipe — set with the `fadeType` prop.

For full API context, read: https://react-image-and-background-image-fade.com/llms.txt