Colophon how this is made
How this notebook is made
No framework, no animation library, nothing to install. The paper, the ink and the bird are written by hand, in a handful of files you could read in an afternoon. What follows is how — and what it costs.
- Dependencies
- 0
- The bird
- 53.7 KB
- All scripts
- 102.7 KB
- Stylesheet
- 82.3 KB
- Pages
- 32
No framework, no animation library, nothing to install.
One canvas, drawn from ellipses and a few lines.
8 hand-written files, unminified.
One file. The paper, the ink, every layout.
Plain HTML. Every one opens straight from disk.
I
The bird, observed
live — it changes as you watch
A pied wagtail, drawn on a single canvas from a handful of ellipses and lines. It only ever stands on real lines on the page — section rules, the edges of cards, the underline beneath a heading — and it re-reads where those lines are as the page moves.
From there it does what the bird does. It pumps its tail in bursts. It watches your cursor, and hops along its line towards it — but stops short. Lunge at it and it flies. Scroll and it follows you, landing on whatever line is nearest. Leave it alone and it potters about, pecks and turns round. Click right beside it and it calls.
It has a home, too: the cage hanging in the top corner of the page. When there is nowhere left to stand it flies in there rather than off the screen, and lets itself out when a line comes back into view. Click the cage to call it home; click again to let it out.
Under the cage is a packet of seeds. Click it and four to six seeds land on a line near the bird. It goes straight to them and eats them one by one, bowing down to peck, and is too busy to mind your cursor until they are gone.
Then it sings. Its head goes up, its beak opens on every note and notes drift off into the margin — out loud too, if the song switch under the packet is on. The song is different every time and is made in the browser as it plays; there is no sound file.
The card beside this is reading the bird as it goes. Move your cursor towards it and watch the numbers change.
Field log this visit
- Doing
- —
- Standing on
- —
- Flights
- 0
- Hops
- 0
- Tail wags
- 0
- Seeds eaten
- 0
- Songs
- 0
it may well land on this card
II
The rules it keeps
so it charms rather than annoys
Only real lines
Anything marked data-perch offers its edge as somewhere to stand. It never lands on a card that has not appeared yet.
Never in the way
The canvas ignores the pointer completely, so the bird can stand on the edge of a button and the button still works. Nothing on the page waits for it.
Still, when asked
With reduced motion switched on, it stands quietly on a line near the middle of the screen and reappears there as you scroll. No flight, no hopping, no tail.
III
Set in
four faces, by day and by night
- Titles
- Young Serif
- Card headings
- Fraunces
- Text
- Source Serif 4
- Notes
- Caveat
- Paper
- #E8DAC0 #1C1F22
- Ink
- #2B1F16 #ECE6D8
- Red pencil
- #7A2A28 #E3A23B
Upright and friendly, for every big heading.
Soft, old-style italics for the smaller headings.
A reading face. This is a document first.
The red-pencil annotations in the margins.
Sepia archive by day, Night journal by night. Never pure white, never pure black.
Brown-black on the paper; warm chalk on the dark.
Annotations and the margin line — oxblood by day, amber by night.
Send a note
If you read a colophon to the end, we will probably get on. Tell me what you are working on.