A wordmark that plays along

Every page on the site ends the same way: the wordmark BOTHMADE sitting in the footer, half rendered as a sky-blue wireframe outline, half as a solid violet gradient — split exactly down the middle, BOTH from the web world and MADE from the native one. It would be a fine static logo left alone. Instead every single letter is listening for your cursor, and touching one flips it to the opposite treatment for a little over a second before it settles back.

Nobodyistoldtotouchit.Thelettersjusthappentoreact,andthat'swhatmakespeoplekeeptryingmoreofthem.

Under the hood it's one boolean per letter and a Map of timeouts, nothing more exotic than that. Hovering a letter flips its boolean to true and starts a 1200ms timer; hovering it again before the timer fires clears the old timeout and starts a fresh one, so quickly re-triggering a letter never causes it to flicker back early. When the timer finally fires, that one letter's boolean flips back to false — every letter's state and timer are independent, so you can have three letters mid-flip at once with no coordination between them.

typescript
const toggle = (i: number) => {
  setFlipped((prev) => prev.map((v, j) => (j === i ? true : v)));
  clearTimeout(timers.current.get(i));
  timers.current.set(i, setTimeout(() => {
    setFlipped((prev) => prev.map((v, j) => (j === i ? false : v)));
  }, 1200));
};

The animated version is marked aria-hidden="true" in the real footer. That's deliberate, not an oversight: a screen reader has no use for eight independently time-bombed spans, and forcing one to track which letters are "currently flipped" would be actively hostile. The actual accessible brand name sits right above it as a plain heading — "bothmade," rendered once, in ordinary text. The playful version is a bonus for people who can see it drag their cursor across; it was never meant to carry the only copy of the name.