Browse components
ASCII Text
Text rasterized into shimmering ASCII glyphs on a canvas, rippling in a slow wave and bulging under the pointer like a lens.
ASCII
Installation
npx shadcn@latest add @glint-ui/ascii-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/ascii-text.json
Usage
import { AsciiText } from "@/components/ui/ascii-text";
<div className="relative h-80">
<AsciiText text="ASCII" cellSize={11} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "ASCII" | Text to rasterize. |
| cellSize | number | 11 | Height of one character cell, in px. |
| charset | string | " .:-=+*#%@" | Glyphs ordered from sparse to dense. |
| color | string | "#bef264" | First gradient color. |
| secondaryColor | string | "#22d3ee" | Second gradient color. |
| waveAmplitude | number | 6 | Horizontal wave distortion, in px. |
| waveSpeed | number | 1 | Wave speed multiplier. |
| pointerRadius | number | 150 | Radius of the pointer lens, in px. 0 disables it. |
| className | string | — | Extra classes for the root element. |