Skip to content
ascii-things

ASCII box footer

A footer background made of a continuous lattice of +, -, and | characters. The canvas frames the lattice as one large ASCII box, then sends a slow orange scan across it. It sits behind a normal footer wordmark and does not touch the DOM around it.

ascii-things®ASCII box footer · registry component
npm ↗GitHub ↗Playground ↗MIT

Installation

Section titled “Installation”
Terminal window
npx shadcn@latest add https://ascii-things.dev/r/ascii-box-footer.json

The CLI writes the component to lib/ascii-box-footer.ts. There are no package dependencies.

Usage

Section titled “Usage”

Put a canvas inside a positioned footer, above the background and behind the content:

<footer class="site-footer">
  <canvas class="footer-box" data-ascii-box-footer aria-hidden="true"></canvas>
  <div class="footer-content">...</div>
  <div class="footer-art" aria-hidden="true">ASCII-THINGS</div>
</footer>
.site-footer {
  position: relative;
  overflow: hidden;
}


.footer-content {
  position: relative;
  z-index: 2;
}


.footer-art {
  position: relative;
  z-index: 1;
}


.footer-box {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
import { createAsciiBoxFooter } from "@/lib/ascii-box-footer";


const canvas = document.querySelector<HTMLCanvasElement>("[data-ascii-box-footer]");
if (canvas) {
  createAsciiBoxFooter(canvas, { size: 12 });
}

Options

Section titled “Options”
Option Type Default
size number 12 Character size in CSS pixels
boxWidth number 7 Character columns per box
boxHeight number 3 Character rows per box
padding number 18 Inset from the canvas edge
speed number 1 Scan speed multiplier
scan boolean true Draw the moving accent band
foreground string rgba(236, 232, 223, 0.72) Lattice colour
accent string rgba(255, 122, 26, 0.95) Scan colour
maxDpr number 2 Device pixel ratio cap

createAsciiBoxFooter returns an instance with destroy().

What it handles

Section titled “What it handles”
  • Canvas sizing and device pixel ratio.
  • ResizeObserver and document.fonts.ready.
  • IntersectionObserver and visibilitychange pausing.
  • prefers-reduced-motion, which renders one static frame.
  • A 30fps cap.

Keep the canvas on a monospace family. The lattice is computed from character metrics, so the grid follows the font.

Source

Section titled “Source”