Components / Text Animations / Bitmap Text

Bitmap Text

Type rasterised and dithered into particles. Grain decides whether the letterforms read as solid or as a cloud that still resolves as words.

Usage

import BitmapText from '@/components/bitmap-text'

<BitmapText
  text="BITMAP"
  grain={0.6}
  cell={5}
  dither="bayer4"
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/bitmap-text.json

Model

(v) => String(v.dither).startsWith("bayer") ? "out = level(tone + (M(x, y)/n² − ½)/levels)" : v.dither === "none" ? "out = round(tone · (levels − 1)) / (levels − 1)" : "e = tone − out;  e spreads to unvisited neighbours by the kernel’s weights"

M the Bayer matrix, n its size · error diffusion carries each cell’s rounding error forward, so tone is conserved over area

Props