Dot matrix 404

What's included

A dot-matrix display in two files: a stylesheet and a script. No dependencies, no build step, no external requests — you copy them into a project and it works.

The message isn't an image: it's text, in the page. The script reads it, turns it into dots and paints it onto a canvas. The text node stays where it is — selectable, translatable, read by a screen reader, and shown even if the script never loads.

Features

• The dots retreat from the mouse — a radial push, strongest under the pointer, fading out thirteen cells away. Measured on the reference at four pointer positions, then tuned: 0.05 px of difference.
• Readable without JavaScript — the stylesheet runs the text through a dot mask and lays the grid behind it. The page stays the one you expect.
• One variable for the scale — everything derives from the cell, which is the width divided by --dm-columns. The rows follow the height by themselves.
• Tuned from the CSS — grid, tints, edge thinning, dust and durations are all variables. The script reads them back: nothing to change inside it.
• Matrix font included — the ten digits, the space and the dash. You add a character by giving it its twelve rows, without touching anything else.
• Stable rendering — the edge thinning is drawn from a seed: the same pattern on every load, and after a resize.
• Three variants — dark page, no tint, and a dense grid for a small box.

Dropping it into a page

Two files to load, then the usual markup:

<link rel="stylesheet" href="dot-matrix-404.css">
<script src="dot-matrix-404.js" defer></script>
<div class="dot-matrix" data-dot-matrix>
  <p class="dot-matrix__text">404</p>
</div>

The data-dot-matrix attribute is enough, the component installs itself on page load. Replace the <p> with an <h1> if the message is the page title.

What you should know

• The canvas only repaints when something moves. With no pointer in range, it's painted once per resize and costs nothing per frame after that. The dot retreat is listened for on the window and not on the element, so it starts while the pointer is still approaching: otherwise the grid jumps as the edge is crossed.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML. Checked by serving the folder over HTTP with the header, not assumed.
• It isn't a control. Nothing is focusable, the component doesn't enter the tab order and intercepts no key.
• The design comes from elsewhere. The proportions follow those of a commercial Framer component, measured by image analysis at seven widths. The code itself is original: its implementation was never read.