# フラップのローダー — Style Reference
> 消灯した機械室の案内板。黒い板が上から順に倒れ、読み込みの段階を言葉で出す。
**Theme:** dark **Series:** PARTS 078 **World:** 遷移とローディング。空港の反転フラップ式の案内板を、夜の開発コンソールの色で。
## Concept
進捗を「言葉」で見せる。7 文字の板が左から順に倒れ、LOADING → FONTS → IMAGES → SHADERS → READY と段階名を出す。板は本物の反転フラップと同じく上半分が手前に倒れ、下半分が追って落ちる。倒れている板の下の LED だけが mint に光り、色はそれと `%` の数字だけ。初期表示は IMAGES がほぼ出そろい、右の 2 枚が倒れかけている状態で 5 秒止める。
## Signature Technique
- **板の構造**: 1 文字 = 4 枚の面。`tb`(上の静止面)、`bb`(下の静止面)、`leaf`(上の可動面: 古い文字の上半分、`transform-origin: 50% 100%`)、`leaf2`(下の可動面: 新しい文字の下半分、`transform-origin: 50% 0`、初期 `rotateX(90deg)`)。各面は `height: 50%; overflow: hidden` で、内側の `span` を `height: var(--ch)` のまま上下に寄せて文字の半分を見せる。`backface-visibility: hidden`。
- **1 回の反転**: 下の `tb` に新しい文字を先に入れ、`leaf` に古い文字、`leaf2` に新しい文字を入れて `.flip` を付ける。`leaf` は `rotateX(-90deg)` へ 0.32 秒(`cubic-bezier(.55,0,.9,.4)`: 重力で加速)、`leaf2` は 0.3 秒遅れて `rotateX(0)` へ 0.26 秒(`cubic-bezier(.1,.6,.4,1)`: 着地)。600ms 後に `bb` を新しい文字にして `.flip` を外す。倒れている間は `leaf` を `brightness(.55)` に落とす。
- **ドラムの通過**: 文字は `' A…Z 0…9'` の順に並ぶドラムを進む。目的の文字まで最大 `HOPS = 3` 枚の中間文字を経由して反転する(距離が短ければ少なく)。
- **ずらし**: 隣の板は `STAGGER = 70ms` 遅れて動き出す。
- **語の配置**: 7 枠に中央寄せ、余りは空白の板。
- **初期表示の静止**: 右の 2 枚は `tb` に新しい文字、`leaf` に古い文字を入れ、`leaf` を `rotateX(-55deg)` と `rotateX(-35deg)` で止める。
- `role="status" aria-live="polite"` で `読み込み中 IMAGES 50%` を更新。
- 板の中央に 1px の `--edge` の線(軸)、上面に 5% の白のグラデで照り。板の下 `calc(var(--cw)*-0.34)` に 4px の LED。
## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| `--void` | `#0B0F10` | 地 |
| `--panel` | `#161B1D` | 板の上半分 |
| `--panel2` | `#1D2325` | 板の下半分(わずかに明るい) |
| `--edge` | `#0A0C0D` | 板の軸の線、消灯した LED |
| `--bone` | `#ECEFEA` | 板の文字、ブランド |
| `--fog` | `#6E7A78` | ラベル、説明 |
| `--mint` | `#5EE3B0` | 倒れている板の LED と `%` の数字。唯一の色 |
## Typography
- 板の文字: **Inter** 600、`font-size: calc(var(--cw) * 1.02)`、`line-height: var(--ch)`、`letter-spacing -.02em`、大文字。板幅 `--cw = clamp(38px, 6.2vw, 76px)`(mobile `clamp(30px, 10vw, 42px)`)、高さ `1.45 × --cw`。
- 補助: Inter 400/500、11px、`letter-spacing .14〜.2em`、大文字。`%` の数字は 500 で mint。
- 操作説明: Zen Kaku Gothic New 300、14px。
## Spacing & Layout
- 板の列は中央、板の間隔 `0.08 × --cw`、`perspective: 1400px`。角丸 4px(上下の面で外側だけ)。
- `Loading 50%` は板の `0.7 × --cw` 下、操作説明はその 14px 下。
- 四隅: `padding 24px clamp(20px,4vw,48px) 22px`。右下に `VALE / PARTS 078 / フラップのローダー`。
- 640px 以下: `--cw` を `clamp(30px, 10vw, 42px)` に下げ、下段を縦積み・左寄せ、操作説明は「クリックで次へ。」の前で改行。
## Motion
- CSS transition のみ(rAF なし)。`setTimeout` で語の切り替えを予約し、`document.hidden` 中は 500ms ごとに先送り。
- 1 枚の反転 0.6 秒、中間文字 最大 3 枚、板のずらし 70ms、語の休止 1.5 秒。初回停止 5 秒。
- 次の語までの間隔は `HOLD + CELLS × STAGGER + 700 × (HOPS + 1)` = 1500 + 490 + 2800 = 約 4.8 秒。
- クリックで次の語へ(初回停止中なら停止を打ち切る)。
- reduced-motion: 初期の静止画(右 2 枚が倒れかけ)のまま。transition を無効化。
## Components
- **.board > .cell × 7**: 板。`.flip` で反転、`.flipping` で LED 点灯。
- **.sub**: `Loading 50%`。
- **.cap**: 操作説明 1 行。
- **.stage**: クリック領域。
## Do / Don't
**Do**
- 板の上半分と下半分で明度を 1 段変え、軸の線を入れる(機械に見える)。
- 倒れる面を暗くする(光が当たらない面)。
- 語は 7 文字以内の 1 語。文にしない。
- 中間文字を 2〜3 枚挟む(いきなり目的の文字に変わると板が回って見えない)。
**Don't**
- 板にグローやネオンの縁を付けない。光るのは LED だけ。
- 全板を同時に倒さない。必ずずらす。
- 文字を小文字にしない(半分に割れたとき読めない)。
- 回転に `rotateY` を混ぜない(横回転は別の機械)。
## References
- **Jam**(stock/refero/md/jam.md): 夜の開発コンソールの近黒の地と、1 つだけ mint に光る LED のような操作点を借りた。紫寄りの地 `#130F18` は青緑寄りの `#0B0F10` に変え、mint は板の LED にだけ使う。
- **Shopify**(stock/refero/md/shopify.md): 深い青緑の黒と 1 点の mint の火花という配色の規律を借りた。板の 2 段階の明度(`#161B1D` / `#1D2325`)は Deep Lichen / Shaded Fern の階段を無彩色寄りに読み替えたもの。
## Usage
1. `.board` を含む `.stage` の中身と、`