Nyx UI

Ascii Text

Text rendered as animated ASCII block letters with wave, scan, glitch, typewriter, and pulse modes.

TypographyAnimation
Open in Playground
wavea sine travels across the glyphs
scana bright band sweeps down
glitchstable noise punches holes in the fill
typewriterreveals column by column, then loops
pulsethe whole word breathes through the ramp
nonestatic, and the fallback under reduced motion
custom rampswap the density characters
fixed sizeautoFit off, with tighter letter spacing
punctuationdigits and symbols are in the font too

ASCII Text converts any string into chunky ASCII block letters and animates them in your browser. Pick between wave, scan, glitch, typewriter, and pulse modes to drive the entrance, and tune speed, color, and reveal order per instance. Built with React and Tailwind CSS, no canvas or WebGL needed. Suits terminal-inspired landing pages, hero headings, and code-forward branding.

Installation

Usage

import { AsciiText } from "@/components/ui/ascii-text";
<AsciiText text="NYX UI" animation="wave" />

Colour is inherited, so it themes with the surrounding text unless you set it:

<div className="text-emerald-400">
  <AsciiText text="ONLINE" animation="scan" glow />
</div>

Props

PropTypeDefaultDescription
textstring"NYX UI"Text to render. Upper-cased automatically.
animation"none" | "wave" | "glitch" | "typewriter" | "pulse" | "scan""wave"How the glyphs animate.
speednumber1Animation rate multiplier.
fontSizenumber14Glyph size in px. Ignored while autoFit is on.
autoFitbooleantrueScale the glyphs so one line fills the container width.
letterSpacingnumber2Blank columns between letters.
colorstring—Any CSS colour. Defaults to the inherited text colour.
glowbooleanfalseAdd a soft glow behind the glyphs.
rampstring"░▒▓█"Characters used for a lit cell, darkest to lightest.
classNamestring—Classes for the wrapper.