ASCII Flow Field
A background of live ASCII: a drifting contour map set glyph by glyph in your mono face, matched to the shape of each cell, that bends round a hill the pointer raises, its upper contours in signal.
WebGL20 deps1 file · 55 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* AsciiFlowField — a background of live ASCII: a contour map that drifts and parts around the pointer.
*
* A slowly warped height field is drawn as contour lines in WebGL2 and set in
* the page's mono face glyph by glyph, matched to the shape of each cell, so
* a line running uphill becomes / and a flat one _. It drifts over forty
* seconds and more; the pointer raises a hill the lines bend round, its upper
* contours in signal. 30fps and only on screen. Content goes on top.
*
* Part of the Dither & ASCII kit: one ink, paper #f3f0e6, on a warm black
* ground #0b0b0d, with vermillion #ff4f2b as a second ink inside the
* pictures and for a live state. Cells snap to whole device pixels;
* scenes dither in linear light, photographs on a gentler curve. Funnel Display through
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
A background that is text all the way down. A slowly warped height field, drifting over forty seconds and more on the page clock, is drawn as thin contour lines over a faint fill and set in the page's own mono face, glyph by glyph. Each cell is matched to the glyph whose shape fits it best, not just its brightness, so a line running uphill becomes a slash, a level one an underscore or a dash and a steep one a bar, and the map reads as drawn rather than as a staircase of dense and sparse characters. Move the pointer and it raises a soft hill that the contours bend round, its upper rings lit in signal; the field's highest contours carry a little signal too. It renders at 30fps and only while on screen, and content goes on top as children.
Curator’s note
The Dither & ASCII kit's surface (slot 2), cut from dither-ascii-site. Pro: the kit's WebGL2 stage with a warped height-field scene and the shape-matched ASCII pass, at 30fps.
