Proof Sheet
A long-read layout set like a journal proof: the essay in one column with its notes in the margin, and a contents plate beside it whose lamps follow the section you are reading, an LCD of minutes left from where you are, and keys for the size of the type.
What it is for
The article page of a blog, a journal or a company's long-form writing.
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
- Reading line section tracking, Minutes left from words below, Lamp for current section, Contents links move focus, Type size radios, Margin notes then inline, Sticky reading bar on phone, Raf stepped passive scroll, Container query layout, Concentric radii, Finish following
- Stack
- Vanilla ES modules, CSS
- Needs
- Nothing, no dependencies
- States
- 8 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe plate with four contents rows (lamps dark until you reach the first section), the LCD at the essay's full minutes and the middle type size; the essay's head, four numbered sections, a pull quote and three margin notes. Nothing runs.
- ReadingAs a section's heading passes a line a third of the way down the view, its row stands raised with its lamp lit and prf-section fires with { id, index }; the LCD counts the minutes for the words still below, down to Done.
- JumpedA contents link scrolls to its section (smoothly unless reduced motion is asked for) and puts focus on its heading.
- Type sizeSmall, medium or large (16, 18 or 20.5px) from three keys; the measure stays 38em; prf-size fires.
- Medium widthBetween 900 and 1180px the notes move under their paragraphs, in recesses.
- PhoneUnder 900px the plate is a bar stuck to the top, edge to edge, naming the section you are in, with the LCD under it and a Contents key that opens the list and the size keys; Esc closes it.
- Reduced motionContents links jump; nothing transitions.
- FinishesOn a page with the kit's finish tokens it is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system.
Notes
Where Reading Progress fills a test tube in the margin as you read, this tells you where you are in words: the section you are in, lit on the contents, and the minutes left from that point, counted from the words still below you. Notes sit in the margin beside their line, then under their paragraph on a narrower page, and the reader picks one of three type sizes. On a phone the plate becomes a slim bar stuck to the top with the section's name and a Contents key. One passive scroll listener stepped by animation frames, real headings and landmarks, links that move focus. CSS and a little DOM, no dependency, every finish of the kit.
Original composition. The essay, its writer (Mira Okafor), the journal (The Long Room) and the figures in it are sample copy, invented, and the preview says so. The plate, wells, LCD and lamps are CSS drawn here, in the kit's tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.
Anatomy
Reading line section tracking, Minutes left from words below, Lamp for current section, Contents links move focus, Type size radios, Margin notes then inline, Sticky reading bar on phone, Raf stepped passive scroll, Container query layout, Concentric radii, Finish following
Usage notes
The article page of a blog, a journal or a company's long-form writing. Where Reading Progress fills a test tube in the margin as you read, this tells you where you are in words: the section you are in, lit on the contents, and the minutes left from that point, counted from the words still below you. Notes sit in the margin beside their line, then under their paragraph on a narrower page, and the reader picks one of three type sizes. On a phone the plate becomes a slim bar stuck to the top with the section's name and a Contents key. One passive scroll listener stepped by animation frames, real headings and landmarks, links that move focus. CSS and a little DOM, no dependency, every finish of the kit.
Options
| Option | Type | Description |
|---|---|---|
| journal | text | Printed in the kicker above the title. |
| size | enum | The reader changes it with the keys on the plate. |
| notes | boolean | In the margin on a wide page, under their paragraph on a narrow one. |
| minutesLeft | boolean | The LCD on the plate, counted from where the reader is. |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |
Methods
- update
- destroy
How it works
Original composition. The essay, its writer (Mira Okafor), the journal (The Long Room) and the figures in it are sample copy, invented, and the preview says so. The plate, wells, LCD and lamps are CSS drawn here, in the kit's tokens; no image.