Heroes

AsciiHero

For hackers, by people who follow the right newsletters.

A canvas-rendered procedural ASCII field that reacts to the cursor. The grid auto-fits its container. Two visual modes: `panel` (default, bordered card) and `bare` (no chrome, intended for background use). Flip on `colorful` for the aurora palette and `spotlightOpacity` to brighten the area under the cursor, perfect for low-opacity backgrounds where the user gets rewarded for hovering.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/ascii-hero.json

Examples

Default panel

<AsciiHero />

Colorful (aurora palette)

<AsciiHero colorful />

As a hero background (low opacity + cursor spotlight)

Hover this card.

The field stays dim until your cursor lights it up.

<div style={{ position: "relative" }}>
  <AsciiHero
    variant="bare"
    colorful
    baseOpacity={0.18}
    spotlightOpacity={0.9}
    spotlightRadius={10}
    style={{ position: "absolute", inset: 0 }}
  />
  <div style={{ position: "relative", zIndex: 1 }}>…content…</div>
</div>

Custom palette + ramp

<AsciiHero
  palette={["#22c55e", "#86efac", "#fbbf24"]}
  charRamp=" .:-=+*#%@"
/>

Props

Prop	Type	Default	Description
variant	"panel" \| "bare"	"panel"	panel = bordered card; bare = no chrome (for background use).
cols	number	-	Grid width in cells. Auto-computed from container if omitted.
rows	number	-	Grid height in cells. Auto-computed from container if omitted.
fontSize	number	11	Character font size (px).
charRamp	string	-	Sparsest → densest characters.
colorful	boolean	-	Paint with the default aurora palette.
palette	string[]	-	Custom palette; overrides `colorful`.
baseOpacity	number	1	Base alpha. Drop low (≈ 0.18) for background use.
reactive	boolean	true	Enable cursor reactivity.
rippleStrength	number	1.4	Cursor ripple amplitude (changes which chars show).
rippleRadius	number	6	Cursor ripple falloff radius (cells).
spotlightOpacity	number	-	Alpha at the cursor center; falls off radially to baseOpacity.
spotlightRadius	number	8	Cursor spotlight radius (cells).
frameMs	number	50	Frame throttle (ms).

Next Aurora ] →