# ロゴの変形 — Style Reference
> 白い壁に黒いしるしが一つ。円が四角へ、三角へ、星へ、V へと順に変わって円に戻る。
**Theme:** light **Series:** PARTS 077 **World:** 遷移とローディング。美術館の壁のように何もない白に、形だけが置かれている。
## Concept
ロゴを「形の列」として見せる。5 つの形を同じ頂点数の閉じたパスにそろえ、頂点ごとに補間する。全頂点を同時に動かすと紙を折るような硬い動きになるので、始点から遠い頂点ほど遅れて動かし、形が流れるように変わる。デモは 1.4 秒で変形、1.1 秒休み、円 → 四角 → 三角 → 星 → V → 円の順に回る。初期表示は三角と星の中間(`t = 0.5`)で 5 秒止め、読み込み 3 秒後の静止画でも変形途中が見える。形は藍のインクで描き、縁の濃いたまり・紙へのにじみ・顔料の粒で、紙に置いた水彩の質感を出す。
## Signature Technique
- **頂点のそろえ方**: 各形を `N = 96` 点の多角形にする。円は角度で等分、四角・三角・星・V は頂点列を `resample(poly, N)` で**外周長に沿って等間隔**に打ち直す。
- **始点のそろえ方**: `rotateStart()` で重心から見て真上(角度 -90°)に最も近い頂点を 0 番にし、以降時計回り。これで「上の頂点は上へ」対応し、形が裏返らない。
- **遅れのある補間**: 頂点 `i` の遅れ `lag_i = LAG · (1 - cos(2π i/N)) / 2`(始点で 0、反対側で `LAG = 0.36`、一周して 0 に戻るので継ぎ目が割れない)。`u_i = clamp(t · (1 + LAG) - lag_i, 0, 1)` を cubic in-out でイージングし、`A_i + (B_i - A_i) · ease(u_i)`。
- **描画**: 96 点を閉じた Catmull-Rom → 3 次ベジェ(`c1 = p1 + (p2 - p0)/6`、`c2 = p2 - (p3 - p1)/6`)に変換して 1 本の `d` 属性に書く。`SMOOTH = false` で直線多角形。
- 形の定義(viewBox 100): 円 r36、四角 ±32、三角 (0,-38)(40,30)(-40,30)、星 外 38 / 内 16 の 10 点、V は 7 点の閉じた輪郭。中心 (50, 52)。
- **インクの質感(SVG filter `#ink`)**: ① `feTurbulence(.7, 3oct)` + `feDisplacementMap(scale 2.2)` で縁を荒らす(rough)。② にじみ: rough を `dilate 1.1` → `blur 1.5` → 別ノイズ(.55)で `displace 3.4` し、`#5b74d6` 不透明度 .42 で塗る。③ 濃淡: 低周波ノイズ(.07, 4oct)を白っぽい淡色 α に変換して rough の内側に重ね、ムラを作る。④ 粒: 高周波ノイズ(2.4)を閾値で点にし `#0a0f33` で内側に散らす。⑤ 縁のたまり: rough を `erode 1.3` → `blur 1.6` したものを rough から `out` で抜き、`#0b1033` で重ねる。合成順は にじみ → 本体 → 濃淡 → 粒 → 縁。
- 下の 5 つの名前は現在の形(`t < 0.5` なら元、以後は先)に下線が移る。
## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| `--paper` | `#FFFFFF` | 地 |
| `--ink` | `#1A1A1D` | 点いている名前、ブランド |
| `ink-hi` | `#4A63C9` | 形の塗り(放射グラデの中心) |
| `ink-deep` | `#131B4D` | 形の塗り(放射グラデの外) |
| `ink-edge` | `#0B1033` | 縁のたまり、顔料の粒 |
| `ink-bleed` | `#5B74D6` @ .42 | 紙へのにじみ |
| `--graphite` | `#5C5959` | 操作説明 |
| `--ash` | `#A7A2A1` | 消えている名前、四隅のラベル |
| `--rule` | `#E6E4E1` | 名前の上の 1px 線 |
色は形の藍だけ。UI は黒と白と灰。
## Typography
- ラベル: **Inter** 400/500、11px、`letter-spacing .14em`、大文字。ブランド「VALE」は 500、`.22em`。
- 操作説明: Zen Kaku Gothic New 300、14px、`letter-spacing .02em`、中央。
- 形の名前: Inter 11px、上に 1px の線、点灯で `--ink`。
## Spacing & Layout
- 形は画面中央、`min(54vmin, 430px)` 角(mobile `min(76vw, 330px)`、中央寄せ)。名前の列は形の 28px 下、間隔 26px(mobile 14px、折り返し可)。操作説明はさらに 16px 下。
- 四隅: `padding 24px clamp(20px,4vw,48px) 22px`。左下に技術の 1 行、右下に `VALE / PARTS 077 / ロゴの変形`。
## Motion
- rAF 1 本、`dt` 上限 1/30 秒、`document.hidden` 中は止める。
- 変形 1.4 秒(頂点ごとに最大 0.36 の遅れ)、休止 1.1 秒、初回停止 5 秒。
- クリックで次の形へ(変形中なら今の変形を終えてから次へ)。
- reduced-motion: 三角と星の中間(`t = 0.5`)の静止画のまま。
## Components
- **svg.mark > path#p**: 形。`fill: url(#inkg)`、`filter: url(#ink)`。
- **.names**: 5 つの名前(Circle / Square / Triangle / Star / Monogram)、`.on` で点灯。
- **.cap**: 操作説明 1 行。
- **.stage**: クリック領域(形の周囲も含む)。
## Do / Don't
**Do**
- 形は藍のインク 1 色で、濃淡は filter のムラと縁のたまりだけで出す。輪郭線は付けない。
- 頂点数と始点をそろえてから補間する(そろえないと途中で結び目ができる)。
- 遅れは一周で 0 に戻す。
- 休止を入れて、形を読む時間を作る。
**Don't**
- 変形中に回転や拡大を重ねない。
- 形を 5 つ以上に増やさない(列が長いと「ロゴ」でなくなる)。
- 背景にグリッドや影を敷かない。
- 文字の形は 1 つまで(ここでは V)。
## References
- **mono**(stock/refero/md/mono.md): 白い壁のギャラリーの格子、細い黒の線、影のない字という構えを借りた。格子は使わず、1px の線は名前の上にだけ残した。
- **Capacities**(stock/refero/md/capacities.md): 白い作業面の中央に一つの考えを置き、周囲は余白にする構図を借りた。Inter の見出しは使わず、ラベルにだけ Inter を使う。
## Usage
1. `` と `