A bursty RGB glitch effect for Remotion

@storybynumbers_/remotion-glitch-effect adds short glitch bursts with RGB channel splitting. It’s designed to be sparse, repeatable, and easy to drop on top of existing compositions.

Install

npm install @storybynumbers_/remotion-glitch-effect

Usage is a wrapper component exported by the package: wrap the subtree you want to affect.

<DigitalGlitchRGB
  splitAmount={30}
  blurAmount={0.4}
  jitterAmount={2.5}
  burstSpacing={35}
  burstDuration={[5, 10]}
>
  <YourContent />
</DigitalGlitchRGB>

How it’s made

Burst schedule + determinism

A burst is a short window of frames where the effect is active. Each burst has a start frame, a duration, and a peak intensity. Outside bursts, frames are stable.

The seed keeps everything deterministic. All randomness comes from Remotion’s random() using string keys that incorporate the seed, so the same seed produces the same burst schedule and the same per-frame variation on every render.

The core loop is:

const bursts = useMemo(
  () => generateBursts(durationInFrames, burstSpacing, burstDuration, seed),
  [durationInFrames, burstSpacing, burstDuration, seed]
);
const { intensity, burst } = getGlitchIntensity(frame, bursts);

Inside a burst, per-frame values derive from a frame seed (based on the burst seed + frame), so offsets and jitter change across the burst while staying reproducible.

RGB split via SVG filters

This is deliberately low-tech: SVG filters and a few layers.

When intensity > 0, the component renders the same children three times:

Red: isolate red with feColorMatrix, then feOffset it.
Green: isolate green and keep it centered as a stable reference.
Blue: isolate blue and feOffset it in the opposite direction.

On top of that:

A small feGaussianBlur applies only during bursts to soften edges.
The three layers are composited with mixBlendMode: "screen" so the split stays bright.

How it’s made

Burst schedule + determinism

RGB split via SVG filters

Links