# 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.

Block · With a Pass · https://tactileui.dev/blocks/reading-progress

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **Top of the essay**: The tube is empty.
2. **Reading**: As 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. **Skimming**: A fast flick of the wheel throws the ink against the wall; it sways back and settles, and the tube's loop sleeps.
4. **Finished**: 
5. **Inside a panel**: Mounted in any scrolling container (or a frame scaled by a transform) it reads that container, and the rail sticks to its top.
6. **Palette**: Paper (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. **Tablet**: 
8. **Phone**: One 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 motion**: The tube shows the true level with no pour and no slosh; every number and the section list still follow the reading.
10. **Off screen**: The tube's loop pauses; nothing else runs: one animation frame per burst of scrolling updates the words.

## 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.