react-video-ascii 1.0.0

package/README.md

@@ -0,0 +1,126 @@
+# react-video-ascii
+
+React component optimized for rendering videos as ASCII using WebGL2. 
+
+<p align="center">
+  <img width="1512" height="949" alt="demo" src="https://github.com/user-attachments/assets/2b41b0af-e864-430d-ade5-0249335d1aac" />
+</p> 
+
+[Try it out!](https://video-ascii-demo.vercel.app/)
+
+## Installation
+
+```bash
+npm install react-video-ascii
+```
+
+## Usage
+
+```tsx
+import { VideoAscii } from 'react-video-ascii';
+
+// Basic usage
+<VideoAscii src="/video.mp4" />
+
+// Multiple videos (loop sequentially)
+const sources = ['/video1.mp4', '/video2.mp4'];
+<VideoAscii src={sources} />
+
+// With options
+<VideoAscii
+  src="/video.mp4"
+  videoMode={false}
+  numColsRaw={150}
+  brightnessRaw={1.2}
+  saturationRaw={1.0}
+  bgOpacityRaw={0.3}
+  chars=" `.',-_:!abcdef"
+  charMode="shape"
+  mouseEffect={{
+    style: 'brighten',
+    radius: 0.08,
+    duration: 1.0,
+    trailLen: 15,
+    trailDecay: 10,
+    brightness: 2.0,
+  }}
+  clickEffect={{
+    style: 'ripple',
+    brightness: 1.1,
+    speed: 2,
+  }}
+  revealEffect={{
+    type: 'random',
+    duration: 0.4,
+  }}
+  className="my-ascii"
+/>
+```
+
+> **Note 1:** When passing an array to `src`, define it outside the component or in a `useMemo`/`useRef` (an inline array literal creates a new reference on every render and will cause the video to reload).
+
+> **Note 2:** The component fills its parent container. Control size via the parent element or the `className` prop.
+
+## Props
+
+| Prop | Type | Default | Range | Description |
+|------|------|---------|-------|-------------|
+| `src` | `string \| string[]` | — | — | Video source URL(s). Multiple URLs play sequentially. |
+| `videoMode` | `boolean` | `false` | — | Show original video colors instead of ASCII. |
+| `numColsRaw` | `number` | `250` | `20–350` | Number of character columns. |
+| `brightnessRaw` | `number` | `1.0` | `0.0–2.0` | Brightness multiplier. |
+| `saturationRaw` | `number` | `1.0` | `0.0–2.0` | Saturation multiplier. |
+| `bgOpacityRaw` | `number` | `0.3` | `0.0–1.0` | Background opacity. |
+| `chars` | `string` | *(standard)* | — | Character set, ordered dark to bright. |
+| `charMode` | `'shape' \| 'luminance'` | `'shape'` | — | `shape` matches glyph silhouettes; `luminance` uses brightness. |
+| `mouseEffect` | `boolean \| MouseEffectOptions` | `true` | — | Mouse hover effects. `true` uses defaults. |
+| `clickEffect` | `boolean \| ClickEffectOptions` | `true` | — | Click effects. `true` uses defaults. |
+| `revealEffect` | `boolean \| RevealEffectOptions` | `false` | — | Reveal animation on load. `true` uses defaults. |
+| `className` | `string` | — | — | CSS class on the outer container. |
+
+---
+
+### `MouseEffectOptions`
+
+Passed to `mouseEffect`. All fields optional.
+
+| Field | Type | Default | Range | Description |
+|-------|------|---------|-------|-------------|
+| `style` | `'brighten' \| 'scatter'` | `'brighten'` | — | `brighten` highlights chars; `scatter` replaces them. |
+| `radius` | `number` | `0.08` / `0.05` | `0.03–0.2` | Effect radius as a fraction of the smaller canvas dimension. |
+| `duration` | `number` | `1.0` | `0.1–4` | Seconds the effect lingers after the cursor leaves. |
+| `trailLen` | `number` | `15` | `0–30` | *(brighten)* Trail positions tracked. |
+| `trailDecay` | `number` | `10` | `1–15` | *(brighten)* How fast older trail positions fade. |
+| `brightness` | `number` | `2.0` | `0.2–5.0` | *(brighten)* Brightness boost at the cursor. |
+| `scatterChars` | `string` | `'->o'` | — | *(scatter)* Chars substituted near the cursor. |
+
+---
+
+### `ClickEffectOptions`
+
+Passed to `clickEffect`. All fields optional.
+
+| Field | Type | Default | Range | Description |
+|-------|------|---------|-------|-------------|
+| `style` | `'ripple' \| 'spread'` | `'ripple'` | — | `ripple` sends a brightness ring outward; `spread` expands a scatter region. |
+| `brightness` | `number` | `1.1` | `1.05–2.0` | *(ripple)* Brightness of the ripple ring. |
+| `speed` | `number` | `2` | `0.5–4.0` | *(ripple)* Ripple expansion speed. |
+| `spreadExpandDuration` | `number` | `1.5` | `0.5–5.0` | *(spread)* Seconds for the region to fully expand. |
+| `spreadSpeed` | `number` | `7.5` | `0.5–10.0` | *(spread)* Speed of the spread wave front. |
+
+---
+
+### `RevealEffectOptions`
+
+Passed to `revealEffect`. All fields optional.
+
+| Field | Type | Default | Range | Description |
+|-------|------|---------|-------|-------------|
+| `type` | `'diagonal' \| 'radial' \| 'random'` | `'random'` | — | Pattern in which characters appear on load. |
+| `duration` | `number` | `0.4` | `0.1–4` | Reveal animation duration in seconds. |
+
+---
+
+### `chars`
+
+The default `chars` set is: `` `.',-_:!;|\"~+^lr[](\\/L)>t<v=Tz?icf1{sIxY*jJno}CZyVwmSXRqM$O%#9&NW0Q@``.

package/dist/components/VideoAscii.d.ts

@@ -0,0 +1,3 @@
+import { Props } from '../lib/ascii-props';
+declare function VideoAscii({ src, videoMode, numColsRaw, brightnessRaw, saturationRaw, bgOpacityRaw, revealEffect, chars, mouseEffect, clickEffect, charMode, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default VideoAscii;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VideoAscii } from './components/VideoAscii';
+export type { Props } from './lib/ascii-props';

package/dist/lib/ascii-props.d.ts

@@ -0,0 +1,62 @@
+export declare const DEFAULT_CHARS = " `.',-_:!;|\"~+^lr[](\\/L)>t<v=Tz?icf1{sIxY*jJno}CZyVwmSXRqM$O%#9&NW0Q@";
+export interface MouseEffectOptions {
+    style?: 'brighten' | 'scatter';
+    radius?: number;
+    duration?: number;
+    trailLen?: number;
+    trailDecay?: number;
+    brightness?: number;
+    scatterChars?: string;
+}
+export interface ClickEffectOptions {
+    style?: 'ripple' | 'spread';
+    brightness?: number;
+    speed?: number;
+    spreadExpandDuration?: number;
+    spreadSpeed?: number;
+}
+export interface RevealEffectOptions {
+    type?: 'diagonal' | 'radial' | 'random';
+    duration?: number;
+}
+export interface Props {
+    src: string | string[];
+    videoMode?: boolean;
+    numColsRaw?: number;
+    brightnessRaw?: number;
+    saturationRaw?: number;
+    bgOpacityRaw?: number;
+    revealEffect?: boolean | RevealEffectOptions;
+    chars?: string;
+    mouseEffect?: boolean | MouseEffectOptions;
+    clickEffect?: boolean | ClickEffectOptions;
+    charMode?: 'shape' | 'luminance';
+    className?: string;
+}
+export interface ParsedProps {
+    numCols: number;
+    brightness: number;
+    saturation: number;
+    bgOpacity: number;
+    mouseEnabled: boolean;
+    mouseStyle: 'brighten' | 'scatter';
+    brightenEnabled: boolean;
+    scatterEnabled: boolean;
+    scatterChars: string;
+    trailLen: number;
+    trailDecay: number;
+    duration: number;
+    mouseRadius: number;
+    mouseBrightness: number;
+    clickEnabled: boolean;
+    clickBrightness: number;
+    clickSpeed: number;
+    spreadEnabled: boolean;
+    spreadExpandDuration: number;
+    spreadSpeed: number;
+    revealEnabled: boolean;
+    revealType: string;
+    revealDuration: number;
+    revealEffectFlag: number;
+}
+export declare function parseProps(numColsRaw: number, brightnessRaw: number, saturationRaw: number, bgOpacityRaw: number, mouseEffect: boolean | MouseEffectOptions, clickEffect: boolean | ClickEffectOptions, revealEffect: boolean | RevealEffectOptions): ParsedProps;

package/dist/lib/ascii-utils.d.ts

@@ -0,0 +1,7 @@
+declare const CIRCLES: number[][];
+declare const SIMPLE_CIRCLES: number[][];
+declare function computeShapeVectors(chars: string, charW: number, charH: number): {
+    char: string;
+    vector: number[];
+}[];
+export { computeShapeVectors, CIRCLES, SIMPLE_CIRCLES };

package/dist/lib/brighten-effect.d.ts

@@ -0,0 +1,19 @@
+interface MouseTrailRefs {
+    brightenEnabledRef: {
+        current: boolean;
+    };
+    trailLenRef: {
+        current: number;
+    };
+    durationRef: {
+        current: number;
+    };
+    trailDecayRef: {
+        current: number;
+    };
+}
+export declare function createMouseTrail({ brightenEnabledRef, trailLenRef, durationRef, trailDecayRef, }: MouseTrailRefs): {
+    handleMouseMove(x: number, y: number, t: number): void;
+    tick(gl: WebGL2RenderingContext, mousePositionsLoc: WebGLUniformLocation | null, mouseLifeFracsLoc: WebGLUniformLocation | null): void;
+};
+export {};

package/dist/lib/click-effect.d.ts

@@ -0,0 +1,16 @@
+interface ClickEffectRefs {
+    clickEnabledRef: {
+        current: boolean;
+    };
+    clickSpeedRef: {
+        current: number;
+    };
+    clickBrightnessRef: {
+        current: number;
+    };
+}
+export declare function createClickEffect({ clickEnabledRef, clickSpeedRef, clickBrightnessRef, }: ClickEffectRefs): {
+    handleClick(e: MouseEvent, canvas: HTMLCanvasElement): void;
+    tick(gl: WebGL2RenderingContext, canvas: HTMLCanvasElement, ripplePositionsLoc: WebGLUniformLocation | null, rippleRadiiLoc: WebGLUniformLocation | null, rippleBrightnessesLoc: WebGLUniformLocation | null): void;
+};
+export {};

package/dist/lib/create-gl-resources.d.ts

@@ -0,0 +1,49 @@
+export interface GLResources {
+    program: WebGLProgram;
+    pass1Program: WebGLProgram;
+    buffer: WebGLBuffer;
+    vertShader: WebGLShader;
+    fragShader: WebGLShader;
+    pass1FragShader: WebGLShader;
+    texture: WebGLTexture;
+    atlasTexture: WebGLTexture;
+    charVectorsTexture: WebGLTexture;
+    fboTexture: WebGLTexture;
+    fbo: WebGLFramebuffer;
+    scatterAtlasTexture: WebGLTexture;
+    scatterStateTexture: WebGLTexture;
+    spreadStateTexture: WebGLTexture;
+    p1ResLoc: WebGLUniformLocation | null;
+    p1CellsizeLoc: WebGLUniformLocation | null;
+    p1CircleNLoc: WebGLUniformLocation | null;
+    p1NumCharsLoc: WebGLUniformLocation | null;
+    p1ExponentLoc: WebGLUniformLocation | null;
+    p1CropOffsetLoc: WebGLUniformLocation | null;
+    p1CropScaleLoc: WebGLUniformLocation | null;
+    revealEffectFlagLoc: WebGLUniformLocation | null;
+    mouseEffectFlagLoc: WebGLUniformLocation | null;
+    clickEffectFlagLoc: WebGLUniformLocation | null;
+    shapeMatchingLoc: WebGLUniformLocation | null;
+    revealProgressLoc: WebGLUniformLocation | null;
+    brightnessLoc: WebGLUniformLocation | null;
+    saturationLoc: WebGLUniformLocation | null;
+    bgOpacityLoc: WebGLUniformLocation | null;
+    mouseBrightnessLoc: WebGLUniformLocation | null;
+    mousePositionsLoc: WebGLUniformLocation | null;
+    mouseLifeFracsLoc: WebGLUniformLocation | null;
+    mouseRadiusLoc: WebGLUniformLocation | null;
+    ripplePositionsLoc: WebGLUniformLocation | null;
+    rippleRadiiLoc: WebGLUniformLocation | null;
+    rippleBrightnessesLoc: WebGLUniformLocation | null;
+    scatterEffectFlagLoc: WebGLUniformLocation | null;
+    scatterNumCharsLoc: WebGLUniformLocation | null;
+    spreadEffectFlagLoc: WebGLUniformLocation | null;
+    videoModeLoc: WebGLUniformLocation | null;
+    resLoc: WebGLUniformLocation | null;
+    sizeLoc: WebGLUniformLocation | null;
+    numLoc: WebGLUniformLocation | null;
+    gridSizeLoc: WebGLUniformLocation | null;
+    cropOffsetLoc: WebGLUniformLocation | null;
+    cropScaleLoc: WebGLUniformLocation | null;
+}
+export declare function createGLResources(gl: WebGL2RenderingContext): GLResources | null;

package/dist/lib/scatter-effect.d.ts

@@ -0,0 +1,22 @@
+interface ScatterRefs {
+    scatterEnabledRef: {
+        current: boolean;
+    };
+    mouseRadiusRef: {
+        current: number;
+    };
+    durationRef: {
+        current: number;
+    };
+    scatterCharsRef: {
+        current: string;
+    };
+}
+export declare function createScatterEffect({ scatterEnabledRef, mouseRadiusRef, durationRef, scatterCharsRef, }: ScatterRefs): {
+    setup(gl: WebGL2RenderingContext, cols: number, rows: number, cw: number, ch: number, scatterStateTexture: WebGLTexture): void;
+    handleMouseMove(x: number, y: number, t: number): void;
+    handleMouseLeave(): void;
+    reset(gl: WebGL2RenderingContext): void;
+    tick(gl: WebGL2RenderingContext, canvas: HTMLCanvasElement): void;
+};
+export {};

package/dist/lib/spread-effect.d.ts

@@ -0,0 +1,20 @@
+interface SpreadRefs {
+    spreadEnabledRef: {
+        current: boolean;
+    };
+    scatterCharsRef: {
+        current: string;
+    };
+    spreadExpandDurationRef: {
+        current: number;
+    };
+    spreadSpeedRef: {
+        current: number;
+    };
+}
+export declare function createSpreadEffect({ spreadEnabledRef, scatterCharsRef, spreadExpandDurationRef, spreadSpeedRef, }: SpreadRefs): {
+    setup(gl: WebGL2RenderingContext, cols: number, rows: number, cw: number, ch: number, spreadStateTexture: WebGLTexture): void;
+    handleClick(e: MouseEvent, canvas: HTMLCanvasElement): void;
+    tick(gl: WebGL2RenderingContext): void;
+};
+export {};

package/dist/lib/webgl-utils.d.ts

@@ -0,0 +1,3 @@
+declare function createShader(gl: WebGLRenderingContext, type: number, src: string): WebGLShader | null;
+declare function createProgram(gl: WebGLRenderingContext, vert: WebGLShader, frag: WebGLShader): WebGLProgram | null;
+export { createProgram, createShader };

package/dist/react-video-ascii.js

@@ -0,0 +1,513 @@
+import { useEffect as e, useRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/lib/ascii-utils.ts
+var i = [
+	[.25, .25],
+	[.75, .25],
+	[.25, .5],
+	[.75, .5],
+	[.25, .75],
+	[.75, .75]
+];
+function a(e, t, n) {
+	let r = [], a = document.createElement("canvas");
+	a.width = t, a.height = n;
+	let o = a.getContext("2d", { willReadFrequently: !0 });
+	if (!o) return [];
+	o.font = `${n}px monospace`, o.textBaseline = "top";
+	let s = t / 5;
+	for (let a of e) {
+		o.fillStyle = "black", o.fillRect(0, 0, t, n), o.fillStyle = "white", o.fillText(a, 0, 0);
+		let e = o.getImageData(0, 0, t, n), c = [];
+		for (let [r, a] of i) {
+			let i = r * t, o = a * n, l = 0, u = 0;
+			for (let n = Math.floor(i - s); n <= Math.ceil(i + s); n += 1) for (let r = Math.floor(o - s); r <= Math.ceil(o + s); r += 1) {
+				let a = i - n, c = o - r;
+				if (a * a + c * c <= s * s) {
+					let i = (r * t + n) * 4, a = e.data[i];
+					l += a / 255, u++;
+				}
+			}
+			let d = u > 0 ? l / u : 0;
+			c.push(d);
+		}
+		r.push({
+			char: a,
+			vector: c
+		});
+	}
+	let c = [
+		,
+		,
+		,
+		,
+		,
+		,
+	].fill(0);
+	for (let { vector: e } of r) for (let t = 0; t < 6; ++t) e[t] > c[t] && (c[t] = e[t]);
+	for (let { vector: e } of r) for (let t = 0; t < 6; ++t) e[t] /= c[t];
+	return r;
+}
+//#endregion
+//#region src/lib/ascii-props.ts
+var o = " `.',-_:!;|\"~+^lr[](\\/L)>t<v=Tz?icf1{sIxY*jJno}CZyVwmSXRqM$O%#9&NW0Q@";
+function s(e, t, n, r, i, a, o) {
+	let s = !!i, c = typeof i == "object" ? i : {}, l = c.style ?? "brighten", u = s && l !== "scatter", d = s && l === "scatter", f = c.scatterChars ?? "->o", p = c.trailLen ?? 15, m = c.trailDecay ?? 10, h = c.duration ?? 1, g = c.radius ?? (l === "scatter" ? .05 : .08), _ = c.brightness ?? 2, v = !!a, y = typeof a == "object" ? a : {}, b = y.style ?? "ripple", x = v && b !== "spread", S = v && b === "spread", C = y.brightness ?? 1.1, w = y.speed ?? 2, T = y.spreadExpandDuration ?? 1.5, E = y.spreadSpeed ?? 7.5, D = !!o, O = typeof o == "object" ? o : {}, k = O.type ?? "random", A = O.duration ?? .4, j = Math.max(20, Math.min(350, Math.round(e))), M = Math.max(0, Math.min(2, t)), N = Math.max(0, Math.min(2, n)), P = Math.max(0, Math.min(1, r));
+	A = Math.max(.1, Math.min(4, A)), p = Math.max(0, Math.min(30, Math.round(p))), m = Math.max(1, Math.min(15, m)), h = Math.max(.1, Math.min(4, h)), g = Math.max(.03, Math.min(.2, g)), _ = Math.max(.2, Math.min(5, _)), C = Math.max(1.05, Math.min(2, C)), w = Math.max(.5, Math.min(4, w)), T = Math.max(.5, Math.min(5, T)), E = Math.max(.5, Math.min(10, E));
+	let F;
+	return F = D ? k === "diagonal" ? 1 : k === "radial" ? 2 : 3 : 0, {
+		numCols: j,
+		brightness: M,
+		saturation: N,
+		bgOpacity: P,
+		mouseEnabled: s,
+		mouseStyle: l,
+		brightenEnabled: u,
+		scatterEnabled: d,
+		scatterChars: f,
+		trailLen: p,
+		trailDecay: m,
+		duration: h,
+		mouseRadius: g,
+		mouseBrightness: _,
+		clickEnabled: x,
+		clickBrightness: C,
+		clickSpeed: w,
+		spreadEnabled: S,
+		spreadExpandDuration: T,
+		spreadSpeed: E,
+		revealEnabled: D,
+		revealType: k,
+		revealDuration: A,
+		revealEffectFlag: F
+	};
+}
+//#endregion
+//#region src/lib/webgl-utils.ts
+function c(e, t, n) {
+	let r = e.createShader(t);
+	if (!r) throw Error("Failed to create shader");
+	return e.shaderSource(r, n), e.compileShader(r), e.getShaderParameter(r, e.COMPILE_STATUS) ? r : (console.log(e.getShaderInfoLog(r)), e.deleteShader(r), null);
+}
+function l(e, t, n) {
+	let r = e.createProgram();
+	return e.attachShader(r, t), e.attachShader(r, n), e.linkProgram(r), e.getProgramParameter(r, e.LINK_STATUS) ? r : (console.log(e.getProgramInfoLog(r)), e.deleteProgram(r), null);
+}
+//#endregion
+//#region src/shaders/vertex.glsl
+var u = "#version 300 es\n\nin vec2 a_position;\n\nvoid main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n}", d = "#version 300 es\n\nprecision highp float;\nprecision highp usampler2D;\n\nuniform int u_revealEffectFlag;\nuniform bool u_videoMode;\n\nuniform float u_revealProgress;\nuniform float u_brightness;\nuniform float u_saturation;\nuniform float u_bgOpacity;\n\nuniform bool u_mouseEffect;\n#define MOUSE_TRAIL_LEN 30 \nuniform vec2 u_mousePositions[MOUSE_TRAIL_LEN];\nuniform float u_mouseLifeFracs[MOUSE_TRAIL_LEN]; \nuniform float u_mouseRadius;\nuniform float u_mouseBrightness;\n\nuniform bool u_clickEffect;\n#define MAX_RIPPLES 10\nuniform vec2 u_ripplePositions[MAX_RIPPLES];\nuniform float u_rippleRadii[MAX_RIPPLES]; \nuniform float u_rippleBrightnesses[MAX_RIPPLES]; \n\nuniform bool u_scatterEffect;\nuniform usampler2D u_scatterStateTexture; \nuniform sampler2D u_scatterAtlas;          \nuniform float u_scatterNumChars;\n\nuniform bool u_spreadEffect;\nuniform usampler2D u_spreadStateTexture;\n\nuniform bool u_shapeMatching;\n\nuniform sampler2D u_texture;\nuniform sampler2D u_atlas;\nuniform usampler2D u_fboTexture;\nuniform vec2 u_resolution;\nuniform vec2 u_cellsize;\nuniform float u_numChars;\nuniform vec2 u_gridSize;\nuniform vec2 u_cropOffset;\nuniform vec2 u_cropScale;\n\nout vec4 fragColor;\n\nfloat hash(vec2 p) {\n    vec3 p3 = fract(vec3(p.xyx) * 0.1031); \n    p3 += dot(p3, p3.yzx + 33.33); \n    return fract((p3.x + p3.y) * p3.z); \n}\n\nvec3 rgb2hsl(vec3 c) {\n    float maxC = max(c.r, max(c.g, c.b));\n    float minC = min(c.r, min(c.g, c.b));\n    float l = (maxC + minC) * 0.5;\n    float d = maxC - minC;\n    float h = 0.0, s = 0.0;\n    if (d > 0.0) {\n        s = d / (1.0 - abs(2.0 * l - 1.0));\n        if (maxC == c.r) h = mod((c.g - c.b) / d, 6.0) / 6.0;\n        else if (maxC == c.g) h = ((c.b - c.r) / d + 2.0) / 6.0;\n        else h = ((c.r - c.g) / d + 4.0) / 6.0;\n    }\n    return vec3(h, s, l);\n}\n\nvec3 hsl2rgb(vec3 c) {\n    float h = c.x, s = c.y, l = c.z;\n    float a = s * (1.0 - abs(2.0 * l - 1.0));\n    vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);\n    return l + a * (rgb - 0.5);\n}\n\nvoid main() {\n    vec2 fragCoord = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y); \n    vec2 cellCoord = floor(fragCoord / u_cellsize);\n\n    if (u_revealEffectFlag == 1) {\n        \n        float revealThreshold = (cellCoord.x + cellCoord.y) / (u_gridSize.x + u_gridSize.y - 2.0);\n        if (revealThreshold > u_revealProgress) {\n            fragColor = vec4(0.0, 0.0, 0.0, 1.0);\n            return;\n        }\n    } else if (u_revealEffectFlag == 2) {\n        float dist = length(cellCoord / u_gridSize - vec2(0.5));\n        float revealThreshold = dist / 0.7071; \n        if (revealThreshold > u_revealProgress) {\n            fragColor = vec4(0.0, 0.0, 0.0, 1.0);\n            return;\n        }\n    } else if (u_revealEffectFlag == 3) {\n        float revealThreshold = hash(cellCoord);\n        if (revealThreshold > u_revealProgress) {\n            fragColor = vec4(0.0, 0.0, 0.0, 1.0);\n            return;\n        }\n    }\n\n    vec2 cellCenter = (cellCoord + 0.5) * u_cellsize; \n    \n    vec2 rawUV = u_videoMode ? (fragCoord / u_resolution) : (cellCenter / u_resolution);\n    vec2 sampleUV = u_cropOffset + rawUV * u_cropScale;\n\n    vec3 cellColor = texture(u_texture, sampleUV).rgb;\n    float luminosity = dot(cellColor, vec3(0.299, 0.587, 0.114)); \n    vec3 hsl = rgb2hsl(cellColor);\n    hsl.z = clamp(hsl.z * u_brightness, 0.0, 1.0);\n    hsl.y = clamp(hsl.y * u_saturation, 0.0, 1.0);\n    cellColor = hsl2rgb(hsl);\n\n    vec2 withinCellPos = fract(fragCoord / u_cellsize);\n\n    \n    float glyphMask = 0.0;\n    if (!u_videoMode) {\n        uint charInd;\n        if (u_shapeMatching) {\n            charInd = texelFetch(u_fboTexture, ivec2(cellCoord), 0).r;\n        } else {\n            charInd = uint(floor(luminosity * (u_numChars - 1.0)));\n        }\n        float atlasU = (float(charInd) + withinCellPos.x) / u_numChars;\n        float atlasV = withinCellPos.y;\n        glyphMask = texture(u_atlas, vec2(atlasU, atlasV)).r;\n    }\n\n    vec3 bgColor = cellColor * u_bgOpacity;\n\n    bool scatterHit = false;\n    vec3 scatterColor = vec3(0.0);\n    if (u_scatterEffect) {\n        uint state = texelFetch(u_scatterStateTexture, ivec2(cellCoord), 0).r;\n        if (state > 0u) {\n            int idx = int(state) - 1;\n            float su = (float(idx) + withinCellPos.x) / u_scatterNumChars;\n            float mask = texture(u_scatterAtlas, vec2(su, withinCellPos.y)).r;\n            \n            vec3 scatterBg = u_videoMode ? cellColor : bgColor;\n            scatterColor = mix(scatterBg, vec3(1.0), mask);\n            scatterHit = true;\n        }\n    }\n    \n    if (!scatterHit && u_spreadEffect) { \n        uint state = texelFetch(u_spreadStateTexture, ivec2(cellCoord), 0).r;\n        if (state > 0u) {\n            int idx = int(state) - 1;\n            float su = (float(idx) + withinCellPos.x) / u_scatterNumChars;\n            float mask = texture(u_scatterAtlas, vec2(su, withinCellPos.y)).r;\n            vec3 scatterBg = u_videoMode ? cellColor : bgColor;\n            scatterColor = mix(scatterBg, vec3(1.0), mask);\n            scatterHit = true;\n        }\n    }\n\n    vec3 finalColor;\n    if (scatterHit) {\n        finalColor = scatterColor;\n    } else {\n        finalColor = u_videoMode ? cellColor : mix(bgColor, cellColor, glyphMask);\n\n        if (u_mouseEffect) {\n            bool inside = false;\n            for (int i = 0; i < MOUSE_TRAIL_LEN; i++) {\n                if (u_mouseLifeFracs[i] <= 0.0) {\n                    continue;\n                }\n                float r = u_mouseRadius * u_mouseLifeFracs[i];\n                if (distance(cellCenter, u_mousePositions[i]) < r) {\n                    inside = true;\n                    break;\n                }\n            }\n            if (inside) {\n                finalColor = clamp(finalColor * u_mouseBrightness, 0.0, 1.0);\n            }\n        }\n\n        if (u_clickEffect) {\n            float boost = 1.0;\n            for (int i = 0; i < MAX_RIPPLES; i++) {\n                if (u_rippleBrightnesses[i] <= 1.0) {\n                    continue;\n                }\n                if (distance(cellCenter, u_ripplePositions[i]) < u_rippleRadii[i]) {\n                    boost *= u_rippleBrightnesses[i];\n                }\n            }\n            if (boost > 1.0) {\n                finalColor = clamp(finalColor * boost, 0.0, 1.0);\n            }\n        }\n    }\n\n    fragColor = vec4(finalColor, 1.0);\n}", f = "#version 300 es\n\nprecision highp float;\nprecision highp usampler2D;\n\nuniform sampler2D u_texture;\nuniform vec2 u_resolution;\nuniform vec2 u_cellsize;\nuniform int u_circleN;\nuniform sampler2D u_charVectors;\nuniform int u_numCharsInt;\nuniform float u_shapeExponent;\nuniform vec2 u_cropOffset;\nuniform vec2 u_cropScale;\n\nout uvec4 fragCharInd;\n\nvoid main() {\n    \n    ivec2 cellCoord = ivec2(floor(gl_FragCoord.xy));\n\n    const vec2 CIRCLES[6] = vec2[6](\n        vec2(0.25, 0.25), vec2(0.75, 0.25),\n        vec2(0.25, 0.50), vec2(0.75, 0.50),\n        vec2(0.25, 0.75), vec2(0.75, 0.75)\n    );\n    vec2 radiusUV = vec2(u_cellsize.x / 5.0) / u_resolution * u_cropScale; \n\n    float sv[6];\n    for (int ci = 0; ci < 6; ci++) {\n        \n        vec2 centerUV = u_cropOffset + (vec2(cellCoord) + CIRCLES[ci]) * u_cellsize / u_resolution * u_cropScale;\n        float total = 0.0;\n        int count = 0;\n        for (int dx = -u_circleN; dx <= u_circleN; dx++) {\n            for (int dy = -u_circleN; dy <= u_circleN; dy++) {\n                if (dx*dx + dy*dy <= u_circleN*u_circleN) {\n                    vec2 sampleUV = centerUV + vec2(float(dx), float(dy)) * radiusUV / float(u_circleN);\n                    vec3 sc = texture(u_texture, sampleUV).rgb;\n                    total += dot(sc, vec3(0.299, 0.587, 0.114));\n                    count++;\n                }\n            }\n        }\n        \n        sv[ci] = count > 0 ? total / float(count) : 0.0;\n    }\n\n    float maxVal = 0.0;\n    for (int d = 0; d < 6; d++) maxVal = max(maxVal, sv[d]);\n    if (maxVal > 0.0) {\n        for (int d = 0; d < 6; d++) sv[d] = pow(sv[d] / maxVal, u_shapeExponent) * maxVal;\n    }\n\n    \n    uint bestChar = 0u;\n    float bestDist = 1e10;\n    for (int i = 0; i < u_numCharsInt; i++) {\n        vec4 r0 = texelFetch(u_charVectors, ivec2(i, 0), 0);\n        vec4 r1 = texelFetch(u_charVectors, ivec2(i, 1), 0);\n        float dist = 0.0;\n        float diffs[6] = float[6](\n            sv[0] - r0.r, sv[1] - r0.g, sv[2] - r0.b, sv[3] - r0.a,\n            sv[4] - r1.r, sv[5] - r1.g\n        );\n        for (int d = 0; d < 6; d++) {\n            dist += diffs[d] * diffs[d];\n        }\n        if (dist < bestDist) { \n            bestDist = dist; bestChar = uint(i); \n        }\n    }\n\n    fragCharInd = uvec4(bestChar, 0u, 0u, 0u);\n}";
+//#endregion
+//#region src/lib/create-gl-resources.ts
+function p(e) {
+	let t = c(e, e.VERTEX_SHADER, u), n = c(e, e.FRAGMENT_SHADER, d);
+	if (!t || !n) return null;
+	let r = l(e, t, n);
+	if (!r) return null;
+	let i = new Float32Array([
+		1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		-1,
+		-1,
+		-1,
+		1,
+		1,
+		-1
+	]), a = e.createBuffer();
+	e.bindBuffer(e.ARRAY_BUFFER, a), e.bufferData(e.ARRAY_BUFFER, i, e.STATIC_DRAW);
+	let o = e.getAttribLocation(r, "a_position");
+	e.vertexAttribPointer(o, 2, e.FLOAT, !1, 0, 0), e.enableVertexAttribArray(o), e.useProgram(r);
+	let s = e.createTexture();
+	e.activeTexture(e.TEXTURE0), e.bindTexture(e.TEXTURE_2D, s), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
+	let p = e.getUniformLocation(r, "u_texture");
+	e.uniform1i(p, 0);
+	let m = e.createTexture();
+	e.activeTexture(e.TEXTURE1), e.bindTexture(e.TEXTURE_2D, m), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
+	let h = e.getUniformLocation(r, "u_atlas");
+	e.uniform1i(h, 1);
+	let g = e.createTexture();
+	e.activeTexture(e.TEXTURE2), e.bindTexture(e.TEXTURE_2D, g), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
+	let _ = c(e, e.FRAGMENT_SHADER, f);
+	if (!_) return null;
+	let v = l(e, t, _);
+	if (!v) return null;
+	e.useProgram(v), e.uniform1i(e.getUniformLocation(v, "u_texture"), 0), e.uniform1i(e.getUniformLocation(v, "u_charVectors"), 2);
+	let y = e.getUniformLocation(v, "u_resolution"), b = e.getUniformLocation(v, "u_cellsize"), x = e.getUniformLocation(v, "u_circleN"), S = e.getUniformLocation(v, "u_numCharsInt"), C = e.getUniformLocation(v, "u_shapeExponent"), w = e.getUniformLocation(v, "u_cropOffset"), T = e.getUniformLocation(v, "u_cropScale"), E = e.createTexture();
+	e.activeTexture(e.TEXTURE3), e.bindTexture(e.TEXTURE_2D, E), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
+	let D = e.createFramebuffer(), O = e.createTexture();
+	e.activeTexture(e.TEXTURE4), e.bindTexture(e.TEXTURE_2D, O), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
+	let k = e.createTexture();
+	e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D, k), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
+	let A = e.createTexture();
+	return e.activeTexture(e.TEXTURE6), e.bindTexture(e.TEXTURE_2D, A), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e.useProgram(r), e.uniform1i(e.getUniformLocation(r, "u_fboTexture"), 3), e.uniform1i(e.getUniformLocation(r, "u_scatterAtlas"), 4), e.uniform1i(e.getUniformLocation(r, "u_scatterStateTexture"), 5), e.uniform1i(e.getUniformLocation(r, "u_spreadStateTexture"), 6), {
+		program: r,
+		pass1Program: v,
+		buffer: a,
+		vertShader: t,
+		fragShader: n,
+		pass1FragShader: _,
+		texture: s,
+		atlasTexture: m,
+		charVectorsTexture: g,
+		fboTexture: E,
+		fbo: D,
+		scatterAtlasTexture: O,
+		scatterStateTexture: k,
+		spreadStateTexture: A,
+		p1ResLoc: y,
+		p1CellsizeLoc: b,
+		p1CircleNLoc: x,
+		p1NumCharsLoc: S,
+		p1ExponentLoc: C,
+		p1CropOffsetLoc: w,
+		p1CropScaleLoc: T,
+		revealEffectFlagLoc: e.getUniformLocation(r, "u_revealEffectFlag"),
+		mouseEffectFlagLoc: e.getUniformLocation(r, "u_mouseEffect"),
+		clickEffectFlagLoc: e.getUniformLocation(r, "u_clickEffect"),
+		shapeMatchingLoc: e.getUniformLocation(r, "u_shapeMatching"),
+		revealProgressLoc: e.getUniformLocation(r, "u_revealProgress"),
+		brightnessLoc: e.getUniformLocation(r, "u_brightness"),
+		saturationLoc: e.getUniformLocation(r, "u_saturation"),
+		bgOpacityLoc: e.getUniformLocation(r, "u_bgOpacity"),
+		mouseBrightnessLoc: e.getUniformLocation(r, "u_mouseBrightness"),
+		mousePositionsLoc: e.getUniformLocation(r, "u_mousePositions"),
+		mouseLifeFracsLoc: e.getUniformLocation(r, "u_mouseLifeFracs"),
+		mouseRadiusLoc: e.getUniformLocation(r, "u_mouseRadius"),
+		ripplePositionsLoc: e.getUniformLocation(r, "u_ripplePositions"),
+		rippleRadiiLoc: e.getUniformLocation(r, "u_rippleRadii"),
+		rippleBrightnessesLoc: e.getUniformLocation(r, "u_rippleBrightnesses"),
+		scatterEffectFlagLoc: e.getUniformLocation(r, "u_scatterEffect"),
+		scatterNumCharsLoc: e.getUniformLocation(r, "u_scatterNumChars"),
+		spreadEffectFlagLoc: e.getUniformLocation(r, "u_spreadEffect"),
+		videoModeLoc: e.getUniformLocation(r, "u_videoMode"),
+		resLoc: e.getUniformLocation(r, "u_resolution"),
+		sizeLoc: e.getUniformLocation(r, "u_cellsize"),
+		numLoc: e.getUniformLocation(r, "u_numChars"),
+		gridSizeLoc: e.getUniformLocation(r, "u_gridSize"),
+		cropOffsetLoc: e.getUniformLocation(r, "u_cropOffset"),
+		cropScaleLoc: e.getUniformLocation(r, "u_cropScale")
+	};
+}
+//#endregion
+//#region src/lib/scatter-effect.ts
+function m({ scatterEnabledRef: e, mouseRadiusRef: t, durationRef: n, scatterCharsRef: r }) {
+	let i = new Uint8Array(), a = new Float32Array(), o = new Float32Array(), s = new Uint8Array(), c = null, l = null, u = 0, d = 0, f = -1, p = () => Math.floor(Math.random() * r.current.length), m = 0, h = 0, g = 1, _ = 1, v = null;
+	return {
+		setup(e, t, n, r, f, p) {
+			m = t, h = n, g = r, _ = f, v = p;
+			let y = t * n;
+			i = new Uint8Array(y), a = new Float32Array(y), o = new Float32Array(y), s = new Uint8Array(y), c = null, l = null, u = 0, d = 0, e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D, p), e.texImage2D(e.TEXTURE_2D, 0, e.R8UI, t, n, 0, e.RED_INTEGER, e.UNSIGNED_BYTE, i);
+		},
+		handleMouseMove(t, n, r) {
+			e.current && (l = c, c = {
+				x: t,
+				y: n,
+				t: r
+			});
+		},
+		handleMouseLeave() {
+			c = null, l = null, u = 0, d = 0;
+		},
+		reset(e) {
+			i.fill(0), v && m > 0 && (e.activeTexture(e.TEXTURE5), e.bindTexture(e.TEXTURE_2D, v), e.texSubImage2D(e.TEXTURE_2D, 0, 0, 0, m, h, e.RED_INTEGER, e.UNSIGNED_BYTE, i));
+		},
+		tick(r, y) {
+			if (!e.current || m === 0 || h === 0) return;
+			let b = performance.now(), x = f < 0 ? 0 : Math.min(.1, (b - f) / 1e3);
+			f = b;
+			let S = Math.min(y.width, y.height) * t.current, C = !1;
+			if (c && b - c.t < 80) {
+				if (l) {
+					let e = (c.t - l.t) / 1e3;
+					if (e > 0 && e < .2) {
+						let t = (c.x - l.x) / e, n = (c.y - l.y) / e;
+						u = u * .7 + t * .3, d = d * .7 + n * .3;
+					}
+				} else u = 0, d = 0;
+				Math.hypot(u, d) > g * 2 && (C = !0);
+			} else u *= .6, d *= .6;
+			if (s.fill(0), C && c && S > 0) {
+				let e = c.x, t = c.y, n = Math.max(0, Math.floor((e - S) / g)), r = Math.min(m - 1, Math.floor((e + S) / g)), l = Math.max(0, Math.floor((t - S) / _)), u = Math.min(h - 1, Math.floor((t + S) / _));
+				for (let c = l; c <= u; c++) for (let l = n; l <= r; l++) {
+					let n = (l + .5) * g, r = (c + .5) * _;
+					if (Math.hypot(n - e, r - t) > S) continue;
+					let u = c * m + l;
+					s[u] = 1, i[u] === 0 && (i[u] = 1 + p(), o[u] = .5 + Math.random() * 2), a[u] = 1;
+				}
+			}
+			let w = n.current;
+			if (x > 0) for (let e = 0; e < h; e++) for (let t = 0; t < m; t++) {
+				let n = e * m + t;
+				if (i[n] === 0 || s[n]) continue;
+				let r = t > 0 ? i[n - 1] !== 0 : !1, c = t < m - 1 ? i[n + 1] !== 0 : !1, l = e > 0 ? i[n - m] !== 0 : !1, u = e < h - 1 ? i[n + m] !== 0 : !1, d = (!r || !c || !l || !u ? 5 : 1) * o[n] / w;
+				a[n] -= d * x, a[n] <= 0 && (i[n] = 0);
+			}
+			r.activeTexture(r.TEXTURE5), r.bindTexture(r.TEXTURE_2D, v), r.texSubImage2D(r.TEXTURE_2D, 0, 0, 0, m, h, r.RED_INTEGER, r.UNSIGNED_BYTE, i);
+		}
+	};
+}
+//#endregion
+//#region src/lib/brighten-effect.ts
+function h({ brightenEnabledRef: e, trailLenRef: t, durationRef: n, trailDecayRef: r }) {
+	let i = [];
+	return {
+		handleMouseMove(n, r, a) {
+			e.current && (i.push({
+				x: n,
+				y: r,
+				t: a
+			}), i.length > t.current && i.shift());
+		},
+		tick(a, o, s) {
+			if (!e.current) return;
+			let c = performance.now(), l = new Float32Array(t.current * 2), u = new Float32Array(t.current);
+			for (let e = 0; e < i.length; e++) {
+				let t = c - i[e].t, a = Math.max(0, 1 - t / (n.current * 1e3)) ** r.current;
+				l[e * 2] = i[e].x, l[e * 2 + 1] = i[e].y, u[e] = a;
+			}
+			a.uniform2fv(o, l), a.uniform1fv(s, u);
+		}
+	};
+}
+//#endregion
+//#region src/lib/click-effect.ts
+var g = 10;
+function _({ clickEnabledRef: e, clickSpeedRef: t, clickBrightnessRef: n }) {
+	let r = [];
+	return {
+		handleClick(t, n) {
+			if (!e.current) return;
+			let i = n.getBoundingClientRect(), a = (t.clientX - i.left) * (n.width / i.width), o = (t.clientY - i.top) * (n.height / i.height);
+			r.push({
+				x: a,
+				y: o,
+				t: performance.now()
+			}), r.length > g && r.shift();
+		},
+		tick(i, a, o, s, c) {
+			if (!e.current) return;
+			let l = performance.now(), u = Math.hypot(a.width, a.height), d = new Float32Array(g * 2), f = new Float32Array(g), p = new Float32Array(g);
+			for (; r.length > 0 && (l - r[0].t) * t.current >= u;) r.shift();
+			for (let e = 0; e < r.length; e++) {
+				let i = (l - r[e].t) * t.current, a = i / u, o = 1 + (n.current - 1) * (1 - a ** 2);
+				d[e * 2] = r[e].x, d[e * 2 + 1] = r[e].y, f[e] = i, p[e] = o;
+			}
+			i.uniform2fv(o, d), i.uniform1fv(s, f), i.uniform1fv(c, p);
+		}
+	};
+}
+//#endregion
+//#region src/lib/spread-effect.ts
+function v({ spreadEnabledRef: e, scatterCharsRef: t, spreadExpandDurationRef: n, spreadSpeedRef: r }) {
+	let i = new Uint8Array(), a = new Uint8Array(), o = 0, s = 0, c = 1, l = 1, u = null, d = -1, f = -1, p = () => Math.floor(Math.random() * t.current.length), m = [
+		[-1, 0],
+		[1, 0],
+		[0, -1],
+		[0, 1]
+	];
+	return {
+		setup(e, t, n, r, p, m) {
+			o = t, s = n, c = r, l = p, u = m;
+			let h = t * n;
+			i = new Uint8Array(h), a = new Uint8Array(h), f = -1, d = -1, e.activeTexture(e.TEXTURE6), e.bindTexture(e.TEXTURE_2D, m), e.texImage2D(e.TEXTURE_2D, 0, e.R8UI, t, n, 0, e.RED_INTEGER, e.UNSIGNED_BYTE, i);
+		},
+		handleClick(t, r) {
+			if (!e.current || o === 0) return;
+			let u = r.getBoundingClientRect(), d = (t.clientX - u.left) * (r.width / u.width), m = (t.clientY - u.top) * (r.height / u.height), h = Math.floor(d / c), g = Math.floor(m / l);
+			if (h < 0 || h >= o || g < 0 || g >= s) return;
+			let _ = g * o + h;
+			i[_] = 1 + p(), a[_] = 1, f = performance.now() + n.current * 1e3;
+		},
+		tick(t) {
+			if (!e.current || o === 0 || s === 0) return;
+			let n = performance.now(), c = d < 0 ? 0 : Math.min(.1, (n - d) / 1e3);
+			d = n;
+			let l = f > 0 && n < f;
+			if (!l && f > 0) {
+				for (let e = 0; e < i.length; e++) a[e] === 1 && (a[e] = 2);
+				f = -1;
+			}
+			if (c > 0) for (let e = 0; e < s; e++) for (let t = 0; t < o; t++) {
+				let n = e * o + t;
+				if (a[n] !== 0) {
+					if (l && a[n] === 1) for (let [n, l] of m) {
+						let u = e + n, d = t + l;
+						if (u < 0 || u >= s || d < 0 || d >= o) continue;
+						let f = u * o + d;
+						a[f] === 0 && Math.random() < r.current * c && (i[f] = 1 + p(), a[f] = 1);
+					}
+					else if (a[n] === 2) for (let [l, u] of m) {
+						let d = e + l, f = t + u;
+						if (d < 0 || d >= s || f < 0 || f >= o || i[d * o + f] === 0) {
+							Math.random() < r.current * c && (i[n] = 0, a[n] = 0);
+							break;
+						}
+					}
+				}
+			}
+			t.activeTexture(t.TEXTURE6), t.bindTexture(t.TEXTURE_2D, u), t.texSubImage2D(t.TEXTURE_2D, 0, 0, 0, o, s, t.RED_INTEGER, t.UNSIGNED_BYTE, i);
+		}
+	};
+}
+//#endregion
+//#region src/components/VideoAscii.tsx
+function y({ src: i, videoMode: c = !1, numColsRaw: l = 250, brightnessRaw: u = 1, saturationRaw: d = 1, bgOpacityRaw: f = .3, revealEffect: g = !1, chars: y = o, mouseEffect: b = !0, clickEffect: x = !0, charMode: S = "shape", className: C }) {
+	let w = t(null), T = t(null), E = t(null), D = t(null), O = t(null), { numCols: k, brightness: A, saturation: j, bgOpacity: M, mouseEnabled: N, mouseStyle: P, brightenEnabled: F, scatterEnabled: I, scatterChars: L, trailLen: R, trailDecay: z, duration: B, mouseRadius: V, mouseBrightness: H, clickEnabled: U, clickBrightness: W, clickSpeed: G, spreadEnabled: K, spreadExpandDuration: q, spreadSpeed: ee, revealEnabled: te, revealDuration: ne, revealEffectFlag: re } = s(l, u, d, f, b, x, g), ie = t(A), ae = t(j), oe = t(M), se = t(N), ce = t(P), J = t(F), Y = t(I), le = t(H), X = t(V), ue = t(R), de = t(z), Z = t(B), Q = t(L), fe = t(U), pe = t(W), me = t(G), he = t(K), ge = t(q), _e = t(ee), ve = t(k), ye = t(c);
+	e(() => {
+		ie.current = A, ae.current = j, oe.current = M, se.current = N, ce.current = P, J.current = F, Y.current = I, le.current = H, X.current = V, ue.current = R, de.current = z, Z.current = B, Q.current !== L && $.current ? (Q.current = L, xe.current?.()) : Q.current = L, fe.current = U, pe.current = W, me.current = G, he.current = K, ge.current = q, _e.current = ee, ve.current = k, ye.current = c;
+	}, [
+		A,
+		j,
+		M,
+		N,
+		P,
+		F,
+		I,
+		H,
+		V,
+		R,
+		z,
+		B,
+		L,
+		U,
+		W,
+		G,
+		K,
+		q,
+		ee,
+		k,
+		c
+	]);
+	let be = t(null), xe = t(null), $ = t(!1);
+	return e(() => {
+		$.current && be.current?.(k);
+	}, [k]), e(() => {
+		$.current = !1;
+		let e = [], t = 0, n = 0, r = 1, o = 1, s = w.current;
+		if (!s) return;
+		let c = T.current;
+		if (!c) return;
+		let l = s.getContext("webgl2");
+		if (!l) return;
+		l.pixelStorei(l.UNPACK_ALIGNMENT, 1);
+		let u = p(l);
+		if (!u) return;
+		let { program: d, pass1Program: f } = u;
+		D.current = u.atlasTexture, O.current = u.scatterAtlasTexture, l.uniform1i(u.shapeMatchingLoc, +(S === "shape")), l.uniform1i(u.revealEffectFlagLoc, re), l.uniform1f(u.revealProgressLoc, 0);
+		let g = m({
+			scatterEnabledRef: Y,
+			mouseRadiusRef: X,
+			durationRef: Z,
+			scatterCharsRef: Q
+		}), b = h({
+			brightenEnabledRef: J,
+			trailLenRef: ue,
+			durationRef: Z,
+			trailDecayRef: de
+		}), x = _({
+			clickEnabledRef: fe,
+			clickSpeedRef: me,
+			clickBrightnessRef: pe
+		}), C = v({
+			spreadEnabledRef: he,
+			scatterCharsRef: Q,
+			spreadExpandDurationRef: ge,
+			spreadSpeedRef: _e
+		}), k, A = -1, j = -1, M = 0, N = Array.isArray(i) ? i : [i], P = N.length > 1, F = document.createElement("canvas"), I = F.getContext("2d"), L = (i) => {
+			r = Math.max(1, Math.floor(s.width / i));
+			let c = r * 2;
+			if (I.font = `${c}px monospace`, o = Math.max(1, Math.round(c * r / I.measureText("M").width)), t = Math.floor(s.width / r), n = Math.floor(s.height / o), s.width = t * r, s.height = n * o, l.viewport(0, 0, s.width, s.height), l.useProgram(d), l.uniform2f(u.resLoc, s.width, s.height), l.useProgram(f), l.uniform2f(u.p1ResLoc, s.width, s.height), l.useProgram(d), g.setup(l, t, n, r, o, u.scatterStateTexture), C.setup(l, t, n, r, o, u.spreadStateTexture), S === "shape") {
+				e = a(y, r, o);
+				let i = e.length, s = new Float32Array(i * 8);
+				for (let t = 0; t < i; t++) {
+					let n = e[t].vector;
+					s[t * 4 + 0] = n[0], s[t * 4 + 1] = n[1], s[t * 4 + 2] = n[2], s[t * 4 + 3] = n[3], s[i * 4 + t * 4 + 0] = n[4], s[i * 4 + t * 4 + 1] = n[5];
+				}
+				l.activeTexture(l.TEXTURE2), l.bindTexture(l.TEXTURE_2D, u.charVectorsTexture), l.texImage2D(l.TEXTURE_2D, 0, l.RGBA32F, i, 2, 0, l.RGBA, l.FLOAT, s), l.activeTexture(l.TEXTURE3), l.bindTexture(l.TEXTURE_2D, u.fboTexture), l.texImage2D(l.TEXTURE_2D, 0, l.R8UI, t, n, 0, l.RED_INTEGER, l.UNSIGNED_BYTE, null), l.bindFramebuffer(l.FRAMEBUFFER, u.fbo), l.framebufferTexture2D(l.FRAMEBUFFER, l.COLOR_ATTACHMENT0, l.TEXTURE_2D, u.fboTexture, 0), l.bindFramebuffer(l.FRAMEBUFFER, null);
+				let c = Math.max(1, Math.round(r / 5));
+				l.useProgram(f), l.uniform2f(u.p1CellsizeLoc, r, o), l.uniform1i(u.p1CircleNLoc, c), l.uniform1i(u.p1NumCharsLoc, i), l.uniform1f(u.p1ExponentLoc, 2), l.useProgram(d);
+			}
+			l.uniform2f(u.gridSizeLoc, t, n), F.width = y.length * r, F.height = o, I.font = `${o}px monospace`, I.fillStyle = "black", I.fillRect(0, 0, y.length * r, o), I.fillStyle = "white", I.textBaseline = "top";
+			for (let e = 0; e < y.length; e++) I.fillText(y[e], e * r, 0);
+			l.activeTexture(l.TEXTURE1), l.bindTexture(l.TEXTURE_2D, D.current), l.texImage2D(l.TEXTURE_2D, 0, l.RGBA, l.RGBA, l.UNSIGNED_BYTE, F), l.uniform1f(u.numLoc, y.length), l.uniform2f(u.sizeLoc, r, o), R();
+		}, R = () => {
+			let e = Q.current;
+			F.width = e.length * r, F.height = o, I.fillStyle = "black", I.fillRect(0, 0, F.width, o), I.fillStyle = "white", I.textBaseline = "top", I.font = `${o}px monospace`;
+			for (let t = 0; t < e.length; t++) I.fillText(e[t], t * r, 0);
+			l.activeTexture(l.TEXTURE4), l.bindTexture(l.TEXTURE_2D, O.current), l.texImage2D(l.TEXTURE_2D, 0, l.RGBA, l.RGBA, l.UNSIGNED_BYTE, F), l.uniform1f(u.scatterNumCharsLoc, e.length), g.reset(l);
+		};
+		be.current = L, xe.current = R;
+		let z = (e, t) => {
+			s.width = Math.round(e), s.height = Math.round(t), L(ve.current);
+			let n = c.videoWidth / c.videoHeight, r = s.width / s.height, i = 1, a = 1, o = 0, p = 0;
+			r > n ? (a = n / r, p = (1 - a) / 2) : (i = r / n, o = (1 - i) / 2), l.uniform2f(u.cropOffsetLoc, o, p), l.uniform2f(u.cropScaleLoc, i, a), l.useProgram(f), l.uniform2f(u.p1CropOffsetLoc, o, p), l.uniform2f(u.p1CropScaleLoc, i, a), l.useProgram(d);
+		}, B = (e) => {
+			if (!se.current) return;
+			let t = s.getBoundingClientRect(), n = (e.clientX - t.left) * (s.width / t.width), r = (e.clientY - t.top) * (s.height / t.height), i = performance.now();
+			b.handleMouseMove(n, r, i), g.handleMouseMove(n, r, i);
+		};
+		s.addEventListener("mousemove", B);
+		let V = () => g.handleMouseLeave();
+		s.addEventListener("mouseleave", V);
+		let H = (e) => {
+			x.handleClick(e, s), C.handleClick(e, s);
+		};
+		s.addEventListener("click", H);
+		let U = () => {
+			if (l.uniform1i(u.videoModeLoc, +!!ye.current), l.uniform1f(u.brightnessLoc, ie.current), l.uniform1f(u.saturationLoc, ae.current), l.uniform1f(u.bgOpacityLoc, oe.current), l.uniform1i(u.mouseEffectFlagLoc, +!!J.current), l.uniform1i(u.scatterEffectFlagLoc, +!!Y.current), l.uniform1i(u.clickEffectFlagLoc, +!!fe.current), l.uniform1i(u.spreadEffectFlagLoc, +!!he.current), l.uniform1f(u.mouseBrightnessLoc, le.current), l.uniform1f(u.mouseRadiusLoc, Math.min(s.width, s.height) * X.current), te) {
+				let e = j < 0 ? 0 : Math.min(1, (performance.now() - j) / (ne * 1e3));
+				l.uniform1f(u.revealProgressLoc, e);
+			}
+			$.current && c.currentTime != A && c.readyState >= 2 && (l.activeTexture(l.TEXTURE0), l.bindTexture(l.TEXTURE_2D, u.texture), l.texSubImage2D(l.TEXTURE_2D, 0, 0, 0, l.RGBA, l.UNSIGNED_BYTE, c), A = c.currentTime), b.tick(l, u.mousePositionsLoc, u.mouseLifeFracsLoc), g.tick(l, s), x.tick(l, s, u.ripplePositionsLoc, u.rippleRadiiLoc, u.rippleBrightnessesLoc), C.tick(l), S === "shape" && (l.bindFramebuffer(l.FRAMEBUFFER, u.fbo), l.viewport(0, 0, t, n), l.useProgram(f), l.drawArrays(l.TRIANGLES, 0, 6), l.bindFramebuffer(l.FRAMEBUFFER, null), l.viewport(0, 0, s.width, s.height), l.useProgram(d)), l.drawArrays(l.TRIANGLES, 0, 6), k = requestAnimationFrame(U);
+		}, W = () => {
+			let e = E.current;
+			z(e.clientWidth || c.videoWidth, e.clientHeight || c.videoHeight), l.activeTexture(l.TEXTURE0), l.bindTexture(l.TEXTURE_2D, u.texture), l.texImage2D(l.TEXTURE_2D, 0, l.RGBA, l.RGBA, l.UNSIGNED_BYTE, c), c.play(), j = performance.now(), $.current = !0, k = requestAnimationFrame(U);
+		}, G = () => {
+			M = (M + 1) % N.length, c.src = N[M], c.load(), c.addEventListener("canplay", () => c.play(), { once: !0 });
+		}, K = new ResizeObserver((e) => {
+			let { width: t, height: n } = e[0].contentRect;
+			$.current && t > 0 && n > 0 && z(t, n);
+		});
+		return E.current && K.observe(E.current), c.addEventListener("loadeddata", W, { once: !0 }), P && c.addEventListener("ended", G), c.readyState >= 2 && c.currentSrc.endsWith(N[0]) ? W() : c.currentSrc.endsWith(N[0]) || c.load(), () => {
+			K.disconnect(), be.current = null, xe.current = null, $.current = !1, cancelAnimationFrame(k), c.removeEventListener("loadeddata", W), P && c.removeEventListener("ended", G), s.removeEventListener("mousemove", B), s.removeEventListener("mouseleave", V), s.removeEventListener("click", H), l.deleteTexture(u.texture), l.deleteTexture(u.charVectorsTexture), l.deleteFramebuffer(u.fbo), l.deleteTexture(u.fboTexture), l.deleteBuffer(u.buffer), l.deleteShader(u.vertShader), l.deleteShader(u.fragShader), l.deleteShader(u.pass1FragShader), l.deleteProgram(d), l.deleteProgram(f), l.deleteTexture(D.current), l.deleteTexture(O.current), l.deleteTexture(u.scatterStateTexture), l.deleteTexture(u.spreadStateTexture);
+		};
+	}, [
+		i,
+		S,
+		y,
+		re,
+		ne,
+		te
+	]), /* @__PURE__ */ r("div", {
+		ref: E,
+		className: C,
+		style: {
+			height: "100%",
+			width: "100%"
+		},
+		children: [/* @__PURE__ */ n("video", {
+			ref: T,
+			muted: !0,
+			playsInline: !0,
+			autoPlay: !0,
+			loop: !Array.isArray(i) || i.length === 1,
+			style: { display: "none" },
+			children: /* @__PURE__ */ n("source", {
+				src: Array.isArray(i) ? i[0] : i,
+				type: "video/mp4"
+			})
+		}), /* @__PURE__ */ n("canvas", {
+			ref: w,
+			style: {
+				width: "100%",
+				height: "100%",
+				display: "block"
+			}
+		})]
+	});
+}
+//#endregion
+export { y as VideoAscii };

package/dist/react-video-ascii.umd.cjs

@@ -0,0 +1,280 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactVideoAscii={},e.React,e.ReactJSXRuntime))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=[[.25,.25],[.75,.25],[.25,.5],[.75,.5],[.25,.75],[.75,.75]];function i(e,t,n){let i=[],a=document.createElement(`canvas`);a.width=t,a.height=n;let o=a.getContext(`2d`,{willReadFrequently:!0});if(!o)return[];o.font=`${n}px monospace`,o.textBaseline=`top`;let s=t/5;for(let a of e){o.fillStyle=`black`,o.fillRect(0,0,t,n),o.fillStyle=`white`,o.fillText(a,0,0);let e=o.getImageData(0,0,t,n),c=[];for(let[i,a]of r){let r=i*t,o=a*n,l=0,u=0;for(let n=Math.floor(r-s);n<=Math.ceil(r+s);n+=1)for(let i=Math.floor(o-s);i<=Math.ceil(o+s);i+=1){let a=r-n,c=o-i;if(a*a+c*c<=s*s){let r=(i*t+n)*4,a=e.data[r];l+=a/255,u++}}let d=u>0?l/u:0;c.push(d)}i.push({char:a,vector:c})}let c=[,,,,,,].fill(0);for(let{vector:e}of i)for(let t=0;t<6;++t)e[t]>c[t]&&(c[t]=e[t]);for(let{vector:e}of i)for(let t=0;t<6;++t)e[t]/=c[t];return i}var a=` \`.',-_:!;|"~+^lr[](\\/L)>t<v=Tz?icf1{sIxY*jJno}CZyVwmSXRqM$O%#9&NW0Q@`;function o(e,t,n,r,i,a,o){let s=!!i,c=typeof i==`object`?i:{},l=c.style??`brighten`,u=s&&l!==`scatter`,d=s&&l===`scatter`,f=c.scatterChars??`->o`,p=c.trailLen??15,m=c.trailDecay??10,h=c.duration??1,g=c.radius??(l===`scatter`?.05:.08),_=c.brightness??2,v=!!a,y=typeof a==`object`?a:{},b=y.style??`ripple`,x=v&&b!==`spread`,S=v&&b===`spread`,C=y.brightness??1.1,w=y.speed??2,T=y.spreadExpandDuration??1.5,E=y.spreadSpeed??7.5,D=!!o,O=typeof o==`object`?o:{},k=O.type??`random`,A=O.duration??.4,j=Math.max(20,Math.min(350,Math.round(e))),M=Math.max(0,Math.min(2,t)),N=Math.max(0,Math.min(2,n)),P=Math.max(0,Math.min(1,r));A=Math.max(.1,Math.min(4,A)),p=Math.max(0,Math.min(30,Math.round(p))),m=Math.max(1,Math.min(15,m)),h=Math.max(.1,Math.min(4,h)),g=Math.max(.03,Math.min(.2,g)),_=Math.max(.2,Math.min(5,_)),C=Math.max(1.05,Math.min(2,C)),w=Math.max(.5,Math.min(4,w)),T=Math.max(.5,Math.min(5,T)),E=Math.max(.5,Math.min(10,E));let F;return F=D?k===`diagonal`?1:k===`radial`?2:3:0,{numCols:j,brightness:M,saturation:N,bgOpacity:P,mouseEnabled:s,mouseStyle:l,brightenEnabled:u,scatterEnabled:d,scatterChars:f,trailLen:p,trailDecay:m,duration:h,mouseRadius:g,mouseBrightness:_,clickEnabled:x,clickBrightness:C,clickSpeed:w,spreadEnabled:S,spreadExpandDuration:T,spreadSpeed:E,revealEnabled:D,revealType:k,revealDuration:A,revealEffectFlag:F}}function s(e,t,n){let r=e.createShader(t);if(!r)throw Error(`Failed to create shader`);return e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)?r:(console.log(e.getShaderInfoLog(r)),e.deleteShader(r),null)}function c(e,t,n){let r=e.createProgram();return e.attachShader(r,t),e.attachShader(r,n),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?r:(console.log(e.getProgramInfoLog(r)),e.deleteProgram(r),null)}var l=`#version 300 es
+
+in vec2 a_position;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+}`,u=`#version 300 es
+
+precision highp float;
+precision highp usampler2D;
+
+uniform int u_revealEffectFlag;
+uniform bool u_videoMode;
+
+uniform float u_revealProgress;
+uniform float u_brightness;
+uniform float u_saturation;
+uniform float u_bgOpacity;
+
+uniform bool u_mouseEffect;
+#define MOUSE_TRAIL_LEN 30 
+uniform vec2 u_mousePositions[MOUSE_TRAIL_LEN];
+uniform float u_mouseLifeFracs[MOUSE_TRAIL_LEN]; 
+uniform float u_mouseRadius;
+uniform float u_mouseBrightness;
+
+uniform bool u_clickEffect;
+#define MAX_RIPPLES 10
+uniform vec2 u_ripplePositions[MAX_RIPPLES];
+uniform float u_rippleRadii[MAX_RIPPLES]; 
+uniform float u_rippleBrightnesses[MAX_RIPPLES]; 
+
+uniform bool u_scatterEffect;
+uniform usampler2D u_scatterStateTexture; 
+uniform sampler2D u_scatterAtlas;          
+uniform float u_scatterNumChars;
+
+uniform bool u_spreadEffect;
+uniform usampler2D u_spreadStateTexture;
+
+uniform bool u_shapeMatching;
+
+uniform sampler2D u_texture;
+uniform sampler2D u_atlas;
+uniform usampler2D u_fboTexture;
+uniform vec2 u_resolution;
+uniform vec2 u_cellsize;
+uniform float u_numChars;
+uniform vec2 u_gridSize;
+uniform vec2 u_cropOffset;
+uniform vec2 u_cropScale;
+
+out vec4 fragColor;
+
+float hash(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * 0.1031); 
+    p3 += dot(p3, p3.yzx + 33.33); 
+    return fract((p3.x + p3.y) * p3.z); 
+}
+
+vec3 rgb2hsl(vec3 c) {
+    float maxC = max(c.r, max(c.g, c.b));
+    float minC = min(c.r, min(c.g, c.b));
+    float l = (maxC + minC) * 0.5;
+    float d = maxC - minC;
+    float h = 0.0, s = 0.0;
+    if (d > 0.0) {
+        s = d / (1.0 - abs(2.0 * l - 1.0));
+        if (maxC == c.r) h = mod((c.g - c.b) / d, 6.0) / 6.0;
+        else if (maxC == c.g) h = ((c.b - c.r) / d + 2.0) / 6.0;
+        else h = ((c.r - c.g) / d + 4.0) / 6.0;
+    }
+    return vec3(h, s, l);
+}
+
+vec3 hsl2rgb(vec3 c) {
+    float h = c.x, s = c.y, l = c.z;
+    float a = s * (1.0 - abs(2.0 * l - 1.0));
+    vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+    return l + a * (rgb - 0.5);
+}
+
+void main() {
+    vec2 fragCoord = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y); 
+    vec2 cellCoord = floor(fragCoord / u_cellsize);
+
+    if (u_revealEffectFlag == 1) {
+        
+        float revealThreshold = (cellCoord.x + cellCoord.y) / (u_gridSize.x + u_gridSize.y - 2.0);
+        if (revealThreshold > u_revealProgress) {
+            fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            return;
+        }
+    } else if (u_revealEffectFlag == 2) {
+        float dist = length(cellCoord / u_gridSize - vec2(0.5));
+        float revealThreshold = dist / 0.7071; 
+        if (revealThreshold > u_revealProgress) {
+            fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            return;
+        }
+    } else if (u_revealEffectFlag == 3) {
+        float revealThreshold = hash(cellCoord);
+        if (revealThreshold > u_revealProgress) {
+            fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            return;
+        }
+    }
+
+    vec2 cellCenter = (cellCoord + 0.5) * u_cellsize; 
+    
+    vec2 rawUV = u_videoMode ? (fragCoord / u_resolution) : (cellCenter / u_resolution);
+    vec2 sampleUV = u_cropOffset + rawUV * u_cropScale;
+
+    vec3 cellColor = texture(u_texture, sampleUV).rgb;
+    float luminosity = dot(cellColor, vec3(0.299, 0.587, 0.114)); 
+    vec3 hsl = rgb2hsl(cellColor);
+    hsl.z = clamp(hsl.z * u_brightness, 0.0, 1.0);
+    hsl.y = clamp(hsl.y * u_saturation, 0.0, 1.0);
+    cellColor = hsl2rgb(hsl);
+
+    vec2 withinCellPos = fract(fragCoord / u_cellsize);
+
+    
+    float glyphMask = 0.0;
+    if (!u_videoMode) {
+        uint charInd;
+        if (u_shapeMatching) {
+            charInd = texelFetch(u_fboTexture, ivec2(cellCoord), 0).r;
+        } else {
+            charInd = uint(floor(luminosity * (u_numChars - 1.0)));
+        }
+        float atlasU = (float(charInd) + withinCellPos.x) / u_numChars;
+        float atlasV = withinCellPos.y;
+        glyphMask = texture(u_atlas, vec2(atlasU, atlasV)).r;
+    }
+
+    vec3 bgColor = cellColor * u_bgOpacity;
+
+    bool scatterHit = false;
+    vec3 scatterColor = vec3(0.0);
+    if (u_scatterEffect) {
+        uint state = texelFetch(u_scatterStateTexture, ivec2(cellCoord), 0).r;
+        if (state > 0u) {
+            int idx = int(state) - 1;
+            float su = (float(idx) + withinCellPos.x) / u_scatterNumChars;
+            float mask = texture(u_scatterAtlas, vec2(su, withinCellPos.y)).r;
+            
+            vec3 scatterBg = u_videoMode ? cellColor : bgColor;
+            scatterColor = mix(scatterBg, vec3(1.0), mask);
+            scatterHit = true;
+        }
+    }
+    
+    if (!scatterHit && u_spreadEffect) { 
+        uint state = texelFetch(u_spreadStateTexture, ivec2(cellCoord), 0).r;
+        if (state > 0u) {
+            int idx = int(state) - 1;
+            float su = (float(idx) + withinCellPos.x) / u_scatterNumChars;
+            float mask = texture(u_scatterAtlas, vec2(su, withinCellPos.y)).r;
+            vec3 scatterBg = u_videoMode ? cellColor : bgColor;
+            scatterColor = mix(scatterBg, vec3(1.0), mask);
+            scatterHit = true;
+        }
+    }
+
+    vec3 finalColor;
+    if (scatterHit) {
+        finalColor = scatterColor;
+    } else {
+        finalColor = u_videoMode ? cellColor : mix(bgColor, cellColor, glyphMask);
+
+        if (u_mouseEffect) {
+            bool inside = false;
+            for (int i = 0; i < MOUSE_TRAIL_LEN; i++) {
+                if (u_mouseLifeFracs[i] <= 0.0) {
+                    continue;
+                }
+                float r = u_mouseRadius * u_mouseLifeFracs[i];
+                if (distance(cellCenter, u_mousePositions[i]) < r) {
+                    inside = true;
+                    break;
+                }
+            }
+            if (inside) {
+                finalColor = clamp(finalColor * u_mouseBrightness, 0.0, 1.0);
+            }
+        }
+
+        if (u_clickEffect) {
+            float boost = 1.0;
+            for (int i = 0; i < MAX_RIPPLES; i++) {
+                if (u_rippleBrightnesses[i] <= 1.0) {
+                    continue;
+                }
+                if (distance(cellCenter, u_ripplePositions[i]) < u_rippleRadii[i]) {
+                    boost *= u_rippleBrightnesses[i];
+                }
+            }
+            if (boost > 1.0) {
+                finalColor = clamp(finalColor * boost, 0.0, 1.0);
+            }
+        }
+    }
+
+    fragColor = vec4(finalColor, 1.0);
+}`,d=`#version 300 es
+
+precision highp float;
+precision highp usampler2D;
+
+uniform sampler2D u_texture;
+uniform vec2 u_resolution;
+uniform vec2 u_cellsize;
+uniform int u_circleN;
+uniform sampler2D u_charVectors;
+uniform int u_numCharsInt;
+uniform float u_shapeExponent;
+uniform vec2 u_cropOffset;
+uniform vec2 u_cropScale;
+
+out uvec4 fragCharInd;
+
+void main() {
+    
+    ivec2 cellCoord = ivec2(floor(gl_FragCoord.xy));
+
+    const vec2 CIRCLES[6] = vec2[6](
+        vec2(0.25, 0.25), vec2(0.75, 0.25),
+        vec2(0.25, 0.50), vec2(0.75, 0.50),
+        vec2(0.25, 0.75), vec2(0.75, 0.75)
+    );
+    vec2 radiusUV = vec2(u_cellsize.x / 5.0) / u_resolution * u_cropScale; 
+
+    float sv[6];
+    for (int ci = 0; ci < 6; ci++) {
+        
+        vec2 centerUV = u_cropOffset + (vec2(cellCoord) + CIRCLES[ci]) * u_cellsize / u_resolution * u_cropScale;
+        float total = 0.0;
+        int count = 0;
+        for (int dx = -u_circleN; dx <= u_circleN; dx++) {
+            for (int dy = -u_circleN; dy <= u_circleN; dy++) {
+                if (dx*dx + dy*dy <= u_circleN*u_circleN) {
+                    vec2 sampleUV = centerUV + vec2(float(dx), float(dy)) * radiusUV / float(u_circleN);
+                    vec3 sc = texture(u_texture, sampleUV).rgb;
+                    total += dot(sc, vec3(0.299, 0.587, 0.114));
+                    count++;
+                }
+            }
+        }
+        
+        sv[ci] = count > 0 ? total / float(count) : 0.0;
+    }
+
+    float maxVal = 0.0;
+    for (int d = 0; d < 6; d++) maxVal = max(maxVal, sv[d]);
+    if (maxVal > 0.0) {
+        for (int d = 0; d < 6; d++) sv[d] = pow(sv[d] / maxVal, u_shapeExponent) * maxVal;
+    }
+
+    
+    uint bestChar = 0u;
+    float bestDist = 1e10;
+    for (int i = 0; i < u_numCharsInt; i++) {
+        vec4 r0 = texelFetch(u_charVectors, ivec2(i, 0), 0);
+        vec4 r1 = texelFetch(u_charVectors, ivec2(i, 1), 0);
+        float dist = 0.0;
+        float diffs[6] = float[6](
+            sv[0] - r0.r, sv[1] - r0.g, sv[2] - r0.b, sv[3] - r0.a,
+            sv[4] - r1.r, sv[5] - r1.g
+        );
+        for (int d = 0; d < 6; d++) {
+            dist += diffs[d] * diffs[d];
+        }
+        if (dist < bestDist) { 
+            bestDist = dist; bestChar = uint(i); 
+        }
+    }
+
+    fragCharInd = uvec4(bestChar, 0u, 0u, 0u);
+}`;function f(e){let t=s(e,e.VERTEX_SHADER,l),n=s(e,e.FRAGMENT_SHADER,u);if(!t||!n)return null;let r=c(e,t,n);if(!r)return null;let i=new Float32Array([1,1,-1,1,1,-1,-1,-1,-1,1,1,-1]),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);let o=e.getAttribLocation(r,`a_position`);e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0),e.enableVertexAttribArray(o),e.useProgram(r);let f=e.createTexture();e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,f),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST);let p=e.getUniformLocation(r,`u_texture`);e.uniform1i(p,0);let m=e.createTexture();e.activeTexture(e.TEXTURE1),e.bindTexture(e.TEXTURE_2D,m),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST);let h=e.getUniformLocation(r,`u_atlas`);e.uniform1i(h,1);let g=e.createTexture();e.activeTexture(e.TEXTURE2),e.bindTexture(e.TEXTURE_2D,g),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST);let _=s(e,e.FRAGMENT_SHADER,d);if(!_)return null;let v=c(e,t,_);if(!v)return null;e.useProgram(v),e.uniform1i(e.getUniformLocation(v,`u_texture`),0),e.uniform1i(e.getUniformLocation(v,`u_charVectors`),2);let y=e.getUniformLocation(v,`u_resolution`),b=e.getUniformLocation(v,`u_cellsize`),x=e.getUniformLocation(v,`u_circleN`),S=e.getUniformLocation(v,`u_numCharsInt`),C=e.getUniformLocation(v,`u_shapeExponent`),w=e.getUniformLocation(v,`u_cropOffset`),T=e.getUniformLocation(v,`u_cropScale`),E=e.createTexture();e.activeTexture(e.TEXTURE3),e.bindTexture(e.TEXTURE_2D,E),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST);let D=e.createFramebuffer(),O=e.createTexture();e.activeTexture(e.TEXTURE4),e.bindTexture(e.TEXTURE_2D,O),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST);let k=e.createTexture();e.activeTexture(e.TEXTURE5),e.bindTexture(e.TEXTURE_2D,k),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST);let A=e.createTexture();return e.activeTexture(e.TEXTURE6),e.bindTexture(e.TEXTURE_2D,A),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.useProgram(r),e.uniform1i(e.getUniformLocation(r,`u_fboTexture`),3),e.uniform1i(e.getUniformLocation(r,`u_scatterAtlas`),4),e.uniform1i(e.getUniformLocation(r,`u_scatterStateTexture`),5),e.uniform1i(e.getUniformLocation(r,`u_spreadStateTexture`),6),{program:r,pass1Program:v,buffer:a,vertShader:t,fragShader:n,pass1FragShader:_,texture:f,atlasTexture:m,charVectorsTexture:g,fboTexture:E,fbo:D,scatterAtlasTexture:O,scatterStateTexture:k,spreadStateTexture:A,p1ResLoc:y,p1CellsizeLoc:b,p1CircleNLoc:x,p1NumCharsLoc:S,p1ExponentLoc:C,p1CropOffsetLoc:w,p1CropScaleLoc:T,revealEffectFlagLoc:e.getUniformLocation(r,`u_revealEffectFlag`),mouseEffectFlagLoc:e.getUniformLocation(r,`u_mouseEffect`),clickEffectFlagLoc:e.getUniformLocation(r,`u_clickEffect`),shapeMatchingLoc:e.getUniformLocation(r,`u_shapeMatching`),revealProgressLoc:e.getUniformLocation(r,`u_revealProgress`),brightnessLoc:e.getUniformLocation(r,`u_brightness`),saturationLoc:e.getUniformLocation(r,`u_saturation`),bgOpacityLoc:e.getUniformLocation(r,`u_bgOpacity`),mouseBrightnessLoc:e.getUniformLocation(r,`u_mouseBrightness`),mousePositionsLoc:e.getUniformLocation(r,`u_mousePositions`),mouseLifeFracsLoc:e.getUniformLocation(r,`u_mouseLifeFracs`),mouseRadiusLoc:e.getUniformLocation(r,`u_mouseRadius`),ripplePositionsLoc:e.getUniformLocation(r,`u_ripplePositions`),rippleRadiiLoc:e.getUniformLocation(r,`u_rippleRadii`),rippleBrightnessesLoc:e.getUniformLocation(r,`u_rippleBrightnesses`),scatterEffectFlagLoc:e.getUniformLocation(r,`u_scatterEffect`),scatterNumCharsLoc:e.getUniformLocation(r,`u_scatterNumChars`),spreadEffectFlagLoc:e.getUniformLocation(r,`u_spreadEffect`),videoModeLoc:e.getUniformLocation(r,`u_videoMode`),resLoc:e.getUniformLocation(r,`u_resolution`),sizeLoc:e.getUniformLocation(r,`u_cellsize`),numLoc:e.getUniformLocation(r,`u_numChars`),gridSizeLoc:e.getUniformLocation(r,`u_gridSize`),cropOffsetLoc:e.getUniformLocation(r,`u_cropOffset`),cropScaleLoc:e.getUniformLocation(r,`u_cropScale`)}}function p({scatterEnabledRef:e,mouseRadiusRef:t,durationRef:n,scatterCharsRef:r}){let i=new Uint8Array,a=new Float32Array,o=new Float32Array,s=new Uint8Array,c=null,l=null,u=0,d=0,f=-1,p=()=>Math.floor(Math.random()*r.current.length),m=0,h=0,g=1,_=1,v=null;return{setup(e,t,n,r,f,p){m=t,h=n,g=r,_=f,v=p;let y=t*n;i=new Uint8Array(y),a=new Float32Array(y),o=new Float32Array(y),s=new Uint8Array(y),c=null,l=null,u=0,d=0,e.activeTexture(e.TEXTURE5),e.bindTexture(e.TEXTURE_2D,p),e.texImage2D(e.TEXTURE_2D,0,e.R8UI,t,n,0,e.RED_INTEGER,e.UNSIGNED_BYTE,i)},handleMouseMove(t,n,r){e.current&&(l=c,c={x:t,y:n,t:r})},handleMouseLeave(){c=null,l=null,u=0,d=0},reset(e){i.fill(0),v&&m>0&&(e.activeTexture(e.TEXTURE5),e.bindTexture(e.TEXTURE_2D,v),e.texSubImage2D(e.TEXTURE_2D,0,0,0,m,h,e.RED_INTEGER,e.UNSIGNED_BYTE,i))},tick(r,y){if(!e.current||m===0||h===0)return;let b=performance.now(),x=f<0?0:Math.min(.1,(b-f)/1e3);f=b;let S=Math.min(y.width,y.height)*t.current,C=!1;if(c&&b-c.t<80){if(l){let e=(c.t-l.t)/1e3;if(e>0&&e<.2){let t=(c.x-l.x)/e,n=(c.y-l.y)/e;u=u*.7+t*.3,d=d*.7+n*.3}}else u=0,d=0;Math.hypot(u,d)>g*2&&(C=!0)}else u*=.6,d*=.6;if(s.fill(0),C&&c&&S>0){let e=c.x,t=c.y,n=Math.max(0,Math.floor((e-S)/g)),r=Math.min(m-1,Math.floor((e+S)/g)),l=Math.max(0,Math.floor((t-S)/_)),u=Math.min(h-1,Math.floor((t+S)/_));for(let c=l;c<=u;c++)for(let l=n;l<=r;l++){let n=(l+.5)*g,r=(c+.5)*_;if(Math.hypot(n-e,r-t)>S)continue;let u=c*m+l;s[u]=1,i[u]===0&&(i[u]=1+p(),o[u]=.5+Math.random()*2),a[u]=1}}let w=n.current;if(x>0)for(let e=0;e<h;e++)for(let t=0;t<m;t++){let n=e*m+t;if(i[n]===0||s[n])continue;let r=t>0?i[n-1]!==0:!1,c=t<m-1?i[n+1]!==0:!1,l=e>0?i[n-m]!==0:!1,u=e<h-1?i[n+m]!==0:!1,d=(!r||!c||!l||!u?5:1)*o[n]/w;a[n]-=d*x,a[n]<=0&&(i[n]=0)}r.activeTexture(r.TEXTURE5),r.bindTexture(r.TEXTURE_2D,v),r.texSubImage2D(r.TEXTURE_2D,0,0,0,m,h,r.RED_INTEGER,r.UNSIGNED_BYTE,i)}}}function m({brightenEnabledRef:e,trailLenRef:t,durationRef:n,trailDecayRef:r}){let i=[];return{handleMouseMove(n,r,a){e.current&&(i.push({x:n,y:r,t:a}),i.length>t.current&&i.shift())},tick(a,o,s){if(!e.current)return;let c=performance.now(),l=new Float32Array(t.current*2),u=new Float32Array(t.current);for(let e=0;e<i.length;e++){let t=c-i[e].t,a=Math.max(0,1-t/(n.current*1e3))**r.current;l[e*2]=i[e].x,l[e*2+1]=i[e].y,u[e]=a}a.uniform2fv(o,l),a.uniform1fv(s,u)}}}var h=10;function g({clickEnabledRef:e,clickSpeedRef:t,clickBrightnessRef:n}){let r=[];return{handleClick(t,n){if(!e.current)return;let i=n.getBoundingClientRect(),a=(t.clientX-i.left)*(n.width/i.width),o=(t.clientY-i.top)*(n.height/i.height);r.push({x:a,y:o,t:performance.now()}),r.length>h&&r.shift()},tick(i,a,o,s,c){if(!e.current)return;let l=performance.now(),u=Math.hypot(a.width,a.height),d=new Float32Array(h*2),f=new Float32Array(h),p=new Float32Array(h);for(;r.length>0&&(l-r[0].t)*t.current>=u;)r.shift();for(let e=0;e<r.length;e++){let i=(l-r[e].t)*t.current,a=i/u,o=1+(n.current-1)*(1-a**2);d[e*2]=r[e].x,d[e*2+1]=r[e].y,f[e]=i,p[e]=o}i.uniform2fv(o,d),i.uniform1fv(s,f),i.uniform1fv(c,p)}}}function _({spreadEnabledRef:e,scatterCharsRef:t,spreadExpandDurationRef:n,spreadSpeedRef:r}){let i=new Uint8Array,a=new Uint8Array,o=0,s=0,c=1,l=1,u=null,d=-1,f=-1,p=()=>Math.floor(Math.random()*t.current.length),m=[[-1,0],[1,0],[0,-1],[0,1]];return{setup(e,t,n,r,p,m){o=t,s=n,c=r,l=p,u=m;let h=t*n;i=new Uint8Array(h),a=new Uint8Array(h),f=-1,d=-1,e.activeTexture(e.TEXTURE6),e.bindTexture(e.TEXTURE_2D,m),e.texImage2D(e.TEXTURE_2D,0,e.R8UI,t,n,0,e.RED_INTEGER,e.UNSIGNED_BYTE,i)},handleClick(t,r){if(!e.current||o===0)return;let u=r.getBoundingClientRect(),d=(t.clientX-u.left)*(r.width/u.width),m=(t.clientY-u.top)*(r.height/u.height),h=Math.floor(d/c),g=Math.floor(m/l);if(h<0||h>=o||g<0||g>=s)return;let _=g*o+h;i[_]=1+p(),a[_]=1,f=performance.now()+n.current*1e3},tick(t){if(!e.current||o===0||s===0)return;let n=performance.now(),c=d<0?0:Math.min(.1,(n-d)/1e3);d=n;let l=f>0&&n<f;if(!l&&f>0){for(let e=0;e<i.length;e++)a[e]===1&&(a[e]=2);f=-1}if(c>0)for(let e=0;e<s;e++)for(let t=0;t<o;t++){let n=e*o+t;if(a[n]!==0){if(l&&a[n]===1)for(let[n,l]of m){let u=e+n,d=t+l;if(u<0||u>=s||d<0||d>=o)continue;let f=u*o+d;a[f]===0&&Math.random()<r.current*c&&(i[f]=1+p(),a[f]=1)}else if(a[n]===2)for(let[l,u]of m){let d=e+l,f=t+u;if(d<0||d>=s||f<0||f>=o||i[d*o+f]===0){Math.random()<r.current*c&&(i[n]=0,a[n]=0);break}}}}t.activeTexture(t.TEXTURE6),t.bindTexture(t.TEXTURE_2D,u),t.texSubImage2D(t.TEXTURE_2D,0,0,0,o,s,t.RED_INTEGER,t.UNSIGNED_BYTE,i)}}}function v({src:e,videoMode:r=!1,numColsRaw:s=250,brightnessRaw:c=1,saturationRaw:l=1,bgOpacityRaw:u=.3,revealEffect:d=!1,chars:h=a,mouseEffect:v=!0,clickEffect:y=!0,charMode:b=`shape`,className:x}){let S=(0,t.useRef)(null),C=(0,t.useRef)(null),w=(0,t.useRef)(null),T=(0,t.useRef)(null),E=(0,t.useRef)(null),{numCols:D,brightness:O,saturation:k,bgOpacity:A,mouseEnabled:j,mouseStyle:M,brightenEnabled:N,scatterEnabled:P,scatterChars:F,trailLen:I,trailDecay:L,duration:R,mouseRadius:z,mouseBrightness:B,clickEnabled:V,clickBrightness:H,clickSpeed:U,spreadEnabled:W,spreadExpandDuration:G,spreadSpeed:K,revealEnabled:ee,revealDuration:te,revealEffectFlag:ne}=o(s,c,l,u,v,y,d),re=(0,t.useRef)(O),ie=(0,t.useRef)(k),ae=(0,t.useRef)(A),oe=(0,t.useRef)(j),se=(0,t.useRef)(M),q=(0,t.useRef)(N),J=(0,t.useRef)(P),ce=(0,t.useRef)(B),Y=(0,t.useRef)(z),le=(0,t.useRef)(I),ue=(0,t.useRef)(L),X=(0,t.useRef)(R),Z=(0,t.useRef)(F),Q=(0,t.useRef)(V),de=(0,t.useRef)(H),fe=(0,t.useRef)(U),pe=(0,t.useRef)(W),me=(0,t.useRef)(G),he=(0,t.useRef)(K),ge=(0,t.useRef)(D),_e=(0,t.useRef)(r);(0,t.useEffect)(()=>{re.current=O,ie.current=k,ae.current=A,oe.current=j,se.current=M,q.current=N,J.current=P,ce.current=B,Y.current=z,le.current=I,ue.current=L,X.current=R,Z.current!==F&&$.current?(Z.current=F,ye.current?.()):Z.current=F,Q.current=V,de.current=H,fe.current=U,pe.current=W,me.current=G,he.current=K,ge.current=D,_e.current=r},[O,k,A,j,M,N,P,B,z,I,L,R,F,V,H,U,W,G,K,D,r]);let ve=(0,t.useRef)(null),ye=(0,t.useRef)(null),$=(0,t.useRef)(!1);return(0,t.useEffect)(()=>{$.current&&ve.current?.(D)},[D]),(0,t.useEffect)(()=>{$.current=!1;let t=[],n=0,r=0,a=1,o=1,s=S.current;if(!s)return;let c=C.current;if(!c)return;let l=s.getContext(`webgl2`);if(!l)return;l.pixelStorei(l.UNPACK_ALIGNMENT,1);let u=f(l);if(!u)return;let{program:d,pass1Program:v}=u;T.current=u.atlasTexture,E.current=u.scatterAtlasTexture,l.uniform1i(u.shapeMatchingLoc,+(b===`shape`)),l.uniform1i(u.revealEffectFlagLoc,ne),l.uniform1f(u.revealProgressLoc,0);let y=p({scatterEnabledRef:J,mouseRadiusRef:Y,durationRef:X,scatterCharsRef:Z}),x=m({brightenEnabledRef:q,trailLenRef:le,durationRef:X,trailDecayRef:ue}),D=g({clickEnabledRef:Q,clickSpeedRef:fe,clickBrightnessRef:de}),O=_({spreadEnabledRef:pe,scatterCharsRef:Z,spreadExpandDurationRef:me,spreadSpeedRef:he}),k,A=-1,j=-1,M=0,N=Array.isArray(e)?e:[e],P=N.length>1,F=document.createElement(`canvas`),I=F.getContext(`2d`),L=e=>{a=Math.max(1,Math.floor(s.width/e));let c=a*2;if(I.font=`${c}px monospace`,o=Math.max(1,Math.round(c*a/I.measureText(`M`).width)),n=Math.floor(s.width/a),r=Math.floor(s.height/o),s.width=n*a,s.height=r*o,l.viewport(0,0,s.width,s.height),l.useProgram(d),l.uniform2f(u.resLoc,s.width,s.height),l.useProgram(v),l.uniform2f(u.p1ResLoc,s.width,s.height),l.useProgram(d),y.setup(l,n,r,a,o,u.scatterStateTexture),O.setup(l,n,r,a,o,u.spreadStateTexture),b===`shape`){t=i(h,a,o);let e=t.length,s=new Float32Array(e*8);for(let n=0;n<e;n++){let r=t[n].vector;s[n*4+0]=r[0],s[n*4+1]=r[1],s[n*4+2]=r[2],s[n*4+3]=r[3],s[e*4+n*4+0]=r[4],s[e*4+n*4+1]=r[5]}l.activeTexture(l.TEXTURE2),l.bindTexture(l.TEXTURE_2D,u.charVectorsTexture),l.texImage2D(l.TEXTURE_2D,0,l.RGBA32F,e,2,0,l.RGBA,l.FLOAT,s),l.activeTexture(l.TEXTURE3),l.bindTexture(l.TEXTURE_2D,u.fboTexture),l.texImage2D(l.TEXTURE_2D,0,l.R8UI,n,r,0,l.RED_INTEGER,l.UNSIGNED_BYTE,null),l.bindFramebuffer(l.FRAMEBUFFER,u.fbo),l.framebufferTexture2D(l.FRAMEBUFFER,l.COLOR_ATTACHMENT0,l.TEXTURE_2D,u.fboTexture,0),l.bindFramebuffer(l.FRAMEBUFFER,null);let c=Math.max(1,Math.round(a/5));l.useProgram(v),l.uniform2f(u.p1CellsizeLoc,a,o),l.uniform1i(u.p1CircleNLoc,c),l.uniform1i(u.p1NumCharsLoc,e),l.uniform1f(u.p1ExponentLoc,2),l.useProgram(d)}l.uniform2f(u.gridSizeLoc,n,r),F.width=h.length*a,F.height=o,I.font=`${o}px monospace`,I.fillStyle=`black`,I.fillRect(0,0,h.length*a,o),I.fillStyle=`white`,I.textBaseline=`top`;for(let e=0;e<h.length;e++)I.fillText(h[e],e*a,0);l.activeTexture(l.TEXTURE1),l.bindTexture(l.TEXTURE_2D,T.current),l.texImage2D(l.TEXTURE_2D,0,l.RGBA,l.RGBA,l.UNSIGNED_BYTE,F),l.uniform1f(u.numLoc,h.length),l.uniform2f(u.sizeLoc,a,o),R()},R=()=>{let e=Z.current;F.width=e.length*a,F.height=o,I.fillStyle=`black`,I.fillRect(0,0,F.width,o),I.fillStyle=`white`,I.textBaseline=`top`,I.font=`${o}px monospace`;for(let t=0;t<e.length;t++)I.fillText(e[t],t*a,0);l.activeTexture(l.TEXTURE4),l.bindTexture(l.TEXTURE_2D,E.current),l.texImage2D(l.TEXTURE_2D,0,l.RGBA,l.RGBA,l.UNSIGNED_BYTE,F),l.uniform1f(u.scatterNumCharsLoc,e.length),y.reset(l)};ve.current=L,ye.current=R;let z=(e,t)=>{s.width=Math.round(e),s.height=Math.round(t),L(ge.current);let n=c.videoWidth/c.videoHeight,r=s.width/s.height,i=1,a=1,o=0,f=0;r>n?(a=n/r,f=(1-a)/2):(i=r/n,o=(1-i)/2),l.uniform2f(u.cropOffsetLoc,o,f),l.uniform2f(u.cropScaleLoc,i,a),l.useProgram(v),l.uniform2f(u.p1CropOffsetLoc,o,f),l.uniform2f(u.p1CropScaleLoc,i,a),l.useProgram(d)},B=e=>{if(!oe.current)return;let t=s.getBoundingClientRect(),n=(e.clientX-t.left)*(s.width/t.width),r=(e.clientY-t.top)*(s.height/t.height),i=performance.now();x.handleMouseMove(n,r,i),y.handleMouseMove(n,r,i)};s.addEventListener(`mousemove`,B);let V=()=>y.handleMouseLeave();s.addEventListener(`mouseleave`,V);let H=e=>{D.handleClick(e,s),O.handleClick(e,s)};s.addEventListener(`click`,H);let U=()=>{if(l.uniform1i(u.videoModeLoc,+!!_e.current),l.uniform1f(u.brightnessLoc,re.current),l.uniform1f(u.saturationLoc,ie.current),l.uniform1f(u.bgOpacityLoc,ae.current),l.uniform1i(u.mouseEffectFlagLoc,+!!q.current),l.uniform1i(u.scatterEffectFlagLoc,+!!J.current),l.uniform1i(u.clickEffectFlagLoc,+!!Q.current),l.uniform1i(u.spreadEffectFlagLoc,+!!pe.current),l.uniform1f(u.mouseBrightnessLoc,ce.current),l.uniform1f(u.mouseRadiusLoc,Math.min(s.width,s.height)*Y.current),ee){let e=j<0?0:Math.min(1,(performance.now()-j)/(te*1e3));l.uniform1f(u.revealProgressLoc,e)}$.current&&c.currentTime!=A&&c.readyState>=2&&(l.activeTexture(l.TEXTURE0),l.bindTexture(l.TEXTURE_2D,u.texture),l.texSubImage2D(l.TEXTURE_2D,0,0,0,l.RGBA,l.UNSIGNED_BYTE,c),A=c.currentTime),x.tick(l,u.mousePositionsLoc,u.mouseLifeFracsLoc),y.tick(l,s),D.tick(l,s,u.ripplePositionsLoc,u.rippleRadiiLoc,u.rippleBrightnessesLoc),O.tick(l),b===`shape`&&(l.bindFramebuffer(l.FRAMEBUFFER,u.fbo),l.viewport(0,0,n,r),l.useProgram(v),l.drawArrays(l.TRIANGLES,0,6),l.bindFramebuffer(l.FRAMEBUFFER,null),l.viewport(0,0,s.width,s.height),l.useProgram(d)),l.drawArrays(l.TRIANGLES,0,6),k=requestAnimationFrame(U)},W=()=>{let e=w.current;z(e.clientWidth||c.videoWidth,e.clientHeight||c.videoHeight),l.activeTexture(l.TEXTURE0),l.bindTexture(l.TEXTURE_2D,u.texture),l.texImage2D(l.TEXTURE_2D,0,l.RGBA,l.RGBA,l.UNSIGNED_BYTE,c),c.play(),j=performance.now(),$.current=!0,k=requestAnimationFrame(U)},G=()=>{M=(M+1)%N.length,c.src=N[M],c.load(),c.addEventListener(`canplay`,()=>c.play(),{once:!0})},K=new ResizeObserver(e=>{let{width:t,height:n}=e[0].contentRect;$.current&&t>0&&n>0&&z(t,n)});return w.current&&K.observe(w.current),c.addEventListener(`loadeddata`,W,{once:!0}),P&&c.addEventListener(`ended`,G),c.readyState>=2&&c.currentSrc.endsWith(N[0])?W():c.currentSrc.endsWith(N[0])||c.load(),()=>{K.disconnect(),ve.current=null,ye.current=null,$.current=!1,cancelAnimationFrame(k),c.removeEventListener(`loadeddata`,W),P&&c.removeEventListener(`ended`,G),s.removeEventListener(`mousemove`,B),s.removeEventListener(`mouseleave`,V),s.removeEventListener(`click`,H),l.deleteTexture(u.texture),l.deleteTexture(u.charVectorsTexture),l.deleteFramebuffer(u.fbo),l.deleteTexture(u.fboTexture),l.deleteBuffer(u.buffer),l.deleteShader(u.vertShader),l.deleteShader(u.fragShader),l.deleteShader(u.pass1FragShader),l.deleteProgram(d),l.deleteProgram(v),l.deleteTexture(T.current),l.deleteTexture(E.current),l.deleteTexture(u.scatterStateTexture),l.deleteTexture(u.spreadStateTexture)}},[e,b,h,ne,te,ee]),(0,n.jsxs)(`div`,{ref:w,className:x,style:{height:`100%`,width:`100%`},children:[(0,n.jsx)(`video`,{ref:C,muted:!0,playsInline:!0,autoPlay:!0,loop:!Array.isArray(e)||e.length===1,style:{display:`none`},children:(0,n.jsx)(`source`,{src:Array.isArray(e)?e[0]:e,type:`video/mp4`})}),(0,n.jsx)(`canvas`,{ref:S,style:{width:`100%`,height:`100%`,display:`block`}})]})}e.VideoAscii=v});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-video-ascii",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React component that renders videos as ASCII animations using WebGL2.",
+  "author": "Lucas Jin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LucasHJin/react-video-ascii.git"
+  },
+  "homepage": "https://github.com/LucasHJin/react-video-ascii",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/react-video-ascii.umd.cjs",
+  "module": "./dist/react-video-ascii.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-video-ascii.js",
+      "require": "./dist/react-video-ascii.umd.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.59.1",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0",
+    "vite-plugin-glsl": "^1.6.0"
+  }
+}