react-video-ascii 1.0.0 → 1.1.0

package/README.md

@@ -76,6 +76,7 @@ const sources = ['/video1.mp4', '/video2.mp4'];
 | `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. |
+| `cropFocus` | `'left' \| 'center' \| 'right'` | `'center'` | — | Determines where to anchor the cropping around. |
 | `className` | `string` | — | — | CSS class on the outer container. |
 
 ---

package/dist/components/VideoAscii.d.ts

@@ -1,3 +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;
+declare function VideoAscii({ src, videoMode, numColsRaw, brightnessRaw, saturationRaw, bgOpacityRaw, revealEffect, chars, mouseEffect, clickEffect, charMode, className, cropFocus, }: Props): import("react/jsx-runtime").JSX.Element;
 export default VideoAscii;

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

@@ -32,6 +32,7 @@ export interface Props {
     clickEffect?: boolean | ClickEffectOptions;
     charMode?: 'shape' | 'luminance';
     className?: string;
+    cropFocus?: 'left' | 'center' | 'right';
 }
 export interface ParsedProps {
     numCols: number;

package/dist/react-video-ascii.js

@@ -354,142 +354,153 @@ function v({ spreadEnabledRef: e, scatterCharsRef: t, spreadExpandDurationRef: n
 }
 //#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);
+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, cropFocus: w = "center" }) {
+	let T = t(null), E = t(null), D = t(null), O = t(null), k = t(null), { numCols: A, brightness: j, saturation: M, bgOpacity: N, mouseEnabled: P, mouseStyle: F, brightenEnabled: I, scatterEnabled: L, scatterChars: R, trailLen: z, trailDecay: B, duration: V, mouseRadius: H, mouseBrightness: U, clickEnabled: W, clickBrightness: G, clickSpeed: K, spreadEnabled: q, spreadExpandDuration: J, spreadSpeed: Y, revealEnabled: ee, revealDuration: te, revealEffectFlag: ne } = s(l, u, d, f, b, x, g), re = t(j), ie = t(M), ae = t(N), oe = t(P), se = t(F), X = t(I), Z = t(L), ce = t(U), le = t(H), ue = t(z), de = t(B), fe = t(V), Q = t(R), pe = t(W), me = t(G), he = t(K), ge = t(q), _e = t(J), ve = t(Y), ye = t(A), be = t(c), xe = t(w), Se = t(0), Ce = t(0);
 	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;
+		re.current = j, ie.current = M, ae.current = N, oe.current = P, se.current = F, X.current = I, Z.current = L, ce.current = U, le.current = H, ue.current = z, de.current = B, fe.current = V, Q.current !== R && $.current ? (Q.current = R, Te.current?.()) : Q.current = R, pe.current = W, me.current = G, he.current = K, ge.current = q, _e.current = J, ve.current = Y, ye.current = A, be.current = c;
 	}, [
-		A,
 		j,
 		M,
 		N,
 		P,
 		F,
 		I,
+		L,
+		U,
 		H,
-		V,
-		R,
 		z,
 		B,
-		L,
-		U,
+		V,
+		R,
 		W,
 		G,
 		K,
 		q,
-		ee,
-		k,
+		J,
+		Y,
+		A,
 		c
 	]);
-	let be = t(null), xe = t(null), $ = t(!1);
+	let we = t(null), Te = t(null), Ee = t(null), $ = t(!1);
 	return e(() => {
-		$.current && be.current?.(k);
-	}, [k]), e(() => {
+		$.current && we.current?.(A);
+	}, [A]), e(() => {
+		xe.current = w, $.current && Se.current > 0 && Ee.current?.(Se.current, Ce.current);
+	}, [w]), 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");
+		let e = [], t = 0, n = 0, r = 1, o = 1, s = 0, c = 0, l = T.current;
 		if (!l) return;
-		l.pixelStorei(l.UNPACK_ALIGNMENT, 1);
-		let u = p(l);
+		let u = E.current;
 		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,
+		let d = l.getContext("webgl2");
+		if (!d) return;
+		d.pixelStorei(d.UNPACK_ALIGNMENT, 1);
+		let f = p(d);
+		if (!f) return;
+		let { program: g, pass1Program: b } = f;
+		O.current = f.atlasTexture, k.current = f.scatterAtlasTexture, d.uniform1i(f.shapeMatchingLoc, +(S === "shape")), d.uniform1i(f.revealEffectFlagLoc, ne), d.uniform1f(f.revealProgressLoc, 0);
+		let x = m({
+			scatterEnabledRef: Z,
+			mouseRadiusRef: le,
+			durationRef: fe,
 			scatterCharsRef: Q
-		}), b = h({
-			brightenEnabledRef: J,
+		}), C = h({
+			brightenEnabledRef: X,
 			trailLenRef: ue,
-			durationRef: Z,
+			durationRef: fe,
 			trailDecayRef: de
-		}), x = _({
-			clickEnabledRef: fe,
-			clickSpeedRef: me,
-			clickBrightnessRef: pe
-		}), C = v({
-			spreadEnabledRef: he,
+		}), w = _({
+			clickEnabledRef: pe,
+			clickSpeedRef: he,
+			clickBrightnessRef: me
+		}), A = v({
+			spreadEnabledRef: ge,
 			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") {
+			spreadExpandDurationRef: _e,
+			spreadSpeedRef: ve
+		}), j, M = -1, N = -1, P = 0, F = Array.isArray(i) ? i : [i], I = F.length > 1, L = document.createElement("canvas"), R = L.getContext("2d"), z = (i) => {
+			let u = s > 0 ? s : l.width, p = c > 0 ? c : l.height;
+			r = Math.max(1, Math.floor(u / i));
+			let m = r * 2;
+			if (R.font = `${m}px monospace`, o = Math.max(1, Math.round(m * r / R.measureText("M").width)), t = Math.floor(u / r), n = Math.floor(p / o), l.width = t * r, l.height = n * o, d.viewport(0, 0, l.width, l.height), d.useProgram(g), d.uniform2f(f.resLoc, l.width, l.height), d.useProgram(b), d.uniform2f(f.p1ResLoc, l.width, l.height), d.useProgram(g), x.setup(d, t, n, r, o, f.scatterStateTexture), A.setup(d, t, n, r, o, f.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);
+				d.activeTexture(d.TEXTURE2), d.bindTexture(d.TEXTURE_2D, f.charVectorsTexture), d.texImage2D(d.TEXTURE_2D, 0, d.RGBA32F, i, 2, 0, d.RGBA, d.FLOAT, s), d.activeTexture(d.TEXTURE3), d.bindTexture(d.TEXTURE_2D, f.fboTexture), d.texImage2D(d.TEXTURE_2D, 0, d.R8UI, t, n, 0, d.RED_INTEGER, d.UNSIGNED_BYTE, null), d.bindFramebuffer(d.FRAMEBUFFER, f.fbo), d.framebufferTexture2D(d.FRAMEBUFFER, d.COLOR_ATTACHMENT0, d.TEXTURE_2D, f.fboTexture, 0), d.bindFramebuffer(d.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);
+				d.useProgram(b), d.uniform2f(f.p1CellsizeLoc, r, o), d.uniform1i(f.p1CircleNLoc, c), d.uniform1i(f.p1NumCharsLoc, i), d.uniform1f(f.p1ExponentLoc, 2), d.useProgram(g);
 			}
-			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 = () => {
+			d.uniform2f(f.gridSizeLoc, t, n), L.width = y.length * r, L.height = o, R.font = `${o}px monospace`, R.fillStyle = "black", R.fillRect(0, 0, y.length * r, o), R.fillStyle = "white", R.textBaseline = "top";
+			for (let e = 0; e < y.length; e++) R.fillText(y[e], e * r, 0);
+			d.activeTexture(d.TEXTURE1), d.bindTexture(d.TEXTURE_2D, O.current), d.texImage2D(d.TEXTURE_2D, 0, d.RGBA, d.RGBA, d.UNSIGNED_BYTE, L), d.uniform1f(f.numLoc, y.length), d.uniform2f(f.sizeLoc, r, o), B();
+		}, B = () => {
 			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);
+			L.width = e.length * r, L.height = o, R.fillStyle = "black", R.fillRect(0, 0, L.width, o), R.fillStyle = "white", R.textBaseline = "top", R.font = `${o}px monospace`;
+			for (let t = 0; t < e.length; t++) R.fillText(e[t], t * r, 0);
+			d.activeTexture(d.TEXTURE4), d.bindTexture(d.TEXTURE_2D, k.current), d.texImage2D(d.TEXTURE_2D, 0, d.RGBA, d.RGBA, d.UNSIGNED_BYTE, L), d.uniform1f(f.scatterNumCharsLoc, e.length), x.reset(d);
 		};
-		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);
+		we.current = z, Te.current = B;
+		let V = (e, t) => {
+			s = Math.round(e), c = Math.round(t), Se.current = s, Ce.current = c, l.width = s, l.height = c, z(ye.current);
+			let n = u.videoWidth / u.videoHeight, r = l.width / l.height, i = 1, a = 1, o = 0, p = 0;
+			if (r > n) a = n / r, p = (1 - a) / 2;
+			else {
+				i = r / n;
+				let e = xe.current, t = e === "left" ? .25 : e === "right" ? .75 : .5;
+				o = Math.max(0, Math.min(1 - i, t - i / 2));
+			}
+			d.uniform2f(f.cropOffsetLoc, o, p), d.uniform2f(f.cropScaleLoc, i, a), d.useProgram(b), d.uniform2f(f.p1CropOffsetLoc, o, p), d.uniform2f(f.p1CropScaleLoc, i, a), d.useProgram(g);
 		};
-		s.addEventListener("mousemove", B);
-		let V = () => g.handleMouseLeave();
-		s.addEventListener("mouseleave", V);
+		Ee.current = V;
 		let H = (e) => {
-			x.handleClick(e, s), C.handleClick(e, s);
+			if (!oe.current) return;
+			let t = l.getBoundingClientRect(), n = (e.clientX - t.left) * (l.width / t.width), r = (e.clientY - t.top) * (l.height / t.height), i = performance.now();
+			C.handleMouseMove(n, r, i), x.handleMouseMove(n, r, i);
 		};
-		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);
+		l.addEventListener("mousemove", H);
+		let U = () => x.handleMouseLeave();
+		l.addEventListener("mouseleave", U);
+		let W = (e) => {
+			w.handleClick(e, l), A.handleClick(e, l);
+		};
+		l.addEventListener("click", W);
+		let G = () => {
+			if (d.uniform1i(f.videoModeLoc, +!!be.current), d.uniform1f(f.brightnessLoc, re.current), d.uniform1f(f.saturationLoc, ie.current), d.uniform1f(f.bgOpacityLoc, ae.current), d.uniform1i(f.mouseEffectFlagLoc, +!!X.current), d.uniform1i(f.scatterEffectFlagLoc, +!!Z.current), d.uniform1i(f.clickEffectFlagLoc, +!!pe.current), d.uniform1i(f.spreadEffectFlagLoc, +!!ge.current), d.uniform1f(f.mouseBrightnessLoc, ce.current), d.uniform1f(f.mouseRadiusLoc, Math.min(l.width, l.height) * le.current), ee) {
+				let e = N < 0 ? 0 : Math.min(1, (performance.now() - N) / (te * 1e3));
+				d.uniform1f(f.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) => {
+			$.current && u.currentTime != M && u.readyState >= 2 && (d.activeTexture(d.TEXTURE0), d.bindTexture(d.TEXTURE_2D, f.texture), d.texSubImage2D(d.TEXTURE_2D, 0, 0, 0, d.RGBA, d.UNSIGNED_BYTE, u), M = u.currentTime), C.tick(d, f.mousePositionsLoc, f.mouseLifeFracsLoc), x.tick(d, l), w.tick(d, l, f.ripplePositionsLoc, f.rippleRadiiLoc, f.rippleBrightnessesLoc), A.tick(d), S === "shape" && (d.bindFramebuffer(d.FRAMEBUFFER, f.fbo), d.viewport(0, 0, t, n), d.useProgram(b), d.drawArrays(d.TRIANGLES, 0, 6), d.bindFramebuffer(d.FRAMEBUFFER, null), d.viewport(0, 0, l.width, l.height), d.useProgram(g)), d.drawArrays(d.TRIANGLES, 0, 6), j = requestAnimationFrame(G);
+		}, K = () => {
+			let e = D.current;
+			V(e.clientWidth || u.videoWidth, e.clientHeight || u.videoHeight), d.activeTexture(d.TEXTURE0), d.bindTexture(d.TEXTURE_2D, f.texture), d.texImage2D(d.TEXTURE_2D, 0, d.RGBA, d.RGBA, d.UNSIGNED_BYTE, u), u.play(), N = performance.now(), $.current = !0, j = requestAnimationFrame(G);
+		}, q = () => {
+			P = (P + 1) % F.length, u.src = F[P], u.load(), u.addEventListener("canplay", () => u.play(), { once: !0 });
+		}, J = new ResizeObserver((e) => {
 			let { width: t, height: n } = e[0].contentRect;
-			$.current && t > 0 && n > 0 && z(t, n);
+			$.current && t > 0 && n > 0 && V(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);
+		return D.current && J.observe(D.current), u.addEventListener("loadeddata", K, { once: !0 }), I && u.addEventListener("ended", q), u.readyState >= 2 && u.currentSrc.endsWith(F[0]) ? K() : u.currentSrc.endsWith(F[0]) || u.load(), () => {
+			J.disconnect(), we.current = null, Te.current = null, Ee.current = null, $.current = !1, cancelAnimationFrame(j), u.removeEventListener("loadeddata", K), I && u.removeEventListener("ended", q), l.removeEventListener("mousemove", H), l.removeEventListener("mouseleave", U), l.removeEventListener("click", W), d.deleteTexture(f.texture), d.deleteTexture(f.charVectorsTexture), d.deleteFramebuffer(f.fbo), d.deleteTexture(f.fboTexture), d.deleteBuffer(f.buffer), d.deleteShader(f.vertShader), d.deleteShader(f.fragShader), d.deleteShader(f.pass1FragShader), d.deleteProgram(g), d.deleteProgram(b), d.deleteTexture(O.current), d.deleteTexture(k.current), d.deleteTexture(f.scatterStateTexture), d.deleteTexture(f.spreadStateTexture);
 		};
 	}, [
 		i,
 		S,
 		y,
-		re,
 		ne,
-		te
+		te,
+		ee
 	]), /* @__PURE__ */ r("div", {
-		ref: E,
+		ref: D,
 		className: C,
 		style: {
 			height: "100%",
 			width: "100%"
 		},
 		children: [/* @__PURE__ */ n("video", {
-			ref: T,
+			ref: E,
 			muted: !0,
 			playsInline: !0,
 			autoPlay: !0,
@@ -500,7 +511,7 @@ function y({ src: i, videoMode: c = !1, numColsRaw: l = 250, brightnessRaw: u =
 				type: "video/mp4"
 			})
 		}), /* @__PURE__ */ n("canvas", {
-			ref: w,
+			ref: T,
 			style: {
 				width: "100%",
 				height: "100%",

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

@@ -277,4 +277,4 @@ void main() {
     }
 
     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});
+}`;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,cropFocus:S=`center`}){let C=(0,t.useRef)(null),w=(0,t.useRef)(null),T=(0,t.useRef)(null),E=(0,t.useRef)(null),D=(0,t.useRef)(null),{numCols:O,brightness:k,saturation:A,bgOpacity:j,mouseEnabled:M,mouseStyle:N,brightenEnabled:P,scatterEnabled:F,scatterChars:I,trailLen:L,trailDecay:R,duration:z,mouseRadius:B,mouseBrightness:V,clickEnabled:H,clickBrightness:U,clickSpeed:W,spreadEnabled:G,spreadExpandDuration:K,spreadSpeed:q,revealEnabled:ee,revealDuration:te,revealEffectFlag:ne}=o(s,c,l,u,v,y,d),re=(0,t.useRef)(k),ie=(0,t.useRef)(A),ae=(0,t.useRef)(j),oe=(0,t.useRef)(M),J=(0,t.useRef)(N),Y=(0,t.useRef)(P),X=(0,t.useRef)(F),se=(0,t.useRef)(V),Z=(0,t.useRef)(B),ce=(0,t.useRef)(L),le=(0,t.useRef)(R),ue=(0,t.useRef)(z),Q=(0,t.useRef)(I),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)(q),_e=(0,t.useRef)(O),ve=(0,t.useRef)(r),ye=(0,t.useRef)(S),be=(0,t.useRef)(0),xe=(0,t.useRef)(0);(0,t.useEffect)(()=>{re.current=k,ie.current=A,ae.current=j,oe.current=M,J.current=N,Y.current=P,X.current=F,se.current=V,Z.current=B,ce.current=L,le.current=R,ue.current=z,Q.current!==I&&$.current?(Q.current=I,Ce.current?.()):Q.current=I,de.current=H,fe.current=U,pe.current=W,me.current=G,he.current=K,ge.current=q,_e.current=O,ve.current=r},[k,A,j,M,N,P,F,V,B,L,R,z,I,H,U,W,G,K,q,O,r]);let Se=(0,t.useRef)(null),Ce=(0,t.useRef)(null),we=(0,t.useRef)(null),$=(0,t.useRef)(!1);return(0,t.useEffect)(()=>{$.current&&Se.current?.(O)},[O]),(0,t.useEffect)(()=>{ye.current=S,$.current&&be.current>0&&we.current?.(be.current,xe.current)},[S]),(0,t.useEffect)(()=>{$.current=!1;let t=[],n=0,r=0,a=1,o=1,s=0,c=0,l=C.current;if(!l)return;let u=w.current;if(!u)return;let d=l.getContext(`webgl2`);if(!d)return;d.pixelStorei(d.UNPACK_ALIGNMENT,1);let v=f(d);if(!v)return;let{program:y,pass1Program:x}=v;E.current=v.atlasTexture,D.current=v.scatterAtlasTexture,d.uniform1i(v.shapeMatchingLoc,+(b===`shape`)),d.uniform1i(v.revealEffectFlagLoc,ne),d.uniform1f(v.revealProgressLoc,0);let S=p({scatterEnabledRef:X,mouseRadiusRef:Z,durationRef:ue,scatterCharsRef:Q}),O=m({brightenEnabledRef:Y,trailLenRef:ce,durationRef:ue,trailDecayRef:le}),k=g({clickEnabledRef:de,clickSpeedRef:pe,clickBrightnessRef:fe}),A=_({spreadEnabledRef:me,scatterCharsRef:Q,spreadExpandDurationRef:he,spreadSpeedRef:ge}),j,M=-1,N=-1,P=0,F=Array.isArray(e)?e:[e],I=F.length>1,L=document.createElement(`canvas`),R=L.getContext(`2d`),z=e=>{let u=s>0?s:l.width,f=c>0?c:l.height;a=Math.max(1,Math.floor(u/e));let p=a*2;if(R.font=`${p}px monospace`,o=Math.max(1,Math.round(p*a/R.measureText(`M`).width)),n=Math.floor(u/a),r=Math.floor(f/o),l.width=n*a,l.height=r*o,d.viewport(0,0,l.width,l.height),d.useProgram(y),d.uniform2f(v.resLoc,l.width,l.height),d.useProgram(x),d.uniform2f(v.p1ResLoc,l.width,l.height),d.useProgram(y),S.setup(d,n,r,a,o,v.scatterStateTexture),A.setup(d,n,r,a,o,v.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]}d.activeTexture(d.TEXTURE2),d.bindTexture(d.TEXTURE_2D,v.charVectorsTexture),d.texImage2D(d.TEXTURE_2D,0,d.RGBA32F,e,2,0,d.RGBA,d.FLOAT,s),d.activeTexture(d.TEXTURE3),d.bindTexture(d.TEXTURE_2D,v.fboTexture),d.texImage2D(d.TEXTURE_2D,0,d.R8UI,n,r,0,d.RED_INTEGER,d.UNSIGNED_BYTE,null),d.bindFramebuffer(d.FRAMEBUFFER,v.fbo),d.framebufferTexture2D(d.FRAMEBUFFER,d.COLOR_ATTACHMENT0,d.TEXTURE_2D,v.fboTexture,0),d.bindFramebuffer(d.FRAMEBUFFER,null);let c=Math.max(1,Math.round(a/5));d.useProgram(x),d.uniform2f(v.p1CellsizeLoc,a,o),d.uniform1i(v.p1CircleNLoc,c),d.uniform1i(v.p1NumCharsLoc,e),d.uniform1f(v.p1ExponentLoc,2),d.useProgram(y)}d.uniform2f(v.gridSizeLoc,n,r),L.width=h.length*a,L.height=o,R.font=`${o}px monospace`,R.fillStyle=`black`,R.fillRect(0,0,h.length*a,o),R.fillStyle=`white`,R.textBaseline=`top`;for(let e=0;e<h.length;e++)R.fillText(h[e],e*a,0);d.activeTexture(d.TEXTURE1),d.bindTexture(d.TEXTURE_2D,E.current),d.texImage2D(d.TEXTURE_2D,0,d.RGBA,d.RGBA,d.UNSIGNED_BYTE,L),d.uniform1f(v.numLoc,h.length),d.uniform2f(v.sizeLoc,a,o),B()},B=()=>{let e=Q.current;L.width=e.length*a,L.height=o,R.fillStyle=`black`,R.fillRect(0,0,L.width,o),R.fillStyle=`white`,R.textBaseline=`top`,R.font=`${o}px monospace`;for(let t=0;t<e.length;t++)R.fillText(e[t],t*a,0);d.activeTexture(d.TEXTURE4),d.bindTexture(d.TEXTURE_2D,D.current),d.texImage2D(d.TEXTURE_2D,0,d.RGBA,d.RGBA,d.UNSIGNED_BYTE,L),d.uniform1f(v.scatterNumCharsLoc,e.length),S.reset(d)};Se.current=z,Ce.current=B;let V=(e,t)=>{s=Math.round(e),c=Math.round(t),be.current=s,xe.current=c,l.width=s,l.height=c,z(_e.current);let n=u.videoWidth/u.videoHeight,r=l.width/l.height,i=1,a=1,o=0,f=0;if(r>n)a=n/r,f=(1-a)/2;else{i=r/n;let e=ye.current,t=e===`left`?.25:e===`right`?.75:.5;o=Math.max(0,Math.min(1-i,t-i/2))}d.uniform2f(v.cropOffsetLoc,o,f),d.uniform2f(v.cropScaleLoc,i,a),d.useProgram(x),d.uniform2f(v.p1CropOffsetLoc,o,f),d.uniform2f(v.p1CropScaleLoc,i,a),d.useProgram(y)};we.current=V;let H=e=>{if(!oe.current)return;let t=l.getBoundingClientRect(),n=(e.clientX-t.left)*(l.width/t.width),r=(e.clientY-t.top)*(l.height/t.height),i=performance.now();O.handleMouseMove(n,r,i),S.handleMouseMove(n,r,i)};l.addEventListener(`mousemove`,H);let U=()=>S.handleMouseLeave();l.addEventListener(`mouseleave`,U);let W=e=>{k.handleClick(e,l),A.handleClick(e,l)};l.addEventListener(`click`,W);let G=()=>{if(d.uniform1i(v.videoModeLoc,+!!ve.current),d.uniform1f(v.brightnessLoc,re.current),d.uniform1f(v.saturationLoc,ie.current),d.uniform1f(v.bgOpacityLoc,ae.current),d.uniform1i(v.mouseEffectFlagLoc,+!!Y.current),d.uniform1i(v.scatterEffectFlagLoc,+!!X.current),d.uniform1i(v.clickEffectFlagLoc,+!!de.current),d.uniform1i(v.spreadEffectFlagLoc,+!!me.current),d.uniform1f(v.mouseBrightnessLoc,se.current),d.uniform1f(v.mouseRadiusLoc,Math.min(l.width,l.height)*Z.current),ee){let e=N<0?0:Math.min(1,(performance.now()-N)/(te*1e3));d.uniform1f(v.revealProgressLoc,e)}$.current&&u.currentTime!=M&&u.readyState>=2&&(d.activeTexture(d.TEXTURE0),d.bindTexture(d.TEXTURE_2D,v.texture),d.texSubImage2D(d.TEXTURE_2D,0,0,0,d.RGBA,d.UNSIGNED_BYTE,u),M=u.currentTime),O.tick(d,v.mousePositionsLoc,v.mouseLifeFracsLoc),S.tick(d,l),k.tick(d,l,v.ripplePositionsLoc,v.rippleRadiiLoc,v.rippleBrightnessesLoc),A.tick(d),b===`shape`&&(d.bindFramebuffer(d.FRAMEBUFFER,v.fbo),d.viewport(0,0,n,r),d.useProgram(x),d.drawArrays(d.TRIANGLES,0,6),d.bindFramebuffer(d.FRAMEBUFFER,null),d.viewport(0,0,l.width,l.height),d.useProgram(y)),d.drawArrays(d.TRIANGLES,0,6),j=requestAnimationFrame(G)},K=()=>{let e=T.current;V(e.clientWidth||u.videoWidth,e.clientHeight||u.videoHeight),d.activeTexture(d.TEXTURE0),d.bindTexture(d.TEXTURE_2D,v.texture),d.texImage2D(d.TEXTURE_2D,0,d.RGBA,d.RGBA,d.UNSIGNED_BYTE,u),u.play(),N=performance.now(),$.current=!0,j=requestAnimationFrame(G)},q=()=>{P=(P+1)%F.length,u.src=F[P],u.load(),u.addEventListener(`canplay`,()=>u.play(),{once:!0})},J=new ResizeObserver(e=>{let{width:t,height:n}=e[0].contentRect;$.current&&t>0&&n>0&&V(t,n)});return T.current&&J.observe(T.current),u.addEventListener(`loadeddata`,K,{once:!0}),I&&u.addEventListener(`ended`,q),u.readyState>=2&&u.currentSrc.endsWith(F[0])?K():u.currentSrc.endsWith(F[0])||u.load(),()=>{J.disconnect(),Se.current=null,Ce.current=null,we.current=null,$.current=!1,cancelAnimationFrame(j),u.removeEventListener(`loadeddata`,K),I&&u.removeEventListener(`ended`,q),l.removeEventListener(`mousemove`,H),l.removeEventListener(`mouseleave`,U),l.removeEventListener(`click`,W),d.deleteTexture(v.texture),d.deleteTexture(v.charVectorsTexture),d.deleteFramebuffer(v.fbo),d.deleteTexture(v.fboTexture),d.deleteBuffer(v.buffer),d.deleteShader(v.vertShader),d.deleteShader(v.fragShader),d.deleteShader(v.pass1FragShader),d.deleteProgram(y),d.deleteProgram(x),d.deleteTexture(E.current),d.deleteTexture(D.current),d.deleteTexture(v.scatterStateTexture),d.deleteTexture(v.spreadStateTexture)}},[e,b,h,ne,te,ee]),(0,n.jsxs)(`div`,{ref:T,className:x,style:{height:`100%`,width:`100%`},children:[(0,n.jsx)(`video`,{ref:w,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:C,style:{width:`100%`,height:`100%`,display:`block`}})]})}e.VideoAscii=v});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-video-ascii",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "description": "React component that renders videos as ASCII animations using WebGL2.",
   "author": "Lucas Jin",