Cinematic Lighting
GitHubGet Started

CinematicVideo

Ready-to-use video component with automatic color extraction and ambient glow effects.

v1.0New API

Import

tsx
import { CinematicVideo } from "react-cinematic-lighting";

Basic Usage

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

function VideoPlayer() {
  return (
    <AdaptiveProvider>
      <CinematicVideo
        src="video.mp4"
        preset="netflix"
        controls
        autoPlay
        loop
      />
    </AdaptiveProvider>
  );
}

v1.0 Grouped API

Version 1.0 introduces a cleaner, grouped API for better organization. Flat props are still supported for backward compatibility.

tsx
// v1.0 Grouped API (Recommended)
<CinematicVideo
  src="video.mp4"
  preset="youtube"
  controls
  autoPlay
  effects={{
    intensity: 0.5,
    blur: 80,
    glow: true,
    glowStrength: 60
  }}
  extraction={{
    fps: 15,
    sampling: 8
  }}
  layout={{
    borderRadius: "16px"
  }}
/>

Backward Compatible

The flat props API from v0.x is still fully supported:

tsx
// Flat props (Backward compatible)
<CinematicVideo
  src="video.mp4"
  preset="youtube"
  intensity={0.5}
  blur={80}
  fps={15}
  sampling={8}
  controls
/>

Multi-Zone Color Extraction

Extract colors from multiple zones (4/8/12) for directional ambient lighting effects. Each edge (left, right, top, bottom) gets different colored glows based on content.

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

Advanced Glow Mode

For the most realistic ambient lighting, enable Advanced Glow Mode. It uses strip-based pixel extraction from the outer 15% of each edge, preserving color variations instead of averaging.

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

Best for: Videos with dynamic scenes, colorful content, or when you want the most authentic ambient lighting effect.

Props

effectsoptionalv1.0

Type: { intensity?: number, blur?: number, glow?: boolean, glowStrength?: number }

Grouped effect properties. Overrides preset values. Cleaner API for controlling visual effects.

extractionoptionalv1.0

Type: { fps?: number, sampling?: number }

Grouped extraction properties. Control color extraction performance and accuracy.

layoutoptionalv1.0

Type: { borderRadius?: string | number, padding?: string | number }

Grouped layout properties for consistent styling.

multiZoneoptionalv1.0

Type: boolean

Enable multi-zone color extraction. Default: false

zoneCountoptionalv1.0

Type: 4 | 8 | 12

Number of extraction zones. Default: 4

advancedGlowoptionalv1.0

Type: boolean

Enable advanced glow mode with strip-based extraction. Default: false

stripWidthoptionalv1.0

Type: number

Strip resolution in pixels for advanced glow. Default: 50

blurStrengthoptionalv1.0

Type: number

Blur intensity for advanced glow. Default: 40

presetoptional

Type: PresetName | PresetConfig

Preset name or custom configuration. Available presets: youtube, netflix, spotify, apple, minimal, neon, ambient. Default: 'ambient'

onColorChangeoptional

Type: (color: ColorRGB) => void

Callback function called when the extracted color changes.

disabledoptional

Type: boolean

Disable color extraction temporarily. Default: false

Note: All standard HTML video props (src, poster, controls, autoPlay, loop, muted, etc.) are also supported. Flat props from v0.x (intensity, blur, fps, etc.) work for backward compatibility.

Built with v0