Filter Presets

Pre-configured filter combinations for quick styling.

Using Presets

// Apply a preset
app.filterSystem.applyPreset('cinematic');

// Get list of available presets
const presets = app.filterSystem.getPresets();

Available Presets

cinematic

High contrast movie look.

app.filterSystem.applyPreset('cinematic');

Includes:

• Increased contrast (+20)
• Slight desaturation (-20)
• Moderate vignette

dreamy

Soft, ethereal look.

app.filterSystem.applyPreset('dreamy');

Includes:

• Increased brightness (+10)
• Increased saturation (+20)
• Slight blur

noir

Classic black and white film.

app.filterSystem.applyPreset('noir');

Includes:

• Full grayscale
• High contrast (+30)
• Strong vignette

warm

Cozy warm tones.

app.filterSystem.applyPreset('warm');

Includes:

• Orange color overlay
• Slight saturation boost

cool

Blue-tinted cool tones.

app.filterSystem.applyPreset('cool');

Includes:

• Blue color overlay
• Slight desaturation

retro

Vintage film effect.

app.filterSystem.applyPreset('retro');

Includes:

• Sepia tone
• Vignette
• Film grain

highKey

Bright, low contrast.

app.filterSystem.applyPreset('highKey');

Includes:

• Increased brightness (+30)
• Reduced contrast (-20)

lowKey

Dark, dramatic.

app.filterSystem.applyPreset('lowKey');

Includes:

• Reduced brightness (-30)
• High contrast (+30)
• Strong vignette

Preset Reference

Events

window.addEventListener('presetApplied', (e) => {
  console.log('Applied preset:', e.detail.presetName);
  console.log('Filter IDs:', e.detail.filterIds);
});

Note

Applying a preset clears all existing filters before applying the preset’s filters. If you want to combine presets with custom filters, apply the preset first, then add additional filters.

// Apply preset first
app.filterSystem.applyPreset('warm');

// Then add custom filters
app.filterSystem.addFilter('vignette', { intensity: 0.3 });