ASCII Art Title React component
Any word rebuilt from plain text characters, with a slow shimmer across its surface and ripples that spread from the pointer.
About the ASCII Art Title component
ASCII Art Title rebuilds any word out of plain text characters, the way old terminals did. A slow shimmer moves across its surface, and ripples spread out from the pointer as it passes.
The word is measured from a real font, so it works for any short text, and it scales to fill its container on any screen.
When to use it
Use it for developer tools, retro projects, terminals and 404 pages.
Short words work best. Long titles lose their detail at sensible sizes.
Installation
Add the ASCII Art Title component to your project with the shadcn CLI. It lands in components/ascii-art-title.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ascii-art-titleProps
<AsciiArtTitle /> accepts 5 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "FRAME" |
| columns Characters across and down. | number | 88 |
| rows | number | 15 |
| ramp Characters from empty to full. | string | " .:-=+*#%@" |
| font Font the word is drawn with before it turns into characters. | string | "Inter, Arial, sans-serif" |
- textstringDefault: "FRAME"
- columns
Characters across and down.
numberDefault: 88 - rowsnumberDefault: 15
- ramp
Characters from empty to full.
stringDefault: " .:-=+*#%@" - font
Font the word is drawn with before it turns into characters.
stringDefault: "Inter, Arial, sans-serif"
ASCII Art Title FAQ
- Can I change the characters?
- Yes. ramp runs from empty to full, so any set of characters works.
- How do I add detail?
- Raise columns and rows. The text gets smaller and the letters get crisper.
- Can screen readers read it?
- Yes. They get the word itself, not the characters.
- What about reduced motion?
- It draws once and stays still.
