Build guide · Site 19 of 25

Ink that bleeds into paper that isn't there.

SUMI is one of 25 sites built by Formwork. There is no image of ink here — the black blooms are computed for every pixel, and they follow your cursor like wet pigment.

The idea

Sumi-e is about restraint: one black, a lot of paper. The site keeps almost everything empty and lets a single living ink stain occupy the right side, so the eye rests on the type and the space.

The stack

• Ink a hand-written GLSL fragment shader on raw WebGL — no library.
• Type Shippori Mincho, a serif that sets Latin and 漢字 with equal grace.
• Motion GSAP for scroll reveals; the shader animates on a clock.
• Host static files on GitHub Pages.

Signature technique: ink from noise

Fractal noise (fBm) is sampled, warped by itself, and sampled again — the same trick that makes smoke, but here we threshold it hard. A sharp smoothstep gives the solid body of the stroke; a softer one just below it gives the feathered bleed where ink creeps into the fibres:

float f = fbm(p*1.7 + 1.5*warp + t);
float body    = smoothstep(0.56, 0.80, f + bias + mouseBloom);
float feather = smoothstep(0.44, 0.56, f) * 0.35;   // wet edge
col = mix(paper, sumiBlack, clamp(body + feather*0.5, 0., 1.));

The paper isn't flat either — a faint per-pixel noise adds fibre, and the ink pools toward the right (a positional bias) so the left-hand copy always sits on clean paper.

Details that matter

• Cursor as brush — a bloom term raises the ink threshold near the pointer, so ink gathers where you point.
• 間 (ma) — the composition is mostly empty on purpose; the negative space is the design.
• The seal — a CSS hanko stamp, rotated a few degrees like a real one pressed by hand.
• Reduced motion / no WebGL — a still ink frame, or a soft CSS ink-wash fallback.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-sumi --public --source=. --push
gh api --method POST /repos/OWNER/formwork-sumi/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

One black, a field of noise, and a lot of restraint — ink that behaves like ink, and paper that knows when to stay empty.