Skip to content

apon133/PretextPlayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CinemASCII - Real-time ASCII Video Player Header

CinemASCII 🎞️

The Professional High-Performance Real-time ASCII Video Renderer

License React Vite

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.
  • 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.


Built with ❤️ for the ASCII Art Community by apon133

About

CinemASCII: A professional, high-performance real-time ASCII video player using React and @chenglou/pretext. Transform MP4/WebM videos into fluid, cinematic ASCII art with zero DOM reflow and up to 4K export support. 🎞️✨

Topics

Resources

License

Stars

Watchers

Forks