Detent web components
By Shane Logsdon

Media & effects

Glyph Matrix

Implemented

Canvas-driven Matrix digital rain background with glowing phosphor trails.

detent-glyph-matrix

Port status
Catalog status
implemented
Origin
upstream
Phase
4
Wave
phase-4-canvas
Group
Media & effects

Wake up, Neo...

The Matrix has you.

6.4 KB gzip for the class module

Variants

The rain is decorative and the heading below it is the readable layer: the canvas is aria-hidden and every node inside the element stays light DOM. The matrix in the preview uses the documented defaults, the one here is paused — it keeps its last painted frame and schedules zero frames.

Paused

Zero frames scheduled.

With prefers-reduced-motion: reduce the matrix paints one static glyph field and stops — the same element keeps its content, its contrast (--detent-glyph-matrix-text) and its focus order. togglePause() and reset() are the documented methods that mirror the upstream ref handle.

Recorded states

  • paused recorded state; no setter
  • reduced motion recorded state; no setter

Usage

Import

import '/components/glyph-matrix/define.js';

// or register it yourself
import { DetentGlyphMatrix } from '/components/glyph-matrix/glyph-matrix.js';

Attributes

  • background-color
  • charset
  • color
  • fade-rate
  • font-size
  • full-page
  • head-color
  • interactive
  • opacity
  • paused
  • speed

Properties

No properties are recorded for this component.

Slots

  • default

Events

No events are recorded for this component.

Example

Runnable example: site/examples/glyph-matrix.ts. The snippet below is generated from the catalogued attributes.

<detent-glyph-matrix
  background-color="#050505"
  charset="ｦｱｳｴｵｶｷｹｺｻｼｽｾｿﾀﾂﾃﾅﾆﾇﾈﾊﾋﾎﾏﾐﾑﾒﾓﾔﾕﾗﾘﾜ0123456789ABCDEF:・."=*+-<>¦｜XYZ"
  color="#00FF66"
  fade-rate="0.06"
  font-size="16"
  full-page
  head-color="#FFFFFF"
  interactive
  opacity="1"
  paused
  speed="1"
></detent-glyph-matrix>

Source

The pinned upstream source for this row:

  • src/components/ui/GlyphMatrix.tsx sha256 7c786e572e4e…

Native files

The native module and its artifacts:

  • src/components/glyph-matrix/glyph-matrix.ts
  • src/components/glyph-matrix/styles.css
  • src/components/glyph-matrix/define.ts
  • docs/components/glyph-matrix.md
  • site/examples/glyph-matrix.ts
  • tests/browser/glyph-matrix.spec.ts
  • evidence/components/glyph-matrix.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Attributes
AttributePropertyTypeDefaultNotes
background-colorbackgroundColorstring'#050505'Kebab-case attribute; camelCase property.
charsetcharsetstring'ｦｱｳｴｵｶｷｹｺｻｼｽｾｿﾀﾂﾃﾅﾆﾇﾈﾊﾋﾎﾏﾐﾑﾒﾓﾔﾕﾗﾘﾜ0123456789ABCDEF:・."=*+-<>¦｜XYZ'Kebab-case attribute; camelCase property.
colorcolorstring'#00FF66'Kebab-case attribute; camelCase property.
fade-ratefadeRatenumber0.06Kebab-case attribute; camelCase property.
font-sizefontSizenumber16Kebab-case attribute; camelCase property.
full-pagefullPagebooleanfalsePresence semantics: present means true, absent means false.
head-colorheadColorstring'#FFFFFF'Kebab-case attribute; camelCase property.
interactiveinteractivebooleantruePresence semantics: present means true, absent means false.
opacityopacitynumber1Kebab-case attribute; camelCase property.
pausedpausedbooleanfalsePresence semantics: present means true, absent means false.
speedspeednumber1Kebab-case attribute; camelCase property.

Properties

No property-only values are recorded for this component.

Events

No custom events are recorded for this component.

Slots

Slots
SlotNotes
defaultConsumer content; rendered through a slot, never re-created.

CSS customisation

  • React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
  • full-page is implemented: the pinned source destructures it but never uses it, while the row records the full-page feature.
  • The imperative GlyphMatrixHandle (reset/togglePause) is exposed as two documented methods; togglePause() writes the documented paused state instead of a private ref.
  • Colours are parsed through a scratch 2D context, so rgb(), hsl() and named colours keep their alpha; the pinned hexToRgba returned non-hex input unchanged and silently dropped alpha.
  • reset() also clears the decayed trail buffer; upstream only moved the streams.
  • The glyph pool is split by code point (Array.from), so surrogate pairs are never cut.
  • GlyphText stays an alias of GlyphMatrix; no detent-glyph-text tag is defined.
  • Hidden-document pause is added (visibilitychange) because PC-10.6 requires it; upstream paused offscreen via IntersectionObserver only.
  • The content layer sets --detent-glyph-matrix-text (#f2f3f6) so slotted text is legible on the pinned #050505 backdrop (18.37:1).

What it does

A canvas-driven digital-rain backdrop with decaying phosphor trails, head highlights, random glyph mutation and pointer-proximity disturbance.

Upstream behaviour
  • GPU-friendly HTML5 Canvas implementation running at silky 60fps
  • Phosphor decay trails rendered via progressive alpha blending
  • Authentic Katakana, matrix operators, and hexadecimal character set
  • Interactive pointer disturbance causing streams near the cursor to flare and accelerate
  • Supports both bounded containers and full-page fixed background backdrops
Differences from upstream
  • React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
  • full-page is implemented: the pinned source destructures it but never uses it, while the row records the full-page feature.
  • The imperative GlyphMatrixHandle (reset/togglePause) is exposed as two documented methods; togglePause() writes the documented paused state instead of a private ref.
  • Colours are parsed through a scratch 2D context, so rgb(), hsl() and named colours keep their alpha; the pinned hexToRgba returned non-hex input unchanged and silently dropped alpha.
  • reset() also clears the decayed trail buffer; upstream only moved the streams.
  • The glyph pool is split by code point (Array.from), so surrogate pairs are never cut.
  • GlyphText stays an alias of GlyphMatrix; no detent-glyph-text tag is defined.
  • Hidden-document pause is added (visibilitychange) because PC-10.6 requires it; upstream paused offscreen via IntersectionObserver only.
  • The content layer sets --detent-glyph-matrix-text (#f2f3f6) so slotted text is legible on the pinned #050505 backdrop (18.37:1).
Previous: Glitch Text Next: Blob Menu
Detent web components

Detent is a native rewrite of the MIT-licensed EasyUI catalog by Suraj Maurya; built from catalog/components.json and catalog/routes.json with no React-family runtime.

Docs

Components

Project

© 2026 Detent contributors. Upstream MIT license preserved. Human accessibility verification is still open; implementation status is shown per component.