Editor
Preview
Help

A shader is a bit of JS that exports either per-cell functions or one whole-buffer function. TEXTMODE calls it once per frame (per cell, or for the whole grid) and draws the result.

Per-cell style

Simplest style - called once per cell, per frame:

exports.char = function () {
  return '#';        // a single character
};

exports.fg = function () {
  return 'green';    // foreground color (optional)
};

exports.bg = function () {
  return 'default';  // background color (optional)
};

Whole-buffer style

For effects that need to remember state or look at neighboring cells, export a single frame function instead:

exports.frame = function (buffer) {
  // buffer[y][x] = { ch, fg, bg } - mutate cells in place
  buffer[0][0].ch = '@';
  buffer[0][0].fg = 'red';
};

Available variables

These are ready to use as bare identifiers inside your functions:

x, ycolumn/row of the cell being drawn (per-cell style only)
width, heightgrid size in columns/rows
fpsthe frames-per-second setting
frameframe count since the shader started (divide by fps to get elapsed seconds)

Colors

fg/bg accept a name:

black red green yellow blue magenta cyan white
gray brightred brightgreen brightyellow brightblue
brightmagenta brightcyan brightwhite default

...or a 256-color palette index (an integer from 0 to 255):

exports.fg = function () {
  return 196;  // bright red, from the 256-color palette
};

Toolbar

Exampleload a bundled shader into the editor
FPS / W×Hframe rate and grid size
Runrun the shader (Ctrl/Cmd+Enter)
Stopstop the animation
Sharecopy a link with the code and options baked in - nothing is uploaded
Layouttoggle side-by-side vs stacked panels
Fullscreenfill the screen with just the preview