ASCII text
A phrase drawn as a field of ASCII glyphs that waves, tilts toward the pointer, scrambles on hover and ripples on click.
Move the pointer across the field to tilt it, hover to scramble the characters, and click to send a ripple through the raster.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 type CSSProperties,9 type PointerEvent as ReactPointerEvent,10} from "react";11 12export type AsciiTextProps = {13 /** The phrase rendered as ASCII glyphs. */14 text?: string;15 /** Glyph cell height in pixels; smaller cells make a denser field. */16 asciiFontSize?: number;17 /** Characters ordered from the faintest to the densest. */18 charset?: string;19 /** Font used to rasterise the source text before it becomes glyphs. */20 fontFamily?: string;21 /** Weight of the source text. */22 fontWeight?: number | string;23 /** Ink colour when no ramp is given. */24 textColor?: string;25 /** Colour ramp, sampled by glyph density. */26 colors?: string[];27 /** Scales the source text inside the field. */28 textScale?: number;