NAKAYA

COLOPHON · 六花

How the loom
was woven.

A working snowflake loom: a real hexagonal cellular automaton, grown into six-fold symmetry under a diagram you can drag.

Generative Assets · No. 72 Canvas 2D · Inline SVG Cormorant / Inter
The concept

A fingerprint of the air.

NAKAYA is a fictional crystallography studio named for Ukichiro Nakaya, the physicist who first grew snow crystals in the lab and mapped their shape to temperature and humidity. The page has one job: let a curious visitor set the weather and watch ice answer — dialling a point on Nakaya's diagram and growing a six-fold crystal that has never existed before and, once the dial moves, never will again.

Everything else is deliberately quiet so the crystal is the only thing you describe to a friend.

The palette

Night sky, and the light held inside ice.

Sky
#0E1A2A
The cold-room dark. A deep, slightly warm navy so ice reads blue-white against it, not clinical black.
Ice
#CFE6F2
The signature. Reserved for the crystal, marks, the loom point and rules — never small body text over texture.
Deep
#24405C
Panel glass and the dense core of a crystal, where growth is oldest and light pools.
Snow
#F2F8FB
Headings and dendrite tips — the brightest white, saved for the fresh, hungry edge of the ice.

Body copy runs on a dedicated frost ink (a desaturated ice at 74% over the sky, ~8:1 contrast) so no small text ever leans on the bright accent — the repeated legibility trap of earlier waves.

The type

A serif that behaves like ice.

Cormorant
Display · weights 300–500, italic

High-contrast, needle-thin at display sizes — the stroke modulation mirrors a crystal's thin arms and solid core. Set enormous for the hero ("A snowflake loom.") and italic for the pull-quotes; the typographic bravery is trusting one hairline serif to carry the whole voice.

Inter — the instrument panel
UI · 400–600, wide tracking on labels

Everything operational — axis ticks, readouts, eyebrows, buttons — is Inter with generous letter-spacing, so the controls read as a calm laboratory instrument beside the ornate serif.

The signature

Real crystal growth, folded six ways.

The crystal is a genuine Reiter cellular automaton on a hexagonal lattice. Every cell holds an amount of water vapour; a single frozen seed sits at the centre. Each step splits the field into a diffusing part and a frozen part, spreads vapour across the six neighbours, feeds a constant to every cell touching ice, and recombines — a cell that crosses 1.0 freezes for good.

Temperature and vapour, read from the Nakaya diagram, set the model's three constants — diffusion α, ambient β, addition γ — and that is what tips the growth between plates, needles, sector plates and full dendrites. Six-fold symmetry is never drawn: only a single 30° wedge of the lattice is read, and each frozen cell is stamped twelve times — six rotations, each mirrored — so the figure carries the crystal's true D₆ symmetry. Because the seed and a faint vapour-noise field are deterministic per specimen id, the same dial and the same seed always weave the same flake; move either, and the sky forgets it forever.

Techniques: Canvas 2D (incremental hexagon accretion on a persistent buffer + a second ambient-mote layer), inline SVG for the draggable Nakaya diagram and the crosshair reticle, CSS gradients for the sky and stage glow. No image assets, no external libraries.

The three passes

What changed, in order.

Pass 1

Craft

  • The loom point rendered at the diagram's origin (0,0) on load — placePuck() ran only on interaction, so the reticle floated in the corner. Now placed at boot and after every resize.
  • The crystal was step-limited: dendrites reached barely a third of the frame, leaving the stage under-filled. Raised the growth budget to 11× the grid radius and set the fit scale to 0.47, so every habit settles to ~0.8 of the frame.
  • Tightened the readout scale to Cormorant tabular numerals, aligned the diagram axes and zone labels, and unified every hairline onto one token.
Pass 2

Depth

  • Second-read detail: every crystal you grow now drops a faint dot on the diagram at its conditions — a fading constellation of the last ten looms you tried. You only notice it on the second or third grow.
  • Micro-interaction: the loom-point ring swells and brightens on hover and while dragging, so the target feels physical.
  • A single glow breathes behind the stage as each new seed begins, tying the diagram gesture to the growth reveal (~3 seconds at 8 automaton steps per frame).
Pass 3

Hardening

  • 375px: confirmed the wordmark, nav, panel and stage sit fully inside the viewport — not merely that the page doesn't scroll sideways.
  • Reduced motion: the automaton runs to completion in one synchronous pass and paints a single settled crystal; motes and the glow-pulse are suppressed.
  • Focus & keys: the diagram exposes a role="slider" target — arrow keys walk temperature and vapour, Enter grows — and every control shows the ice focus ring.
  • DPR capped at 2; canvas re-fits and re-weaves on resize; the render loop parks on document.hidden and the simulation halts once the crystal settles.
  • Chanel rule: removed the ambient motes' random horizontal wander — snow now settles vertically with a slow sway instead of swirling.