Add a new @remotion/effects effect

Add a new @remotion/effects effect

Use this skill when adding a new effect to @remotion/effects.

1. Pick the effect shape

• Prefer the WebGL2 backend for new effects. Use 2D only when WebGL cannot express the effect.
• Use a single file at packages/effects/src/<effect-name>.ts for simple effects.
• Use a folder at packages/effects/src/<effect-name>/ plus a top-level re-export file when the effect needs multiple shaders, runtime helpers, or multiple files.
• Follow naming already used by the package:
  • File/subpath: kebab-case (chromatic-aberration)
  • Function: camelCase (chromaticAberration)
  • Type: PascalCase params (ChromaticAberrationParams)
  • Effect type string: remotion/<kebab-case-name>

2. Implement the effect

In the effect file:

• Import SequenceSchema and Internals from remotion.
• Use const {createEffect, createWebGL2ContextError} = Internals;.
• Define defaults as const values.
• Define a schema with satisfies SequenceSchema; these fields appear in Studio visual editing.
• Export the params type.
• Resolve defaults in a resolve() helper.
• Validate params using helpers from:
  • packages/effects/src/validate-effect-param.ts
  • packages/effects/src/color-utils.ts
• Throw createWebGL2ContextError('<effect name> effect') if WebGL2 cannot be acquired.
• Set documentationLink to https://www.remotion.dev/docs/effects/<slug>.
• Include every resolved parameter in calculateKey().

For WebGL2 effects, use this general structure:

import type {SequenceSchema} from 'remotion';
import {Internals} from 'remotion';
import {assertOptionalFiniteNumber, validateUnitInterval} from './color-utils.js';
import {assertEffectParamsObject} from './validate-effect-param.js';