glyphfield draws any picture as text on a canvas. It samples the light of the image per cell and sets one glyph from the text you give it, brighter cells first. The portrait at the top of this site runs on it.

Usage

import { glyphfield } from "glyphfield"

const field = glyphfield(canvas, {
  image: "/portrait.webp",
  text: source,       // any string, it repeats
  cell: 9,            // px
  ink: "#F1F2EC",
})

field.reveal()        // glyphs settle once

Notes

• One canvas, no dependencies, 2.4 kB
• Pauses when it is off screen or the tab is hidden
• Respects reduced motion: it draws the final frame and stops

The image must be served from the same origin, or with CORS headers, because the pixels are read.