# ASCII Studio

> Pick a background or component, tune how the asciicn engine draws it, and export the frame or the code. Runs in the browser at https://asciicn.dev/studio.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The asciicn agent skill, for building any ASCII effect on the engine, is at [/.well-known/agent-skills/asciicn/SKILL.md](/.well-known/agent-skills/asciicn/SKILL.md).

The Studio is an interactive editor for the asciicn engine. Every control in it maps to a prop you can set in code, so anything you make there can be rebuilt in a project with the components and the engine from the registry.

## Sources

- **GPU fields:** `nebula`, `prism`, `ionize`, `squall` and `satin`, plus a 3D torus and a 3D globe.
- **The 16 backgrounds** (cities and landscapes) from the [backgrounds gallery](https://asciicn.dev/backgrounds.md).
- **Media:** a sample image, a video URL, your webcam, or text you type, sampled on the CPU into glyphs. Files and camera frames stay in the browser and never enter the URL.

## What you can change

- **Charset.** `standard` (classic), `dense` (70 glyphs), `blocks` (ANSI shades), `quadrants` (2x2 sub-cells), `braille` (2x4 dots), `cp437`, `petscii`, `katakana`, `dots` (halftone) and `edge` (Sobel edge glyphs), or a custom ramp.
- **Colour mode.** `mono` (the site palette, a phosphor such as `p1` green or `p3` amber, or a custom colour), `truecolor`, `ansi16` (`vga` or `xterm` table), `duotone` (ramps such as `mainframe`, `sodium` and `glacier`), and the source's own palette for GPU sources.
- **Grade.** Brightness, contrast, gamma, saturation, invert, threshold, and ordered dithering between glyph levels.
- **Cell size.** Glyph cell height in CSS pixels, from 4 to 28.
- **CRT effects.** Scanlines, bloom, curvature, glitch, flicker and vignette, each from 0 to 1.
- **Motion and input.** Speed, pause, pointer interaction, and audio input from a built-in synth or the microphone.

The setup is kept in the URL, so a link reopens the same look.

## Export

- Copy the setup as TSX, or the shadcn install command for the source.
- Save the current frame as plain text (`.txt`), ANSI art (`.ans`), SVG or PNG.
- Record a WebM loop of the animation.

The same exports are available in code through `ascii-export` (`toText`, `toAnsi`, `toSvg`, `toPng`, `recordCanvas`): see [Export](https://asciicn.dev/docs/engine/export.md).

## Build it in code

```bash
npx shadcn@latest add https://asciicn.dev/r/asciicn-skill.json
```

That installs the engine and the agent skill. Then follow the skill at https://asciicn.dev/.well-known/agent-skills/asciicn/SKILL.md, or start with [Write your own](https://asciicn.dev/docs/engine/write-your-own.md).