Quick Start

Get started with React Cinematic Lighting v1.0 in minutes with these simple examples.

Using Ready-to-Use Components

The easiest way to get started is with the built-in components. They come with all the cinematic lighting effects pre-configured.

Video with Ambient Glow

tsx

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

function App() {
  return (
    <AdaptiveProvider>
      <CinematicVideo
        src="video.mp4"
        preset="youtube"
        controls
        autoPlay
        loop
        effects={{ intensity: 0.5, blur: 80 }}
        extraction={{ fps: 10, sampling: 8 }}
      />
    </AdaptiveProvider>
  );
}

Key points:

Wrap your app with AdaptiveProvider
Use CinematicVideo component with a preset
Colors are extracted automatically from the video
New in v1.0: Grouped API with effects and extraction props

Image with Hover Effects

tsx

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

function Gallery() {
  return (
    <AdaptiveProvider>
      <CinematicImage
        src="image.jpg"
        alt="Description"
        preset="ambient"
        hoverEffect
        // v1.0 supports both grouped and flat props for compatibility
      />
    </AdaptiveProvider>
  );
}

Using the Hook API

For more control, use the useAdaptiveItem hook to build custom implementations.

tsx

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

function CustomComponent() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const { color } = useAdaptiveItem(videoRef, {
    colorExtraction: true,
    fps: 10,
    sampling: 10,
  });

  return (
    <div
      style={{
        background: color 
          ? `radial-gradient(circle, rgba(${color.r}, ${color.g}, ${color.b}, 0.3) 0%, transparent 70%)`
          : "#000",
      }}
    >
      <video ref={videoRef} src="video.mp4" controls />
    </div>
  );
}

function App() {
  return (
    <AdaptiveProvider>
      <CustomComponent />
    </AdaptiveProvider>
  );
}

New in v1.0

Multi-Zone Color Extraction

Extract colors from multiple zones (4/8/12) for directional ambient lighting effects.

tsx

// Multi-zone color extraction for directional ambient lighting
<CinematicVideo
  src="video.mp4"
  preset="youtube"
  multiZone={true}
  zoneCount={4}  // 4, 8, or 12 zones
  controls
/>

Advanced Glow Mode

Strip-based pixel extraction for the most realistic ambient lighting effect.

tsx

// Advanced Glow Mode for realistic ambient lighting
<CinematicVideo
  src="video.mp4"
  preset="youtube"
  advancedGlow={true}
  stripWidth={50}
  blurStrength={40}
  controls
/>

🎉 That's it!

You now have cinematic lighting effects in your app. Explore the documentation to learn about all the available options and presets.

Explore Components View Presets