ASCII Renderer

The AsciiRenderer component is the ultimate "hacker" aesthetic tool. It works by painting an image, a playing video, or a live webcam feed onto a hidden HTML5 Canvas. It then reads the pixel data, calculates the perceived brightness of each pixel block, and maps it to a string of ASCII characters (from dark space to bright @).

It runs on a requestAnimationFrame loop, meaning it natively supports 60fps video and webcam playback directly in the DOM as raw text!

Live Preview

INITIALIZING DATA STREAM...

Installation

[!WARNING] Webcam Permissions: If you enable the useWebcam prop, the browser will immediately prompt the user for Camera permissions via navigator.mediaDevices. If the user denies permission, the component will output a "WEBCAM ACCESS DENIED" text fallback.

Props

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AsciiRenderer } from "@/components/creative/ascii-renderer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AsciiRenderer } from "@/components/creative/ascii-renderer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AsciiRenderer
        src="example"
        isVideo{true}
        useWebcam{true}
      />
    </div>
  );
}