Lab/20

ASCII Video

Each cell picks a character by brightness from a ramp, drawn from a prebuilt glyph atlas so dense grids stay fast. Swap the source, the character set, and the cell size.

Canvas
Image
Generative

Move to tilt and light it

lab/ascii-video

Cell size10px

Installation

Add ASCII Video to your project with the shadcn CLI. The files land in components/lab, ready to edit.

$ pnpm dlx shadcn@latest add @soultel/lab-ascii-video

Or by URL: https://asafefe.dev/r/lab-ascii-video.json

Brings along

utils
@soultel/lab-canvas

Usage

example.tsx10 lines

import { AsciiVideo } from "@/components/lab/ascii-video"

export function Example() {
  return (
    <div className="grid h-[420px] gap-4 sm:grid-cols-2">
      <AsciiVideo />
      <AsciiVideo src="/avatar.png" charset="blocks" cellSize={8} label="My avatar in ASCII" />
    </div>
  )
}

Props

Prop	Type	Default	Description
src	string	-	Image to render. Leave it out for the generated torus scene.
charset	"standard" \| "blocks" \| "binary" \| "dense" \| string	"standard"	A preset or your own ramp, from empty to full.
cellSize	number	10	Font size of one cell in px. Smaller is denser.
fit	"contain" \| "cover"	"contain"	How the image fits the canvas.
contrast	number	1.3	Contrast boost for images.
speed	number	1	Animation speed multiplier.
lens / lensRadius	boolean, number	true, 90	Brighten and recolor the cells around the pointer.
color / accentColor	string	"var(--foreground)", "var(--primary)"	Character color, and the lens and highlight color.
background	string	"var(--background)"	What sits behind it. On light pages, dark areas draw dense.
font	string	"var(--font-mono, ui-monospace)"	Monospace font family.
label	string	-	Accessible description. Without it the canvas is hidden from screen readers.