Build with
living ASCII.

Start in the workspace without installing anything. This link loads a procedural field and a look; try it, change the settings, then use your own media.

https://ascii.cafe/app?v=1&s=orbit-sphere&cw=terminal&lv=8

1. Choose a sourceUse a field, image or clip. Camera and screen capture begin with a permission prompt.
2. Shape the outputSet the alphabet, density, tones and motion in the workspace.
3. Choose how it travelsShare settings, export pixels, or use a licensed interactive integration.

The workspace at /app turns a picture, a video, a camera or a shared screen into ASCII characters, halftone discs, ordered dither or line art, live. Lines includes engraving, flow and contour styles. Rendering and exports run in the browser without a visitor account. Optional feature submissions upload ASCII frame JSON, a cover image and chosen public credit after consent; original files stay local, but Show Original Background includes rendered source pixels in the submitted capture.

Shareable rendering settings live in the address bar. A link reproduces a look; a settings file carries the same keys as JSON. The Settings links section documents both.

Activate a Developer key in the workspace, then choose Developer > Download ZIP. The ZIP includes Artwork.jsx, standalone index.html, player modules, artwork.json and Setup.pdf. Bake Frames captures 1 to 30 seconds at 32 fps. Include Original Asset bundles the full image or video for live rendering. Keep the folder together for React and module integration. The standalone HTML works offline. The paths below are local filenames in your project, not public CDN downloads.

<div id="stage" style="height:480px"></div>
<script type="module">
  import GlyphRaster from "./glyph-raster.js";
  const art = new GlyphRaster(document.querySelector("#stage"), {
    ramp: " ·K■|", density: 90, pointerAmount: 0.5,
  });
  // Call art.destroy() when the host is removed.
</script>

// exported from the workspace
import Pour from "./Artwork.jsx";

export function Hero() {
  return <Pour />;
}

<iframe src="/artwork/index.html"
  title="my pour"
  style="width:100%;height:480px;border:0">
</iframe>

Choose the source you own. Keep the same engine instance when the source or styling changes.

// art is the engine instance from the entry-point example.
// file is a File from your image input.
const loaded = await art.setImage(file);
if (!loaded) throw new Error("Image could not load");
art.update({ density: 100, sourceFit: "width" });

// Wire this to a user click.
shareButton.addEventListener("click", () => {
  art.enableScreenShare();
});

// Call this cleanup when the host unmounts.
function cleanup() {
  art.destroy();
}

Halo and ripples respond to input in a live player. PNG, GIF and MP4 preserve rendered pixels; they cannot respond to a new pointer after export.

art.update({
  pointerAmount: 0.35,
  pointerRadius: 0.25,
  rippleAmount: 0.3,
  rippleSpeed: 1,
  pointerMask: "everywhere",
  rippleMask: "everywhere",
});

The engine that draws this site is one JavaScript file with no dependencies. It draws into a box you give it, takes one options object, and rendering settings can be changed in place while it runs. Pass onFrame and onStatus callbacks when constructing the engine.

It is not a free download. Using it in your own pages needs the developer license, which covers one commercial project. What the license includes is on the price board and in the license section below.

<div id="stage" style="height:480px"></div>
<script type="module">
  import GlyphRaster from "./glyph-raster.js";
  const art = new GlyphRaster(document.querySelector("#stage"), {
    ramp: " ·K■|", density: 90, pointerAmount: 0.5,
  });
  // Call art.destroy() when the host is removed.
</script>

The constructor is GlyphRaster and the file is glyph-raster.js.

Options

Search by option, group or behavior. Defaults are the engine's own; the Values column notes workspace differences.

Reduced motion is honoured by the engine on its own: one frame, no ripples.

Methods

• getSourceFrame(maxSide = 640)Copies the current unprocessed image or media frame into a reused local canvas, capped at 1920 pixels. Returns null for procedural or unavailable sources. Does not acquire or control streams.
• update(options)Applies rendering settings in place. Set onFrame and onStatus callbacks in the constructor.
• setSource(fieldIdOrFunctionOrElement)A core built-in field id, custom luminance function, or image, video or canvas element you own. Workspace cafe-* field ids require the site's field functions; they are not core string ids.
• setImage(fileOrAddress)A File, a Blob or an address. Resolves true when it took and false with a status when not. Pictures up to 32 MB, scaled to 2048 px on the long edge.
• setVideo(fileOrAddress)The same for a clip the engine then owns, up to 512 MB.
• enableWebcam()Call it inside a click. Resolves true when the camera is live.
• enableScreenShare()The same for a window, a tab or a screen. screenShareSupport() says whether the browser can.
• setPlaying(on)Pauses or resumes playback.
• seek(seconds)Renders the frame at that time without changing the play state.
• snapshot(type?)The current frame as a data URL, PNG by default.
• toText()The frame as real characters, one line per row.
• destroy()Stops everything, releases the camera and the clip, removes what it added.

Additional state and playback methods: getParams, getGrid, getSourceState, getSourceFit, mediaRate, restart, screenShareSupport. The color key set: eyedropperSupport, armEyedropper, disarmEyedropper, addKeyColor, getKeyState.

A settings file describes how to render a source. An ASCII capture contains the rendered character-level grids. They solve different problems.

// Run after the source has loaded and onFrame has fired.
const frame = art.captureAscii({
  mode: "frame",
  text: true,
});

// Contains the rendered grid, ramp and level rows.
// This is different from a settings-only file.
const json = JSON.stringify(frame);

The site’s feature player reapplies pointer effects to quantized levels. Ripple edges can differ from the live source, and a recorded loop may have a visible seam. Captured artwork is not the editable original media.

Camera and screen recording uses the current canvas size. Resolution and frame rate depend on the source, browser and device. MP4 has an opaque background; use PNG or GIF for transparency.

Pro is $8 a month or $49 once for Lifetime Pro V1. Lifetime Pro V1 excludes major version upgrades.

How to build one.

• The base is https://ascii.cafe/app.
• Every setting is a query key, written only when it is not at its default.
• The key v=1 is present whenever any other key is.
• Values are URL-encoded. Build the query with URLSearchParams or its equivalent, so a space in an alphabet becomes a plus sign and a braille character its percent form.
• Unknown keys are ignored and out-of-range values clamp.
• A link never carries a picture or a video file. Only a public address (the key u) can be carried.

Settings link examples

A look for the visitor's own picture: halftone, eight levels, Amber. Drop a picture on it.

https://ascii.cafe/app?v=1&mk=d&lv=8&cw=amber

An example with a look: the Weather example, the Classic alphabet, ten levels, Terminal.

https://ascii.cafe/app?v=1&ex=weather&s=plasma&t=rain+on+tin&r=+.%3A-%3D%2B*%23%25%40&lv=10&cw=terminal

Template for a public picture with tones and a see-through background. Replace https://example.com/photo.jpg with your own image URL that allows cross-origin access.

https://ascii.cafe/app?v=1&u=https%3A%2F%2Fexample.com%2Fphoto.jpg&pal=1f5c47,4fc39a,d9fff0&see=1

A link reproduces the look. The picture stays with whoever made it, unless it is a public address.