TypeScript-first React library

Cinematic Lighting Effects for React

Automatically extract colors from videos, images, and components to create stunning ambient glows and dynamic backgrounds

$npm install react-cinematic-lighting

Everything You Need

A complete solution for adding cinematic lighting effects to your React applications

Video Extraction

Real-time color extraction from playing videos with optimized performance

Image Analysis

Extract dominant colors from static images and apply ambient effects

7 Built-in Presets

YouTube, Netflix, Spotify, Apple, Minimal, Neon, and Ambient styles

Performance Optimized

FPS limiting, throttling, and sparse pixel sampling for smooth experiences

TypeScript First

Full type safety with comprehensive type definitions out of the box

Fully Customizable

Fine-tune every aspect or create custom preset configurations

Quick Start

Get up and running with Cinematic Lighting in minutes

1. Install the package

npm install react-cinematic-lighting

2. Import and use

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

function App() {
  return (
    <AdaptiveProvider>
      <CinematicVideo
        src="video.mp4"
        preset="youtube"
        controls
      />
    </AdaptiveProvider>
  );
}
Built with v0