DEV Community: Reese Gerjekian

Dossier: taking an OSINT investigation from collection to a cited report

Reese Gerjekian — Tue, 14 Jul 2026 05:45:29 +0000

Most open-source intelligence tooling is very good at one thing: collection.
Maigret checks a username across hundreds of sites, holehe tells you where an
email is registered, SpiderFoot and Maltego map relationships at scale. What
almost none of them help with is the part that actually eats an investigator's
afternoon: turning a pile of findings into a formatted, cited report where every
fact traces back to where it came from.

That gap is why I built Dossier.

The idea: collect, curate, report

Dossier is an offline desktop workbench that runs a single investigation through
one loop:

Collect. Open a case on a subject (a username, email, name, or file) and run automated collectors.
Curate. The results land in the app and you decide which findings matter. This human-judgment step stays inside the tool, because deciding what is relevant is the actual work, not something to automate away.
Report. The findings you kept flow into a report template, you add your analysis, and it exports a finished PDF or Word document with the sources cited automatically.

The mental model I kept coming back to is "a Word template that also does data
collection." Collection feeds the workbench, the human curates, and the report
writes itself from what was kept.

I made a deliberate choice not to reinvent the collectors. Dossier reuses
best-in-class tools (Maigret, holehe, and others) and puts its own effort into
the part that is genuinely thin for the individual investigator: the cited report
and the provenance behind it.

What it collects, and what it deliberately does not

The collectors run against public, no-login sources with no API keys: username
presence (Maigret), GitHub and Keybase profiles, email account-existence
(Gravatar, plus holehe when installed), SEC EDGAR filings, CourtListener court
records, and file and photo metadata via ExifTool.

The interesting design constraint is what it refuses to do. Anything behind a
login or an anti-bot wall (Instagram, LinkedIn, X, most people-search and
public-records sites) returns real data only to a real browser. Rather than ship
fragile scrapers that break constantly and violate terms of service, Dossier
generates precise, pre-filled pivot links you open and review by hand. That is
how professional OSINT actually works, and it keeps the tool stable and legal.

Two rules hold the whole thing together:

Nothing is faked. A collector that is blocked, rate limited, or unreachable is reported as exactly that. It is never dropped silently or invented, and the report never states a conclusion the data does not support.
It is passive. Nothing contacts or notifies a subject.

For a tool whose value is provenance, honest status is not a nice-to-have. It is
the point.

Reports grounded in real standards

Dossier ships four report templates, and this is where I spent the most care:

Full Background Investigation, modeled on the structure taught in a university OSINT course.
Missing Person (TraceLabs), whose sections mirror the actual TraceLabs Search Party CTF scoring categories (Basic and Advanced Subject Info, Day Last Seen, Advancing the Timeline, Location, and so on), with their passive-only, zero-contact conduct rules built into the template.
Company / Entity (KYB) due diligence, structured around real anti-money-laundering practice: the 25% ultimate-beneficial-owner threshold from FATF Recommendations 24 and 25 and the US FinCEN rules, plus sanctions, PEP, and adverse-media screening.
One-page profile for quick jobs.

I verified the TraceLabs and KYB structures against their real sources rather than
trusting my first draft, and each section records the standard it came from.
Collected findings auto-fill the relevant sections with a numbered,
de-duplicated citation list; sections that need paid or manual records are
scaffolded with an honest note to complete by hand.

The editor

The report opens as a genuinely editable document. Under the hood it is a single
HTML document rendered in an embedded Chromium view (QtWebEngine), so what you see
is exactly what exports. You can type anywhere, format text, insert and
drag-resize images, and your edits drive both outputs: PDF through Chromium's
print engine (pixel-exact) and Word .docx. As you curate findings, the citations
and findings tables update in place without touching your writing.

Getting there meant throwing away an earlier version built on Qt's rich-text
widget, which quietly drifted the formatting every time you saved and reopened.
Rebuilding the editor on a real browser document fixed that, at the cost of
shipping a full Chromium inside the app.

Getting it running

Dossier is packaged as a standalone macOS app for Apple Silicon, so you do not
need Python or any setup. Because it embeds Chromium, it is a large download (the
app is about 570MB, the zip around 209MB), which is normal for any
browser-embedding desktop app. It is not yet notarized by Apple, so the first
launch needs a right-click and Open.

I am being upfront about the current limits: it is Apple Silicon only for now (no
Intel, Windows, or Linux builds yet), and email discovery is limited. It enriches
an address you already have rather than finding an arbitrary person's email, which
is genuinely a paid-data problem in OSINT.

Try it

rgerjeki / Dossier

Dossier

An offline OSINT investigation workbench. Dossier runs a single investigation from collection all the way to a finished, cited report. It is built around one loop: collect, curate, report.

Collect: open a case on a subject (a username, email, name, or a file) and run automated OSINT collectors.
Curate: the results appear in the app, and the investigator picks the findings that matter into the case. This human-judgment step stays inside the tool.
Report: the kept findings flow into a due-diligence report template, the investigator adds narrative and analysis, and it exports a finished Word or PDF document with the sources cited automatically.

The mental model is "a Word template that also does data collection." Collection feeds the workbench, the human curates, and the report writes itself from what was kept.

Where Dossier fits

Dossier is built around one idea: for a solo investigator, the hard part is not…

View on GitHub

Grab a build from the releases page.

The engine (the collectors, the finding data model, and the report renderer) is
built and tested with no UI imported, so if you want to read the internals or add
a collector, that is a good place to start.

Zenith: the real sky above you, right now

Reese Gerjekian — Sat, 11 Jul 2026 03:49:12 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

The theme was passion, and mine has always been the sky and everything beyond it. Day or night, there's a specific kind of awe in remembering that the sky isn't a backdrop. It's real, it's happening right now, and every point of light is an actual place. Night is simply when you can see the most of it. I wanted to put that feeling
into a browser tab.

Zenith takes your location, cinematically lowers you from orbit down onto your exact spot on Earth, and becomes a first-person view of your real sky, one you can drag to look around.

Every star is where it actually is. The Sun, the Moon, and the visible planets are computed for your latitude, longitude, and this exact minute, and placed where they truly are. It isn't a fixed picture either: the whole sky rotates slowly in real time, so stars rise and set while you watch.

Tap any object and you travel to it. The camera flies out through the real starfield, the object grows from a point into a detailed close-up, and a short, grounded briefing appears telling you what you're actually looking at, from where you're standing, right now. A warm voice reads it to you.

Stay a while and Zenith reminds you that there are people over your head: it shows how many humans are in space this moment, by name, and draws the real International Space Station crossing your sky whenever it's above your horizon.

Not information about space. The quiet, enormous wonder of looking up and knowing, for a moment, exactly what you're looking at.

Demo

Live: https://zenith-rgerjeki.vercel.app

A short walkthrough: the descent to your location, dragging the real sky, and flying to a planet for an AI briefing read aloud in a warm voice.

Code

rgerjeki / Zenith

Zenith

The sky above you, right now.

I've always been drawn to the sky, and everything beyond it. Zenith is a first-person view of yours: it takes your location, lowers you onto your exact spot on Earth, and gives you the real sky overhead, one you can drag to look around. Tap a planet, the Moon, a star, or the ISS streaking overhead, and you travel to it through the real stars while Google Gemini writes a short, wonder-filled explanation of what you're actually seeing, from where you are, at this very moment, and ElevenLabs reads it aloud in a warm voice.

DEV Weekend Challenge, theme: passion. Built in one weekend, from an empty folder.

The passion behind it

The theme was passion, and mine has always been the sky and everything beyond it Day or night, there's a specific kind of awe in remembering that the sky…

View on GitHub

How I Built It

Deliberately lightweight: Vite + vanilla JavaScript, no framework, with Three.js for the descent, the interactive sky, and the fly-to-an-object view. The real astronomy is the heart of it:

The stars are real stars. Around 8,900 naked-eye stars from the HYG database (which builds on the Yale Bright Star Catalog), each placed at its true altitude and azimuth for your location and moment, tinted by its real color temperature (Rigel really is blue; Betelgeuse really is red), drawn as a single GPU point cloud.
The sky actually tracks. The whole celestial sphere rotates about the celestial pole at the sidereal rate, and a shader clips anything below the horizon, so stars and planets rise and set correctly over time.
The Sun, Moon, and planets are computed, not faked, with astronomy-engine: topocentric altitude/azimuth, distance, and the Moon's real phase, all client-side, no key.
The ISS is live from wheretheiss.at (polled every few seconds and smoothly dead-reckoned in between); the "humans in space" list comes from Open Notify.

Google AI (Gemini) writes the briefings

When you tap an object, a Vercel serverless function builds a prompt from that object's real, computed data (its distance in light-years or light-minutes, direction, brightness, phase) and asks Google Gemini for two to four vivid, grounded sentences, with strict instructions never to invent a number. That's what
turns a dot on a screen into "that steady point, low in the east, is Jupiter, 720 million kilometers away, a silent reminder of the scale of the neighborhood we call home." The API key stays server-side, and it degrades gracefully: if the model is busy it falls back to a lighter Gemini model, then to a locally-written line.

ElevenLabs gives it a voice

Reading is one thing; being read to is another. Each briefing is spoken aloud by a warm voice through ElevenLabs (again via a serverless proxy, key server-side). Because the free tier is small, I added a fallback I'm genuinely proud of: if ElevenLabs is ever unavailable, narration switches to Kokoro-82M, an open-weight
text-to-speech model that runs entirely in the browser (WebGPU, with a WASM fallback). No key, no quota, so the sky always has a voice while ElevenLabs stays the premium default.

Everything else degrades gracefully too: geolocation falls back to typing a city, and every external call has a plan B, so it holds together in the real world.

Prize Categories

Best use of Google AI: Gemini writes every celestial briefing, grounded in each object's real computed data (and never allowed to invent numbers).
Best use of ElevenLabs: ElevenLabs narrates the briefings aloud, with an open-weight in-browser fallback (Kokoro-82M) so the narration never breaks.

Built this weekend, from an empty folder. Thanks for reading, and I hope it gives you the same small jolt of wonder it gives me. Go outside after, too.

Triaging a Suspicious Indicator in One Command

Reese Gerjekian — Thu, 09 Jul 2026 04:42:35 +0000

A lot of security work starts the same way. Something hands you an indicator: an IP
out of a firewall log, a file hash off an alert, a domain from an email that did not
feel right. Before you can do anything with it you have to answer two questions. Is
it bad, and what is it connected to?

The usual way to answer that is by hand, one tab at a time:
VirusTotal, then AbuseIPDB,
then a WHOIS lookup, then crt.sh, then a couple of blocklists,
holding half-loaded browser tabs in your head while you try to form an opinion. It
works, but it is slow and easy to do inconsistently, and it falls apart around the
third indicator of a busy day.

So I built a command-line tool that does that first pass in one shot. It is called
indict. You give it one indicator, it figures out the type, asks every source that
fits at the same time, and hands back a single report with a verdict and the reasons
under it.

What it does

Two kinds of sources feed the report. Some are free and need no account: DNS and
reverse DNS, WHOIS, RIPEstat for network ownership,
certificate transparency for subdomains, and a set of free threat
blocklists (FireHOL, the
Tor exit list, Spamhaus,
Feodo Tracker,
URLhaus, OpenPhish). Two more
need a free API key to switch on: VirusTotal for
multi-engine reputation and AbuseIPDB for abuse
history.

Real talk: the tool runs with no keys, but it is at its best with those two free
ones in. The nice part is that it is honest about the difference, and the blocklists
mean even the keyless run can return a real verdict, not just facts. The clearest way
to see all of that is to run the same indicator both ways.

The same indicator, with and without keys

Here is a Tor exit node, looked up with no keys at all:

$ indict 171.25.193.25

╭───────────────────────────────────╮
│ 171.25.193.25  (ip)   SUSPICIOUS  │
╰───────────────────────────────────╯
 source      verdict      summary
 dns         unknown      reverse DNS: tor-exit-read-me.dfri.se
 whois       unknown      network SE-TORNET, org DFRI-MNT, country SE
 ripestat    unknown      AS198093 DFRI-AS, prefix 171.25.193.0/24, abuse abuse@dfri.net
 greynoise   unknown      not observed by GreyNoise
 blocklists  suspicious   listed on 1 of 4 blocklist(s): Tor exit node

Not run: abuseipdb (no key), virustotal (no key)

With zero keys it already reaches a SUSPICIOUS verdict, because the Tor exit list
is a free feed. The rows above it are facts (who owns the network, what the reverse
DNS says), and the "Not run" panel is honest about the two sources it could not check
without a key. Now the same command with a free VirusTotal and AbuseIPDB key added:

$ indict 171.25.193.25

╭──────────────────────────────────╮
│ 171.25.193.25  (ip)   MALICIOUS  │
╰──────────────────────────────────╯
 source      verdict      summary
 dns         unknown      reverse DNS: tor-exit-read-me.dfri.se
 whois       unknown      network SE-TORNET, org DFRI-MNT, country SE
 ripestat    unknown      AS198093 DFRI-AS, prefix 171.25.193.0/24, abuse abuse@dfri.net
 greynoise   unknown      not observed by GreyNoise
 blocklists  suspicious   listed on 1 of 4 blocklist(s): Tor exit node
 abuseipdb   malicious    abuse confidence 100/100 from 103 report(s); Tor exit node
 virustotal  malicious    15/91 engines flagged malicious, 2 suspicious

 • [malicious] abuseipdb: abuse confidence 100/100 from 103 report(s)
 • [malicious] virustotal: 15/91 engines flagged malicious, 2 suspicious
 • [suspicious] blocklists: listed on 1 of 4 blocklist(s): Tor exit node

Same indicator, more sources light up, and the verdict escalates to MALICIOUS. The
evidence panel at the bottom is the part that matters: 100/100 abuse confidence from
103 reports, 15 of 91 engines flagging it. Those are numbers you can sanity-check and
paste into a ticket, not a black box telling you to trust it.

That contrast is the whole pitch. Keyless, the tool can already confirm something is
bad. Add two free keys and it corroborates that with cross-engine reputation and
tells you how strong the signal is.

Following the connections

Checking reputation is only half of it. The other question, "what is this connected
to," is where a report stops being a lookup. Every source drops breadcrumbs (the IPs
a domain resolves to, the subdomains in its certificates, the reverse DNS on an
address), and the tool clusters them. Here is example.com, keyless:

$ indict example.com

╭──────────────────────────────╮
│ example.com  (domain)  UNKNOWN │
╰──────────────────────────────╯
 source    verdict   summary
 dns       unknown   resolves to 4 IP(s); 2 nameservers, 1 mail host
 whois     unknown   registrar RESERVED-IANA, created 1995-08-14
 crt.sh    unknown   5 unique subdomain(s) in certificate transparency logs
 urlscan   unknown   10000 scan(s) on record; served from 9 distinct IP(s)

Correlated infrastructure
 104.20.23.154   (2)   example.com, www.example.com
 172.66.147.243  (2)   example.com, www.example.com
 162.43.120.101  (1)   example.com
 ...

crt.sh turned up subdomains, the tool resolved them, and it grouped everything by the
IP it lands on. So instead of a flat list of names you see the shape of the hosting:
www.example.com sits on the same addresses as the apex. On a benign domain that is
unremarkable, but on a real investigation this is exactly where the interesting thing
hides. The subdomain sitting alone on its own IP, away from the rest, is the one worth
a second look. The clustering does not decide that for you, it just arranges the facts
so the odd one out is visible instead of buried on line 34 of a certificate dump.

The honest parts

A triage tool you cannot trust is worse than none, so the design leans on a few rules.

The verdict is never invented. When nothing flags an indicator and nothing clears it,
the report says UNKNOWN, not CLEAN. Absence from a blocklist is not a clean bill
of health, and plenty of malicious infrastructure is simply too new to be in any feed
yet. Keyless, the tool can confirm bad, not confirm good.

It also refuses to overreach. It will not call a whole domain malicious just because
someone hosted one bad link on it (attackers park payloads on GitHub and pastebins
all the time), so blocklist hits on a URL are matched exactly, not by domain. And file
hashes are the honest weak spot: with no key they have almost nothing to go on, which
is a limit worth stating rather than hiding.

Everything else is in service of trust. Every verdict carries its evidence so you can
audit it. Sources it could not reach are shown as "not run," never dropped quietly, so
you always know what was actually checked. It cites its sources and links out instead
of copying their data. A --redact flag strips WHOIS registrant names and emails
before you share a report, and --json and --markdown give you the same result for
a pipeline or a ticket.

Where it is

indict is a personal project, part of moving my own work from cloud and security
fundamentals toward investigations and OSINT. It is on
GitHub, it runs without any keys, and the
fastest way to get a feel for it is to add the two free keys and point it at
something.

A Cursor-Reactive Constellation Background in Plain Canvas

Reese Gerjekian — Wed, 08 Jul 2026 08:54:09 +0000

You've probably seen the effect before: a field of points drifting slowly behind a
hero section, thin lines connecting the ones that happen to be close together, and
the whole web of them leaning gently away from your cursor as you move it. It is
running on my homepage right now, tucked behind the
terminal, so move your mouse across it and watch the nodes react before you read
on.

Most of the time this effect shows up as part of a heavy animation library. As it
turns out, you do not need one. The browser's canvas API can draw all of it, and
the whole thing fits in a single small JavaScript file. The HTML and CSS are tiny,
so we will get those out of the way first, and then spend the rest of the post
walking through the JavaScript one piece at a time.

The HTML and CSS

The markup is a container with two children: a canvas for the animation, and a
box for whatever content sits on top of it (your headline, buttons, and so on). The
<script> tag goes at the end of the page, with defer, so the canvas already
exists in the document by the time the code runs. This is the HTML:

<section class="hero">
  <canvas id="net"></canvas>
  <div class="hero-content">
    <!-- your headline, buttons, whatever goes on top -->
  </div>
</section>

<script src="https://rgerjeki.github.io/js/node-field.js" defer></script>

The CSS has one job: put the canvas behind the content and stop it from catching
clicks. We make the section a positioning context, stretch the canvas to fill it
and send it to the back, set pointer-events to none so clicks pass straight
through to the content, and lift the content one layer up. This is the CSS:

.hero { position: relative; overflow: hidden; }

#net {
  position: absolute;
  inset: 0;               /* fill the hero */
  z-index: 0;             /* sit behind the content */
  pointer-events: none;   /* clicks pass through to the content */
}

.hero-content { position: relative; z-index: 1; }

That is the entire layout. Nothing about it changes for the rest of the post, so
from here on everything lives in one file, node-field.js, and we will build it up
in order.

Grabbing the canvas and setting up state

The file opens by getting a reference to the canvas and its 2D drawing context (the
context is the object you issue drawing commands to). It also declares the handful
of values the rest of the file shares.

const canvas = document.querySelector("#net");
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const LINK = 130;

let w, h, nodes = [], running = false, raf;
const mouse = { x: -9999, y: -9999 };

A few of these are worth pausing on. dpr is the device pixel ratio, which is how
many physical pixels the screen packs into one CSS pixel (2 or 3 on modern
displays); we cap it at 2 because going higher costs performance for very little
visible gain. LINK is the single most important number in the file: it is the
distance, in pixels, under which two nodes get a line drawn between them. Then w
and h will hold the current canvas size, nodes holds the points, running
tracks whether the loop is active, and raf stores the handle from
requestAnimationFrame so we can cancel it later. Finally, mouse starts far off
in negative space, which keeps the cursor interaction dormant until the pointer
actually moves onto the page.

Creating the nodes

Each node is nothing more than a position and a small velocity. This function fills
the nodes array with them. The count scales with the area of the canvas (so a
phone does not run the same load as a widescreen monitor) and is capped at 90 for a
reason that becomes clear once we reach the loop.

function seed() {
  const count = Math.min(90, Math.round((w * h) / 15000));
  nodes = Array.from({ length: count }, () => ({
    x: Math.random() * w,
    y: Math.random() * h,
    vx: (Math.random() - 0.5) * 0.3,
    vy: (Math.random() - 0.5) * 0.3,
  }));
}

Each point gets a random starting position inside the canvas and a random vx and
vy between roughly -0.15 and 0.15. Those velocities are deliberately tiny, because
the goal is a slow, ambient drift, not motion that pulls the eye off your content.

Sizing the canvas for sharp lines

A canvas is a bitmap, so if you let CSS stretch it, the browser scales up whatever
you drew and the lines go soft. To keep them crisp, you set the canvas's internal
size to its on-screen size multiplied by dpr, then scale the drawing context by
the same amount. After that you can write the rest of the code in ordinary CSS
pixels and forget the ratio exists.

function resize() {
  const rect = canvas.getBoundingClientRect();
  w = rect.width;
  h = rect.height;
  canvas.width = w * dpr;
  canvas.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  seed();
}

Notice that resize calls seed at the end. The dimensions just changed, so we
re-scatter the nodes to fit the new size. That also means this one function doubles
as our startup: call it once and the canvas is both sized and populated.

The animation loop

This is the heart of the file, and it runs once per animation frame. In order: we
clear the previous frame, then for every node we move it, bounce it off the walls,
push it away from the cursor, connect it to its close neighbors, and draw it.

function frame() {
  ctx.clearRect(0, 0, w, h);

  for (let i = 0; i < nodes.length; i++) {
    const n = nodes[i];

    n.x += n.vx;
    n.y += n.vy;
    if (n.x < 0 || n.x > w) n.vx *= -1;
    if (n.y < 0 || n.y > h) n.vy *= -1;

    const dx = n.x - mouse.x, dy = n.y - mouse.y;
    const dist = Math.hypot(dx, dy);
    if (dist < 120 && dist > 0.01) {
      const push = (120 - dist) / 120;
      n.x += (dx / dist) * push;
      n.y += (dy / dist) * push;
    }

    for (let j = i + 1; j < nodes.length; j++) {
      const m = nodes[j];
      const d = Math.hypot(n.x - m.x, n.y - m.y);
      if (d < LINK) {
        ctx.strokeStyle = `rgba(45, 212, 191, ${(1 - d / LINK) * 0.25})`;
        ctx.beginPath();
        ctx.moveTo(n.x, n.y);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
      }
    }

    ctx.fillStyle = "rgba(45, 212, 191, 0.8)";
    ctx.beginPath();
    ctx.arc(n.x, n.y, 1.6, 0, Math.PI * 2);
    ctx.fill();
  }

  if (running) raf = requestAnimationFrame(frame);
}

Four things happen inside that loop, so let's take them one at a time.

The movement is the first lines: add each node's velocity to its position, and if
it has drifted past an edge, flip the sign of that velocity so it bounces back
inward. That alone is enough to keep the field alive.

The cursor push comes next. We measure the distance from the node to the mouse
(Math.hypot is just the pythagorean distance) and, if the node is within 120
pixels, shove it directly away. The push value is 1 right at the cursor and fades
to 0 at the edge of that radius, so nearby nodes move a lot and distant ones barely
stir. The dist > 0.01 guard avoids dividing by zero on the rare frame where a
node lands exactly under the pointer.

The neighbor links are where the constellation look comes from, and it is one rule:
for every other node closer than LINK pixels, draw a line to it. The inner loop
starts at i + 1 so each pair is visited once. The line's opacity is tied to the
gap between the two nodes (1 - d / LINK), so connections fade in as points
approach and fade out as they separate, which gives the web its soft, breathing
quality. This inner loop is also why the node count is capped: comparing every node
against every other is an O(n squared) operation, so at 90 nodes that is about 4,000
cheap distance checks per frame (fine), while a few hundred nodes would start to
spin a fan.

Finally we draw the node itself as a small filled circle, and at the very bottom we
ask the browser to call frame again on the next repaint, but only while running
is true. That flag is the off switch, which brings us to the last section.

Starting, stopping, and staying efficient

The wiring at the bottom of the file is the part most tutorials leave out, and it
is the difference between a background that is polite and one that quietly drains a
battery. Left alone, an animation loop runs forever, even while your hero is
scrolled far off the top of the screen or the browser tab sits in the background.

function start() { if (!running) { running = true; raf = requestAnimationFrame(frame); } }
function stop()  { running = false; cancelAnimationFrame(raf); }

window.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  mouse.x = e.clientX - rect.left;
  mouse.y = e.clientY - rect.top;
});
window.addEventListener("resize", resize);

new IntersectionObserver(([entry]) => (entry.isIntersecting ? start() : stop()))
  .observe(canvas);
document.addEventListener("visibilitychange", () => (document.hidden ? stop() : start()));

resize();
start();

start and stop are a small latch around the loop. The mousemove listener
keeps the shared mouse object current, translating the pointer's page coordinates
into coordinates relative to the canvas (that is what subtracting the bounding
rectangle does). The resize listener re-runs our sizing function whenever the
window changes.

The two lines that really earn their keep are the IntersectionObserver and the
visibilitychange handler. The observer watches the canvas and starts the loop when
it scrolls into view, then stops it when it scrolls out, so the animation only runs
while someone can see it. The visibility handler does the same for tab switches.
The final two calls, resize then start, size the canvas, seed the nodes, and set
everything in motion.

Two optional refinements

First, respect the prefers-reduced-motion setting, since animation behind text is
exactly what it exists to quiet. You only need to change the last line of the file:
check the setting, and if it is on, draw a single static frame instead of looping,
so the reader still gets the constellation, just held still.

resize();
window.matchMedia("(prefers-reduced-motion: reduce)").matches ? frame() : start();

Second, if your site has a dark mode, pull the color from a CSS variable instead of
hard-coding the teal, so the field re-tints with the rest of the page. Read it once
near the top of the file:

const accent = getComputedStyle(document.documentElement)
  .getPropertyValue("--accent").trim() || "#2dd4bf";

Then parse that value into red, green, and blue components and use them in the two
rgba() calls inside frame. With a live light/dark toggle, a MutationObserver
watching the root element's class can re-read the variable the moment the theme
flips.

The full node-field.js

Here is the whole file in one piece, ready to save at /js/node-field.js:

const canvas = document.querySelector("#net");
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const LINK = 130;

let w, h, nodes = [], running = false, raf;
const mouse = { x: -9999, y: -9999 };

function seed() {
  const count = Math.min(90, Math.round((w * h) / 15000));
  nodes = Array.from({ length: count }, () => ({
    x: Math.random() * w,
    y: Math.random() * h,
    vx: (Math.random() - 0.5) * 0.3,
    vy: (Math.random() - 0.5) * 0.3,
  }));
}

function resize() {
  const rect = canvas.getBoundingClientRect();
  w = rect.width;
  h = rect.height;
  canvas.width = w * dpr;
  canvas.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  seed();
}

function frame() {
  ctx.clearRect(0, 0, w, h);
  for (let i = 0; i < nodes.length; i++) {
    const n = nodes[i];
    n.x += n.vx; n.y += n.vy;
    if (n.x < 0 || n.x > w) n.vx *= -1;
    if (n.y < 0 || n.y > h) n.vy *= -1;

    const dx = n.x - mouse.x, dy = n.y - mouse.y;
    const dist = Math.hypot(dx, dy);
    if (dist < 120 && dist > 0.01) {
      const push = (120 - dist) / 120;
      n.x += (dx / dist) * push;
      n.y += (dy / dist) * push;
    }

    for (let j = i + 1; j < nodes.length; j++) {
      const m = nodes[j];
      const d = Math.hypot(n.x - m.x, n.y - m.y);
      if (d < LINK) {
        ctx.strokeStyle = `rgba(45, 212, 191, ${(1 - d / LINK) * 0.25})`;
        ctx.beginPath();
        ctx.moveTo(n.x, n.y);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
      }
    }

    ctx.fillStyle = "rgba(45, 212, 191, 0.8)";
    ctx.beginPath();
    ctx.arc(n.x, n.y, 1.6, 0, Math.PI * 2);
    ctx.fill();
  }
  if (running) raf = requestAnimationFrame(frame);
}

function start() { if (!running) { running = true; raf = requestAnimationFrame(frame); } }
function stop()  { running = false; cancelAnimationFrame(raf); }

window.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  mouse.x = e.clientX - rect.left;
  mouse.y = e.clientY - rect.top;
});
window.addEventListener("resize", resize);

new IntersectionObserver(([entry]) => (entry.isIntersecting ? start() : stop()))
  .observe(canvas);
document.addEventListener("visibilitychange", () => (document.hidden ? stop() : start()));

resize();
start();

Under a hundred lines, no dependencies, and it falls back to a static field (or to
nothing at all if JavaScript is off). If you want to see it in motion, it is on
my homepage, running this exact file behind the
terminal.