@GoJun315: A developer on Reddit today shared that videos played in a web page can be rendered purely with text characters. The open-source project used is ASCILINE, a real-time ASCII video rendering engine. It supports two rendering modes: - ASCII mode: restores the image with ordinary characters by brightness and color, you can see the characters flowing...

X AI KOLs Timeline Tools

Summary

ASCILINE is a high-performance open-source real-time ASCII video rendering engine that converts videos into plain text character displays, supporting multiple rendering modes, low-bandwidth transmission, and CSS effects overlay.

Today a developer on Reddit shared that videos played in a web page can be rendered purely with text characters. The open-source project used is ASCILINE, a real-time ASCII video rendering engine. It supports two rendering modes: - ASCII mode: restores the image with ordinary characters by brightness and color, you can see the characters flowing - Pixel mode: uses colored block characters to tile, can stably run at 360p 30 FPS - Audio serves as the master clock, audio-video synchronization relies on the audio track as the reference - Each frame is only a few KB, can run smoothly even on weak networks - Supports CSS text effects: glow, shadow, and animations can all be overlaid in real-time GitHub: https://github.com/YusufB5/ASCILINE... Currently, the performance has been pushed to the limit with Python, and the author plans to rewrite the core engine in Rust. Suitable for creative coding, web art, retro hacker-style interfaces, or video encoding/decoding scenarios.
Original Article
View Cached Full Text

Cached at: 06/12/26, 05:01 PM

Today, a developer shared on Reddit that videos played in a web page can be rendered purely using text characters. The open-source project used is ASCILINE, a real-time ASCII video rendering engine. It supports two rendering modes:

  • ASCII mode: uses ordinary characters to restore the image based on brightness and color; you can see characters flowing
  • Pixel mode: uses colored block characters to create a mosaic, stably achieving 360p at 30 FPS
  • Audio acts as the master clock; audio-video sync is based on the audio track
  • Each frame is only a few KB, works well even on weak networks
  • Supports CSS text effects: glow, shadows, animations can all be overlaid in real-time
    GitHub: https://github.com/YusufB5/ASCILINE…
    Currently, with Python, performance has been pushed to the limit; the author also plans to rewrite the core engine in Rust. Suitable for creative coding, web art, retro hacker-style interfaces, or video codec scenarios.

YusufB5/ASCILINE

Source: https://github.com/YusufB5/ASCILINE

🌌 ASCILINE Engine

ASCILINE is a high-performance, cross-platform real-time ASCII video rendering engine.

Our core objective is to transform the web into a highly dynamic and interactive typographic canvas. By mapping pixels to text-based representations, we unlock new possibilities for web media delivery.

OutputDetails
Original SourceStandard MP4 video file.
ASCII ModeShowcases rendered using Mode 3 (32K Colors) from a 30fps source.
PIXEL ModeShowcases rendered using Mode 5 (16m Colors) combined with the --pixel flag for ultra-high fidelity.

🎯 Strategic Vision & Core Capabilities

  1. Pure Typographic Manipulation: The visual stream is not a standard media file—it’s raw HTML/Canvas text. This makes the impossible possible: you can apply real-time CSS filters (neon glows, text shadows, animations) to video content.
  2. Local AI & LLM Ready: By reducing complex pixel streams into structured logical strings, ASCILINE acts as a perfect bridge for AI. Instead of feeding heavy computer vision models, lightweight LLMs can process semantic video summaries.
  3. Ultra-Low Bandwidth & IoT Compatibility (valid for ASCII MOD): Standard codecs (H.264/VP9) choke microcontrollers and weak networks. ASCILINE processes the heavy lifting once on the backend, streaming only a few kilobytes per frame.
  4. Bypassing Browser Constraints: Modern browsers aggressively throttle autoplay videos, and ad-blockers restrict traditional media frames. To the browser, ASCILINE is simply “JavaScript updating a canvas”—completely invisible to media restrictions.

🚀 Technical Features

  • Cross-Platform: Runs seamlessly on Windows, macOS, and Linux.
  • Real-Time ASCII Streaming: Low-latency video-to-ASCII conversion.
  • Real-Time Pixel Streaming: Replaces characters with colored blocks, approaching 360p video quality.
  • High Performance: Uses HTML5 Canvas for rendering, optimized for cinematic 24-30 FPS playback. High-FPS sources are automatically decimated for stability.
  • Master Clock Sync: The audio track acts as the absolute master clock, guaranteeing perfect A/V synchronization.
  • Zero-Copy Binary Protocol: Frames are streamed as raw binary (Uint8Array) directly to the canvas, saving bandwidth and CPU.
  • Multiple Color Modes: Supports everything from classic B&W to 16M color ultra-fidelity.
  • Flexible Video Management: Supports JSON playlists (per-video mode & volume), folder-based auto-queuing (filesystem order), single-file mode, and infinite loop playback — all controlled via CLI arguments.

🛠️ Architecture

  1. Backend (Python/FastAPI): Decodes video using OpenCV, maps pixels to ASCII characters via NumPy, and streams binary data.
  2. Frontend (Vanilla JS): Receives binary frames via WebSockets, manages a jitter buffer, and renders to a Canvas grid.
  3. Communication: Optimized WebSocket protocol with a custom INIT handshake for dynamic resolution/FPS adjustment.

📦 Installation

1. Clone the repository

bash git clone https://github.com/YusufB5/ASCILINE.git cd ASCILINE

2. Install dependencies

bash pip install fastapi uvicorn opencv-python numpy websockets

🔈 Audio Support (FFmpeg Required)

To enable server-side audio processing (Volume 1-5), you must have FFmpeg installed.

Option 1: Package Manager (Recommended)

  • Windows: winget install ffmpeg
  • macOS: brew install ffmpeg
  • Linux: sudo apt install ffmpeg

Option 2: Manual Installation (Windows) If you get a FileNotFoundError or don’t want to modify system variables:

  1. Download FFmpeg ZIP (https://github.com/BtbN/FFmpeg-Builds/releases/latest).
  2. Extract ffmpeg.exe from the bin folder.
  3. Drop it directly into your ASCILINE project folder alongside stream_server.py.

3. Run the Web Server

Single video: bash python stream_server.py video.mp4 --cols 240

Folder mode — drop your videos into videos/ and run: bash python stream_server.py --folder videos --cols 200 python stream_server.py --folder videos --cols 230 --loop # infinite loop python stream_server.py --folder videos --mode 5 --pixel --cols 320 --vol 2 # all videos same settings

Videos play in filesystem order (top to bottom as they appear in the folder, not alphabetically). Just add/remove files from the videos/ folder to control the queue.

JSON Playlist — full control per video: bash python stream_server.py --playlist playlist.json --cols 220 python stream_server.py --playlist playlist.json --cols 220 --loop

Use playlist.json when you need different --mode or --vol settings for each video.

💡 Windows Users: You can use the included serve.bat shortcut for quicker typing: .\serve video.mp4 --cols 240

Open http://localhost:8000 in your browser.

4. Run directly in Terminal (Standalone)

If you prefer to bypass the web interface, you can render the video directly inside an ANSI-supported terminal (zero-flicker, true color): bash python ascii_video_player2.py video.mp4 --cols 100 --quality 0

💡 Windows Users: Use the shortcut .\play video.mp4 -c 100 -q 0

⚠️ Note: Do not resize your terminal window during playback, as dynamic text wrapping will corrupt the ASCII layout.

🎨 Customization

You can easily customize the look and feel of the engine:

Styling

Edit style.css to change the accent colors and typography using CSS variables: css :root { --accent-color: #00ff41; /* Classic Matrix Green */ --bg-color: #050505; }

Rendering Modes

The engine supports different fidelity levels via the --mode flag:

  • 1: Black & White (DOM mode)
  • 2: 512 Colors
  • 3: 32K Colors
  • 4: 262K Colors
  • 5: 16M Colors (Ultra) bash python stream_server.py --mode 5 --cols 240 --rows 100

📐 Resolution & Auto-Scaling

By default, you only need to specify the width (--cols). ASCILINE will automatically calculate the correct --rows based on the source video’s aspect ratio to prevent stretching.

  • ASCII Mode Recommended: --cols 200 to --cols 240 (Best balance of text detail and cinematic 30 FPS performance).
  • Pixel Mode Recommended: --cols 600 to --cols 900 (Provides near-HD visual quality. Performance heavily depends on your machine’s CPU/VRAM).
  • Smart Defaults: If you do not specify a --cols value, ASCILINE automatically defaults to 450 when Pixel Mode is enabled, and 200 for standard ASCII text mode.

  • ⚠️ Hardware Limits & A/V Sync: If you push the --cols too high for your specific hardware (e.g., 1350 on a laptop vs a gaming desktop), the Python backend won’t be able to encode and send the massive frames fast enough. When the video stream lags behind the audio, you will experience A/V desync (audio finishing early). If this happens, simply lower your --cols value!

bash python stream_server.py video.mp4 --mode 5 --cols 240 # Terminal will show: [AUTO] 1920x1080 → grid 240x67

Server-Side Volume Control

Volume is controlled at the server level via the --vol flag (scale 0–5). When set to 0, the audio engine (FFmpeg) never runs, saving CPU and bandwidth.

--volFFmpeg MultiplierDescription
0—Muted (no processing)
11.0×Normal (default)
31.5×Loud
52.0×Double volume

bash python stream_server.py video.mp4 --pixel --cols 560 --vol 0 # Silent python stream_server.py video.mp4 --cols 220 --vol 3 # Loud

Playlist Format (playlist.json)

Each entry can override the global --mode, --pixel, --vol, and --cols defaults: json [ { "video": "intro.mp4", "mode": 1, "vol": 1 }, { "video": "main.mp4", "mode": 5, "pixel": true, "vol": 3, "cols": 520 }, { "video": "outro.mp4", "mode": 3, "vol": 2, "cols": 240 } ]

Video paths are resolved automatically — the engine checks the project root and the videos/ subfolder, so you can write just the filename.

📜 License & Ethical Guardrails

MIT License (with Anti-Ad Restriction)

ASCILINE is distributed under the MIT License, but with a strict ethical guardrail. Because this engine bypasses standard browser constraints and ad-blockers (by rendering pure text instead of video), we strictly prohibit its use by ad-networks to serve unblockable advertisements.

See the LICENSE file for the full text, which includes the ANTI-ADVERTISEMENT RESTRICTION clause.

Similar Articles

@VincentLogic: Now this is what real Harness Engineering looks like! A clear breakdown of the full article-to-video pipeline: article -> script -> web development -> voice recording -> screen capture. Skip the Sora hype; coding webpages for video generation offers much better control and is completely open source.

X AI KOLs Timeline

This post outlines a complete open-source text-to-video workflow spanning script generation, frontend development, voiceover recording, and screen capture, highlighting how a code-driven approach delivers superior control and higher content production efficiency.

Animated ASCII Art for Web Pages

Hacker News Top

ascii.rest is a tool by @bas3line that generates animated ASCII art for embedding into web pages, demonstrating a playful creative application of character-based rendering.

@GitTrend0x: Claude Code can now edit videos too! This SKILL is 100% free and open source. ✓ Automatically create animations ✓ Generate subtitles in different styles ✓ Remove silence, errors, and filler words https://github.com/browser-use/video-us…

X AI KOLs Timeline

video-use is a 100% open-source tool that lets Claude Code edit videos automatically by removing filler words, adding subtitles, color grading, and generating animations. It integrates with Claude Code via a skill and uses ElevenLabs for transcription.

@VincentLogic: In the past, when doing frontend work, I used to either hunt around for GIFs or write CSS until my head ached just to create a loading animation. Recently I came across this open-source library math-curve-loaders, which generates animations purely using mathematical formulas. I took a look — rose curves, Lissajous curves, and other mathematical figures produce extremely elegant animations. Pure HT…

X AI KOLs Timeline

Introduces an open-source frontend library called math-curve-loaders that utilizes mathematical formulas (such as rose curves and Lissajous curves) to generate elegant loading animations. It is implemented purely with HTML+CSS, has zero dependencies, and comes with a visual debugging panel that allows real-time parameter adjustments and one-click code copying.