Dither & ASCII Site
The whole Dither & ASCII kit as one site for an image pipeline: a density nav, a live dithered hero with a transform loupe, an ASCII field, a transform comparison, printing cards, a drop-to-dither form, noise-fill pricing and an ASCII wordmark footer.
WebGL20 deps1 file · 158 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { ChangeEvent, CSSProperties, DragEvent as ReactDragEvent, FormEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* DitherAsciiSite — the site for Dotplane, a fictional image pipeline that
* transforms and delivers images from the edge, set in the Dither & ASCII
* register: every picture on the page is computed live and printed on
* purpose, in one ink on a warm black ground, with one signal colour.
*
* - A nav whose active link is marked by a flowing band of ASCII density.
* - A hero where a plane of dots under a low sun is dithered live in blue
* noise, and a loupe under the pointer shows the same scene through another
* transform (shape-matched ASCII, a halftone screen, Bayer, fine grain).
* - A field of ASCII that drifts like a contour map and parts around the
* pointer, under a heading that resolves from glyphs into type.
* - One source through every transform, split by a wipe you drag, including
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The whole kit as one site for Dotplane, a fictional image pipeline that transforms and delivers images from the edge. A nav whose active link is marked by a flowing band of ASCII density; a hero where a plane of spheres under a low sun is dithered live in blue noise and a loupe shows it through other transforms; an ASCII contour field under a heading that resolves from glyphs into type; one still life through every transform, split by a wipe, with true error diffusion; three cards whose pictures print in, and request examples that swap in Bayer order; a drop zone that dithers your own image in the browser and writes the request for it; pricing where volume fills a plane of dots in blue-noise order; and a footer where the name is set in live ASCII. Every name, price and claim lives in one typed content object, marked as placeholder.
Curator’s note
The Dither & ASCII kit site (slot 12): every asset in the kit composed around one typed content object, DOTPLANE_DEMO, for a fictional image pipeline. The assets above are cut from this file, byte for byte. The pipeline cards carry code-drawn stills as diagrams of the stages, not stand-ins for photographs, so the site does not set needsImagery (the card entry does).


