A page that takes its time.

Five plants, five depths.

Each hero plant is an inline SVG made from loose stem and leaf paths. The SVGs are intentionally independent: their individual drift runs inside a parent layer, while the parent is translated by real pointer and scroll values. The far yarrow barely moves; the front sage responds nearly six times as much.

The second botanical gesture is a field-study SVG. Every visible stroke begins with its dash offset equal to its dash length. Once its section is genuinely in view, an IntersectionObserver adds one class: stem first, then divisions, then flowers over a patient 2.45-second sequence. A no-script rule and an observer fallback leave the finished drawing visible if the enhancement cannot run.

For the final pass, the shelf became a handling desk rather than a list to skim. Each native button opens one changing accession note and makes its own pressed-ink imprint appear. Selecting the same label again — or returning the note — restores the intentionally quiet unopened state.

Drawing reveal — exact CSS from the site

.draw-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  transition: stroke-dashoffset 2.45s var(--ease-patient);
}
.draw-line:nth-child(1) { --draw-delay: 0s; }
.draw-line:nth-child(2), .draw-line:nth-child(3) { --draw-delay: .2s; }
.draw-line:nth-child(n + 7) { --draw-delay: 1.12s; }
.line-study.is-drawn .draw-line {
  stroke-dashoffset: 0;
  transition-delay: var(--draw-delay, 0s);
}

Observer — exact JavaScript from the site

const revealStudy = () => lineStudy.classList.add("is-drawn");
if ("IntersectionObserver" in window) {
  const studyObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        revealStudy();
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: .12 });
  studyObserver.observe(lineStudy);
} else {
  revealStudy();
}

Handling desk state — exact JavaScript from the site

function paintReading(key) {
  const isOpen = Boolean(key);
  const reading = isOpen ? specimenNotes[key] : emptyReading;
  openSpecimen = isOpen ? key : null;
  specimenDesk.classList.toggle("is-active", isOpen);
  deskTitle.textContent = reading.title;
  deskCopy.textContent = reading.copy;
  deskClear.disabled = !isOpen;
  imprints.forEach((imprint) =>
    imprint.classList.toggle("is-current", imprint.dataset.imprint === openSpecimen)
  );
}

The reduced-motion media query makes the complete drawing visible immediately and clears parallax transforms. The hero observer also pauses the SVG drift and pointer work as soon as the hero is off-screen or the tab is hidden.