video2ascii 1.0.1 → 1.1.0

package/README.md

@@ -13,37 +13,44 @@ npm install video2ascii
 ## Usage
 
 ```tsx
-import { VideoToAscii } from "video2ascii";
+import Video2Ascii from "video2ascii";
 
-<VideoToAscii
+<Video2Ascii
   src="/video.mp4"
-  fontSize={12}
+  numColumns={120}
   colored={true}
-  audioReactivity={50}
+  brightness={1.0}
+  audioEffect={50}
   enableMouse={true}
   enableRipple={true}
   charset="detailed"
+  isPlaying={true}
+  autoPlay={true}
 />;
 ```
 
 ## Props
 
-| Prop               | Type         | Default      | Description                            |
-| ------------------ | ------------ | ------------ | -------------------------------------- |
-| `src`              | `string`     | required     | Video URL                              |
-| `fontSize`         | `number`     | `10`         | Character size (smaller = more detail) |
-| `colored`          | `boolean`    | `false`      | Use video colors vs green terminal     |
-| `blend`            | `number`     | `0`          | 0 = ASCII, 100 = original video        |
-| `highlight`        | `number`     | `0`          | Background behind characters (0-100)   |
-| `charset`          | `CharsetKey` | `"standard"` | Character set                          |
-| `maxWidth`         | `number`     | `900`        | Max width in pixels                    |
-| `enableMouse`      | `boolean`    | `true`       | Cursor glow effect                     |
-| `trailLength`      | `number`     | `24`         | Mouse trail length                     |
-| `enableRipple`     | `boolean`    | `false`      | Click ripple effect                    |
-| `rippleSpeed`      | `number`     | `40`         | Ripple expansion speed                 |
-| `audioReactivity`  | `number`     | `0`          | Brightness from audio (0-100)          |
-| `audioSensitivity` | `number`     | `50`         | How dramatic audio effect is           |
-| `showStats`        | `boolean`    | `false`      | Show FPS overlay                       |
+| Prop                   | Type         | Default      | Description                                       |
+| ---------------------- | ------------ | ------------ | ------------------------------------------------- |
+| `src`                  | `string`     | required     | Video URL                                         |
+| `numColumns`           | `number`     | -            | Number of columns (controls size)                 |
+| `colored`              | `boolean`    | `true`      | Use video colors vs green terminal                |
+| `brightness`           | `number`     | `1.0`        | Brightness multiplier (0-2, 1.0 = normal)         |
+| `blend`                | `number`     | `0`          | 0 = ASCII, 100 = original video                   |
+| `highlight`            | `number`     | `0`          | Background behind characters (0-100)              |
+| `charset`              | `CharsetKey` | `"standard"` | Character set                                     |
+| `enableMouse`          | `boolean`    | `true`       | Cursor glow effect                                |
+| `trailLength`          | `number`     | `24`         | Mouse trail length                                |
+| `enableRipple`         | `boolean`    | `false`      | Click ripple effect                               |
+| `rippleSpeed`          | `number`     | `40`         | Ripple expansion speed                            |
+| `audioEffect`          | `number`     | `0`          | How much audio affects brightness (0-100)         |
+| `audioRange`           | `number`     | `50`         | How dramatic audio brightness changes are (0-100) |
+| `isPlaying`            | `boolean`    | `true`       | Whether video is playing                          |
+| `autoPlay`             | `boolean`    | `true`       | Auto-play on load                                 |
+| `enableSpacebarToggle` | `boolean`    | `false`      | Enable spacebar to toggle play/pause              |
+| `showStats`            | `boolean`    | `false`      | Show FPS overlay                                  |
+| `className`            | `string`     | `""`         | CSS class name                                    |
 
 ## Character Sets
 

package/dist/index.d.mts

@@ -57,31 +57,27 @@ declare const ASCII_CHARSETS: {
 /** Type-safe key for selecting character sets */
 type CharsetKey = keyof typeof ASCII_CHARSETS;
 
-interface AsciiStats {
-    fps: number;
-    frameTime: number;
-}
-interface UseVideoToAsciiOptions {
-    fontSize?: number;
+interface VideoToAsciiProps {
+    src: string;
+    numColumns?: number;
     colored?: boolean;
     blend?: number;
     highlight?: number;
+    brightness?: number;
     charset?: CharsetKey;
-    maxWidth?: number;
-    onStats?: (stats: AsciiStats) => void;
-}
-interface VideoToAsciiProps extends UseVideoToAsciiOptions {
-    src: string;
     enableMouse?: boolean;
     trailLength?: number;
     enableRipple?: boolean;
     rippleSpeed?: number;
-    audioReactivity?: number;
-    audioSensitivity?: number;
+    audioEffect?: number;
+    audioRange?: number;
+    isPlaying?: boolean;
+    autoPlay?: boolean;
+    enableSpacebarToggle?: boolean;
     showStats?: boolean;
     className?: string;
 }
 
-declare function VideoToAscii({ src, fontSize, colored, blend, highlight, charset, maxWidth, enableMouse, trailLength, enableRipple, rippleSpeed, audioReactivity, audioSensitivity, showStats, className, }: VideoToAsciiProps): react_jsx_runtime.JSX.Element;
+declare function Video2Ascii({ src, numColumns, colored, blend, highlight, brightness, charset, enableMouse, trailLength, enableRipple, rippleSpeed, audioEffect, audioRange, isPlaying, autoPlay, enableSpacebarToggle, showStats, className, }: VideoToAsciiProps): react_jsx_runtime.JSX.Element;
 
-export { ASCII_CHARSETS, type CharsetKey, VideoToAscii, type VideoToAsciiProps };
+export { ASCII_CHARSETS, type CharsetKey, Video2Ascii, type VideoToAsciiProps, Video2Ascii as default };

package/dist/index.d.ts

@@ -57,31 +57,27 @@ declare const ASCII_CHARSETS: {
 /** Type-safe key for selecting character sets */
 type CharsetKey = keyof typeof ASCII_CHARSETS;
 
-interface AsciiStats {
-    fps: number;
-    frameTime: number;
-}
-interface UseVideoToAsciiOptions {
-    fontSize?: number;
+interface VideoToAsciiProps {
+    src: string;
+    numColumns?: number;
     colored?: boolean;
     blend?: number;
     highlight?: number;
+    brightness?: number;
     charset?: CharsetKey;
-    maxWidth?: number;
-    onStats?: (stats: AsciiStats) => void;
-}
-interface VideoToAsciiProps extends UseVideoToAsciiOptions {
-    src: string;
     enableMouse?: boolean;
     trailLength?: number;
     enableRipple?: boolean;
     rippleSpeed?: number;
-    audioReactivity?: number;
-    audioSensitivity?: number;
+    audioEffect?: number;
+    audioRange?: number;
+    isPlaying?: boolean;
+    autoPlay?: boolean;
+    enableSpacebarToggle?: boolean;
     showStats?: boolean;
     className?: string;
 }
 
-declare function VideoToAscii({ src, fontSize, colored, blend, highlight, charset, maxWidth, enableMouse, trailLength, enableRipple, rippleSpeed, audioReactivity, audioSensitivity, showStats, className, }: VideoToAsciiProps): react_jsx_runtime.JSX.Element;
+declare function Video2Ascii({ src, numColumns, colored, blend, highlight, brightness, charset, enableMouse, trailLength, enableRipple, rippleSpeed, audioEffect, audioRange, isPlaying, autoPlay, enableSpacebarToggle, showStats, className, }: VideoToAsciiProps): react_jsx_runtime.JSX.Element;
 
-export { ASCII_CHARSETS, type CharsetKey, VideoToAscii, type VideoToAsciiProps };
+export { ASCII_CHARSETS, type CharsetKey, Video2Ascii, type VideoToAsciiProps, Video2Ascii as default };

package/dist/index.js

@@ -38,10 +38,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ASCII_CHARSETS: () => ASCII_CHARSETS,
-  VideoToAscii: () => VideoToAscii
+  Video2Ascii: () => Video2Ascii,
+  default: () => VideoToAscii_default
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/VideoToAscii.tsx
+var import_react5 = require("react");
+
 // src/hooks/useVideoToAscii.ts
 var import_react = require("react");
 
@@ -97,7 +101,7 @@ function getCharArray(charset) {
 var vertex_default = "#version 300 es\n\n// Fullscreen quad - passes texture coords to fragment shader\n\nin vec2 a_position;\nin vec2 a_texCoord;\nout vec2 v_texCoord;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n  v_texCoord = a_texCoord;\n}\n";
 
 // src/lib/webgl/shaders/fragment.glsl
-var fragment_default = "#version 300 es\nprecision highp float;\n\n// Textures\nuniform sampler2D u_video;\nuniform sampler2D u_asciiAtlas;\n\n// Dimensions\nuniform vec2 u_resolution;\nuniform vec2 u_charSize;\nuniform vec2 u_gridSize;\nuniform float u_numChars;\n\n// Rendering options\nuniform bool u_colored;\nuniform float u_blend;\nuniform float u_highlight;\n\n// Audio\nuniform float u_audioLevel;\nuniform float u_audioReactivity;\nuniform float u_audioSensitivity;\n\n// Mouse\nuniform vec2 u_mouse;\nuniform float u_mouseRadius;\nuniform vec2 u_trail[24];\nuniform int u_trailLength;\n\n// Ripple\nuniform vec4 u_ripples[8];\nuniform float u_time;\nuniform float u_rippleEnabled;\nuniform float u_rippleSpeed;\n\nin vec2 v_texCoord;\nout vec4 fragColor;\n\nvoid main() {\n  // Figure out which ASCII cell this pixel is in\n  vec2 cellCoord = floor(v_texCoord * u_gridSize);\n  vec2 thisCell = cellCoord;\n  \n  // Sample video at cell center (mipmaps handle averaging)\n  vec2 cellCenter = (cellCoord + 0.5) / u_gridSize;\n  vec4 videoColor = texture(u_video, cellCenter);\n  \n  // Perceived brightness using human eye sensitivity weights\n  float baseBrightness = dot(videoColor.rgb, vec3(0.299, 0.587, 0.114));\n  \n  // Audio reactivity - louder = brighter, silence = darker\n  float minBrightness = mix(0.3, 0.0, u_audioSensitivity);\n  float maxBrightness = mix(1.0, 5.0, u_audioSensitivity);\n  float audioMultiplier = mix(minBrightness, maxBrightness, u_audioLevel);\n  float audioModulated = baseBrightness * audioMultiplier;\n  float brightness = mix(baseBrightness, audioModulated, u_audioReactivity);\n  \n  // Cursor glow - blocky circle effect\n  float cursorGlow = 0.0;\n  float cursorRadius = 5.0;\n  \n  vec2 mouseCell = floor(u_mouse * u_gridSize);\n  float cellDist = length(thisCell - mouseCell);\n  if (cellDist <= cursorRadius && u_mouse.x >= 0.0) {\n    cursorGlow += 1.0 - cellDist / cursorRadius;\n  }\n  \n  // Trail effect\n  for (int i = 0; i < 12; i++) {\n    if (i >= u_trailLength) break;\n    vec2 trailPos = u_trail[i];\n    if (trailPos.x < 0.0) continue;\n    \n    vec2 trailCell = floor(trailPos * u_gridSize);\n    float trailDist = length(thisCell - trailCell);\n    float trailRadius = cursorRadius * 0.8;\n    \n    if (trailDist <= trailRadius) {\n      float fade = 1.0 - float(i) / float(u_trailLength);\n      cursorGlow += (1.0 - trailDist / trailRadius) * 0.5 * fade;\n    }\n  }\n  cursorGlow = min(cursorGlow, 1.0);\n  \n  // Ripple effect - expanding rings on click\n  float rippleGlow = 0.0;\n  if (u_rippleEnabled > 0.5) {\n    for (int i = 0; i < 8; i++) {\n      vec4 ripple = u_ripples[i];\n      if (ripple.w < 0.5) continue;\n      \n      float age = u_time - ripple.z;\n      if (age < 0.0) continue;\n      \n      vec2 rippleCell = floor(ripple.xy * u_gridSize);\n      float cellDist = length(thisCell - rippleCell);\n      float initialRadius = 5.0;\n      \n      float distFromEdge = max(0.0, cellDist - initialRadius);\n      float rippleSpeed = u_rippleSpeed;\n      float reachTime = distFromEdge / rippleSpeed;\n      float timeSinceReached = age - reachTime;\n      \n      float fadeDuration = 0.5;\n      if (timeSinceReached >= 0.0 && timeSinceReached < fadeDuration) {\n        float pop = 1.0 - timeSinceReached / fadeDuration;\n        pop = pop * pop;\n        rippleGlow += pop * 0.3;\n      }\n    }\n    rippleGlow = min(rippleGlow, 1.0);\n  }\n  \n  // Map brightness to character index (0 = darkest char, numChars-1 = brightest)\n  float charIndex = floor(brightness * (u_numChars - 0.001));\n  \n  // Find the character in the atlas (horizontal strip of pre-rendered chars)\n  float atlasX = charIndex / u_numChars;\n  vec2 cellPos = fract(v_texCoord * u_gridSize);\n  vec2 atlasCoord = vec2(atlasX + cellPos.x / u_numChars, cellPos.y);\n  vec4 charColor = texture(u_asciiAtlas, atlasCoord);\n  \n  // Pick the color - video colors or green terminal aesthetic\n  vec3 baseColor;\n  if (u_colored) {\n    baseColor = videoColor.rgb;\n  } else {\n    baseColor = vec3(0.0, 1.0, 0.0);\n  }\n  \n  // Background highlight behind each character\n  float bgIntensity = 0.15 + u_highlight * 0.35;\n  vec3 bgColor = baseColor * bgIntensity;\n  vec3 textColor = baseColor * 1.2;\n  vec3 finalColor = mix(bgColor, textColor, charColor.r);\n  \n  // Add cursor and ripple glow\n  finalColor += cursorGlow * baseColor * 0.5;\n  finalColor += rippleGlow * baseColor;\n  \n  // Blend with original video if requested\n  vec3 blendedColor = mix(finalColor, videoColor.rgb, u_blend);\n  \n  fragColor = vec4(blendedColor, 1.0);\n}\n";
+var fragment_default = "#version 300 es\nprecision highp float;\n\n// Textures\nuniform sampler2D u_video;\nuniform sampler2D u_asciiAtlas;\n\n// Dimensions\nuniform vec2 u_resolution;\nuniform vec2 u_charSize;\nuniform vec2 u_gridSize;\nuniform float u_numChars;\n\n// Rendering options\nuniform bool u_colored;\nuniform float u_blend;\nuniform float u_highlight;\nuniform float u_brightness;\n\n// Audio\nuniform float u_audioLevel;\nuniform float u_audioReactivity;\nuniform float u_audioSensitivity;\n\n// Mouse\nuniform vec2 u_mouse;\nuniform float u_mouseRadius;\nuniform vec2 u_trail[24];\nuniform int u_trailLength;\n\n// Ripple\nuniform vec4 u_ripples[8];\nuniform float u_time;\nuniform float u_rippleEnabled;\nuniform float u_rippleSpeed;\n\nin vec2 v_texCoord;\nout vec4 fragColor;\n\nvoid main() {\n  // Figure out which ASCII cell this pixel is in\n  vec2 cellCoord = floor(v_texCoord * u_gridSize);\n  vec2 thisCell = cellCoord;\n  \n  // Sample video at cell center (mipmaps handle averaging)\n  vec2 cellCenter = (cellCoord + 0.5) / u_gridSize;\n  vec4 videoColor = texture(u_video, cellCenter);\n  \n  // Perceived brightness using human eye sensitivity weights\n  float baseBrightness = dot(videoColor.rgb, vec3(0.299, 0.587, 0.114));\n  \n  // Audio reactivity - louder = brighter, silence = darker\n  float minBrightness = mix(0.3, 0.0, u_audioSensitivity);\n  float maxBrightness = mix(1.0, 5.0, u_audioSensitivity);\n  float audioMultiplier = mix(minBrightness, maxBrightness, u_audioLevel);\n  float audioModulated = baseBrightness * audioMultiplier;\n  float brightness = mix(baseBrightness, audioModulated, u_audioReactivity);\n  \n  // Cursor glow - blocky circle effect\n  float cursorGlow = 0.0;\n  float cursorRadius = 5.0;\n  \n  vec2 mouseCell = floor(u_mouse * u_gridSize);\n  float cellDist = length(thisCell - mouseCell);\n  if (cellDist <= cursorRadius && u_mouse.x >= 0.0) {\n    cursorGlow += 1.0 - cellDist / cursorRadius;\n  }\n  \n  // Trail effect\n  for (int i = 0; i < 12; i++) {\n    if (i >= u_trailLength) break;\n    vec2 trailPos = u_trail[i];\n    if (trailPos.x < 0.0) continue;\n    \n    vec2 trailCell = floor(trailPos * u_gridSize);\n    float trailDist = length(thisCell - trailCell);\n    float trailRadius = cursorRadius * 0.8;\n    \n    if (trailDist <= trailRadius) {\n      float fade = 1.0 - float(i) / float(u_trailLength);\n      cursorGlow += (1.0 - trailDist / trailRadius) * 0.5 * fade;\n    }\n  }\n  cursorGlow = min(cursorGlow, 1.0);\n  \n  // Ripple effect - expanding rings on click\n  float rippleGlow = 0.0;\n  if (u_rippleEnabled > 0.5) {\n    for (int i = 0; i < 8; i++) {\n      vec4 ripple = u_ripples[i];\n      if (ripple.w < 0.5) continue;\n      \n      float age = u_time - ripple.z;\n      if (age < 0.0) continue;\n      \n      vec2 rippleCell = floor(ripple.xy * u_gridSize);\n      float cellDist = length(thisCell - rippleCell);\n      float initialRadius = 5.0;\n      \n      float distFromEdge = max(0.0, cellDist - initialRadius);\n      float rippleSpeed = u_rippleSpeed;\n      float reachTime = distFromEdge / rippleSpeed;\n      float timeSinceReached = age - reachTime;\n      \n      float fadeDuration = 0.5;\n      if (timeSinceReached >= 0.0 && timeSinceReached < fadeDuration) {\n        float pop = 1.0 - timeSinceReached / fadeDuration;\n        pop = pop * pop;\n        rippleGlow += pop * 0.3;\n      }\n    }\n    rippleGlow = min(rippleGlow, 1.0);\n  }\n  \n  // Apply brightness multiplier\n  // brightness < 1.0: darkens (multiply)\n  // brightness > 1.0: brightens (compress dark values toward 1.0)\n  float adjustedBrightness;\n  if (u_brightness <= 1.0) {\n    adjustedBrightness = brightness * u_brightness;\n  } else {\n    // For brightness > 1.0, compress the range: dark values get pushed up\n    // Formula: 1.0 - (1.0 - brightness) / u_brightness\n    // This makes dark values brighter while keeping bright values near 1.0\n    adjustedBrightness = 1.0 - (1.0 - brightness) / u_brightness;\n  }\n  adjustedBrightness = clamp(adjustedBrightness, 0.0, 1.0);\n  \n  // Map brightness to character index (0 = darkest char, numChars-1 = brightest)\n  float charIndex = floor(adjustedBrightness * (u_numChars - 0.001));\n  \n  // Find the character in the atlas (horizontal strip of pre-rendered chars)\n  float atlasX = charIndex / u_numChars;\n  vec2 cellPos = fract(v_texCoord * u_gridSize);\n  vec2 atlasCoord = vec2(atlasX + cellPos.x / u_numChars, cellPos.y);\n  vec4 charColor = texture(u_asciiAtlas, atlasCoord);\n  \n  // Pick the color - video colors or green terminal aesthetic\n  vec3 baseColor;\n  if (u_colored) {\n    baseColor = videoColor.rgb;\n  } else {\n    baseColor = vec3(0.0, 1.0, 0.0);\n  }\n  \n  // Background highlight behind each character\n  float bgIntensity = 0.15 + u_highlight * 0.35;\n  vec3 bgColor = baseColor * bgIntensity;\n  vec3 textColor = baseColor * 1.2;\n  vec3 finalColor = mix(bgColor, textColor, charColor.r);\n  \n  // Add cursor and ripple glow\n  finalColor += cursorGlow * baseColor * 0.5;\n  finalColor += rippleGlow * baseColor;\n  \n  // Blend with original video if requested\n  vec3 blendedColor = mix(finalColor, videoColor.rgb, u_blend);\n  \n  fragColor = vec4(blendedColor, 1.0);\n}\n";
 
 // src/lib/webgl/utils.ts
 function compileShader(gl, source, type) {
@@ -221,12 +225,15 @@ var MAX_TRAIL_LENGTH = 24;
 var MAX_RIPPLES = 8;
 function useVideoToAscii(options = {}) {
   const {
-    fontSize = 10,
-    colored = false,
+    fontSize,
+    numColumns,
+    colored = true,
     blend = 0,
     highlight = 0,
+    brightness = 1,
     charset = DEFAULT_CHARSET,
-    maxWidth = 900,
+    maxWidth,
+    enableSpacebarToggle = false,
     onStats
   } = options;
   const containerRef = (0, import_react.useRef)(null);
@@ -246,8 +253,12 @@ function useVideoToAscii(options = {}) {
   const [stats, setStats] = (0, import_react.useState)({ fps: 0, frameTime: 0 });
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
-  const charWidth = fontSize * CHAR_WIDTH_RATIO;
-  const cols = Math.floor(maxWidth / charWidth);
+  const defaultWidth = typeof window !== "undefined" ? window.innerWidth : 900;
+  const containerWidth = maxWidth || defaultWidth;
+  const calculatedFontSize = numColumns ? containerWidth / (numColumns * CHAR_WIDTH_RATIO) : fontSize || 10;
+  const calculatedMaxWidth = numColumns ? numColumns * calculatedFontSize * CHAR_WIDTH_RATIO : maxWidth || 900;
+  const charWidth = calculatedFontSize * CHAR_WIDTH_RATIO;
+  const cols = numColumns || Math.floor(calculatedMaxWidth / charWidth);
   const chars = (0, import_react.useMemo)(() => getCharArray(charset), [charset]);
   const registerUniformSetter = (0, import_react.useCallback)(
     (id, setter) => {
@@ -272,6 +283,7 @@ function useVideoToAscii(options = {}) {
         u_colored: get("u_colored"),
         u_blend: get("u_blend"),
         u_highlight: get("u_highlight"),
+        u_brightness: get("u_brightness"),
         // Mouse uniforms
         u_mouse: get("u_mouse"),
         u_mouseRadius: get("u_mouseRadius"),
@@ -299,15 +311,24 @@ function useVideoToAscii(options = {}) {
   const initWebGL = (0, import_react.useCallback)(() => {
     const canvas = canvasRef.current;
     const video = videoRef.current;
+    const container = containerRef.current;
     if (!canvas || !video || !video.videoWidth) return false;
+    let finalFontSize = calculatedFontSize;
+    let finalCols = cols;
+    if (numColumns && container) {
+      const actualWidth = container.clientWidth || defaultWidth;
+      finalFontSize = actualWidth / (numColumns * CHAR_WIDTH_RATIO);
+      finalCols = numColumns;
+    }
     const grid = calculateGridDimensions(
       video.videoWidth,
       video.videoHeight,
-      cols
+      finalCols
     );
     setDimensions(grid);
-    const pixelWidth = grid.cols * charWidth;
-    const pixelHeight = grid.rows * fontSize;
+    const finalCharWidth = finalFontSize * CHAR_WIDTH_RATIO;
+    const pixelWidth = grid.cols * finalCharWidth;
+    const pixelHeight = grid.rows * finalFontSize;
     canvas.width = pixelWidth;
     canvas.height = pixelHeight;
     const gl = canvas.getContext("webgl2", {
@@ -332,15 +353,21 @@ function useVideoToAscii(options = {}) {
     gl.useProgram(program);
     createFullscreenQuad(gl, program);
     videoTextureRef.current = createVideoTexture(gl);
-    atlasTextureRef.current = createAsciiAtlas(gl, chars, fontSize);
+    const finalFontSizeForAtlas = numColumns && container ? (container.clientWidth || defaultWidth) / (numColumns * CHAR_WIDTH_RATIO) : calculatedFontSize;
+    atlasTextureRef.current = createAsciiAtlas(
+      gl,
+      chars,
+      finalFontSizeForAtlas
+    );
     const locations = cacheUniformLocations(gl, program);
     uniformLocationsRef.current = locations;
     gl.uniform1i(locations.u_video, 0);
     gl.uniform1i(locations.u_asciiAtlas, 1);
     gl.uniform2f(locations.u_resolution, pixelWidth, pixelHeight);
-    gl.uniform2f(locations.u_charSize, charWidth, fontSize);
-    gl.uniform2f(locations.u_gridSize, cols, grid.rows);
+    gl.uniform2f(locations.u_charSize, finalCharWidth, finalFontSize);
+    gl.uniform2f(locations.u_gridSize, finalCols, grid.rows);
     gl.uniform1f(locations.u_numChars, chars.length);
+    gl.uniform1f(locations.u_brightness, brightness);
     gl.uniform2f(locations.u_mouse, -1, -1);
     gl.uniform1f(locations.u_mouseRadius, 0);
     gl.uniform1i(locations.u_trailLength, 0);
@@ -351,7 +378,15 @@ function useVideoToAscii(options = {}) {
     gl.viewport(0, 0, pixelWidth, pixelHeight);
     setIsReady(true);
     return true;
-  }, [cols, charWidth, fontSize, chars, cacheUniformLocations]);
+  }, [
+    cols,
+    numColumns,
+    calculatedFontSize,
+    chars,
+    cacheUniformLocations,
+    brightness,
+    defaultWidth
+  ]);
   const render = (0, import_react.useCallback)(() => {
     const gl = glRef.current;
     const video = videoRef.current;
@@ -369,6 +404,7 @@ function useVideoToAscii(options = {}) {
     gl.uniform1i(locations.u_colored, colored ? 1 : 0);
     gl.uniform1f(locations.u_blend, blend / 100);
     gl.uniform1f(locations.u_highlight, highlight / 100);
+    gl.uniform1f(locations.u_brightness, brightness);
     for (const setter of uniformSettersRef.current.values()) {
       setter(gl, program, locations);
     }
@@ -387,7 +423,7 @@ function useVideoToAscii(options = {}) {
       lastFpsTimeRef.current = now;
     }
     animationRef.current = requestAnimationFrame(render);
-  }, [colored, blend, highlight, onStats]);
+  }, [colored, blend, highlight, brightness, onStats]);
   (0, import_react.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -426,6 +462,19 @@ function useVideoToAscii(options = {}) {
       initWebGL();
     }
   }, [initWebGL]);
+  (0, import_react.useEffect)(() => {
+    if (!numColumns || !containerRef.current) return;
+    const container = containerRef.current;
+    const resizeObserver = new ResizeObserver(() => {
+      if (videoRef.current && videoRef.current.readyState >= 1) {
+        initWebGL();
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [numColumns, initWebGL]);
   (0, import_react.useEffect)(() => {
     return () => {
       const gl = glRef.current;
@@ -455,6 +504,7 @@ function useVideoToAscii(options = {}) {
     }
   }, []);
   (0, import_react.useEffect)(() => {
+    if (!enableSpacebarToggle) return;
     const handleKeyDown = (e) => {
       if (e.code === "Space" && e.target === document.body) {
         e.preventDefault();
@@ -463,7 +513,7 @@ function useVideoToAscii(options = {}) {
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggle]);
+  }, [toggle, enableSpacebarToggle]);
   return {
     containerRef,
     videoRef,
@@ -694,40 +744,36 @@ function useAsciiAudio(ascii, options = {}) {
 
 // src/components/VideoToAscii.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function VideoToAscii({
+function Video2Ascii({
   src,
-  fontSize = 10,
-  colored = false,
+  numColumns,
+  colored = true,
   blend = 0,
   highlight = 0,
+  brightness = 1,
   charset = "standard",
-  maxWidth = 900,
   enableMouse = true,
   trailLength = 24,
   enableRipple = false,
   rippleSpeed = 40,
-  audioReactivity = 0,
-  audioSensitivity = 50,
+  audioEffect = 0,
+  audioRange = 50,
+  isPlaying = true,
+  autoPlay = true,
+  enableSpacebarToggle = false,
   showStats = false,
   className = ""
 }) {
   const ascii = useVideoToAscii({
-    fontSize,
+    numColumns,
     colored,
     blend,
     highlight,
+    brightness,
     charset,
-    maxWidth
+    enableSpacebarToggle
   });
-  const {
-    containerRef,
-    videoRef,
-    canvasRef,
-    stats,
-    dimensions,
-    isReady,
-    isPlaying
-  } = ascii;
+  const { containerRef, videoRef, canvasRef, stats, dimensions, isReady } = ascii;
   const mouseHandlers = useAsciiMouseEffect(ascii, {
     enabled: enableMouse,
     trailLength
@@ -737,20 +783,29 @@ function VideoToAscii({
     speed: rippleSpeed
   });
   useAsciiAudio(ascii, {
-    enabled: audioReactivity > 0,
-    reactivity: audioReactivity,
-    sensitivity: audioSensitivity
+    enabled: audioEffect > 0,
+    reactivity: audioEffect,
+    sensitivity: audioRange
   });
-  const charWidth = fontSize * CHAR_WIDTH_RATIO;
-  const pixelWidth = dimensions.cols * charWidth;
-  const pixelHeight = dimensions.rows * fontSize;
+  (0, import_react5.useEffect)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (isPlaying) {
+      if (autoPlay && isReady) {
+        video.play().catch(() => {
+        });
+      }
+    } else {
+      video.pause();
+    }
+  }, [isPlaying, autoPlay, isReady, videoRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `video-to-ascii ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "video",
       {
         ref: videoRef,
         src,
-        muted: audioReactivity === 0,
+        muted: audioEffect === 0,
         loop: true,
         playsInline: true,
         crossOrigin: "anonymous",
@@ -761,12 +816,7 @@ function VideoToAscii({
       "div",
       __spreadProps(__spreadValues(__spreadValues({
         ref: containerRef,
-        className: "relative cursor-pointer select-none overflow-hidden rounded",
-        style: {
-          width: pixelWidth || "100%",
-          height: pixelHeight || "auto",
-          backgroundColor: "#000"
-        }
+        className: "relative cursor-pointer select-none overflow-hidden rounded bg-black"
       }, enableMouse ? mouseHandlers : {}), enableRipple ? rippleHandlers : {}), {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -788,16 +838,16 @@ function VideoToAscii({
             dimensions.cols,
             "\xD7",
             dimensions.rows
-          ] }),
-          !isPlaying && isReady && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-white text-lg", children: "\u25B6 Press Space to Play" }) })
+          ] })
         ]
       })
     )
   ] });
 }
+var VideoToAscii_default = Video2Ascii;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ASCII_CHARSETS,
-  VideoToAscii
+  Video2Ascii
 });
 //# sourceMappingURL=index.js.map