# 経路に沿う文字 — Style Reference > 白い展示室の案内文字が、曲線の上を走る。 **Theme:** light **Series:** PARTS 018 **World:** 美術館の順路案内。 ## Concept 画面を横切る S 字の曲線の上を、順路の文字列が流れる。スクロールした量だけ進み、止めていると一定の速さで流れ続ける。文字列は 2 回繰り返してあり、半分ずらすと継ぎ目なく回る。 ## Signature Technique - SVG ``、`` を文字の下を走る実線のレールに(幅 1.5、#CDB6A2、文字の足元から 12 単位下げて和文の字面と重ねない)、`` に本文。 - `viewBox 0 0 1400 700`、`preserveAspectRatio="xMidYMid slice"` で画面を覆う。パスは両端を画面外まで伸ばす。SVG はステージの左右の余白ぶん外へ広げて画面の端まで届かせ、`mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent)`(`-webkit-mask-image` 側は 9% / 91%)で両端を消す。文字は切れずに霞んで出入りする。 - `startOffset` は負の値で、`off % (textLen/2)` に正規化して継ぎ目を消す。`textLen` は `getComputedTextLength()`(`document.fonts.ready` 後に再計測。経路長より短く測れたら経路長×2 を使う)。 - スクロール: 進捗 p の差分 × 半周の長さ × 2.2 だけ進む。自動: 毎秒 70px。最後のスクロールから 1.8 秒で自動に戻る。初期値は半周の 45%。 - 欧文は大文字 Inter 600 字間 .06em、日本語は Zen Kaku Gothic New 500 字間 .14em。区切りの矢印は `` で青 #0A66C2、Inter 400。順路の向きを示す色はこの矢印だけ。曲率がきついと日本語が重なるので、S 字の制御点は緩くしてある。 - `prefers-reduced-motion`: 自動で流れない。スクロールだけで進む。 ## Color Palette | Token | HEX | Role | |---|---|---| | --fog | #F5F5F7 | 地 | | --ink | #1D1D1F | 文字 | | --mute | #707070 | ラベル、注釈 | | rail | #CDB6A2 | 経路のレール(実線) | | --sand | #E0CCBB | 予備(今は未使用。レールを淡くするときの候補) | | --blue | #0A66C2 | 経路上の矢印、計測値 | | --line | rgba(29,29,31,.14) | 罫線 | ## Typography - 経路上: Inter 600 46px(SVG 単位)大文字、字間 .06em / Zen Kaku Gothic New 500 字間 .14em / 矢印は Inter 400。640px 以下は 40px。 - 本文: h1 は Zen Kaku Gothic New 500 `clamp(17px,1.5vw,21px)`、p は 400 `clamp(13px,1.05vw,15px)`。中央揃え、最大幅 30em。p は2文を `inline-block` の span に分け、文の途中で折り返さない。 - ラベル・計測: JetBrains Mono 12px(タグ 11px)、数値は tabular-nums。 ## Spacing & Layout - `.track` 300svh の中に sticky の全画面ステージ。経路は絶対配置で画面全体、説明文はステージ下部。 - 余白 `clamp(20px,3vw,40px) clamp(20px,5vw,72px)`。SVG は左右へ同じ `clamp(20px,5vw,72px)` だけはみ出させる。 - 下に罫線、左に offset の実測、右にタグ。 - breakpoint 640px: 左右 18px、ヘッダー右を消し、フッターを縦積み。 ## Motion - rAF 1 本(常時)。自動 70px/秒、dt は 0〜0.05 秒に丸める。スクロールは即時。 - 経路は固定。文字だけが動く。 - reduced-motion では自動停止。 ## Components - stage: SVG 経路 + 経路上の文字 + h1 + 一文。 - footer: 左に `offset / 経路長`、右に `VALE / PARTS 018 / 経路に沿う文字` と説明 1 行。 ## Do / Don't Do - 文字列を 2 回以上繰り返し、半周でループさせる。 - 曲率は緩く。日本語を乗せるなら特に。 - 経路のレールは細い実線 1 本。文字の足元より少し下に置く。 Don't - 経路に塗りや影を足さない。両端を消す mask だけにする。 - 文字を小さくしすぎない(画面幅の 3% 以上)。 - 複数の経路を重ねない。 ## References - Apple (España): 白い展示室で製品だけを置き、文字は中央揃えで静かに、という構成を抽象化した。青は経路上の矢印と計測値に限った。 - Exo Ape: 温かい中間色のヘアラインと、巨大な欧文グロテスクの見出しを抽象化した。砂色は経路の細い実線に、巨大な欧文は経路上の大文字にした。 ## Usage 1. `