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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Any image.
Any output.
Move through the field
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Lit Dot Matrix Field
backgroundsA WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
Aurora Curtain Field
backgroundsThe kit's aurora on its own, in WebGL: three curtains with bright borders, fraying rays and folds over a field of stars, bowing toward the pointer, for any dark section.
Holo Foil Field
backgroundsA full-bleed sheet of holographic chrome in WebGL: long draped folds reflect the kit's studio, every seam the horizon draws splits into a spectrum, and a thin film tints only the lit metal; tilting it with the pointer sweeps the colour.