The Living Page

A living travel diary. Not an interactive travel blog.

Don't decorate the writing. Animate the meaning.

The reader should not feel like they are scrolling a website with animations added to it. They should feel like they are moving through a memory.

---

Run it

npm install
npm run dev      # http://localhost:3000

• / — the archive. Stories are doorways, not article cards.
• /stories/gokarna — the reference story, annotated end to end.
• /studio — paste a raw draft, get a first pass, copy out the MDX.

---

The unit is the line, not the paragraph

Never:

paragraph → paragraph → paragraph → image

Always:

line → voice → body → gesture → pause → line

Every beat is one thing said, in one voice, occupying space in one way, optionally answered by one doodle in the margin.

---

Writing a story

A story is an .mdx file in content/stories/. There is no registry — the directory is the registry, and the filename is the slug. Write the file and it is on the site.

A bare paragraph is already a beat in the SPEAK voice. That is the single most important thing about this setup: prose reads as prose in the source file, and only the lines that need a different voice get wrapped. The 70/20/10 ratio is therefore the default rather than a discipline.

---
place: "GOKARNA"
date: "14.03.2026"
fragment: "The night bus, and the ten minutes after I got down."
accent: "#2B3ED0"
---

<Scene id="the-sea">

The sea arrives before I see it.

<Shout>Salt first.</Shout>

<Speak doodle="bus" side="right" gesture="escape">
  I get down. The bus goes on without me, red lights going small.
</Speak>

<Hold beats={2} />

</Scene>

Write the piece first, with no design in your head at all. Then annotate the beats that earn it. Then delete half of those.

---

The vocabulary

Four independent axes, defined in lib/vocabulary.ts. Add to them only when a story genuinely cannot be told with what is here — the constraint is what makes the site read as one medium instead of a pile of effects.

VOICE — how the writing sounds

	for	looks like
Speak	narration, transitions, most of everything	body serif, grounded, no movement
Whisper	intimacy, vulnerability, the observation you'd lower your voice for	small, soft, a lot of air
Shout	the turn, the revelation, the joke	display serif at scale, overshoots on arrival
Thought	what you didn't say out loud	handwritten, loose baseline
Drift	dreams, water, disorientation, time behaving strangely	words separated and nudged off the line
Echo	the phrase that will not leave	repeats, shrinking and fading until gone
Listen	the last line, or the one before the silence	nearly empty screen, one line
Ledger	a time, a fare, a distance, a date — the factual aside	mono, tracked, in the accent, ruled down its left side

Shout, Echo and Listen stop working if you use them twice in a page.

BODY — how the type occupies space

tiny · normal · oversized · scattered · offset · handwritten · compressed · centered · edge · floating

Each voice has a body it wants; pass body= only to argue with it.

GESTURE — what the doodle does

follow · underline · react · become · escape · collide · loop · scribble · reveal · trace · breathe

The doodle is a second narrator. It can answer the line, contradict it, or get ahead of it — a <Margin> beat with no words is how the reader sees something before the sentence admits it.

<Margin doodle="road" becomes="palm" gesture="become" side="left" />

MOVE — what scrolling does

enter · grow · move · transform · disappear · hold

hold is the important one. Some scrolls should produce nothing.

---

PAUSE

<Hold beats={3} /> is a deliberate silence — roughly beats × 22vh of nothing. A blank line in the studio becomes one automatically.

Silence is an element, not leftover space. A story with no pauses has no pacing, and the studio will say so.

---

The living margin

The writing takes about 60% of the frame; the rest is stage. Doodles live in components/doodles/registry.ts as a handful of points in a 100×100 box. The renderer jitters them per instance and smooths them into a stroke, so no two are drawn the same way twice — the imperfection is generated, not faked.

To add one, add points. Resist building a set.

---

The veil

What is ahead of the reader sits blurred at its real size in its real place: you see the shape and weight of what's coming but can't read it. It resolves on arrival and never veils again, so you can always look back. A story can opt out with veil: false in its meta.

The class is applied by script, so a page with JS disabled still reads in full and nothing is ever parked at opacity: 0 waiting on an observer.

---

Animation ratio

Roughly:

• 70% ordinary sentences
• 20% a different typographic voice
• 10% a full interaction

A 500-word story might hold five to eight genuinely animated moments. They work as emotional punctuation; more than that and they stop being punctuation and start being wallpaper.

lib/annotate.ts enforces this: when a draft pulls more voices than the budget allows, the least confident of them are demoted back to Speak. The engine loses its favourites first.

---

The quality bar

Before a story is finished:

• Does it sound like a person telling me something?
• Does the typography change because the emotional voice changes?
• Does every animation have a storytelling reason? If you removed it, would the story lose something? If not, remove it.
• Does the doodle add a second layer, or is it decorating?
• Are there moments of silence?
• Is there one moment where the page does something unexpected?
• Are there enough static moments for the moving ones to matter?
• Could you recognise this as the same site without the logo?

/studio checks the mechanical half of that list. The rest is yours.

---

Structure

app/
  page.tsx                 the archive
  stories/[slug]/page.tsx  frontispiece + the story + colophon
  studio/page.tsx          the first-pass workbench
  globals.css              voices, bodies, choreography, the veil
components/
  living/                  Beat, voices, Scene, Hold, Margin, Marks, StoryFrame
  doodles/                 the registry and the renderer
content/stories/           the writing
lib/
  vocabulary.ts            the four axes, typed
  annotate.ts              the first pass, the ratio guard, the quality bar
mdx-components.tsx         why a bare paragraph is already a beat

---

North star

Someone handed me their travel journal. Except the ink moves. The margins have a life of their own. And sometimes the page remembers things before I do.