CinemASCII 🎞️

The Professional High-Performance Real-time ASCII Video Renderer

CinemASCII is not just an ASCII converter; it's a high-performance real-time video-to-text rendering engine. Powered by @chenglou/pretext, it transforms any video file into fluid, cinematic ASCII art directly in your browser with zero DOM reflow and professional-grade export capabilities.

View Repo on GitHub | Report Bug

🎥 Demo Video

Check out the real-time rendering engine in action:

---

🌟 Key Features

CinemASCII leverages cutting-edge web technologies to deliver an unparalleled ASCII experience.

• 🚀 Real-Time 60FPS Rendering: Experience fluid, lag-free ASCII transformation of any video file (MP4, WebM, MOV).
• ⚡ High-Performance Typography: Uses the Pretext's Canvas font engine for pure arithmetic layout—achieving speeds unreachable by traditional DOM-based tools.
• 🎬 Ultra-HD Export Support: Record and download your ASCII creations in 720p, 1080p, 1440p (2K), or 2160p (4K) WebM format.
• 🎨 Dynamic Visual Styles: Choose from multiple themes: Matrix (Green), Classic Color, Amber Terminal, Cyan Glow, and White Monochrome.
• ⌨️ Custom Character Mapping: Use presets like Standard, Blocks, Binary, or Matrix characters, or define your own custom character density map.
• 📸 High-Res Snapshots: Capture beautiful PNG frames of your ASCII art with a single click.
• 📺 Retro CRT Aesthetic: Toggle scanlines and flicker effects for that authentic vintage terminal look.

🛠️ The Tech Stack

CinemASCII is built for performance and modern browser compatibility.

• React 19: Utilizing the latest React features for efficient UI management.
• Vite 8: Lightning-fast HMR and build optimizations.
• @chenglou/pretext: The powerhouse typography engine that makes 60fps ASCII possible. Library Source
• Web Audio API: Ensures perfectly synchronized audio capture during video recordings.
• MediaStream Recording API: For high-fidelity, lossless video exports directly from the canvas.

🚀 Getting Started

Prerequisites

• Node.js (Latest stable version)
• pnpm (recommended) or npm

Installation

1. Clone the repository:

   git clone https://github.com/apon133/PretextPlayer.git
   cd PretextPlayer

2. Install dependencies:

   pnpm install

3. Launch Development Server:

   pnpm dev

🎥 How to Use CinemASCII

1. Upload: Drag & drop any video or click "Browse files."
2. Customize: Use the sidebar to adjust font size (character density) and select your color palette.
3. Render: Press "Play" to watch the real-time conversion.
4. Export: Select your resolution (up to 4K), click "Record," and save your ASCII masterpiece.

❓ Why CinemASCII? (SEO FAQ)

Is this a video-to-ASCII converter?

Yes, but unlike traditional converters that generate static text files, CinemASCII is a real-time player that renders video at 60fps using a specialized font engine.

Can I export the results?

Yes. CinemASCII supports high-resolution recording (up to 4K WebM) with synchronized audio, making it perfect for creative video editing and social media.

What is Pretext?

Pretext is a high-performance typography engine that bypasses the browser's slow DOM layout in favor of fast canvas arithmetic.

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

📚 Library

Powered by the high-performance typography engine: Pretext

---

Built with ❤️ for the ASCII Art Community by apon133