# 無限ループの帯 — Style Reference
> 羊皮紙の上を、架空のワードマークの帯が 2 本、逆向きに途切れず流れる

**Theme:** light  **Series:** PARTS 082  **World:** 架空の議事録ツール「Fieldnote」。使っているチームの名前を帯に並べる。

## Concept
ロゴの帯。ロゴ列を 2 回複製して `translateX` を毎フレーム進め、1 周の幅で剰余を取るので継ぎ目がない。2 本の帯は逆向きに流れ、カーソルが乗った帯だけ速度が 60px/s から 8px/s へ滑らかに落ちる(止めない)。帯の左右 12% はマスクで消し、紙に溶ける。ドラッグで手動で送れる。
色は羊皮紙と墨、オリーブの小さな図形だけ。ロゴは実在しない名前をタイポグラフィと小さな幾何図形で作る。

## Signature Technique
- 構造: `.band{overflow:hidden; mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}` の中に `.track{display:flex; width:max-content; gap}`。`build()` が LOGOS を 2 周ぶん `<span class="logo">` で生成し、2 周目は `aria-hidden`。
- 1 周の幅 `half = track.scrollWidth / 2`(リサイズとフォント読込後に再計測)。
- 毎フレーム `v += (target - v)·min(1, dt·3.5)`、`x += v·dt`、`xw = ((x mod half) + half) mod half`。左向きは `translate3d(-xw, 0, 0)`、右向きは `translate3d(xw - half, 0, 0)`。
- hover: `target = 8`、離れると `target = 60`。速度の補間だけで位置は連続なので、カクつかない。
- ドラッグ: `pointerdown` で `x` の起点を記録し、`pointermove` で `x = start + Δx·dir`。離すと再び流れる。
- 帯の上のロゴは hover 中 45% に落ち、指しているロゴだけ 100%。
- `prefers-reduced-motion`: 2 本を少しずらした位置で静止。
- 読み出し「速度 60 px/s」は上の帯の実測値。

```js
b.v+=(b.target-b.v)*Math.min(1,dt*P.LERP); b.x+=b.v*dt;
const x=((b.x%h)+h)%h;
b.track.style.transform=`translate3d(${b.dir<0?-x:x-h}px,0,0)`;
```

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --parchment | #f7f4ec | 地 |
| --card | #fffdf8 | 予備の面(未使用でも保持) |
| --ink | #1d1b16 | ロゴと見出しと図形 |
| --slate | #6b675c | 本文とラベルとタグ |
| --line | #d8d3c6 | 帯の上下の .5px 罫 |
| --olive | #5b6f00 | 図形(dot / dia)。主の色 |
| --olive2 | #b2c248 | 図形(bar)。olive の明るい段 |

## Typography
- 見出し: Fraunces 400(opsz 可変)、`clamp(30px, 4.2vw, 54px)`、line-height 1.15、letter-spacing -.015em、中央揃え。Fraunces は和文を持たないので、日本語の見出しは `serif` のフォールバック(macOS ではヒラギノ明朝)で出る。句ごとに `.nb`(inline-block)で包み、句の途中で折り返さない。
- 本文: Zen Kaku Gothic New 300、`clamp(13.5px, 1.05vw, 15px)`、最大幅 30em。
- ロゴ: 5 種類の声。Inter 700 -.02em(標準)/ Fraunces 600(serif)/ Fraunces italic 400(italic)/ ui-monospace 500 +.06em .85em(mono)/ Inter 500 大文字 +.22em .8em(wide)。サイズ `clamp(18px, 1.9vw, 26px)`、opacity .78。
- ヘッダー: Fraunces 600 18px のワードマーク、右に Inter 12px。

## Spacing & Layout
- ページは `min-height: 100svh` の 3 行グリッド(ヘッダー / 中央 / タグ)。中央は `grid-template-columns: minmax(0, 1fr)`(帯の `max-content` に列幅を引っ張らせない)。
- 帯: 上下 18px、.5px の罫、ロゴ間 `clamp(40px, 6vw, 96px)`。2 本目は上の罫を省く。
- 見出しと帯の間 `clamp(28px, 5vh, 56px)`。横余白は見出しとヘッダーだけ `clamp(20px, 5vw, 72px)`、帯は全幅。
- 640px 以下: タグを縦積み・左寄せ。

## Motion
- 速度 60px/s、hover 8px/s、補間率 3.5/s(約 0.5s で収束)。
- 帯ごとに独立。上は左へ、下は右へ。初期位置は上 `x = 180`、下 `x = 420`。
- rAF 1 本、`dt` 上限 0.05 秒。読み出しは 10 フレームごとに更新。
- ロゴの opacity は .3s。
- `prefers-reduced-motion: reduce`: rAF を回さず、上 `x = 300`、下 `x = 120` で静止。読み出しは 0。

## Components
- band / track / logo: 帯 1 本の 3 層。logo は `<i class="dot|sq|bar|ring|tri|dia">` の小図形 + テキスト。
- readout: 「速度 N px/s」。
- head: ワードマークと「Used by 24 teams」。
- tag: 左下に操作説明、右下に `VALE / PARTS 082 / 無限ループの帯`。

## Do / Don't
- Do: hover で止めずに遅くする。止めると「壊れた」に見える。
- Do: 左右をマスクで溶かす。切り落とすと表に見える。
- Do: ロゴの声を 4〜5 種類混ぜる。同じ書体だと一社に見える。
- Don't: CSS animation の `animation-play-state` で止めない。速度が不連続になる。
- Don't: 帯を 3 本以上にしない。2 本の逆向きで十分に「流れ」が伝わる。
- Don't: 実在ブランドのロゴを入れない。見本は架空名で。

## References
- Granola: 「羊皮紙にセリフの見出し、オリーブ 1 色、.5px の罫」という配色と字組みの考え方を借りた。カードは使わず、罫を帯の上下 2 本に絞った。
- Letters: 「白い机に青い器具が点在する」清潔さを借りた。オリーブの小図形をロゴの頭に置き、帯以外に色を出さない。

## Usage
1. HTML: `<div class="band"><div class="track"></div></div>` を帯の本数だけ置く(逆向きにしたい帯は JS の `dir: 1`)。
2. CSS: `.band`、`.track`、`.logo` と図形 6 種のルールを移植。`.band` の mask は必ず残す。
3. JS: `<script>` 全体を移植。
   - `LOGOS` を `[名前, 図形クラス, 書体クラス]` で差し替える。画像ロゴなら `build()` の中で `<img>` を作るように変える(高さを `1.2em` に揃える)。
   - `P.SPEED`(px/s)/ `P.HOVER`(hover 時の px/s)/ `P.LERP`(補間率)/ `P.DRAG`(ドラッグ可否)。
   - 帯を増やすときは `bands` 配列に `{band, track, dir}` を足し、`build(track, offset)` の offset をずらして同じ並びに見えないようにする。
4. 1 周の幅はフォント読込後に `measure()` で再計測しているので、ウェブフォントを使う場合は `document.fonts.ready` を残す。
5. 読み出し(`#rv`)は不要なら要素ごと消す。