field-ui
  1. readsWikipedia's most-read pages
  2. becomespageviews → mass (placement + weight); day-over-day → polarity
  3. writes--w--cat
  4. you seethe lead earns its slot; risers run warm, fallers cool, new entries gray

No canvas is drawn here — the field is invisible; these variables are its only output. Without it you would build: an editor reordering the page every morning.

field-ui · invisible fields · newsroom

Attention, measured — not claimed.

A trending list asserts importance; a pageview count records it. These are the articles English Wikipedia readers actually read on June 8, 2026 — the Wikimedia pageviews API's most-read ranking, run as a field and laid out like a front page. Pageviews become gravitational mass, and mass buys column inches: the most-read article takes the lead slot, the next six fill the deck, the rest settle into the index — with heavier type, darker ink, a stronger left rule the more the world read.

The day-over-day change polarizes each body: rising attention warms, falling attention cools, and the magnitude sets the intensity — a 3% drift barely registers, a 200% surge burns. Articles that weren't in the prior day's list at all read as new, in neutral gray — no fake direction. The placement is fixed — a front page is set in type — but the ink is alive: the engine writes its live local density back as --d, so holding a story makes the field gather around it, and the index item nearest the center of your view sharpens as you scroll. Toggle the field off and the ink flattens and the live channels go dark: the placement stays (it is the day's ranking), but the field's weighting lets go.

Field
Color by
Data snapshot · June 8, 2026

size & placement = pageviews — the most-read story leads the page · color = the day-over-day move — warm rising, cool falling, gray new

edition: June 8, 2026 (UTC)

  1. 05 2026 Peruvian general election 281,754 views ▲ 724.7%
  2. 06 2026 FIFA World Cup 264,644 views ▲ 11.2%
  3. 07 Backrooms (film) 174,832 views ▼ 18.2%
  4. 08 Alexander Zverev 163,973 views ▼ 65.6%
  5. 09 Masters of the Universe (2026 film) 155,937 views ▼ 18.1%
  6. 10 Christian Eriksen 139,845 views ▼ 24.7%
  1. 11 Deaths in 2026 132,986 views ▲ 4.8%
  2. 12 Peddi 128,308 views ▼ 6.8%
  3. 13 79th Tony Awards 127,279 views ▲ 491.5%
  4. 14 Killing of Rachel Nickell 117,991 views ▼ 28.4%
  5. 15 Spencer Pratt 116,916 views ▲ 187.5%
  6. 16 Scary Movie (2026 film) 114,201 views ▼ 19.0%
  7. 17 Stacey King 110,003 views ▼ 14.4%
  8. 18 Inde Navarrette 105,410 views ▼ 2.8%
  9. 19 ChatGPT 105,017 views ▲ 27.2%
  10. 20 Ford Creek Patrol Cabin 104,947 views new
  11. 21 Nelly Korda 104,138 views ▲ 46.5%
  12. 22 Nithya Raman 100,163 views ▲ 302.2%
  13. 23 Michael Jackson 96,378 views ▼ 16.1%
  14. 24 2026 Armenian parliamentary election 93,251 views ▲ 12.2%
  15. 25 .xxx 90,002 views ▲ 86.0%
  16. 26 Jalen Brunson 87,519 views ▲ 11.9%
  17. 27 Béla Pap 86,893 views new
  18. 28 Robert Napper 86,007 views ▼ 28.8%
  19. 29 Manav Suthar 84,425 views ▼ 36.0%
  20. 30 Teach You a Lesson 83,358 views ▼ 6.3%
  21. 31 FIFA World Cup 82,434 views ▲ 20.1%
  22. 32 Lewis Hamilton 78,769 views ▼ 10.7%
  23. 33 2026 Gilgit Baltistan Assembly election 77,056 views ▲ 137.4%

How it's built

Every article is an ordinary <li> with its raw counts in data attributes. field-ui reads them, runs an invisible field over the front page, and the type carries the measurement — pageviews as weight and placement, the day's swing as color. No canvas, no chart library. Four channels do the work: --w is the server-computed weight, --cat the lens color, --d the engine's live local density (hold a story and the field gathers), and --field-attention the recipe's eased attention metric, which sharpens the index item nearest the viewport center. Placement is fixed; only the ink is alive. In the browser the page also checks for a newer edition — once per visit, on purpose: the pageviews API publishes each finished day exactly once, so a polling loop would be theater. If a newer day exists, the front page is rebuilt from it — same shaping rules, same markup, same field — and the dateline moves.

1 — each article is a field body

HTML 
<li
  data-body="attract"
  data-strength="1.87"
  data-feedback
  data-hot
  data-views="291972"
  data-prior="303010"
  style="--w: 0.920; --cat: hsl(212 38% 59%);"
>
  <!-- rank · title · views -->
</li>
  • data-strength — gravitational mass from log-normalized pageviews
  • data-views / data-prior — the raw counts the lens reads
  • --cat — the polarity color the CSS mixes in
  • data-hot — the engine's live density (--d) gathers toward 1 while held

2 — CSS reads the field's output

CSS 
.nw-row {
  /* --w = log-normalized views (0..1).
     --d = the engine's LIVE local density —
     data-hot gathers it toward 1 on hold. */
  --live: var(--d, 0);
  opacity: calc(0.58 + var(--w) * 0.42);
  border-left: 3px solid
    color-mix(in srgb,
      var(--cat) calc(18% + var(--w) * 82%),
      var(--line));
}
/* the index item nearest the viewport
   center sharpens — the recipe's eased
   attention metric, written per record */
.nw-index-item .nw-title {
  letter-spacing: calc(-0.01em
    + var(--field-attention, 0) * 0.01em);
}

Weight, ink, font heft, and border intensity all read from one normalized attention score; the lead's headline ink and rule breathe with the live --d — the field drives the measurement; CSS drives the presentation.

3 — the polarity ramp

TS 
// day-over-day move → --cat:
// direction is hue, magnitude is
// intensity; no prior count = new.
const pct = prior
  ? ((views - prior) / prior) * 100
  : null;
if (pct === null) return "#8a93a6";
const t = Math.min(1, Math.abs(pct) / 60);
return pct >= 0
  ? `hsl(${32 - t * 10} …)`  // warm
  : `hsl(${208 + t * 12} …)`; // cool
Read the docs → See recipes →