React components rendered as dither and ASCII: backgrounds, media, text effects, controls, charts and a hero block, with real DOM text and one tiny WebGL2 engine.
Line, bar and sparkline charts drawn in glyphs, with a hidden data table for screen readers.
A background of falling ASCII glyph columns with real DOM content on top.
Plays a video file or the viewer's webcam as live ASCII, with a pause button and an accessible label.
A dither texture behind a section or fixed behind the whole viewport, without affecting layout.
A native button with a dither or ASCII fill that eases fuller on hover and press.
A surface with a dither or ASCII border and optional fill around normal DOM children.
An animated dithered background field with real DOM content on top.
Converts any image to dither or ASCII live, with the real image kept for accessibility.
A progress bar drawn in dither or ASCII, with native progressbar semantics.
Text that dithers in or out when it scrolls into view, mounts or is hovered, with the real text always in the DOM.
The shared WebGL2 render engine every dotgrain component uses.
A hero block with a headline, description and CTA slot beside a typing Terminal over a dither Backdrop.
An indeterminate dither or ASCII spinner that announces its label as a status.
Text that scrambles through ASCII glyphs before settling, with the real string in the DOM from the first frame.
A dithered shimmer placeholder block, sized with className or style.
Command lines as real DOM text inside an ASCII frame, with an optional typing effect.
A native checkbox switch with a dithered track that eases between off and on.