- readsListenBrainz's top recordings
- becomeslistens → mass; the queue is a sink with capacity 8
- writes
--w--bar--load - you seepopular tracks read heavy; the queue visibly fills, saturates, and releases
No canvas is drawn here — the field is invisible; these variables are its only output. Without it you would build: a play-count sort and a queue-length check.
field-ui · invisible fields · library
What the world actually plays.
Not editorial picks, not a mood algorithm — these are the 30 most-listened recordings across ListenBrainz this month, sitewide. Listens are mass, and the page is a ranked ladder: each recording's bar runs as long as its real play count, while the log-scaled mass sets how hard its row pulls — heavier type, fuller ink. The shortest bar on the page is still a top-30 track; the longest is what the world could not stop playing.
The queue below is not a styled div — it is a field body: a sink with
data-absorb, registered in the same scoped field as the rows. The engine
genuinely writes its accreted fill back as --load, and CSS turns that into a
glow. Queue eight tracks and the sink releases — the engine's
capture→release cycle, played out in the page. The field is invisible — no particle
swarm; only its measurements show. Toggle the field off and the live
channels go dark — the ladder flattens, the glow dies — while the queue keeps counting:
that channel is data, and it is honest about it.
bar length = listens (linear) · type weight = the log-scaled mass · color = artist — one palette hue per act, hashed from the name
- bar length = listens (linear share of the chart max)
- Aa type weight = listens as log-scaled mass
- color = the lens (artist, or off) — it tints the bar
- the queue is a sink — the engine writes
--loadinto it - at 8/8 the sink releases — capture, then let go
- glow = the engine's live density (
--d) — hold a row and the field gathers
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
How it's built
Every recording is ordinary semantic HTML — an <li> whose
log-normalized listens become --w and data-strength. The queue
panel is a second kind of body: a sink. Both join one scoped field, and
the panel's glow and the rows' type heft are driven by two different channels — one the
engine writes, one the page counts. Live on top of those: --w is the
server-computed weight, --cat the lens color, --d the engine's
live local density (hold a row and the field gathers), and --field-attention
the recipe's eased attention metric. The bars and the fill declare their provenance with
data-field-visual-for, so each measurement is bound to its record.
1 — the queue is a field sink
<aside id="queue"
data-body="sink"
data-absorb
data-max="8"
data-feedback
data-hot
>
<!-- the queue panel -->
<i aria-hidden="true"
data-field-visual-for="#queue"
data-field-visual-role="measurement"></i>
</aside>data-body="sink"— registers as an absorbing bodydata-absorb— opt in to holding matterdata-max="8"— capacity before the sink saturatesdata-feedback— receive--loadwritebacksdata-hot— the engine's live density (--d) gathers toward 1 while helddata-field-visual-for— binds the fill bar to the panel it measures
2 — two channels, labeled honestly
/* channel 1 — the ENGINE. Matter accretes
into the sink and the field writes --load
(0..1 fill) back each frame; the page
engine also writes --d, its LIVE local
density (data-hot gathers it on hold).
The glow blends both. */
.lb-queue {
--live: var(--d, 0);
box-shadow: 0 0
calc(4px + (var(--load, 0)
+ var(--live) * 0.5) * 28px)
color-mix(in srgb, var(--accent)
calc(var(--load, 0) * 45%
+ var(--live) * 18%),
transparent);
}// channel 2 — the UI. A plain counter:
// queued / 8. Data, not the field.
fill.style.width = `${n / 8 * 100}%`;The glow is the field's own measurement of accretion; the fill bar is bookkeeping. Keeping the two apart is the point — at 8/8 the page clears the queue the way the engine's sink releases captured matter.
3 — CSS reads the mass; the bar reads the count
.lb-title {
font-variation-settings:
'wght' calc(380 + var(--w) * 360);
}
/* the ladder: --bar = listens / max
(linear), set server-side */
.lb-bararea::before {
width: calc(var(--bar) * 100%);
background: color-mix(in srgb,
var(--cat) calc(10% + var(--w) * 12%),
transparent);
}
/* the rows also receive the engine's
live density (--d) and the recipe's
eased attention (--field-attention) */
.lb-row {
--live: var(--d, 0);
--att: var(--field-attention, 0);
} --w is the log-normalized listen count — real plays in, type weight and
ink out. --bar is the same count kept linear, so the bar lengths stay an
honest chart. The rest is CSS. In the browser the counts refresh from the same
ListenBrainz endpoint once per visit, on purpose — the monthly window
moves daily, so polling would be theater. The snapshot's 30 recordings
stay the page's bodies: tracks that fell out of the live top 30 dim
rather than vanish, and new entrants wait for the next snapshot.