ASCII Wordmark Footer
A footer whose name is set in live ASCII: the wordmark drawn glyph by glyph in signal, printed in cell by cell as the footer rises, crossed by a slow light, and turned to paper under the pointer.
WebGL20 deps1 file · 52 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* AsciiWordmarkFooter — a footer whose name is set in live ASCII.
*
* The brand is drawn in the display face and set glyph by glyph in the mono
* face by the kit's WebGL2 stage, matched to the shape of the letters. It
* prints in cell by cell as the footer rises into view; a slow band of light
* crosses it every 36s, and under the pointer the glyphs turn from signal to
* paper and re-select denser.
*
* 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 section
A footer that signs off in type made of type. The brand is drawn in the display face into a texture and set, glyph by glyph, in the page's mono face, each cell matched to the shape of the letters, so stems become bars, bowls become brackets and diagonals become slashes; the whole name is inked in signal. As the footer rises into view the glyphs print in cell by cell in blue-noise order, a slow band of light crosses the name once every 36 seconds, and under the pointer the glyphs turn from signal to paper and re-select denser, as if the name were lit from where you point. Above it, the brand line and three link columns; below, the legal line. It reads the page's scroll, or the scroll root the kit's site provides inside a frame.
Curator’s note
The Dither & ASCII kit's footer (slot 9), cut from dither-ascii-site. Pro: it runs the kit's WebGL2 stage (a word drawn into a texture, shape-matched ASCII, a blue-noise print-in), so the dissolve primitive is the borderline entry that stays Free.
