Making Kanazawa Wave Press — the printed tide

概念

The concept

Kanazawa Wave Press is an invented fifth-generation studio with a stubbornly physical point of view: wood has grain, washi has drag, and a print takes the temperament of the person holding the baren. The design borrows the uneven calm of a proof sheet rather than the polish of a gallery wall.

The big indigo rectangle deliberately sits a little askew. Its thin border, paper flecks, seal, shadows, and four red registration crosses make the page feel like something still on the printer’s table. Vertical Japanese labels give the prose an axis without turning it into ornament.

波の仕組み

A wave that answers scroll.

The lead image is an inline SVG, not an image file. It includes a complete first-draw wave, so the proof is recognisable even before JavaScript runs. On every animation frame, the page calculates a crest position, hook, and floor from the scroll progress plus a slow sine roll. It writes those values into nine real SVG path elements: the deep mass, the curled inner water, foam fingers, and a grain line. The paths swell together, then settle with a soft catch-up so the result feels pressed and released rather than mechanically scrubbed.

01 · ScrollScroll distance becomes a 0–1 tide target.

02 · RollSine motion offsets the crest even when the page is still.

03 · InkNine independent SVG paths redraw the proof.

function frame(now) {
  current += (target - current) * .065;
  const roll = current * 7.2 + now / 2450;
  const swell = .22 + Math.sin(current * Math.PI) * .76
    + Math.sin(roll * .75) * .06;
  draw(Math.max(.12, swell), roll);
  if (!reduced.matches) raf = requestAnimationFrame(frame);
}

paths.main.setAttribute('d', `M-30 810 L-30 ${floor + 45}
  C74 ${floor - 74} 170 ${floor + 7} 265 ${floor - 73}
  C349 ${floor - 143} 359 ${floor - 221} 417 ${floor - 289}
  C465 ${floor - 347} ${crestX - 31} ${crestY + 116}
  ${crestX} ${crestY} ... L990 810Z`);

The opening of the same SVG-path code used in index.html. The full path also drives the foam and shoreline.

色と文字

Ink, paper, type.

The four colours are named as materials, not abstract brand tokens. Indigo carries the large planes; vermilion is reserved for seals, registration, and a few precise cuts of attention. Cormorant Garamond supplies the soft, editorial English voice; Noto Serif JP holds the upright, vertical labels.

Indigo
#22346B

Vermilion
#D64B36

Washi
#EFE6D2

Sumi black
#1C1A17

The tide, held in paper.

Cormorant Garamond, Georgia, serif

木版画工房
金沢

Noto Serif JP, Hiragino Mincho ProN, serif

三回の摺り

Three passes at the baren.

Pass 1 — correctness

Hardened the SVG wave setup: it now checks that its SVG paths exist, has an IntersectionObserver fallback, and supports both current and older MediaQueryList change listeners.
Paused the wave frame loop and the scroll cue together when the proof leaves view, the tab is hidden, or reduced motion is requested. The illustration remains as a static, visible SVG in reduced-motion mode; it uses no canvas, so there is no device-pixel-ratio buffer to cap.
Made interactive links at least 44px tall, added wrapping safeguards for the narrow header and footer, and gave the angled proof extra mobile breathing room so its shadow is not clipped.
Changed low-contrast vermilion heading text to the darker vermilion ink, put the proof caption on an opaque indigo label, and hid the decorative red circle below 1100px so it could not sit behind body text.
Replaced the reserved .example appointment address with a studio address and added list semantics to the palette.

Pass 2 — design depth

The proof sheet was too safely contained. A full vermilion underprint now slips out beneath the angled hero proof, giving the registration language a physical second pull. The wave gained a ninth animated spray path, so the curl has a more convincing trailing edge.
The editions read as four equal catalogue tiles. The lead print now spans two columns, carries a larger drawing and title, and the alternating cards drop into the next beat. The section heading lets the edition number overwhelm “impressions,” making the count feel stamped rather than merely labelled.
The page kept returning to the same heading scale and vertical pause. A compact spacing scale now drives the major beats, the studio statement takes a deliberately larger, fixed line break, and the final invitation gets a solid vermilion colour-proof panel at wide sizes instead of a timid decorative circle.

Pass 3 — complexify

The wave had the first interaction all to itself. The new below-fold bench proof gives the visitor a second, slower discovery: a range control transfers the key line, indigo water, then vermilion seal as the baren pressure rises. At full pressure the three layers settle at the registration corners.
The control needed a believable resting state. At zero, the paper stays visibly aligned with only a faint ghost of the blocks; the reset button is unavailable and the status says exactly what has not happened. The same control works by keyboard, reports only meaningful stage changes, and returns focus to the slider after lifting the baren.
Pressure should leave a material trace. The proof layers are offset while they are barely transferred, then converge as pressure increases. A small SVG fibre displacement filter adds a restrained ink bleed at the point of contact. The markup begins in that same unprinted state, so there is no delayed reveal when the script attaches; reduced-motion users still get the interaction, without the settling transitions.

Pullingthe tideby hand.