Remotion Ships 50+ Video Effects React Developers can Control With AI

Remotion Effects is a new first-class API that lets you manipulate pixels on canvas-based video components directly, with more than 50 built-in effects available out of the box. The feature ships in v4.0.464 of the framework and covers everything from blur and glow to chromatic aberration, halftone, and barrel distortion. More importantly, it is designed to work three ways at once: manually in code, interactively in Remotion Studio, and agentically through AI coding tools like Claude Code.

What Remotion actually is

The core idea behind Remotion is to describe your video as React components rather than using a timeline-based editor. A video is essentially a React application that knows which frame is currently being displayed. For React developers who want to generate videos at scale or build automated video pipelines, Remotion is arguably the best tool available.

Remotion uses a headless browser to capture frames at 30 or 60 fps, then FFmpeg compiles thousands of screenshots into a fluid MP4. The result is a fully deterministic, version-controlled video pipeline that lives in your repo alongside your application code.

The effects system, explained

Pixels of canvas-based components can be manipulated using effects. The API is simple: you pass an array of effect functions to an effects prop on any supported component. Multiple effects can be combined, and they apply in the order they are specified.

import { Video } from '@remotion/media';
import { blur } from '@remotion/effects/blur';
import { chromaticAberration } from '@remotion/effects/chromatic-aberration';
export const MyComp = () => (
  <Video
    src="https://remotion.media/video.mp4"
    effects={[
      blur({ radius: 20 }),
      chromaticAberration({ offset: 5 }),
    ]}
  />
);

The following components support effects: <Solid>, <HtmlInCanvas>, <Video>, <Img>, <CanvasImage>, <AnimatedImage>, <Gif>, and <RemotionRiveCanvas>. Shapes from @remotion/shapes have also been added to the supported list.

50+ effects, organized by category

The full catalogue covers a wide range of visual treatments. Here is a breakdown of what ships out of the box:

• Blur and glow: blur(), glow(), alphaShadow()
• Distortion: barrelDistortion(), fisheye(), wave(), chromaticAberration()
• Texture and grain: noise(), burlap(), emboss(), scanlines(), halftone(), dotGrid()
• Transform: scale(), mirror(), uvTranslate(), xyTranslate()
• Reveal and dissolve: evolve(), pixelDissolve(), speckle(), noiseDisplacement()
• Stylize: pixelate(), pattern()

You can also use createEffect() to create your own effects based on 2D Canvas APIs, WebGL2, or WebGPU and pass them to an effects array.

Three ways to edit

The headline feature is not just the effects themselves but the three editing modes they support simultaneously.

1. Programmatically , pass effect functions with parameters directly in your component code, as shown above.
2. Interactively , when you select a component with effects in Remotion Studio, you can edit effect parameters in the timeline and toggle effects. The Studio panel also supports keyframing, meaning you can animate any effect parameter over time without writing interpolation code by hand.
3. Agentically , an effects skill has been added to @remotion/skills , which means AI agents can now apply, configure, and keyframe effects through natural language prompts.

The AI angle is the real story

Remotion Skills marks the beginning of a new era in video creation, transitioning from traditional code-driven to AI instruction-driven. Remotion Skills is a toolset optimized for large language models. Developers can command AI agents such as Claude Code to directly write, modify, and generate professional video animations based on React using simple natural language instructions , no complex TypeScript required.

With the new effects skill now bundled in, agents can do more than just lay out scenes and sequences. They can apply visual treatments, animate effect parameters over time, and chain multiple effects together, all from a single prompt. With 126,000+ installs on skills.sh, the Remotion skill is the #4 most-installed agent skill globally and the most popular skill for programmatic video.

What it is and is not good for

Remotion Effects shines in use cases where video is generated from code rather than captured footage:

• Explainer videos generated from data (dashboards, reports, charts animated), programmatic social content with the same template across 100 variants, and code-driven motion graphics that need to be deterministic and version-controlled.
• Adding cinematic texture to data visualizations , a noise grain or scanline effect on a chart render looks intentional, not accidental.
• Building reusable effect presets that apply consistently across a whole video pipeline.

What it does not do: edit footage shot on a camera. Remotion does not ingest raw files; it generates from code. There is no audio waveform analysis for frame-precise cuts on real audio. Remotion is rendering, not editing.

Availability and pricing

The latest version is available now on npm. Start using it in your project by running npm i remotion. Remotion has a special license and requires obtaining a company license in some cases. Individual and open-source use remains free. The @remotion/effects package follows the same versioning as the rest of the Remotion ecosystem, so make sure all @remotion/* packages are pinned to the same version to avoid conflicts.

The effects system is a meaningful step toward closing the gap between what a developer can build in code and what a motion designer can produce in After Effects, without requiring either party to leave their preferred workflow. The combination of a rich built-in library, visual Studio editing, keyframe support, and an AI skill layer makes it one of the most complete effect systems shipped in any code-first video framework to date.