ASCII / Dither Rendered Hero

What this builds

A full-viewport hero section where the background or primary visual is an image or video rendered as ASCII characters in real time on a canvas element. The text content floats above the character field. The rendering pipeline converts pixel brightness to characters from a sorted density ramp, producing a distinctive terminal/retro/editorial aesthetic.

• Source image or video is downsampled to a character grid and rendered via Canvas 2D fillText
• sRGB linearization ensures perceptually correct brightness mapping
• Aspect ratio correction prevents circles from becoming ovals
• Optional dithering (Bayer ordered or Floyd-Steinberg error diffusion) adds texture to flat areas
• Colored output maps source pixel color to per-character fillStyle
• Optional CRT post-processing (scanlines, vignette, subtle bloom)
• prefers-reduced-motion shows a single static ASCII frame, no animation
• Works with static images, <video> elements, or webcam MediaStream