Skip to content
ascii-things

Dither card

A design surface rather than a scene: an ordered-dither wordmark with a live matrix and a configurable density. It drops into the same sized-box pattern as the scenes.

Dither fieldascii-things/dither · bayer8
canvas

Installation

Section titled “Installation”
Terminal window
npx shadcn@latest add https://ascii-things.dev/r/dither-card.json

This adds components/dither-card.tsx, installs ascii-things, and pulls the card and badge shadcn primitives.

Usage

Section titled “Usage”
import { DitherCard } from "@/components/dither-card";


export function Banner() {
  return <DitherCard />;
}

Composition

Section titled “Composition”
<div className="h-40 w-full bg-black">
  <AsciiDither text="ASCII-THINGS" matrix="bayer8" density={0.12} />
</div>

matrix accepts bayer2, bayer4, bayer8, and none. density controls how much of the field is inked before the wordmark mask is applied.

Source

Section titled “Source”