# 線が描かれる — Style Reference
> 麻色の紙に、鉢から茎、葉へと一本の線がスクロールで描かれる
**Theme:** light **Series:** PARTS 069 **World:** 架空の園芸レター「Greenhouse Letter」。植物の育て方を 5 段階で。
## Concept
スクロール演出。固定した区画の左に線画(鉢・茎・葉 5 枚・先端の芽)、右に 5 つの手順。下へ送ると、ペンが一定速度で動くように線が伸び、鉢→茎→葉の順に完成する。葉は輪郭が閉じた瞬間に淡い若草色で塗られ、対応する手順の文字が墨色に変わる。上へ戻すと線は消える。
読み込み時は進行度 42%(茎が伸び、1 枚目の葉が塗られたところ)から始まる。
## Signature Technique
- SVG(viewBox 400×600)の線の `path` 8 本。鉢、茎、葉 5 枚(輪郭 + 葉脈を 1 path に)、先端の芽。葉の塗りは別に 5 本。
- 読み込み時に `getTotalLength()` で各 path の長さを測り、`stroke-dasharray = L L`、`stroke-dashoffset = L` で消す。
- 全長 `total` に対する各 path の割合でタイムラインを分ける(`starts[i] = Σ前の長さ / total`)。一定速度で描かれるので、短い葉脈は速く、長い茎はゆっくり。
- 進行度 `d = min(1, p/.9)`(最後の 10% は休み)。path i は `k = (d - (start - span·OVERLAP)) / (span·(1+OVERLAP))` で `dashoffset = L(1-k)`。OVERLAP .15 で前の線が終わる前に次が始まり、ペンが止まって見えない。
- 葉の塗り(`.leaf-fill`、若草 #dfe8df)は輪郭が完了した時点で `.on`(opacity 0 → 1、.6s)。
- 手順 5 つは `marks = [鉢の終わり, 茎の終わり, 葉 2 枚目の終わり, 葉 4 枚目の終わり, 1]` で `.on`(各値の 0.02 手前から)。下の 1px の進捗線は `d`。
- `prefers-reduced-motion`: 進行度 90% の位置(描き終わり)に置き、スクロールに直結。
```js
const lens=paths.map(p=>p.getTotalLength()), total=lens.reduce((a,b)=>a+b);
paths.forEach((p,i)=>{p.style.strokeDasharray=lens[i]+' '+lens[i];});
const k=Math.min(1,Math.max(0,(d-s)/(e-s))); path.style.strokeDashoffset=lens[i]*(1-k);
```
## Color Palette
| Token | HEX | Role |
|---|---|---|
| --linen | #f6f2ea | 紙 |
| --ink | #1c1a17 | 線、見出し、完了した手順 |
| --slate | #5f5a52 | 本文 |
| --mute | #9a948a | 未完了の手順、ラベル |
| --sage | #8fa892 | 完了した手順の番号、英字ラベル |
| --sage2 | #dfe8df | 葉の塗り |
| --line | #e2dccf | 進捗の下地 |
## Typography
- 見出しの上の英字: Zen Kaku Gothic New 12px、letter-spacing .22em、大文字、若草(--sage)。
- 見出し: Bodoni Moda 400(opsz 可変)、`clamp(34px, 4.6vw, 66px)`(760px 未満 `clamp(28px, 8vw, 36px)`)、line-height 1.08、letter-spacing −.01em、1 語だけイタリック。「鉢から、／一枚ずつ。」の2行で固定(`
` と行ごとの `white-space: nowrap`)。句読点の前で折り返させない。
- 手順: Zen Kaku Gothic New 300 14.5px、line-height 1.7(760px 未満 12.5px / 1.6)。番号は Bodoni Moda 13px、letter-spacing .1em、最小幅 2.2em。
- ヘッダー: Bodoni Moda 600 18px のレター名、右に 12px(letter-spacing .08em)の号数。
- 後続の区画: 見出し Bodoni Moda 400 `clamp(26px, 3.2vw, 44px)`、本文 15px。タグ 11px、letter-spacing .1em。
- 線: stroke 1.6px、丸い端と角。
## Spacing & Layout
- `.space` 380svh、`.pin` 100svh の 2 列グリッド(線画 / 手順)、列間 `clamp(24px, 5vw, 80px)`。
- pin の余白: 上 28px・下 22px(+safe-area)、横 `clamp(20px, 5vw, 72px)`。ヘッダーは上 24px に absolute。
- 線画は幅 `min(100%, 520px)`、縦横 2:3。手順ブロックは最大幅 460px。英字の下 14px、見出しの下 18px、手順の間 10px(番号との間 14px)、進捗線は上 26px。
- 760px 未満: 1 列(上に線画 min(250px, 28svh)、下に手順 12.5px)、列間 6px、上余白 58px。英字の下 8px、見出しの下 12px、手順の間 4px、進捗線の上 14px。下部に固定タグ分の余白 64px を取り、手順と重ならないようにする。タグは左下へ。
## Motion
- スクロール直結。描画は pin 区間の 0〜90%、線の重なり 15%。
- 葉の塗り .6s、手順の色 .4s。
- `prefers-reduced-motion: reduce`: 描き終わった状態で開始。スクロールでは動く(消える)。
## Components
- art: SVG。`#fills`(葉の塗り)を `#strokes`(線)の下に置く。
- steps: 番号 + 1 文 × 5、`.on` で色が変わる。
- progress: 1px の線と進捗バー。
- tag: `VALE / PARTS 069 / 線が描かれる` と操作説明 1 行。
## Do / Don't
- Do: タイムラインは path の長さで分ける。等分だと長い線が速く、短い線が遅く見える。
- Do: 葉の塗りは輪郭が閉じてから。先に塗ると線画でなくなる。
- Do: 線は 1 色・1 太さ。色を変えると図解に見える。
- Don't: path の `d` を JS で書き換えない。dashoffset だけで足りる。
- Don't: 描画を pin の 100% まで使わない。最後に 10% の休みがあると「描き終わった」が見える。
## References
- Evergreen: 「麻色の紙に高コントラストのセリフ見出し、若草色 1 点」という配色と字組みの考え方を借りた。植物の挿絵は線画にし、若草は葉の塗りだけに使った。
- Epidemic Sound: 「編集的な紙面に、強い色の区画を 1 つだけ」という姿勢を借りた。強い色は使わず、完了した手順の番号を若草で示すに留めた。
## Usage
1. HTML: `.space > .pin` に `.art`(SVG)と `.copy`(手順)を置く。SVG の `#strokes` の path を自分の線画に差し替える(描く順に並べる)。塗りが要る形は `#fills` に同じ `d` を置く。
2. CSS: `.art path`(`fill:none; stroke; stroke-width; linecap/linejoin`)と `.leaf-fill` の 2 ルールを移植。
3. JS: `