Asciify Engine skill

A skill that turns images, GIFs, video and 3D models into ASCII and builds ASCII components and GPU backgrounds via asciify-engine

  • 78 ★ on the repository
  • Last commit
Skill

Minimal access

Why this level

  • The skill steers the agent and runs the `asciify-engine` command over your files, and pages with GPU fields load the graphics card
All reasons and checks

ayangabryl/asciify-engine

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/asciify-engine

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skill steers the agent and runs the `asciify-engine` command over your files, and pages with GPU fields load the graphics card

This is third-party code. Review the repository files before installing.

What it does

Asciify Engine is an engine and skill for ASCII graphics on the web and in the terminal. The skill teaches an agent to turn attached images, GIFs, video and 3D models into characters with the `asciify-engine` command: text for a reply, ANSI for a terminal, SVG and animated SVG for a README. It also builds interface components and backgrounds drawn in real characters on the GPU. The set includes loading buttons, toasts, tabs, AI states, charts and page transitions, WebGL2 character fields reacting to the cursor, a headless mode for OG images and emails, and glTF, OBJ, STL and PLY models. Components take colors from CSS tokens in light and dark, honor reduced motion and pause off screen. The skill references hold prompts for each component and the full API.

Who it is for. Web developers and designers who want a signature text style in an interface, a landing page or a README, and anyone who wants an ASCII version of a logo or photo.

Good fit when

  • You ask for an ASCII version of a logo or photo for a README as an animated SVG
  • A home page needs a character background that follows the cursor
  • A save button must show loading and success in characters with colors from CSS tokens
  • An email or Open Graph image needs text from pixels with no DOM, in Node or a worker
  • A terminal splash from a 3D torus or knot model in braille characters

Not a fit when

  • You need precise raster image processing: the engine draws with characters
  • A page has many heavy GPU fields on weak hardware with no fallback
  • The project targets old browsers without WebGL2 and no fallback plan
  • You need a ready icon library: here components and backgrounds are made of characters

Example request

Make an ASCII version of this logo as an animated SVG for the README and put a text variant next to it

Limitations

Video in the terminal is processed through `ffmpeg`. GPU fields draw through WebGL2 and can be moved to a worker with the `worker: true` flag, with the full option set in the docs at asciify.org. 3D needs glTF, GLB, OBJ, STL or PLY files. The skill applies its own design by default, so colors and radii need binding to your theme tokens. The project ships STABILITY.md and SECURITY.md in the repository and is MIT licensed.

How to disable. Delete the `asciify-engine` skill folder from the agent skills directory and the package with `npm uninstall asciify-engine` if you installed it in a project.

FAQ

How do I install the Asciify skill?

Run `npx skills add ayangabryl/asciify-engine`. The engine itself is installed in a project with `npm i asciify-engine`, and you can try it with no install: `npx asciify-engine photo.jpg` or `npx asciify-engine torus`.

What can the command line do?

It turns images, GIFs, video through `ffmpeg` and 3D models into text, ANSI, SVG, HTML or JSON and also PNG, GIF and MP4. A model can be turned with the mouse and many files processed in one run.

Does the engine work without a DOM?

Yes, the `/headless` mode turns pixels into text in Node, workers and edge runtimes for OG images, emails, CLIs and READMEs. Output can be text, ANSI, SVG, HTML and animated SVG.

How do I add a GPU background?

Use fields from `/field` or the `<asciify-field>` element via `defineAsciifyField()`, which suits React, Vue, Svelte, Astro and plain HTML. Heavy fields can be drawn in a worker.

What do the components respect?

Colors from CSS tokens in light and dark, element size and radius, the reduced motion setting and a pause off screen.

Discussion

No questions or reviews yet.

Skills

A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project

SkillExtended access773Repository stars

A Claude skill that turns the name of an object into an isometric drawing in one HTML file with working buttons

SkillMinimal access348Repository stars
Official

Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS

SkillExtended access5.9KRepository stars

A skill builds and debugs GLSL shaders from reusable blocks, bundles dependencies into one file and checks WebGL2-oriented code.

SkillExtended access447Repository stars

A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program

SkillExtended access556Repository stars

README in short

The README presents the engine as an ASCII set for the web: components, media, GPU fields, headless mode, 3D models and a command line. It then covers installation, a quick TypeScript example, a feature list and a documentation link.

README badge

Original SKILL.md

---
name: asciify-engine
description: "Asciify attached or linked images, GIFs, video and 3D models: convert them to ASCII art with the asciify-engine command (text for a reply, ANSI for a terminal, SVG or animated SVG for a README), and build ASCII components and backgrounds for websites. Use when someone says asciify or asks for ASCII, text, braille or block art of a photo, logo, file or URL, a text banner, or ASCII in a terminal; and for interface components in characters (loading, status, toasts, tabs, AI states, charts, transitions, pages), animated backgrounds and heroes inked from the site's theme, live image, video and 3D fields on the GPU, artwork looks and art styles for wallpapers, posters and prints, hover and motion, type layered over media, export, rendering performance, and ASCII on servers and at the edge."
metadata:
  tested-engine: "4.33.0"
  updated: "2026-11-06"
---

# Asciify Engine

Use the published `asciify-engine` npm package. Tested against **4.33.0**. Check the application's installed version and its public types before using newer options; a local checkout can contain unpublished changes.

- Agent entry: https://asciify.org/skill (redirects to this Markdown document).
- Components: https://asciify.org/components · Looks: https://asciify.org/looks · Backgrounds: https://asciify.org/backgrounds
- Playground: https://asciify.org/editor · API documentation: https://asciify.org/docs/api
- Repository: https://github.com/ayangabryl/asciify-engine

```sh
npm install asciify-engine@latest
```

Entries: the `asciify-engine` command for files (a chat reply, a terminal, an SVG for a README); `/kit` for interface components and backgrounds, one call each; `asciify-engine` and `/core` for media and text conversion on a page; `/headless` for pixels to text with no DOM (servers, edge, terminals); `/decode` for image files to pixels with no dependencies; `/model` for 3D models to ASCII; `/hover` for the website hovers and living-image motion; `/studio` for art styles, looks and export; `/field` for raw GPU character fields. Each optional entry loads only when imported. GIF decoding loads `gifuct-js` when a GIF API is called.

## Asciify an attachment

When someone says asciify (or "turn this into ASCII", "make this ASCII art") and attaches or names an image, GIF, video, 3D model or URL, convert it now with the command and hand back the result; ask nothing about flags first. Per-media defaults, their words mapped to flags, READMEs and failures: [convert-attachments.md](references/convert-attachments.md).

1. **Find the file.** A path in the message (Claude Code pastes dropped files as paths); `/mnt/user-data/uploads/` in Claude apps, which expect what you hand back in `/mnt/user-data/outputs/`; the workspace in Cursor and Codex. Pass image, GIF and model URLs straight in; download a video first. A picture pasted with no file behind it: look where this environment keeps uploads, and if there is no file, say in one line that you need the file or its path. Never draw a stand-in by hand.
2. **Check the command.** `npx -y asciify-engine@latest --version` must print 4.33.0 or later (Node 18 or later); a project that depends on 4.33 or later can run its own `npx asciify-engine`. `could not determine executable to run` means npm has no 4.33 yet: say so.
3. **Convert for where it goes.** Text for your reply (`-f text`, and `--still` for a GIF, video or model so nothing plays), and a file worth keeping:

   ```sh
   npx -y asciify-engine@latest photo.jpg -f text -w 80 --cell-aspect 2.4     # the reply (leave out --cell-aspect in a terminal)
   npx -y asciify-engine@latest photo.jpg -o photo.svg --background '#000000'  # the file: in colour, sharp at any size
   npx -y asciify-engine@latest loop.gif -o loop.svg                           # a GIF or video (ffmpeg): an animated SVG
   npx -y asciify-engine@latest helmet.glb --spin -o turn.svg                  # a 3D model: one full turn
   ```

   Logo, line art or a scan, dark on white: add `--light`. A README: `--ink '#24292f' --dark-ink '#e6edf3' --title "…"`. A terminal: ANSI (`-o art.ans`). To post or send it: a picture, `-o art.png`, `.gif` or `.mp4`. Several files: `-o 'ascii/{name}.svg'`. Playback and the 3D viewer run only in the user's own terminal: give them the line, such as `npx asciify-engine helmet.glb`.
4. **Hand it back.** Read the text first; if the subject does not read, try `--light`, `--invert`, a crop or more columns. Then the text in a code block fenced with four backticks, the file and where it is, one line on what you chose, and one alternative (braille, colour blocks, the classic ramp, a wider file), not a menu.
5. **Live on their website instead?** A hero, background, component or turning model on a page is the kit, a field or `modelSource`, not the command: read on.

## For a website: kit first

Most web requests are a feeling ("make the loading state feel alive", "a calm background behind pricing", "like asciify.org") rather than an API. Work in this order:

Report a problem