// PERFORMANCE MODEL

Performance Model

Hardware tiering and the sleep-when-idle rule every effect obeys.

Performance is a hard constraint on this site, not an afterthought — it has to feel instant on a modest Windows laptop. Two mechanisms enforce that: a hardware tiering system, and a sleep-when-idle discipline that every animated surface follows.

Tiering: PerfProvider

On load, PerfProvider benchmarks the machine — a short frame-rate sample plus a core-count check — and assigns one of three tiers, which it mirrors onto the document element so CSS can react to it:

type PerfTier = 'full' | 'reduced' | 'off'

// prefers-reduced-motion        → 'off'
// coarse pointer / < 768px       → 'reduced'
// low FPS sample or ≤ 4 cores    → 'reduced'
// otherwise                      → 'full'

document.documentElement.dataset.perf = tier  // <html data-perf="full">

What each tier buys:

  • full — real backdrop-filter glass, denser canvas effects, shadows in the physics pit
  • reduced — solid glassy fallbacks, fewer particles/bodies, the homepage pit becomes a static teaser
  • off — static renders, content always visible, no autoplay motion at all

Sleeping

The expensive pieces — the hero Signal Grid and the Signal Pit — run a requestAnimationFrame loop only while something is moving. When the field settles and the pointer goes idle, the loop does not schedule another frame; it returns:

if (settled && pointerIdle) {
  running = false
  return            // no rAF scheduled — back to 0% CPU
}
raf = requestAnimationFrame(loop)

Any pointer movement or interaction calls wake() to start it again. The same idea hard-pauses on tab-hide and when a canvas scrolls out of view. The result: the page is visually rich but does no work when you are just reading it.