@storybynumbers_/remotion-glitch-effect 1.0.0 → 1.1.0

package/README.md

@@ -8,20 +8,59 @@ Digital glitch effect with RGB channel splitting for Remotion.
 npm install @storybynumbers_/remotion-glitch-effect
 ```
 
-## Usage
+## Minimal usage
 
 ```tsx
 import { DigitalGlitchRGB } from '@storybynumbers_/remotion-glitch-effect';
 
-<DigitalGlitchRGB
-  splitAmount={5}
-  blurAmount={0.8}
-  burstSpacing={28}
->
+<DigitalGlitchRGB>
   <YourContent />
 </DigitalGlitchRGB>
 ```
 
+## How it’s made
+
+This effect is intentionally “no fancy pipeline”: it’s built from SVG filters, a burst scheduler, and deterministic per-frame variation.
+
+### 1) Bursts instead of always-on noise
+
+Rather than wiggling every frame, the component creates short glitch windows (“bursts”) separated by calm periods:
+
+- `generateBursts(totalFrames, burstSpacing, burstDuration, seed)` produces a list of non-overlapping bursts.
+- Each burst has a `startFrame`, `duration`, `peakIntensity`, and its own derived `seed`.
+- Bursts are created with Remotion’s `random()` using string keys (for deterministic randomness).
+
+During playback, `getGlitchIntensity(frame, bursts)` returns:
+
+- `0` outside any burst (stable).
+- `0..1` inside a burst, using a simple envelope (fast attack, slight decay).
+
+### 2) Per-frame variation, but still reproducible
+
+Inside a burst, each frame uses a derived seed (`burst.seed + frame`) to vary offsets and jitter. With the same input `seed`, renders remain reproducible across machines and over time.
+
+### 3) RGB split using SVG filters
+
+When glitching, we render three stacked layers of the same children:
+
+- Red layer: extract red via `feColorMatrix`, then offset with `feOffset`.
+- Green layer: extract green and keep centered (acts as a stable reference).
+- Blue layer: extract blue and offset (in the opposite direction).
+
+Blur is applied only during bursts (`feGaussianBlur`) to soften harsh edges and make the split read more like “signal processing” than three crisp copies.
+
+Finally, the layers are composited with `mixBlendMode: 'screen'` so channel separation stays bright and punchy.
+
+### 4) Performance: no work when stable
+
+Outside bursts, the component returns `<AbsoluteFill>{children}</AbsoluteFill>` and applies no SVG filter work at all.
+
+### 5) Avoiding filter ID collisions
+
+Each instance uses `useId()` to build a unique filter ID, so multiple glitches can exist on the same page without clobbering each other’s SVG definitions.
+
+Implementation lives in `lib/DigitalGlitchRGB.tsx`.
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -33,29 +72,10 @@ import { DigitalGlitchRGB } from '@storybynumbers_/remotion-glitch-effect';
 | `burstDuration` | `[number, number]` | `[2, 5]` | Min/max burst length in frames |
 | `seed` | `number` | `42` | Deterministic randomization seed |
 
-## Examples
-
-**Subtle phone interference**
-```tsx
-<DigitalGlitchRGB splitAmount={3} blurAmount={0.5} burstSpacing={35}>
-  {children}
-</DigitalGlitchRGB>
-```
-
-**Aggressive glitch**
-```tsx
-<DigitalGlitchRGB splitAmount={7} jitterAmount={2.5} burstSpacing={18}>
-  {children}
-</DigitalGlitchRGB>
-```
-
-## How It Works
+## Notes
 
-- Splits RGB channels using SVG filters (`feOffset`)
-- Pre-computes burst schedule for sparse, timed glitches
-- Per-frame variation within bursts for organic feel
-- Zero overhead when stable (no filters applied)
-- Fully deterministic (reproducible renders)
+- This package targets “digital interference”: small, sparse bursts tend to look better than constant distortion.
+- If you want a consistent look across multiple shots, keep `seed` fixed per shot (or derive it from a stable ID).
 
 ## Requirements
 

package/README.npm.md

@@ -8,17 +8,27 @@ Digital glitch effect with RGB channel splitting for Remotion.
 npm install @storybynumbers_/remotion-glitch-effect
 ```
 
-## Quick use
+## Minimal use
 
 ```tsx
 import { DigitalGlitchRGB } from '@storybynumbers_/remotion-glitch-effect';
 
-<DigitalGlitchRGB splitAmount={5} blurAmount={0.8} burstSpacing={28}>
+<DigitalGlitchRGB>
   <YourContent />
 </DigitalGlitchRGB>
 ```
 
-## Props (core)
+## How it’s made (overview)
+
+- Schedules sparse “bursts” up front using Remotion’s deterministic `random()` and a `seed`.
+- During a burst, computes a quick intensity envelope and varies offsets per-frame (still deterministic).
+- Renders three layers (R/G/B) and uses SVG filters: `feColorMatrix` to isolate channels, `feOffset` for separation, optional `feGaussianBlur` for softness.
+- Composites layers with `mixBlendMode: 'screen'`.
+- Outside bursts, renders children directly (no filters applied).
+
+Implementation: `lib/DigitalGlitchRGB.tsx`.
+
+## Props
 
 - `splitAmount` (number, default 4) RGB offset in pixels
 - `blurAmount` (number, default 0.8) Blur radius

package/dist/DigitalGlitchRGB.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useId } from 'react';
-import { AbsoluteFill, random, useCurrentFrame } from 'remotion';
+import { AbsoluteFill, random, useCurrentFrame, useVideoConfig } from 'remotion';
 /**
  * Attempt to generate a burst at each spacing interval.
  * Returns array of non-overlapping bursts.
@@ -52,11 +52,11 @@ function getGlitchIntensity(frame, bursts) {
 }
 export const DigitalGlitchRGB = ({ children, splitAmount = 4, blurAmount = 0.8, jitterAmount = 1.5, burstSpacing = 25, burstDuration = [2, 5], seed = 42, }) => {
     const frame = useCurrentFrame();
+    const { durationInFrames } = useVideoConfig();
     const reactId = useId();
     const filterId = useMemo(() => `glitch-rgb-${reactId.replace(/:/g, '')}`, [reactId]);
     // Pre-generate burst schedule (memoized, doesn't change during playback)
-    // Assume max 600 frames (~20s at 30fps) for generation
-    const bursts = useMemo(() => generateBursts(600, burstSpacing, burstDuration, seed), [burstSpacing, burstDuration, seed]);
+    const bursts = useMemo(() => generateBursts(durationInFrames, burstSpacing, burstDuration, seed), [durationInFrames, burstSpacing, burstDuration, seed]);
     // Get current glitch state
     const { intensity, burst } = getGlitchIntensity(frame, bursts);
     const isGlitching = intensity > 0 && burst !== null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybynumbers_/remotion-glitch-effect",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Digital glitch effect with RGB channel splitting for Remotion",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",