readsnpm weekly downloads + OSV advisories
becomesdownloads → mass; an advisory → charge
writes--w--cat
you seecore dependencies read heavy; one advisory turns its line red and the graph feels it

No canvas is drawn here — the field is invisible; these variables are its only output. Without it you would build: a dashboard query and alert rules.

Data honesty

Data source: Real npm registry + api.npmjs.org weekly downloads + OSV.dev advisories, over this monorepo's actual package.json files — public registry data.
Snapshot: Committed snapshot in src/data/examples/, stamped snapshotAt on refresh via scripts/snapshot-examples.mjs — the build never fetches, so it is deterministic.
Live refresh: Upgrades to live in the browser: a polite poll (wireLiveChip) that skips hidden tabs and retires after failures. The committed snapshot is the SSR baseline and the no-JS truth.
Not claimed: The field reads downloads as mass and an advisory as charge. It does not assess whether a dependency is safe to use — surfacing an advisory is not a security verdict.

Fundamental · invisible fields · dependencies

Mass you inherit. Risk that travels.

@fundamental-engine/core has zero runtime dependencies — by design. The engine you ship pulls in nothing. What's below is the build-time surface of this monorepo's real package.json files — and even that carries inherited mass: every package arrives with the weight of an ecosystem already moving through it, measured here as weekly downloads.

Risk travels the same edges. An advisory against one external package spills downstream into every workspace package that inherits it — hover a dependency and threads run to the packages it touches; hover a workspace package and its full upstream chain lights. Toggle the field off and the same data collapses to a flat manifest.

Field

Weight by

Data snapshot · 2026-11-03

size = weekly downloads — the mass the ecosystem already moves through each package · color = advisory state — red carries OSV records, blue is clean

Aa size = the weighting signal
advisory counts are historical — OSV records for the package name, not necessarily the pinned version
hover a dependency → threads to the packages that inherit it; hover a package → its upstream chain lights
Aa past 90 days without a publish, a row decays (dims)
the soft glow = live density — the hidden engine writes --d to every row and node each frame; hover and it gathers, so the glow and the upstream chain light together

The workspace core → site

core 0 internal deps
platform 1 internal dep
vanilla 2 internal deps
elements 3 internal deps
react 2 internal deps
site 3 internal deps

The build-time surface 17 external packages

@types/node v26.6.6

TypeScript definitions for node
published 6d ago core
611.2M weekly downloads
typescript v7.0.2

TypeScript is a language for application scale JavaScript development
published 4mo ago coredomelementsvanillareact
402.6M weekly downloads
esbuild v0.28.2 2 advisories

An extremely fast JavaScript and CSS bundler and minifier.
published 3mo ago vanilla
396.9M weekly downloads
react v19.3.1 2 advisories

React is a JavaScript library for building user interfaces.
published 20d ago react
244.6M weekly downloads
@types/react v19.3.0

TypeScript definitions for react
published 55d ago react
218.2M weekly downloads
@playwright/test v1.64.1

A high-level API to automate web browsers
published 20d ago site
105.6M weekly downloads
katex v0.19.1 6 advisories

Fast math typesetting for the web.
published 11d ago site
40.9M weekly downloads
three v0.187.0 1 advisories

JavaScript 3D library
published 4d ago site
33M weekly downloads
mermaid v12.2.0 16 advisories

Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and
published 21d ago site
24.6M weekly downloads
@types/three v0.187.0

TypeScript definitions for three
published 4d ago site
21.4M weekly downloads
remark-math v6.0.0

remark plugin to parse and stringify math
published 38mo ago site
12.8M weekly downloads
react-test-renderer v19.3.1

React package for snapshot testing.
published 20d ago react
12.3M weekly downloads
rehype-katex v7.0.1

rehype plugin to transform inline and block math with KaTeX
published 27mo ago site
11.2M weekly downloads
astro v7.4.5 29 advisories

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.
published today site
10.9M weekly downloads
@astrojs/sitemap v3.7.4

Generate a sitemap for your Astro site
published 2mo ago site
5.4M weekly downloads
opentype.js v2.0.0

OpenType font parser
published 6mo ago site
4.1M weekly downloads
pagefind v1.6.0 1 advisories

Implement search on any static website.
published 2d ago site
3.4M weekly downloads

How it's built

The graph is the monorepo's own package.json files, flattened into markup: each workspace package carries its transitive upstream chain, each external dependency carries the packages that inherit it. Fundamental runs an invisible field over both zones and the type carries the measurement — downloads as weight, advisories as charge. Two live channels ride on top: the page's hidden engine writes --d (local particle density) to every data-hot row and node each frame, and the scoped pattern's attention lane writes an eased --field-attention — CSS turns both into a felt glow and lift, and both go quiet when the field is off.

1 — the graph lives in data attributes

HTML

<!-- a workspace package: its full
     upstream chain, precomputed -->
<li id="ws-site" data-hot
  data-chain="ws-elements ws-core
    ws-platform ws-vanilla">

<!-- an external dep: the workspace
     packages that inherit it. The
     downloads figure declares its
     provenance as a measurement. -->
<li id="dep-mermaid"
  data-body="attract"
  data-strength="0.72"
  data-feedback data-hot
  data-uses="ws-site"
  style="--w: 0.20; --cat: #ff6b6b;">
  ...
  <span data-field-visual-for="#dep-mermaid"
        data-field-visual-role="measurement">
    <b>2.1M</b> <!-- weekly downloads -->
  </span>
</li>

data-uses — where this mass lands downstream
data-chain — everything a package stands on, transitively
--cat — red when OSV records exist, blue when clean
data-hot — opts into the live density gather: hover and --d climbs toward 1
data-field-visual-for — names the downloads figure a measurement of its row

2 — causality spill is hover + geometry

TypeScript

// hover a dep → thread to each
// workspace card it touches
const a = centerIn(row, zone);
for (const id of row.dataset.uses.split(" ")) {
  const node = zone.querySelector("#" + id);
  node.classList.add("cited");
  const b = centerIn(node, zone);
  d += `M${a.x} ${a.y} C ...`;
}
// the thread color is the row's --cat:
// advisory-carrying deps thread red.

// hover a workspace node → no SVG,
// just light its data-chain upstream —
// while the engine's --d gathers under
// the cursor (data-hot), so the glow
// and the chain light together.

One SVG overlay spans both zones; the cubic threads are drawn at hover time from live geometry, so reweighting never leaves stale lines.

3 — CSS reads mass, decay, and the live channels

CSS

.dp-name {
  font-variation-settings:
    'wght' calc(380 + var(--w) * 360);
}
.dp-row {
  /* --d: live local density, written by the
     hidden engine each frame; gathers on
     data-hot hover. --field-attention: the
     pattern's eased attention lane. */
  --live: var(--d, 0);
  box-shadow: 0 0 calc(var(--live) * 16px) -6px
    color-mix(in srgb, var(--cat)
      calc(var(--live) * 55%), transparent);
  opacity: calc(0.58 + var(--w) * 0.42);
}
/* an advisory badge runs hotter as the
   field gathers on its row */
.dp-adv {
  box-shadow: 0 0 calc(var(--live) * 10px)
    color-mix(in srgb, #ff6b6b
      calc(var(--live) * 45%), transparent);
}
/* decay: no publish in 90 days */
.dp-row.stale { opacity: 0.5; }

The freshness lens reweights from publish dates; packages whose dates the registry snapshot didn't report hold a neutral weight rather than faking one. The glow reads --d and --field-attention — live writes, zeroed when the field is off.

The download counts also refresh once per visit: ~4s in, the page fetches each package's last-week figure from api.npmjs.org (partial success is fine — rows the API misses keep their snapshot values), then the existing reweight path re-normalizes --w against the fresh max and FLIP re-sorts through the active lens. Once, deliberately — the figure is a weekly aggregate, and polling a number that changes weekly would be theater.

Read the docs → See patterns →