Components / Backgrounds / ASCII Field

ASCII Field

A canvas of glyphs that scramble around the cursor and settle back to rest — a sprite atlas, a loop and a GSAP timeline.

Usage

import AsciiField from '@/components/ascii-field'

<AsciiField
  cursorRadius={51}
  speed={16}
  opacity={0.23}
  spacing={2.3}
  color="#ffffff"
  background="#071228"
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/ascii-field.json

Model

rate(d) = speed · (1 − d/R)^1.7

glyph changes per second, concentrated toward the cursor

Props

Property	Type	Default	Description
`cursorRadius`	`number`	`170`	Reach of the pointer's influence, in px.
`speed`	`number`	`26`	Glyph changes per second at the centre of that reach.
`color`	`string`	`'#ffffff'`	—
`opacity`	`number`	`0.4`	Resting baseline opacity, before the cursor touches a cell.
`spacing`	`number`	`1`	Cell scale, holding the 9:16 ratio. Floored just above zero.
`rest`	`string`	`'0'`	The resting glyph. An empty string leaves cells blank.
`background`	`string`	`'#0a0b0e'`	—