1. readsStack Overflow's unanswered questions
  2. becomesurgency (recency · votes · views) → mass inside ONE conserved budget
  3. writes--w--field-attention
  4. you seefresh asks read bold and sink as they age; brightening one literally dims the rest

No canvas is drawn here — the field is invisible; these variables are its only output. Without it you would build: priority tiers, a scoring scheme, and a re-sort on every change.

field-ui · invisible fields · inbox

Attention is a budget.

An inbox is a queue of asks competing for one finite resource: yours. Most inboxes pretend otherwise — every row arrives at full volume, so the real triage happens in your head. These are 42 real unanswered [javascript] questions from Stack Overflow, and here the attention is conserved: the page holds a fixed total, split across every ask by urgency — a blend of recency, votes, and views.

Because the total is fixed, brightening one ask literally dims the rest. Attention also has a place: pin an ask and its card moves into the focus pane, holding a full unit; the remaining budget redistributes across the stream, and you watch the others fade by exactly that much. Unpin it and it returns to its place in the stream. Switch the lens and the same budget re-settles along a different signal. The field is invisible — its only output is type weight, ink, and a left anchor.

Field
Urgency lens
Attention 100% allocated · pinned 0 · free 17.6
Data snapshot · 2026-06-10

size = urgency, recency-leaning — fresh asks pull hardest before they go cold · color = age — cool has waited years, warm arrived this week

  1. Disable NetSuite Sublist FIeld Via SuiteScript javascriptnetsuitesuitescript2.0 27h ago · Michael McCauley
    0 votes 33 views
  2. -1 votes 58 views
  3. Defining and using custom elements from an ISOLATED content script of a browser extension javascriptweb-componentcustom-elementcontent-script 6d ago · ack_inc
    2 votes 92 views
  4. Remove YouTube pause button javascriptyoutube-api 5d ago · Jordan Carter
    -1 votes 160 views
  5. 21 votes 15.2k views
  6. 0 votes 49 views
  7. UnhandledPromiseRejectionWarning: TypeError: Caught error after test environment was torn down javascriptreactjsreact-testing-libraryjest-mock-axios 6y ago · MaiOsman
    15 votes 14.6k views
  8. 15 votes 13.1k views
  9. 0 votes 81 views
  10. Jest module mock - doMock doesn't work as intended javascriptmockingjestjs 6y ago · gomes
    14 votes 8.6k views
  11. GraphQL String interpolation is not allowed in graphql tag javascriptreactjsecmascript-6graphql 7y ago · Link
    16 votes 3.6k views
  12. 16 votes 3.4k views
  13. 0 votes 57 views
  14. pageshow event on iphone fires only once javascriptiosiphonemobile-safari 10y ago · Bodzio
    16 votes 2.4k views
  15. How to access modules bundled from webpack outside bundles/chunks javascriptmodulerequirejsdependencies 10y ago · pjdicke
    15 votes 3.0k views
  16. Use Eclipse as GNOME Extension IDE javascripteclipsegnomegjs 12y ago · Zic0
    17 votes 1.1k views
  17. 0 votes 113 views
  18. How to disable protocol checking with gtag.js for new GA4 properties? javascriptgoogle-analyticsgoogle-analytics-apigtag.js 6y ago · mikep
    14 votes 2.4k views
  19. Android WebView run Javascript in all frames (including iframes) javascriptandroidiframe 8y ago · user2875404
    15 votes 1.5k views
  20. Web Worker effect on max http connections on per browser per domain javascriptweb-workerhttpconnection 11y ago · asolvent
    16 votes 834 views
  21. 14 votes 986 views
  22. Inspect all resize observers javascriptgoogle-chromedomfirefox 4y ago · LosYear
    14 votes 623 views
  23. After changing from CSR to SSR with Ionic Angular app, styles do not apply to components any more javascriptangularionic-frameworkserver-side-rendering 13d ago · Felix Olszewski
    0 votes 109 views
  24. Trouble calculating HTML line wrapping positions at different zoom levels javascripthtmlcsszooming 29d ago · Remco Haszing
    7 votes 301 views
  25. Handling 'clientError' events in http.Server, Node.js javascriptnode.jshttpsockets 15d ago · Timur
    0 votes 87 views
  26. Is there a way to associate a commit to the branch it was created on? javascriptgitelectronsimple-git 16d ago · HiHavafa
    -1 votes 116 views
  27. 3 votes 134 views
  28. How to retrieve or generate QuickBooks deep links without qzurl after modern reports update in June 2026 javascriptquickbooksintuit-partner-platformquickbooks-online 20d ago · Jess
    1 votes 60 views
  29. -1 votes 122 views
  30. 1 votes 169 views
  31. Lighthouse CI failing when running 2nd test due to Eperm issues javascriptnode.jsgoogle-chromelighthouse-ci 21d ago · MeltingDog
    0 votes 58 views
  32. How can I make YouTube IFrame API seekTo() calls silent without setting controls: 0? javascriptiframeyoutubeyoutube-api 35d ago · Kane Marais
    2 votes 221 views
  33. Mobile Chrome crash when taking a photo with HTML5 input inside a Vue.js dialog javascriptvue.jsgoogle-chromeinput 20d ago · user2837684
    -2 votes 80 views
  34. 1 votes 46 views
  35. 1 votes 139 views
  36. Why Websocket not working production (Siteground) javascriptnode.jssocketswebsocket 34d ago · Mujahid Ali
    0 votes 100 views
  37. Clerk <PricingTable /> fails to render javascriptclerk 28d ago · Clancy Hood
    -2 votes 112 views
  38. -3 votes 173 views
  39. Implement JavaScript file code for modal popup partial view in NET Core Web App MVC javascriptasp.net-core-mvcasp.net-mvc-partialview 41d ago · DigAtRandom
    1 votes 89 views
  40. 0 votes 79 views
  41. 0 votes 132 views
  42. Tizen - Javascript embedded video failing javascripthtml5-videotizentizen-web-app 50d ago · Caesar
    1 votes 92 views

How it's built

Every ask is ordinary semantic HTML — an <li> carrying its normalized signals as data attributes. The page blends them into an urgency score per the active lens, then renormalizes so the weights always sum to one fixed budget. CSS turns each weight into type heft, ink, and anchor. The field never invents attention; it only moves it. On top of that sit live channels the engine writes back every frame — --d (local density, gathered by data-hot on hover) and --field-attention (the recipe's eased attention) — which touch only ink, never the budget. Each ask also declares its askedAt as data-field-at, so the pipeline's recency lane is grounded in the data's own timestamp: --field-recency decays against the real clock, not your interaction.

1 — mark each ask as a field body

HTML
<!-- the stream list holds a stable id; each ask is a body.
     data-feedback: the engine writes --d (live local density) back every frame.
     data-hot: hover/focus an ask and the field gathers toward it. -->
<ol id="ix-stream">
  <li
    data-body="attract"
    data-strength="1.21"
    data-feedback
    data-hot
    data-rec="0.91" data-vot="0.25" data-vie="0.14"
    data-field-at="1765324800000"
    style="--w: 0.51; --cat: hsl(318 74% 64%);"
  >
    <!-- your ordinary HTML here -->
  </li>
</ol>

<!-- data-rec = freshness(askedAt, snapshot) — the
     @fundamental-engine/core temporal kernel (half-life 7d).
     data-field-at declares askedAt as WORLD TIME, so
     the platform grounds its recency lane in the data:
     --field-recency = freshness(at, now), live. -->

<!-- the attention meter declares its provenance: a
     measurement visual OF the stream list -->
<span class="ix-meter" aria-hidden="true"
  data-field-visual-for="#ix-stream"
  data-field-visual-role="measurement"
><i></i></span>
  • data-body="attract" — registers as a field participant
  • data-strength — mass, derived from the allocated weight
  • data-rec/vot/vie — the normalized signals the lenses re-blend (data-rec is the freshness() kernel over askedAt)
  • data-field-at — the declared world timestamp; the platform grounds its recency lane in it (--field-recency)
  • data-feedback — opt in to --field-* writebacks (--d)
  • data-hot — hover/focus gathers the field toward this ask
  • data-field-visual-for — the meter's declared provenance

2 — the conserved renormalization, live arrivals included

// recency is the world-time kernel —
// exponential newness, half-life 7 days:
import { freshness } from "@fundamental-engine/core";
rec[i] = freshness(askedAtMs, nowMs, 7 * 86400000);

// fresh lens — the blends differ per lens
u[i] = 0.60·rec + 0.25·votes + 0.15·views

// the fixed total: N items × 0.42
budget = N × 0.42

// scale so the weights SUM to the budget,
// cap each at 1, re-flow capped excess
k    = budget / Σ u
w[i] = min(1, u[i] × k)   // repeat on the rest

// pins: w = 1, then reallocate
// (budget − pins) over the unpinned
Σ w[i] = budget — always.

// the scoped field runs invisible (renderless)
// and asks for the attention metric lane:
applyRecipe(split, base, {
  renderless: true,
  extraMetrics: ["attention"],
});
// the pipeline writes --field-attention per ask (eased 0..1)

That invariant is the mechanic: the meter reads 100% no matter what you do, because pinning, re-blending, arriving, or decaying can only move attention, not mint it. Arrivals are the same flow end to end: fetch → dedupe → enter the field → renormalize.

3 — CSS reads the weight + the live channels

CSS
.ix-item {
  /* --w  = the server-allocated share (conserved)
     --d  = live engine density — data-hot gathers it
     --field-attention = the recipe's eased attention */
  --live: var(--d, 0);
  opacity: calc(0.58 + var(--w) * 0.42);
  box-shadow: 0 0 calc(var(--live) * 16px) -6px
    color-mix(in srgb,
      var(--cat) calc(var(--live) * 55%), transparent);
  background: color-mix(in srgb, var(--text)
    calc(1.5% + var(--w) * 4% + var(--live) * 4%
      + var(--field-attention, 0) * 4%),
    transparent);
}
/* the kit touches only ink — never --w;
   Σ--w stays pinned to the budget */

This is the engine's attention-budget idea applied to a page: bodies compete for a finite influence pool, and the layout reports each body's share — the same conservation the field runtime applies to particle attention, here written into the type.