@storybynumbers_/remotion-glitch-effect 1.0.0

package/README.md

@@ -0,0 +1,67 @@
+# @storybynumbers_/remotion-glitch-effect
+
+Digital glitch effect with RGB channel splitting for Remotion.
+
+## Installation
+
+```bash
+npm install @storybynumbers_/remotion-glitch-effect
+```
+
+## Usage
+
+```tsx
+import { DigitalGlitchRGB } from '@storybynumbers_/remotion-glitch-effect';
+
+<DigitalGlitchRGB
+  splitAmount={5}
+  blurAmount={0.8}
+  burstSpacing={28}
+>
+  <YourContent />
+</DigitalGlitchRGB>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `splitAmount` | `number` | `4` | RGB offset in pixels (2-8 recommended) |
+| `blurAmount` | `number` | `0.8` | Blur radius (0-2 recommended) |
+| `jitterAmount` | `number` | `1.5` | Global shake in pixels (0-3 recommended) |
+| `burstSpacing` | `number` | `25` | Average frames between bursts (15-45) |
+| `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
+
+- 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)
+
+## Requirements
+
+- `remotion`: ^4.0.0
+- `react`: ^18.0.0
+
+## License
+
+MIT

package/README.npm.md

@@ -0,0 +1,30 @@
+# @storybynumbers_/remotion-glitch-effect
+
+Digital glitch effect with RGB channel splitting for Remotion.
+
+## Install
+
+```bash
+npm install @storybynumbers_/remotion-glitch-effect
+```
+
+## Quick use
+
+```tsx
+import { DigitalGlitchRGB } from '@storybynumbers_/remotion-glitch-effect';
+
+<DigitalGlitchRGB splitAmount={5} blurAmount={0.8} burstSpacing={28}>
+  <YourContent />
+</DigitalGlitchRGB>
+```
+
+## Props (core)
+
+- `splitAmount` (number, default 4) RGB offset in pixels
+- `blurAmount` (number, default 0.8) Blur radius
+- `jitterAmount` (number, default 1.5) Global shake in pixels
+- `burstSpacing` (number, default 25) Avg frames between bursts
+- `burstDuration` ([number, number], default [2, 5]) Min/max burst length
+- `seed` (number, default 42) Deterministic randomization seed
+
+Full docs and examples: https://github.com/storybynumbers/remotion-glitch-effect#readme

package/dist/DigitalGlitchRGB.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface DigitalGlitchRGBProps {
+    children: React.ReactNode;
+    /** Max RGB offset in pixels during bursts. Range: 2-8. Default: 4 */
+    splitAmount?: number;
+    /** Blur radius during bursts. Range: 0-2. Default: 0.8 */
+    blurAmount?: number;
+    /** Global jitter in pixels. Range: 0-3. Default: 1.5 */
+    jitterAmount?: number;
+    /** Average frames between bursts. Range: 15-45. Default: 25 */
+    burstSpacing?: number;
+    /** Burst duration range [min, max] in frames. Default: [2, 5] */
+    burstDuration?: [number, number];
+    /** Seed for deterministic randomization. Default: 42 */
+    seed?: number;
+}
+export declare const DigitalGlitchRGB: React.FC<DigitalGlitchRGBProps>;
+//# sourceMappingURL=DigitalGlitchRGB.d.ts.map

package/dist/DigitalGlitchRGB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DigitalGlitchRGB.d.ts","sourceRoot":"","sources":["../lib/DigitalGlitchRGB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAU9C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAuED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuI5D,CAAC"}

package/dist/DigitalGlitchRGB.js

@@ -0,0 +1,116 @@
+import React, { useMemo, useId } from 'react';
+import { AbsoluteFill, random, useCurrentFrame } from 'remotion';
+/**
+ * Attempt to generate a burst at each spacing interval.
+ * Returns array of non-overlapping bursts.
+ */
+function generateBursts(totalFrames, spacing, durationRange, seed) {
+    const bursts = [];
+    let frame = 0;
+    let burstIndex = 0;
+    while (frame < totalFrames) {
+        const burstSeed = seed + burstIndex * 1000;
+        // Jitter the start time within the spacing window
+        const jitter = Math.floor((random(`burst-jitter-${burstSeed}`) - 0.5) * spacing * 0.6);
+        const startFrame = Math.max(0, frame + Math.floor(spacing / 2) + jitter);
+        // Random duration within range
+        const duration = Math.floor(durationRange[0] +
+            random(`burst-dur-${burstSeed}`) * (durationRange[1] - durationRange[0]));
+        // Vary peak intensity (0.6 - 1.0)
+        const peakIntensity = 0.6 + random(`burst-peak-${burstSeed}`) * 0.4;
+        if (startFrame < totalFrames) {
+            bursts.push({ startFrame, duration, peakIntensity, seed: burstSeed });
+        }
+        frame = startFrame + duration + Math.floor(spacing * 0.3); // Gap before next possible burst
+        burstIndex++;
+    }
+    return bursts;
+}
+/**
+ * Calculate glitch intensity g(t) for current frame.
+ * Returns 0 when stable, 0-1 during bursts.
+ * Fast attack, slightly slower decay.
+ */
+function getGlitchIntensity(frame, bursts) {
+    for (const burst of bursts) {
+        const { startFrame, duration, peakIntensity } = burst;
+        const endFrame = startFrame + duration;
+        if (frame >= startFrame && frame < endFrame) {
+            const localFrame = frame - startFrame;
+            // Fast attack (1 frame), plateau, slight decay (1 frame)
+            let envelope = 1;
+            if (localFrame === 0) {
+                envelope = 0.7; // Quick ramp in
+            }
+            else if (localFrame === duration - 1 && duration > 2) {
+                envelope = 0.5; // Slight decay out
+            }
+            return { intensity: peakIntensity * envelope, burst };
+        }
+    }
+    return { intensity: 0, burst: null };
+}
+export const DigitalGlitchRGB = ({ children, splitAmount = 4, blurAmount = 0.8, jitterAmount = 1.5, burstSpacing = 25, burstDuration = [2, 5], seed = 42, }) => {
+    const frame = useCurrentFrame();
+    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]);
+    // Get current glitch state
+    const { intensity, burst } = getGlitchIntensity(frame, bursts);
+    const isGlitching = intensity > 0 && burst !== null;
+    // Per-frame noise for variation within bursts
+    const frameSeed = burst ? burst.seed + frame : seed + frame;
+    // RGB channel offsets (unequal to avoid pure "camera shake" look)
+    // Red shifts right/up, Blue shifts left/down, Green stays centered
+    const redOffsetX = isGlitching
+        ? intensity * splitAmount * (0.8 + random(`r-ox-${frameSeed}`) * 0.4)
+        : 0;
+    const redOffsetY = isGlitching
+        ? intensity * splitAmount * 0.3 * (random(`r-oy-${frameSeed}`) - 0.3)
+        : 0;
+    const blueOffsetX = isGlitching
+        ? -intensity * splitAmount * (0.8 + random(`b-ox-${frameSeed}`) * 0.4)
+        : 0;
+    const blueOffsetY = isGlitching
+        ? intensity * splitAmount * 0.3 * (random(`b-oy-${frameSeed}`) - 0.7)
+        : 0;
+    // Global micro-jitter (applies to whole image)
+    const globalJitterX = isGlitching
+        ? intensity * jitterAmount * (random(`jit-x-${frameSeed}`) * 2 - 1)
+        : 0;
+    const globalJitterY = isGlitching
+        ? intensity * jitterAmount * (random(`jit-y-${frameSeed}`) * 2 - 1)
+        : 0;
+    // Small scale pulse during bursts
+    const scalePulse = isGlitching
+        ? 1 + intensity * 0.003 * (random(`scale-${frameSeed}`) * 2 - 1)
+        : 1;
+    // Blur radius
+    const blur = isGlitching ? intensity * blurAmount : 0;
+    // When not glitching, render children directly (no filter overhead)
+    if (!isGlitching) {
+        return React.createElement(AbsoluteFill, null, children);
+    }
+    return (React.createElement(AbsoluteFill, null,
+        React.createElement("svg", { style: { position: 'absolute', width: 0, height: 0 } },
+            React.createElement("defs", null,
+                React.createElement("filter", { id: `${filterId}-red`, x: "-10%", y: "-10%", width: "120%", height: "120%" },
+                    React.createElement("feColorMatrix", { type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0" }),
+                    React.createElement("feOffset", { dx: redOffsetX, dy: redOffsetY }),
+                    blur > 0 && React.createElement("feGaussianBlur", { stdDeviation: blur * 0.5 })),
+                React.createElement("filter", { id: `${filterId}-green` },
+                    React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0" }),
+                    blur > 0 && React.createElement("feGaussianBlur", { stdDeviation: blur * 0.3 })),
+                React.createElement("filter", { id: `${filterId}-blue`, x: "-10%", y: "-10%", width: "120%", height: "120%" },
+                    React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0" }),
+                    React.createElement("feOffset", { dx: blueOffsetX, dy: blueOffsetY }),
+                    blur > 0 && React.createElement("feGaussianBlur", { stdDeviation: blur * 0.5 })))),
+        React.createElement(AbsoluteFill, { style: {
+                transform: `translate(${globalJitterX}px, ${globalJitterY}px) scale(${scalePulse})`,
+            } },
+            React.createElement(AbsoluteFill, { style: { filter: `url(#${filterId}-red)`, mixBlendMode: 'screen' } }, children),
+            React.createElement(AbsoluteFill, { style: { filter: `url(#${filterId}-green)`, mixBlendMode: 'screen' } }, children),
+            React.createElement(AbsoluteFill, { style: { filter: `url(#${filterId}-blue)`, mixBlendMode: 'screen' } }, children))));
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DigitalGlitchRGB } from './DigitalGlitchRGB';
+export type { DigitalGlitchRGBProps } from './DigitalGlitchRGB';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { DigitalGlitchRGB } from './DigitalGlitchRGB';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@storybynumbers_/remotion-glitch-effect",
+  "version": "1.0.0",
+  "description": "Digital glitch effect with RGB channel splitting for Remotion",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.npm.md"
+  ],
+  "scripts": {
+    "start": "remotion preview src/index.tsx",
+    "preview": "remotion preview src/index.tsx",
+    "render": "remotion render src/index.tsx",
+    "build": "remotion build src/index.tsx",
+    "build:lib": "tsc -p tsconfig.lib.json",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "keywords": [
+    "remotion",
+    "glitch",
+    "rgb",
+    "effect",
+    "video",
+    "vfx"
+  ],
+  "author": "Story by Numbers",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybynumbers/remotion-glitch-effect.git"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "remotion": "^4.0.0"
+  },
+  "devDependencies": {
+    "@remotion/cli": "^4.0.0",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remotion": "^4.0.0",
+    "typescript": "^5.3.3"
+  }
+}