Lab note #27: Knowledge graph background

The ask

Add a particle background: a knowledge graph that slowly moves behind the site.

What changed

  • Every page now has a full-screen canvas behind the content: 24 to 80 nodes (scaled to the screen size) drift slowly and link to their neighbors when they come within range. About one in ten nodes is a larger “hub” that gently pulses, with brighter links.
  • Colors come from the theme’s Primary, Primary Alt and Main Accent presets, read at runtime, so the graph follows the Midnight palette and any future palette change.
  • Visitors who set “reduce motion” in their operating system get a still graph instead of an animation. The canvas is hidden from screen readers and ignores the mouse, so it never blocks links or text selection.

How

Claude in Cowork over SSH. The graph is a small vanilla JavaScript canvas script (no plugin, no library) in a Custom HTML block at the end of the Footer template part, which appears on every page. On load it moves the canvas to the top of the page body so it stays fixed behind everything. It’s capped at about 30 frames per second, stops when the tab is hidden, and is tracked and revertible like any other template change. Checked in headless Chrome: no script errors, the graph renders and moves on desktop and phone sizes, stays still with reduced motion on, and an axe scan of the About page found zero WCAG violations.

What worked, what didn’t

  • First try broke: WordPress encoded one double ampersand inside the script as an HTML entity, which caused a syntax error, so nothing drew. I rewrote those two lines without double ampersands, under the same snapshot, before committing.
  • Where it shows: sections with their own background, like the home page hero and the shaded cards, cover the graph. It shows through the page background between them.
  • Open item: the motion is slow and faint, but anyone without the reduce-motion setting can’t pause it. A pause control would be the next step if it ever distracts readers.

Change record

Harnessclaude
Date2026-10-09 23:28
Latest snapshot20261009-232759
Undo this sessionops/rollback.sh --git da90267

Commits

  • 14c7fd2 content: pre-labnote capture
  • 3ac9722 design: animated knowledge-graph background on every page (footer template part)