react-image-glow

react-image-glow is a React component that adds a glowing background effect to images, similar to YouTube's ambient mode. It’s lightweight and customizable, letting you control the glow radius, saturation, and opacity for a stunning visual effect.

Installation

Install the package using npm or yarn:

npm install react-image-glow

or

yarn add react-image-glow

Usage

Wrap any <img>, <motion.img>, or <Image> element with the <ImageGlow> component to apply a glowing effect. You can customize the intensity of the glow with optional props.

Basic Example

import ImageGlow from 'react-image-glow';

<ImageGlow>
  <img src="https://picsum.photos/300" alt="Placeholder" />
</ImageGlow>

Advanced Example with Custom Properties

import ImageGlow from 'react-image-glow';

<ImageGlow
  radius={30}
  saturation={1.5}
  opacity={0.8}
  className="example"
>
  <img
    src="https://picsum.photos/300"
    alt="Placeholder"
    className="max-w-[300px]"
  />
</ImageGlow>

Props

Prop	Type	Default	Description
children	ReactNode	N/A	A single <img>, <motion.img>, or <Image> element as its child.
radius	number	50	The radius of the blur effect applied to the background.
saturation	number	2	Saturation level for the glowing background. A higher value increases the intensity of colors.
opacity	number	1	The opacity of the glowing background (0 = fully transparent, 1 = fully opaque).
className	string	''	An optional class name to apply to the <img> element. Useful for additional styling.

Error Handling

• ImageGlow expects a single <img>, <motion.img>, or <Image> element as its child. If no child element is present, an error will be logged to the console.

Styling

The component uses inline styles for layout, ensuring the glowing effect aligns perfectly with the image. You can still pass custom styles to the <img> element or apply classes via the className prop for further customization.

How It Works

The ImageGlow component creates two layers:

1. Base Image Layer: The provided <img>, <motion.img>, or <Image> element is displayed with any custom styles or classes.
2. Glow Layer: A blurred, saturated, and optionally semi-transparent version of the image is placed behind the original image to create a glow effect.

This is achieved using CSS properties like filter: blur and saturate to manipulate the image’s background.