components / ascii-shader
ascii-shader.
ascii fragment shader — supply (x, y, t) => luminance and it paints a character grid. the general form of what donut does for one fixed torus. one string assigned to textContent per frame, capped fps, paused off-screen by an IntersectionObserver, and static under reduced motion. ships plasma, ripple and tunnel presets.
installation
bunx @justin06lee/chrome@latest add ascii-shaderprops
| name | type | default | description |
|---|---|---|---|
| shader * | (point: ShaderPoint) => number | - | returns luminance 0..1 for a cell. point is { col, row, x, y, t, cols, rows }; x/y are aspect-corrected so a circle is round. |
| cols | number | - | fixed column count; omit to fill the element's width. |
| rows | number | - | fixed row count; omit to fill the element's height (which then has to be set on the element). |
| chars | string | ' .:-=+*#%@' | luminance ramp, dark to light. |
| fps | number | 24 | frame cap. |
| speed | number | 1 | multiplies the time fed to the shader. |
| paused | boolean | false | freeze on the current frame; the clock holds rather than skipping. |
| size | number | 12 | font size in px; drives the auto-fit grid. |
| isolate | boolean | true | css containment for the per-frame repaint; set false inside <Chrome> so the foil paints through. |
| label | string | - | accessible name; without one the canvas is decorative and hidden. |
| className | string | - |