# asciicn

> An ASCII engine and copy-paste components for React and shadcn/ui. Photos, video, backgrounds, type and terminal UI, drawn in characters and themed with CSS `color`.

Components install as source with the shadcn CLI. Add the registry to components.json first:

```json
{ "registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" } }
```

Agent skill (engine plus SKILL.md): `npx shadcn@latest add @asciicn/asciicn-skill`

## Docs

- [Introduction](https://asciicn.sumak.dev/docs)
- [Installation](https://asciicn.sumak.dev/docs/installation)
- [Theming](https://asciicn.sumak.dev/docs/theming)
- [Engine](https://asciicn.sumak.dev/docs/engine): AsciiCanvas, fields, frames, export
- [Catalog](https://asciicn.sumak.dev/docs/components)

## Backgrounds

Full-bleed animated fields for heroes, sections and cards.

- [ASCII Background](https://asciicn.sumak.dev/docs/ascii-background.md): Eleven animated fields for heroes and sections, from plasma and starfield to a synthwave grid.
- [ASCII Matrix](https://asciicn.sumak.dev/docs/ascii-matrix.md): Digital rain with flickering katakana and fading trails.
- [ASCII Donut](https://asciicn.sumak.dev/docs/ascii-donut.md): The classic donut.c torus, lit and z-buffered.
- [ASCII Globe](https://asciicn.sumak.dev/docs/ascii-globe.md): A rotating planet with lit continents, drawn in characters.

## Images

Photos, video and the camera, redrawn in characters.

- [ASCII Image](https://asciicn.sumak.dev/docs/ascii-image.md): Any photo as live ASCII. Dither, colour from the source, reveal the original on hover.
- [ASCII Video](https://asciicn.sumak.dev/docs/ascii-video.md): Video files, streams or the webcam, converted every frame.
- [ASCII Image Compare](https://asciicn.sumak.dev/docs/ascii-image-compare.md): Drag a divider between a photo and its ASCII version.
- [ASCII Scroll Reveal](https://asciicn.sumak.dev/docs/ascii-scroll-reveal.md): An image that resolves from coarse glyphs to the photo as it scrolls into view.
- [ASCII Marquee](https://asciicn.sumak.dev/docs/ascii-marquee.md): An endless marquee of words or logos, set in glyphs.

## Type

Display type and text effects made of glyphs.

- [ASCII Text](https://asciicn.sumak.dev/docs/ascii-text.md): Display type built from glyphs. Any font, no FIGlet files.
- [ASCII Scramble](https://asciicn.sumak.dev/docs/ascii-scramble.md): Text that decodes out of random glyphs on mount or hover.
- [ASCII Dissolve](https://asciicn.sumak.dev/docs/ascii-dissolve.md): Text that dissolves into shade noise and resolves back.

## Interface

Terminal-style pieces for real UI: loaders, progress and frames.

- [ASCII Progress](https://asciicn.sumak.dev/docs/ascii-progress.md): Progress bars with eighth-block precision, in five styles.
- [ASCII Spinner](https://asciicn.sumak.dev/docs/ascii-spinner.md): Terminal loading spinners: braille, line, arc, quadrant and more.
- [ASCII Box](https://asciicn.sumak.dev/docs/ascii-box.md): Box-drawing frames that stretch to any content.
- [ASCII Button](https://asciicn.sumak.dev/docs/ascii-button.md): Buttons framed in brackets, boxes, arrows or underlines that come alive on hover.
- [ASCII Skeleton](https://asciicn.sumak.dev/docs/ascii-skeleton.md): Loading placeholders that shimmer through shade blocks.
- [ASCII Avatar](https://asciicn.sumak.dev/docs/ascii-avatar.md): Generative identicons from any string, in block glyphs.
- [ASCII Divider](https://asciicn.sumak.dev/docs/ascii-divider.md): Horizontal rules in box-drawing and pattern glyphs, with an optional label.

## Charts

Data drawn with block elements, one character per value.

- [ASCII Chart](https://asciicn.sumak.dev/docs/ascii-chart.md): Sparklines and labelled bar charts drawn with block elements.
- [ASCII Line Chart](https://asciicn.sumak.dev/docs/ascii-line-chart.md): ASCII line charts with axes, several series and a scrubbing readout.
- [ASCII Area Chart](https://asciicn.sumak.dev/docs/ascii-area-chart.md): Stacked or overlapping areas: ASCII lines over glyph fills.
- [ASCII Column Chart](https://asciicn.sumak.dev/docs/ascii-column-chart.md): Vertical bars stacked from square shade blocks, grouped by label, that build up block by block.
- [ASCII Pie Chart](https://asciicn.sumak.dev/docs/ascii-pie-chart.md): A pie or donut in braille that sweeps in clockwise and pops a slice out on hover.
- [ASCII Heatmap](https://asciicn.sumak.dev/docs/ascii-heatmap.md): A contribution-style calendar grid in shade blocks.
- [ASCII Gauge](https://asciicn.sumak.dev/docs/ascii-gauge.md): A dial for one value, drawn in braille.
- [ASCII Uptime](https://asciicn.sumak.dev/docs/ascii-uptime.md): Status bars for uptime over time, one block per day.

## Optional

- [Full documentation](https://asciicn.sumak.dev/llms-full.txt): every component page in one file