Interfaces,
drawn in characters.
Copy-paste components for React and shadcn/ui. Photos, video, type and terminal UI, drawn in glyphs and coloured by your theme.
Start from an example.
27 components in 5 groups, all drawn by the same engine. Install one as it is, or open it in the studio and change the charset, density and colour first.
90 intervals from Jul 29 to Oct 26: 1 with an outage, 6 degraded.
90 intervals from Jul 29 to Oct 26: 7 with an outage, 9 degraded.
Tune it, then copy the code.
The studio runs the same engine as the components. Drop in a photo, a clip or a line of text, pick a charset and a density, and copy the JSX it gives you.
Drop an image or video anywhere on the preview. Everything runs in your browser.
As a component
<AsciiImage
src="/demo/meadow.jpg"
alt="…"
brightness={0.1}
gamma={0.75}
backdrop={0.5}
color="source"
/>What's inside.
asciicn is an open-source ASCII engine with a shadcn registry on top. Every component installs as source in your repo, so you can read it and change it.
The engine
lib/ascii turns any source into a grid of glyphs: photos, video frames, canvas fields or text. It maps brightness to a charset, can dither with Bayer or Floyd-Steinberg, and draws to a canvas, a pre or plain spans. Colours come from your shadcn theme. Animation pauses offscreen and respects reduced motion.
The components
27 React components built on the engine. Each one is a single file with typed props and no extra runtime dependencies beyond React.
The studio
A page for trying settings on your own image, clip or text before you install. It gives you the props, a PNG or a TXT file.
One command per component.
Add the registry once, then pull in what you need with the shadcn CLI. The engine comes along with the first component and is shared by the rest.
$ pnpm dlx shadcn@latest add @asciicn/ascii-image
✓ Created 2 files: components/ui/ascii-image.tsx, lib/ascii/engine.ts
- components/ui/ascii-*.tsx
- One file per component, yours to edit.
- lib/ascii/
- The engine. Added once, shared by every component.
- globals.css
- --ascii-fg, --ascii-dim and --ascii-accent, read from your theme.
- components.json
- The @asciicn registry entry, so the CLI knows where to look.