// 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.