Un effet glitch RGB par rafales pour Remotion

@storybynumbers_/remotion-glitch-effect ajoute de courtes rafales de glitch avec séparation des canaux RGB. Il est pensé pour rester rare, reproductible, et facile à poser au-dessus de compositions existantes.

Installation

npm install @storybynumbers_/remotion-glitch-effect

L'usage passe par un composant wrapper exporté par le paquet : enveloppez la sous-arborescence que vous voulez affecter.

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

Comment c'est fait

Calendrier des rafales et déterminisme

Une rafale est une courte fenêtre d'images où l'effet est actif. Chaque rafale possède une image de début, une durée, et une intensité de pic. Hors rafales, les images sont stables.

La seed maintient tout déterministe. Tout l'aléatoire vient de random() de Remotion à partir de clés de chaîne qui intègrent la seed, de sorte que la même seed produit le même calendrier de rafales et la même variation par image à chaque rendu.

La boucle centrale est :

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

À l'intérieur d'une rafale, les valeurs par image dérivent d'une seed d'image (basée sur la seed de rafale plus l'image), de sorte que les décalages et le jitter varient au fil de la rafale tout en restant reproductibles.

Séparation RGB via filtres SVG

C'est délibérément low-tech : des filtres SVG et quelques couches.

Lorsque intensity > 0, le composant rend les mêmes enfants trois fois :

• Rouge : isole le rouge via feColorMatrix, puis feOffset.
• Vert : isole le vert et le conserve centré comme référence stable.
• Bleu : isole le bleu et applique feOffset dans le sens opposé.

Par-dessus :

• Un léger feGaussianBlur ne s'applique que pendant les rafales, pour adoucir les bords.
• Les trois couches sont composées avec mixBlendMode: "screen" pour que la séparation reste lumineuse.

Liens

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