# 輪郭から塗りへ — Style Reference
> 生成りの紙に、見出しが線で描かれてから塗られる。

**Theme:** light  **Series:** PARTS 016  **World:** 出版社の章タイトル。製版の途中。

## Concept
スクロールの前半で文字の輪郭が走り、後半で墨が字の下から上へ満ちる。文字は SVG の `<text>` のままで、パスに変換しない。止めていると自動で往復し、スクロールすると位置に従う。

## Signature Technique
- SVG `<text>` に `stroke-dasharray: 1600; stroke-dashoffset: var(--dash)`、`fill: url(#inkRise)`、`paint-order: stroke fill`。
- `#inkRise` は下から上へ向かう `linearGradient`(objectBoundingBox、y1=1 → y2=0)。3つの stop はすべて墨 #1E1A17 で、不透明度だけ 1 → 0.55 → 0 と変える。水面の高さ `g = −0.06 + fill·1.12` に対し、offset を `g`、`g+0.012`、`g+0.05` に置く。水面が2段の勾配で少しにじみ、紙に墨が染みる見え方になる。
- progress p(0〜1)から: `draw = min(1, p/0.6)` → `--dash = 1600*(1-draw)`。`fill = clamp((p-0.55)/0.4)` を smoothstep → 水面の高さ。線幅は `--sw = 1.6 + 1.2*(1-fill)` で、塗られるにつれ細くなる。
- 文字ごとの輪郭長は違うので、dasharray 1600 は 200px の明朝 4 字で「ほぼ 1 周」になる値。字数や字体を変えたら値を調整する。
- p の決め方: スクロール中(最後のスクロールから 2.5 秒以内)は `scrollY / (track高 - 画面高)`。それ以外は経過時間から直接決める: `p = tri(0.62 + 0.04·t)`(-0.12〜1.12 の三角波)。フレーム数を積算しないので、端末やフレームの間引きが違っても読み込み3秒後(スクリプト開始からは約3.2秒)は p≈0.75〜0.77 になり、上半分が輪郭、下半分が墨の状態が写る(デスクトップとスマホで同じ)。スクロールをやめると、その位置から同じ速さで再開する。
- `prefers-reduced-motion`: p = 0.5 の静止画。スクロールだけで更新。
- CSS の初期値 `--dash: 900`、`--sw: 2.4` は JS が動く前の見え方。`stroke-linejoin / linecap: round`。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --canvas | #FFF3E7 | 紙地 |
| --ink | #1E1A17 | 文字の線と塗り |
| --mute | #8A7F75 | ラベル、注釈 |
| --leaf | #5FA873 | 進捗バー |
| --line | rgba(30,26,23,.16) | 罫線 |

## Typography
- 見出し: Shippori Mincho 700、SVG 内 200px(viewBox 1100×260、画面幅に合わせて縮尺)、字間 .04em。スマホは 230px。
- 本文: h1 は Zen Kaku Gothic New 500 `clamp(17px,1.5vw,21px)`、line-height 1.6。p は 400 `clamp(13px,1.05vw,15px)`。中央揃え、最大幅 32em。
- ラベル・計測: JetBrains Mono 12px(タグ 11px)、字間 .04〜.06em、数値は tabular-nums。

## Spacing & Layout
- `.track` 320svh の中に `position: sticky; top: 0` の全画面ステージ。
- 余白 `clamp(20px,3vw,40px) clamp(20px,5vw,72px)`。見出しと短文の間隔 `clamp(18px,2.6vw,34px)`。
- 見出し幅 `min(92vw, 1100px)`。下に罫線。左に進捗で右にタグ。
- breakpoint 640px: 左右 18px、ヘッダー右を消し、フッターを縦積み、SVG 内の字を 230px に上げる。

## Motion
- rAF 1 本(常時)。自動往復は毎秒 0.04、-0.12〜1.12 の三角波で片道約 31 秒。端の 0.12 ぶんは p を 0/1 に丸めるので、白紙と塗り終わりで少し止まる。
- スクロールは即時反映。スクロールをやめて 2.5 秒で自動に戻る。
- reduced-motion では自動往復なし。

## Components
- stage: SVG 見出し + h1 + 一文。
- footer: 左に progress 値と 120px の進捗バー、右に `VALE / PARTS 016 / 輪郭から塗りへ` と操作説明 1 行。

## Do / Don't
Do
- 線は細く、塗りは下から上へ。前半 60% を線に使う。
- 紙は温かい白、文字は墨 1 色。
- 見出しは 1 行 4〜6 字。
Don't
- パスに変換しない。テキストのまま使う。
- 線と塗りを同時に動かさない。順番が意味。
- 墨以外の色を勾配に混ぜない。勾配は墨1色の不透明度だけで作る。

## References
- Craft Docs: 温かい紙色の地に、締まったセリフの大見出しと機能的なサンセリフを組む対比を抽象化した。パステルの小物は進捗バーの緑 1 本に絞った。
- Dub Links: 余白の多い単色の面に、1 色のアクセントで動きを示す配分を抽象化した。橙は緑に、ピルは使わなかった。

## Usage
1. `<svg class="word" viewBox="0 0 W H"><text …>見出し</text></svg>` を置き、CSS の `svg.word text` をコピーする。
2. `stroke-dasharray` と JS の `DASH` を同じ値にし、文字の輪郭長に合わせて決める(目安: フォントサイズ × 8。200px で 1600)。
3. `<script>` の IIFE をコピーする。スクロール距離は `#track`(320svh)の高さで決まる。進捗の表示 `#bar` `#mP` を置かない場合は `apply` の最後の1行を消す。別の進捗源(IntersectionObserver、時間)を使うなら、`frame` の中で `apply(p)` に渡す値を差し替える。
4. `<defs>` の `#inkRise` と stop の id(`s0 s1 s2`)を一緒に移す。
5. パラメータ: 線の区間 `0.6`、塗りの開始 `0.55`、水面のにじみ幅 `0.012 / 0.05`、自動の開始値 `0.62`、自動往復の速さ `0.04`、スクロール優先の猶予 `2500ms`。