Ring-bound Notebook

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.

Copy the notebook folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="notebook/notebook.css">
<div id="notebook" style="width: min(90vw, 440px)"></div>

<script type="module">
  import Notebook from './notebook/notebook.mjs';

  const notebook = new Notebook(document.getElementById('notebook'), {
    preset: 'changelog',
    page: 0,
    finish: 'auto',
  });

  // notebook.update({ … });   change any option in place
  // notebook.destroy();        and take it away again
</script>

new Notebook(element, options)

Builds it inside the element with these options.

pages

page

update(opts = {})

Change options in place.

turn(dir = 1)

Turn to the next page (a push that carries the card over the rings) or back.

goTo(page)

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change, input.

1. OpenTwo halves of one page either side of the rings: the upper card's back, the lower card's front; nothing runs.
2. 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.
3. Let goShort 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 keyA push that carries the card over in about half a second; the upper card turns the page back the same way.
5. At an endThe first page cannot go back and the last cannot go on; those buttons are disabled.
6. KeyboardArrows and Page keys turn pages, Home and End go to the ends; the page turned to is announced.
7. AluminiumGrey bookcloth, warm white card, steel rings.
8. GraphiteBlack leather, black card with light print, dark rings, as in the pin.
9. Read-onlyPages turn from code only.
10. Off screenA turning card lands where it was going.
11. Reduced motionPages turn at once.

Made of: Two sided card pages, Finger held hinge, Gravity decides, Css 3d hinge, Computed clip outline, Lamp shaded faces, Sleeping loop.

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.