The tape, felt.

<li id="mk-bitcoin"
  data-body="attract"
  data-strength="1.87"
  data-feedback
  data-hot
  data-cap="1235425696510"
  data-price="61517"
  data-c24="-1.70" data-c7="-7.76"
  style="--w: 0.92; --cat: hsl(350 70% 64%);"
>
  <!-- name · price · badge -->
  <svg aria-hidden="true"
    data-field-visual-for="#mk-bitcoin"
    data-field-visual-role="measurement">
    <path d="…" pathLength="100" />
  </svg>
</li>

/* tier classes set the tile's footprint */
.mk-t1 { grid-column: span 3; grid-row: span 2; }
.mk-t2 { grid-column: span 2; grid-row: span 2; }

.mk-tile {
  /* --w = log-normalized cap (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);
  box-shadow: 0 0 calc(var(--live) * 14px) -6px
    color-mix(in srgb, var(--cat)
      calc(var(--live) * 50%), transparent);
}
/* the sparkline breathes with the tile */
.mk-spark path {
  stroke-width: calc(1.5 + var(--live) * 0.9);
  filter: drop-shadow(0 0
    calc(var(--live) * 6px) var(--cat));
}
/* entry draw-in — a keyframe, not a dash
   steady state: paths carry
   pathLength="100", the BASE rule sets no
   stroke-dasharray, and the dash lives
   only inside the animation — a drawn
   line computes stroke-dasharray: none */
@keyframes mk-spark-draw {
  from { stroke-dasharray: 100;
         stroke-dashoffset: 100;
         opacity: 1; }
  to   { stroke-dasharray: 100;
         stroke-dashoffset: 0; }
}

// recompute --w from cap or volume,
// swap the tier class, re-sort, then
// FLIP tiles whose size did not change:
const first = new Map(tiles.map(
  (t) => [t, t.getBoundingClientRect()]));
ordered.forEach((t) => list.appendChild(t));
ordered.forEach((t) => {
  const a = first.get(t);
  const b = t.getBoundingClientRect();
  t.style.transform = `translate(
    ${a.left - b.left}px,
    ${a.top - b.top}px)`;
  requestAnimationFrame(() =>
    (t.style.transform = ""));
});
// re-tiered tiles settle with a fade
// instead — translate cannot honestly
// animate a size change.

// once a minute (skipped while the tab
// is hidden) — the same CoinGecko
// endpoint the snapshot script uses:
const data = await (
  await fetch(GECKO_URL)).json();
for (const c of data) {
  const tile = byId.get(c.id);
  if (!tile) continue; // unknown ids:
    // not bodies on this page
  tile.dataset.cap = String(c.market_cap);
  price.textContent =
    fmtPrice(c.current_price);
  flash(price);  // ▲ teal / ▼ red tick
  spark.setAttribute("d",
    sparkPath(c.sparkline_in_7d.price));
}
applyLens();        // --cat through the
                    // ACTIVE lens
recomputeWeights(); // --w — the scoped
                    // field re-measures
// a poll NEVER re-sorts or re-tiers —
// hostile under the cursor. Tiers
// re-settle on the next lens change.