ns-ui

Hero ASCII Wordmark

Hero wordmark rendered as ASCII block-letters, lit by the pointer like a torch over a density ramp.

Use when a display headline built from ASCII block-letters lit by the pointer like a torch, so the wordmark itself is the ASCII rather than a backdrop behind separate type; pick hero-ascii-terrain or hero-ascii-tunnel instead when the hero is a place or a corridor with DOM type laid over it, or background-ascii-dither when the glyph field is a background rather than the headline.

Install

npx shadcn add https://design.helpmarq.com/r/hero-ascii-wordmark.json
  • hero
  • ascii
  • type
  • canvas
  • cursor

ns-ui / hero-ascii-wordmark

NS UI

move the pointer across the wordmark — it is the light source

Props

PropTypeDefaultDescription
textstringheadline text; unsupported characters render as a blank cell
cursorRadius?numbercursor-proximity light radius in px, at the canvas's own pixel scale
className?string