Ring-bound Notebook
A flip book of cards on two rings, seen from above. Lift the lower card over the rings and the page turns: your finger holds the card where it took it, and let go, gravity decides which way it falls.
What it is for
A changelog people actually turn through: the version and date on the upper card, what changed on the lower.
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
- Two sided card pages, Finger held hinge, Gravity decides, Css 3d hinge, Computed clip outline, Lamp shaded faces, Sleeping loop
- Stack
- Vanilla ES modules, CSS 3D, CSS
- Needs
- Nothing, no dependencies
- States
- 11 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- OpenTwo halves of one page either side of the rings: the upper card's back, the lower card's front; nothing runs.
- LiftingDrag the lower card up: it rotates about the rings under your finger, darkening as it turns from the lamp, its shadow lengthening down the page beneath.
- Let goShort of upright it falls back; past it, it falls over onto the flipped pile and slaps down with a small bounce.
- A tap or a keyA push that carries the card over in about half a second; the upper card turns the page back the same way.
- At an endThe first page cannot go back and the last cannot go on; those buttons are disabled.
- KeyboardArrows and Page keys turn pages, Home and End go to the ends; the page turned to is announced.
- AluminiumGrey bookcloth, warm white card, steel rings.
- GraphiteBlack leather, black card with light print, dark rings, as in the pin.
- Read-onlyPages turn from code only.
- Off screenA turning card lands where it was going.
- Reduced motionPages turn at once.
Notes
Also a day calendar, on-call handovers, onboarding steps, a run's stages: anything read one page at a time. The pages are real text: two buttons (previous and next) with the page they lead to in their names, arrow and Page keys, and a polite announcement of each page turned to.
Original, after the owner's pin. CSS 3D for the cards, one small loop while a card moves; the outline is an SVG path computed in px on resize.
Anatomy
Two sided card pages, Finger held hinge, Gravity decides, Css 3d hinge, Computed clip outline, Lamp shaded faces, Sleeping loop
Usage notes
A changelog people actually turn through: the version and date on the upper card, what changed on the lower. Also a day calendar, on-call handovers, onboarding steps, a run's stages: anything read one page at a time. The pages are real text: two buttons (previous and next) with the page they lead to in their names, arrow and Page keys, and a polite announcement of each page turned to.
Options
| Option | Type | Description |
|---|---|---|
| preset | enum | A changelog (version and date above, notes below) or a day calendar. In code, pass your own pages. |
| page | number | Where the book is open when the page loads. |
| finish | enum | Auto draws the board, card and rings from the page’s finish (its tokens): bookcloth and a light card on a light finish, dark leather and a dark card on a dark one; without them, aluminium on a light page and graphite on a dark one. Or pin aluminium (bookcloth and warm card) or graphite (black leather and black card, as in the pin). |
| readonly | boolean | Pages turn from code only. |
| sound | boolean | Synthesised, no audio file: a flick as a card leaves its stack, a slap as it lands. Only after a page is turned. |
| label | text | Accessible name |
Methods
- pages
- page
- update
- turn
- goTo
- destroy
How it works
Original, after the owner's pin. CSS 3D for the cards, one small loop while a card moves; the outline is an SVG path computed in px on resize.