Surface card

The WebGL surface renders glyphs in a shader and falls back to a 2D glyph field when WebGL is unavailable. The card keeps the controls and the frame; the surface fills the sized box.

WebGL surfaceascii-things/webgl · shader field

webgl

Installation

npx shadcn@latest add https://ascii-things.dev/r/surface-card.json

This adds components/surface-card.tsx, installs ascii-things, and pulls the card, badge, and button shadcn primitives.

Usage

import { SurfaceCard } from "@/components/surface-card";

export function Field() {
  return <SurfaceCard />;
}

Composition

<div className="h-72 w-full bg-[#050607]">
  <AsciiSurface
    text="ASCII-THINGS"
    density={dense ? 0.34 : 0.16}
    glyphs=".:-=+*#%@"
    pointer
    label="A shader-backed ASCII glyph field"
  />
</div>

glyphs is the density ramp, ordered from lightest to heaviest. density moves the cutoff along that ramp. pointer ties the field to the pointer position.

Source

• surface-card.tsx
• Runnable shadcn example in the repository at /examples/shadcn/