ns-ui / loud

Hero Recursive Type

A recursive-type hero: a giant wordmark rasterized through a block font, with every lit letterform cell subdivided and filled with real readable filler text, so the word is legible from across the room and made of smaller words up close — the pointer acts as a lens, scaling and brightening the interior text where it hovers.

Use when Use when the headline itself should carry a second message: the giant letterforms are built from real, readable filler text (a tagline, an install command) poured through the mask in raster order, so a viewer who leans in reads actual words inside the wordmark, and the pointer works as a literal magnifying lens (interior cells scale up and gain contrast under the cursor) rather than lighting a density ramp. Pick hero-ascii-wordmark instead for a block-letter hero whose interior is a cursor-lit ramp of ASCII shading, not nested text.

Install

npx shadcn add https://design.helpmarq.com/r/hero-recursive-type.json
  • ascii
  • hero
  • type
  • canvas
  • cursor
ns://uins-ui / hero-recursive-type
LOUD
hover to read the interiorrecursive type / canvas

Props

PropTypeDefaultDescription
headlinestringthe giant wordmark; uppercased, unsupported characters render blank
fillerstringrepeating body text poured through the mask's lit cells, in raster order
lensRadius?numberlens radius in px
className?string