Colophon

The idea

Chinese handscrolls, Japanese emakimono, Indian pattachitra and Thai temple murals all tell a story as one long picture that you unroll. The home page works the same way. On a wide screen, scrolling down unrolls it sideways, from the present (Taco) back to 2023. On a phone the scroll hangs instead, and reads top to bottom.

Ink

A chapter that has a place keeps a landmark, drawn in ink when it comes into view:

• A sun with Taco, the newest work.
• The Burj Khalifa and a dhow with Emirates NBD, in Dubai.
• A wheat field with Kisaan: kisaan means farmer.
• A lotus, and a mortar and pestle, with Amrutam, an Ayurveda brand.

The red seal is a hanko, the stamp pressed onto finished work. The gold comes from Indian and Thai temple gilding, and the lattice behind Taco from Indian jali screens.

Type and colour

Headings are set in Inter Tight, text in Inter. In light mode the page is washi paper and sumi ink; in dark mode, black lacquer. One red, for the seal. One gold, for rules and numbers.

How the scroll works

The scroll is a sticky frame one screen tall. The page under it is exactly as tall as the scroll is wide, so scrolling down one pixel moves the scroll one pixel to the left. The scroll eases toward that point each frame instead of jumping, and the hills behind it move at about a third of the speed.

Find in page and keyboard focus still work. When the browser slides the frame sideways to reveal something, the site turns that into the matching page scroll.

Every stroke of every landmark has a path length of 1, so one CSS transition draws any of them, whatever its shape:

.ink {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 2.4s;
}
 
[data-inview] .ink {
	stroke-dashoffset: 0;
}

Stack

• Next.js 14 and Tailwind CSS, on Vercel.
• Every page is static HTML, built ahead of time, with under 100 kB of JavaScript.
• Writing is MDX: maths by KaTeX, and code highlighted by Shiki when the site builds.
• No analytics, no cookies, no trackers.

There is also an easter egg. Type "taco".