any2ascii

WebGL-powered React Component for real-time video, image, gif to ASCII

Demo

Installation

npm install any2ascii

Or with yarn:

yarn add any2ascii

Quick Start

import Any2Ascii from "any2ascii";

function App() {
  return (
    <Any2Ascii
      src="/video.mp4"
      numColumns={120}
      colored={true}
      brightness={1.0}
      audioEffect={50}
      enableMouse={true}
      enableRipple={true}
      charset="detailed"
      isPlaying={true}
      autoPlay={true}
    />
  );
}

Basic Usage

// Minimal video setup
<Any2Ascii src="/video.mp4" />

// Animated GIF (auto-detected)
<Any2Ascii src="/animation.gif" />

// Image to ASCII
<Any2Ascii 
  src="/image.jpg" 
  mediaType="image"
  numColumns={120}
  colored={true}
/>

// With custom styling
<Any2Ascii 
  src="/video.mp4" 
  numColumns={80}
  colored={false}
  className="my-ascii-player"
/>

Image Support

Any2Ascii supports static images and animated GIFs in addition to videos:

// Basic image
<Any2Ascii 
  src="https://example.com/image.jpg"
  mediaType="image"
  numColumns={120}
  colored={true}
/>

// Animated GIF (auto-detected, no mediaType needed)
<Any2Ascii 
  src="/animation.gif"
  numColumns={120}
  colored={true}
  audioEffect={0}
/>

// Image with interactive effects
<Any2Ascii 
  src="/photo.png"
  mediaType="image"
  enableMouse={true}
  enableRipple={true}
/>

Important notes:

• Images and GIFs: Set mediaType="image" to enable image mode (optional for static images if auto-detection works)
• GIFs: Automatically detected and treated as video elements (no mediaType needed)
• All formats must be served with CORS headers for cross-origin access
• Audio effects are automatically disabled for images and GIFs
• Interactive effects (mouse, ripple) work with all formats
• The render loop runs continuously for interactive effects, or renders once for static display

API Reference

Props

Prop	Type	Default	Description
src	string	required	Video or image URL/path
mediaType	string	"video"	Media type: "video" or "image"
numColumns	number	auto	Number of ASCII columns (controls detail level)
colored	boolean	true	Use original video colors vs green terminal style
brightness	number	1.0	Brightness multiplier (0-2, 1.0 = normal)
blend	number	0	Blend original video with ASCII (0-100)
highlight	number	0	Background highlight intensity (0-100)
dither	string	"none"	Dithering mode: "none", "bayer", "random"
charset	CharsetKey	"standard"	Character set for ASCII rendering
enableMouse	boolean	true	Enable cursor glow effect
trailLength	number	24	Mouse trail persistence (frames)
enableRipple	boolean	false	Enable click ripple effect
rippleSpeed	number	40	Ripple expansion speed
audioEffect	number	0	Audio-reactive brightness (0-100, video only)
audioRange	number	50	Audio effect intensity range (0-100)
isPlaying	boolean	true	Control video playback state
autoPlay	boolean	true	Auto-play video on mount
enableSpacebarToggle	boolean	false	Toggle play/pause with spacebar
showStats	boolean	false	Show FPS performance overlay
className	string	""	Custom CSS class name

Character Sets

Available character sets for different visual styles:

import { ASCII_CHARSETS } from "any2ascii";

// Use in your component
<Any2Ascii src="/video.mp4" charset="detailed" />

Charset	Characters	Description
standard	@%#*+=-:.	Classic ASCII art look
detailed	70 characters	Full gradient with fine detail
blocks	█▓▒░	Block-based rendering
minimal	@#.	Minimalist style
binary	10	Binary/matrix effect
dots	●◉○◌	Circular dot patterns
arrows	↑↗→↘↓↙←↖	Directional arrows
emoji	Various emoji	Fun emoji-based visualization

Dithering

Dithering creates smoother gradients by adding intentional patterns to the ASCII output. This helps reduce banding artifacts when using limited character sets.

Modes:

• none - Direct brightness-to-character mapping (default)
• bayer - Ordered Bayer matrix dithering for consistent patterns
• random - Random noise dithering for organic look

Dithering is especially effective with minimal character sets or when you want film-like grain.

Features

• WebGL-Accelerated: Hardware-accelerated rendering for smooth performance
• Real-time Conversion: Live video to ASCII transformation
• Color Support: Maintain original video colors or go classic monochrome
• Audio Reactive: Brightness responds to audio levels
• Interactive Effects: Mouse trails and click ripple effects
• Full Controls: Play, pause, seek, and control playback
• Customizable: Extensive prop options for fine-tuning
• Responsive: Adapts to container size

Examples

Classic Terminal Look

<Any2Ascii 
  src="/video.mp4"
  colored={false}
  charset="standard"
  brightness={0.9}
/>

Audio Reactive

<Any2Ascii 
  src="/video.mp4"
  audioEffect={80}
  audioRange={70}
  charset="detailed"
/>

Matrix Style

<Any2Ascii 
  src="/video.mp4"
  charset="binary"
  colored={false}
  brightness={1.2}
/>

Smooth Dithering

<Any2Ascii 
  src="/video.mp4"
  dither="bayer"
  charset="minimal"
  brightness={0.9}
/>

Interactive Experience

<Any2Ascii 
  src="/video.mp4"
  enableMouse={true}
  enableRipple={true}
  trailLength={32}
  rippleSpeed={50}
/>

Development

# Install dependencies
npm install

# Build the package
npm run build

# Run tests
npm test

License

MIT

Credits

Video ASCII module was inspired by Elijah's Video2Ascii NPM Package