Reading Progress
A long read with a test tube for a progress bar. The tube in the margin fills with ink as the essay is read, and sloshes when the reader skims.
Built with Vessel
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Element tracked reading progress, Sticky margin rail, Container query layout, Section tracking, Scroll jolt slosh, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Vessel
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- Top of the essayThe tube is empty; “0% read”, “3 min left”; the opening is marked in the section list.
- 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.
- SkimmingA fast flick of the wheel throws the ink against the wall; it sways back and settles, and the tube's loop sleeps.
- FinishedThe tube is full, “100% read”, “Finished”, the last section marked; an end mark and the author's note follow.
- 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.
- 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.
- TabletA 64px rail with only the tube and the percentage; nothing hangs into the margin.
- 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.
- Reduced motionThe tube shows the true level with no pour and no slosh; every number and the section list still follow the reading.
- Off screenThe tube's loop pauses; nothing else runs: one animation frame per burst of scrolling updates the words.
Notes
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.
Anatomy
Element tracked reading progress, Sticky margin rail, Container query layout, Section tracking, Scroll jolt slosh, Palette tokens from one table
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| journal | text | Journal |
| issue | text | Issue line |
| kicker | text | Kicker |
| title | text | Title |
| dek | text | The standfirst under the title. |
| author | text | Author |
| date | text | Date |
| palette | enum | Uncoated paper and blue-black ink, or the same page read at night. |
| liquid | enum | Auto: ink on paper, water at night. |
| figure | boolean | The tube drawn to scale, with its dimensions. |
| slosh | number | How hard a flick of the wheel throws the liquid. |
| light | number | Light from (degrees) |
| wpm | number | For the reading time and the minutes left. |
Methods
- vessel
- update
- destroy
How it works
Original composition. The journal “Soft Point”, its author and the essay are written for this block. Imagery is an SVG figure drawn to scale and the Vessel's canvas; no photograph.