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

Object · With a Pass · https://tactileui.dev/objects/notebook

> The code and styling for this object 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

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

## States

1. **Open**: Two halves of one page either side of the rings: the upper card's back, the lower card's front; nothing runs.
2. **Lifting**: Drag 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.
3. **Let go**: Short of upright it falls back; past it, it falls over onto the flipped pile and slaps down with a small bounce.
4. **A tap or a key**: A push that carries the card over in about half a second; the upper card turns the page back the same way.
5. **At an end**: The first page cannot go back and the last cannot go on; those buttons are disabled.
6. **Keyboard**: Arrows and Page keys turn pages, Home and End go to the ends; the page turned to is announced.
7. **Aluminium**: Grey bookcloth, warm white card, steel rings.
8. **Graphite**: Black leather, black card with light print, dark rings, as in the pin.
9. **Read-only**: Pages turn from code only.
10. **Off screen**: A turning card lands where it was going.
11. **Reduced motion**: Pages turn at once.

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