Ashish Pitrodafield notes
Back to the journal

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

No framework, no animation library, nothing to install.

The bird
53.7 KB

One canvas, drawn from ellipses and a few lines.

All scripts
102.7 KB

8 hand-written files, unminified.

Stylesheet
82.3 KB

One file. The paper, the ink, every layout.

Pages
32

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

Upright and friendly, for every big heading.

Card headings
Fraunces

Soft, old-style italics for the smaller headings.

Text
Source Serif 4

A reading face. This is a document first.

Notes
Caveat

The red-pencil annotations in the margins.

Paper
#E8DAC0 #1C1F22

Sepia archive by day, Night journal by night. Never pure white, never pure black.

Ink
#2B1F16 #ECE6D8

Brown-black on the paper; warm chalk on the dark.

Red pencil
#7A2A28 #E3A23B

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.

Write to me or go back to the journal