Presets

7 built-in presets optimized for different use cases, from subtle to eye-catching effects.

Available Presets

youtube

Glow

Video players and content platforms

Intensity0.3

Blur80px

netflix

Glow

Premium video experiences

Intensity0.4

Blur100px

spotify

Glow

Music and vibrant content

Intensity0.5

Blur60px

apple

Minimal and elegant designs

Intensity0.25

Blur50px

minimal

Subtle effects

Intensity0.15

Blur40px

neon

Glow

Eye-catching, high-energy

Intensity0.7

Blur30px

ambient

Glow

Balanced and versatile (default)

Intensity0.35

Blur70px

Using Presets

Simply pass the preset name to any cinematic component:

tsx

<CinematicVideo
  src="video.mp4"
  preset="youtube"  // or "netflix", "spotify", etc.
  controls
/>

Custom Preset Configuration

You can also create custom presets by passing a configuration object:

tsx

<CinematicVideo
  src="video.mp4"
  preset={{
    intensity: 0.6,
    blur: 90,
    spread: "wide",
    glow: true,
    glowStrength: 50,
    vignette: true,
    vignetteStrength: 0.2,
    colorBoost: 1.4,
    fps: 15,
    sampling: 8,
  }}
  controls
/>

Preset Comparison

Preset	Intensity	Blur	Glow	Best For
youtube	0.3	80px	✅	Video players and content platforms
netflix	0.4	100px	✅	Premium video experiences
spotify	0.5	60px	✅	Music and vibrant content
apple	0.25	50px	❌	Minimal and elegant designs
minimal	0.15	40px	❌	Subtle effects
neon	0.7	30px	✅	Eye-catching, high-energy
ambient	0.35	70px	✅	Balanced and versatile (default)