Agent skill · software engineering · remotion-dev
add-effect
Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, formatting, and builds.
Why this skill is useful
Adds a complete implementation guide for creating new WebGL2 effects in Remotion, including specific code structures and validation methods.
What it needs
Requires remotion installed locally. About 6k tokens when loaded. Last updated 2026-08-06. 55,698 stars on the source repository.
What this skill does
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 InteractivitySchema and Internals from remotion. Use const {createEffect, createWebGL2ContextError} = Internals;. Define defaults as const values. Define a schema with satisfies InteractivitySchema for Studio visual editing. Every canvas position parameter (such as a center, origin, or endpoint) must use a normalized [u, v] tuple and one type: 'uv-coordinate' schema field. [0, 0] is the top-left corner and [1, 1] is the bottom-right. Convert to pixels or shader coordinates in the renderer. For paired endpoints such as origin and direction, setting visual: {type: 'line', to: 'direction'} on origin connects their handles in Studio. 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: Look at existing WebGL2 effects such as halftone.ts, blur/blur-runtime.ts, chromatic-aberration/chromatic-aberration-runtime.ts, and wave/wave-runtime.ts before adding new helpers. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/add-effect