Reading Progress

Make reading progress something the reader has filled: for a long-read article, an essay, documentation or a case study, the share read is a volume of liquid in a vessel that belongs to the piece, with the minutes left and the sections beside it, measured through the article itself, in the page or inside any scrolling panel.

Copy the reading-progress folder and the vessel folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="vessel/vessel.css">
<link rel="stylesheet" href="reading-progress/reading-progress.css">
<div id="reading-progress"></div>

<script type="module">
  import Vessel from './vessel/vessel.mjs';
  import { mount } from './reading-progress/reading-progress.mjs';

  const readingProgress = mount(document.getElementById('reading-progress'), {
    journal: 'Soft Point',
    issue: 'No. 14 · Autumn 2026',
    kicker: 'Essay · Materials',
  }, { Vessel });

  // readingProgress.update({ … });   change any option in place
  // readingProgress.destroy();        and take it away again
</script>

mount(element, options, { Vessel })

Builds the block inside the element and returns its handle. Hand it the Vessel it is built with.

handle.vessel

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. Top of the essayThe tube is empty; “0% read”, “3 min left”; the opening is marked in the section list.
2. ReadingAs the body passes through the view the tube fills to the share read, a thin stream pouring while it rises; the words and the section list follow.
3. SkimmingA fast flick of the wheel throws the ink against the wall; it sways back and settles, and the tube's loop sleeps.
4. FinishedThe tube is full, “100% read”, “Finished”, the last section marked; an end mark and the author's note follow.
5. Inside a panelMounted in any scrolling container (or a frame scaled by a transform) it reads that container, and the rail sticks to its top.
6. PalettePaper (uncoated stock, blue-black ink in the tube) or night (warm grey on near-black, water in the tube); the glass re-shades itself for the page.
7. TabletA 64px rail with only the tube and the percentage; nothing hangs into the margin.
8. PhoneOne column; the tube, the percentage and the minutes left become a card pinned to the foot of the view while the essay is on screen.
9. Reduced motionThe tube shows the true level with no pour and no slosh; every number and the section list still follow the reading.
10. Off screenThe tube's loop pauses; nothing else runs: one animation frame per burst of scrolling updates the words.

Made of: Element tracked reading progress, Sticky margin rail, Container query layout, Section tracking, Scroll jolt slosh, Palette tokens from one table.

Original composition. The journal “Soft Point”, its author and the essay are written for this block; the essay's history (Schott in Jena in the 1880s, borosilicate, Pyrex in 1915, lampworking and annealing) is stated as commonly told. Imagery is an SVG figure drawn to scale and the Vessel's canvas; no photograph. Faces: Gloock and Lora (SIL OFL 1.1), Latin subsets as WOFF2.

• 07VesselA glass of liquid as a gauge.

More blocks on the same object:

• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.
• 07.2Crowdfund FlaskA fundraiser where the total is honey in a flask.
• 07.3Upload VesselA file-import dialog where the upload fills a beaker.