Adding a Preset

This guide walks through every step needed to add a new film simulation preset.

---

Step 1 — Define the preset in src/presets/index.ts

Each preset is a FilmPreset object added to the presets array. Copy an existing entry as a starting point and edit the values.

// src/presets/index.ts

{
  id: 'my-new-preset',           // URL-safe unique ID (kebab-case)
  name: 'My New Film',           // English display name
  nameZh: 'My New Film',         // Chinese display name (used in zh-CN/zh-TW locales)
  description: '描述这款胶片的风格特点', // Short description (used in some locales)
  i18nKey: 'myNewFilm',          // Camel-case key used in i18n files (see Step 2)
  params: {
    colorGrade: {
      temperature: 0, tint: 0, saturation: 0, contrast: 0,
      exposure: 0, highlights: 0, shadows: 0,
      midtoneR: 0, midtoneG: 0, midtoneB: 0,
      shadowR: 0, shadowG: 0, shadowB: 0,
      highlightR: 0, highlightG: 0, highlightB: 0,
    },
    grain: { intensity: 20, size: 1.5, colorVariance: 10, shadowBoost: 20, highlightReduction: 30 },
    vignette: { intensity: 20, radius: 1.2, feather: 60, color: 0 },
    lightLeak: { intensity: 0, color: 'warm', position: 'top-right' },
    fade: { intensity: 10 },
    halation: { intensity: 15, color: 'warm', radius: 10 },
    bloom: { intensity: 0, threshold: 80, radius: 8 },
    toneCurve: { shadows: 0, midtones: 0, highlights: 0 },
  },
},

Parameter ranges quick reference

Effect	Key params	Range
colorGrade	temperature, tint, saturation, contrast, exposure, highlights, shadows	−100 → +100
colorGrade	midtoneR/G/B, shadowR/G/B, highlightR/G/B	−50 → +50
grain	intensity, colorVariance, shadowBoost, highlightReduction	0 → 100
grain	size	1 → 3
vignette	intensity, feather, color	0 → 100
vignette	radius	0.5 → 2.0
lightLeak	intensity	0 → 100
lightLeak	color	'warm' | 'cool' | 'vintage'
lightLeak	position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
fade	intensity	0 → 100
halation	intensity	0 → 100
halation	color	'red' | 'warm' | 'gold'
halation	radius	1 → 20
bloom	intensity, threshold	0 → 100
bloom	radius	1 → 20
toneCurve	shadows, midtones, highlights	−50 → +50

---

Step 2 — Add translations for the preset name and description

Open each language file in src/i18n/ and add a new entry under the presets key. The key must match the i18nKey value you set in Step 1.

// src/i18n/en.ts  (and all other locale files)
presets: {
  // ... existing presets ...
  myNewFilm: {
    name: 'My New Film',
    description: 'Describe the film character here.',
  },
},

You must add the entry to all 9 language files (en, zh-CN, zh-TW, ja, ko, fr, de, es, pt). For languages you don't speak, copying the English text is fine — a contributor can translate it later.

---

Step 3 — Test the preset

npm run dev

1. Open the Presets tab.
2. Scroll to the bottom of the list — your new preset should appear.
3. Click it to apply and verify the visual result.
4. Check that the name and description display correctly in several languages.

---

Tips for tuning parameters

• Start with an existing preset that has a similar mood as a base.
• Use Advanced mode in the Adjustments panel to tweak color toning wheels interactively, then copy the resulting shadowR/G/B, midtoneR/G/B, highlightR/G/B values back into your preset.
• Keep grain.intensity between 10–25 for subtle grain; 30+ for a noticeably coarse look.
• fade.intensity above 20 starts to look heavily washed — use sparingly unless going for a deliberate expired-film aesthetic.
• halation is most effective on images with strong backlight or specular highlights.