Turns text into a field of monospace characters on a canvas. The letters ripple on their own and light up around the pointer.
npx shadcn@latest add https://hyperblur.dev/r/text-ascii-render.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-ascii-render.tsx.
import { TextAsciiRender } from "@/components/hyperblur/text-ascii-render"
<TextAsciiRender text="SIGNAL" height={180} className="text-[#ededed]" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to turn into characters. Use a newline for more than one line. |
| density | number | 1 | Characters per unit of space. Higher values give smaller characters and more detail. |
| charset | string | " .:-=+*#%@" | Characters from lightest to heaviest. |
| height | number | string | 200 | Height of the canvas. Numbers are pixels. |
| fontFamily | string | Font of the drawn characters. Defaults to the inherited font, a monospace stack. | |
| textFont | string | "system-ui, Helvetica Neue, Arial, sans-serif" | Font used to shape the source text before it becomes characters. |
| fontWeight | number | 800 | Weight of the source text. Heavier shapes read better at low density. |
| wave | number | 1 | Strength of the traveling wave. 0 keeps the characters still. |
| field | boolean | true | Draw a faint moving field of characters behind the text. |
| pointerRadius | number | 80 | Reach of the pointer glow in pixels. 0 turns it off. |
| color | string | Character color. Defaults to the inherited text color. | |
| accent | string | "#2f7bff" | Color of characters near the pointer. |