how this site was built.
we made the site the way we'd make anything for you: in the open, in small steps, with the decisions written down.
step 1: references
we started from a handful of sites the founder likes. for each one we noted what it does well and what we'd avoid. we didn't copy any of them.
step 2: direction
one idea: the home is a single sentence in four fragments, one per screen. the dots of the «i» in our logo show where you are. paper, ink and one red.
step 3: motion studies
before building, we tested each gesture on its own: the sentence appearing, the dots filling, the page transition, hover and focus, the 3d «i». short, never in your way, and still when you ask your device for less motion.
step 4: stack
plain html and css, made with eleventy. no animation library, no bundler. fonts are geist and geist mono, open licence, served from the site itself.
step 5: building, locally first
we built it on one computer before anything went online. at each checkpoint we wrote down what was done, what changed, what was missing and what blocked us.
what we kept to
- no requests to other companies' servers
- the sentence reads whole even without motion
follow the process
we show the work as it goes on instagram.