Een vlagerige RGB-glitch voor Remotion

@storybynumbers_/remotion-glitch-effect voegt korte glitchvlagen toe met splitsing van RGB-kanalen. Het is bedoeld om spaarzaam te blijven, herhaalbaar te zijn, en eenvoudig boven op bestaande composities te plaatsen.

Installatie

npm install @storybynumbers_/remotion-glitch-effect

Het gebruik gaat via een wrappercomponent uit het pakket: wikkel de subtree die je wil beïnvloeden.

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

Hoe het werkt

Vlagenschema en determinisme

Een vlaag is een kort venster van frames waarin het effect actief is. Elke vlaag heeft een startframe, een duur, en een piekintensiteit. Buiten vlagen zijn frames stabiel.

De seed houdt alles deterministisch. Alle randomheid komt uit Remotions random() met stringkeys die de seed bevatten, zodat dezelfde seed bij elke render hetzelfde vlagenschema en dezelfde frame-variatie oplevert.

De kernlus is:

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

Binnen een vlaag worden waarden per frame afgeleid van een frame-seed (op basis van de vlaagseed plus het frame), zodat offsets en jitter binnen de vlaag wisselen en toch reproduceerbaar blijven.

RGB-splitsing via SVG-filters

Dit is bewust low-tech: SVG-filters en een paar lagen.

Wanneer intensity > 0 rendert de component dezelfde children drie keer:

• Rood: rood isoleren met feColorMatrix, dan feOffset toepassen.
• Groen: groen isoleren en gecentreerd houden als stabiele referentie.
• Blauw: blauw isoleren en feOffset de andere kant op toepassen.

Daarbovenop:

• Een lichte feGaussianBlur is alleen tijdens vlagen actief om randen zachter te maken.
• De drie lagen worden gecomponeerd met mixBlendMode: "screen" zodat de splitsing helder blijft.

Links

• GitHub: https://github.com/storybynumbers/remotion-glitch-effect