# Catalog

Every component and background built on the asciicn engine, grouped by what it's for.

> 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).

Each component and background installs as plain source into `components/asciicn/`. Drop one into your page as it is, read its source to see how it's made, or point your agent at one and ask for a variation. For anything not here, [ask your agent](/docs#ask-your-agent-for-any-ascii-effect) or [write your own](/docs/engine/write-your-own). To try looks before you install, open the [Studio](/studio).

Every example, with its install command and docs link, is listed in [llms.txt](/llms.txt) and in the skill's [references/examples.md](/.well-known/agent-skills/asciicn/references/examples.md).

## Using a component [#using-a-component]

Install any component by name. It brings the parts of the engine it needs the first time:

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

Backgrounds fill the box you give them. Put one behind your content with `absolute inset-0`:

```tsx
import { Nebula } from "@/components/asciicn/nebula";

export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Nebula charset="braille" className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}
```

Components that draw on the engine share these look props:

| Prop        | What it controls                                                                                                                         | Default              |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `charset`   | The glyph set: `"standard"`, `"dense"`, `"blocks"`, `"quadrants"`, `"braille"`, `"cp437"`, `"petscii"`, `"katakana"`, `"dots"`, `"edge"` | Chosen per component |
| `chars`     | A custom ramp from empty to dense, such as `" .oO@"`. Wins over `charset`                                                                | none                 |
| `colorMode` | `"mono"`, `"truecolor"`, `"ansi16"`, `"duotone"` or `"palette"`                                                                          | Chosen per component |
| `phosphor`  | Mono screen colour: `"p1"`, `"p3"`, `"ibm"` or `"blueprint"`                                                                             | `--ascii-ink`        |
| `ramp`      | Duotone ramp, such as `"mainframe"`, `"sodium"` or `"glacier"`                                                                           | Chosen per component |
| `fx`        | CRT post effects: `scanlines`, `bloom`, `curvature`, `glitch`, `flicker`, `vignette`, each 0 to 1                                        | none                 |
| `cell`      | Glyph cell height in CSS pixels                                                                                                          | `--ascii-cell`       |
| `animate`   | Whether it moves                                                                                                                         | `true`               |
| `speed`     | How fast it moves                                                                                                                        | `1`                  |
| `handle`    | A ref that can capture the current frame for export                                                                                      | none                 |

Terminal and UI pieces take a `color` from the [named palette](/docs/theming) and their own content props. Each page lists every prop.