CinematicImage

Image component with color extraction and optional hover effects.

Basic Usage

The simplest way to add cinematic lighting to images. The component extracts the dominant color and creates an ambient glow effect around the image.

tsx

import { AdaptiveProvider, CinematicImage } from "react-cinematic-lighting";

export default function App() {
  return (
    <AdaptiveProvider>
      <CinematicImage
        src="/nature.jpg"
        alt="Beautiful landscape"
        preset="spotify"
      />
    </AdaptiveProvider>
  );
}

Hover Effects

Enable interactive hover animations that enhance the glow effect when users interact with the image. Perfect for image galleries and portfolios.

tsx

import { CinematicImage } from "react-cinematic-lighting";

export default function ImageGallery() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <CinematicImage
        src="/image1.jpg"
        alt="Image 1"
        preset="neon"
        hoverEffect
        transitionDuration={0.5}
      />
      <CinematicImage
        src="/image2.jpg"
        alt="Image 2"
        preset="ambient"
        hoverEffect
      />
      <CinematicImage
        src="/image3.jpg"
        alt="Image 3"
        preset="spotify"
        hoverEffect
      />
    </div>
  );
}

Custom Configuration

Fine-tune the lighting effect with custom preset configurations and respond to color changes.

tsx

import { CinematicImage } from "react-cinematic-lighting";

export default function CustomImage() {
  return (
    <CinematicImage
      src="/photo.jpg"
      alt="Custom styled image"
      preset={{
        intensity: 0.6,
        blur: 80,
        spread: "wide",
        glow: true,
        glowStrength: 40,
        colorBoost: 1.5,
      }}
      objectFit="cover"
      hoverEffect
      onColorChange={(color) => {
        console.log("Dominant color:", color);
      }}
    />
  );
}

Props

srcstringrequired

Image source URL

altstringrequired

Alternative text for accessibility

presetPresetName | PresetConfigoptional

Preset name (youtube, netflix, spotify, apple, minimal, neon, ambient) or custom config object. Default: "ambient"

hoverEffectbooleanoptional

Enable hover animation effect. Default: false

transitionDurationnumberoptional

Hover transition duration in seconds. Default: 0.3

objectFit"contain" | "cover" | "fill" | "none" | "scale-down"optional

CSS object-fit property for image scaling

intensitynumberoptional

Glow intensity from 0 to 1 (overrides preset value)

blurnumberoptional

Background blur in pixels (overrides preset value)

glowbooleanoptional

Enable glow effect (overrides preset value)

glowStrengthnumberoptional

Glow strength in pixels (overrides preset value)

disabledbooleanoptional

Disable color extraction. Default: false

onColorChange(color: ColorRGB) => voidoptional

Callback function called when the extracted color changes

classNamestringoptional

Additional CSS classes

styleReact.CSSPropertiesoptional

Additional inline styles