# カウントのローダー — Style Reference > 襞の寄った紙色の幕の中央に、巨大な数字が一つ。桁がドラムのように回って 100 になり、幕が上に抜ける。 **Theme:** light **Series:** PARTS 076 **World:** 遷移とローディング。建築のモノグラフのように静かな紙面で、数字だけが動く。 ## Concept 読み込みの間に見せるものを「数字 1 つと線 1 本」に絞る。数字は 0 → 100 を一定速度で走らず、本物の読み込みのように途中で 3 回つかえて、最後に加速して 100 に届く。桁は上下に回るドラムで、繰り上がりの瞬間だけ上の桁が一緒に回る。下の線は幅いっぱいの進捗、その上に 4 つの段階名が順に点く。100 で 0.9 秒止まり、幕が上へ抜けてページが現れる。デモは 50 で 5 秒止めてから走り、ページ表示後にもう一度 0 から繰り返す。 ## Signature Technique - **桁ロール**: 各桁は `height: 1em; overflow: hidden` のドラムに `0〜9, 0` の 11 行を縦に並べ、`translateY(-v em)` で回す。`v` は小数を許す: 一の位 `v % 10`、十の位 `floor(v/10) % 10 + max(0, ones - 9)`、百の位 `floor(v/100) + (99 ≤ v < 100 ? v - 99 : 0)`。一の位が 9 → 0 を跨ぐ間だけ上の桁が連動して回る。百の位は `v < 99` の間は幅 0 で隠す。 - **進捗カーブ**: `ramp(t)`。経過時間から各ストール `[位置 0.22 / 0.3 秒], [0.61 / 0.45 秒], [0.86 / 0.35 秒]` の分を差し引き、`1 - (1 - f)^2.2` で終盤を加速させる。全体 3.2 秒 + ストール 1.1 秒。 - **線**: 1px の `rgba(17,17,17,.14)`(布の上でも見える溝)に 3px の `--ink` が `width: v%`、先端に 11px の teal の点。段階名は `v/100 ≥ [0, 0.3, 0.62, 0.9]` で順に `--ink` に変わる。 - **幕の質感**(CSS のみ、画像なし): `.loader::before` に重ねた背景で布を作る。(1) 上からの光 `radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.75), transparent 60%)`、(2) 裾へ向かう影 `linear-gradient(180deg, transparent 55%, rgba(70,60,40,.07))`、(3) 周期 131px / 197px / 311px の 3 枚の `repeating-linear-gradient(90deg, …)` で襞(暗い谷→明るい山)。周期を互いに素に近づけ、等間隔の縞に見せない。(4) SVG `feTurbulence`(`baseFrequency='1.1 .18'`、横に細かく縦に長い)を data URI で敷き、織りの目にする。`::before` は左右に 40px はみ出させ、11 秒で ±10px・skewX ±0.25deg 揺らす。 - **裾**: `.loader::after` に高さ 9px の濃い帯と、7px おきの縫い目(破線)。幕が上がるときに裾が見える。 - **幕の動き**: `.loader` 全体を `translateY(-101%)`、`0.9s cubic-bezier(.76,0,.24,1)`。ループ時は `transition: none` で戻してから再開。 - 初期表示は `START = 50` を整数で描き、`FIRST_PAUSE = 5` 秒止める。クリックで停止を打ち切り、カウント中のクリックで即 100 へ。 - `aria-live="polite"` の `role="status"` で `読み込み中 N%` を整数が変わるたびに更新。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | `--paper` | `#FBFAF7` | ページの地 | | `--drape` | `#F3F1EB` | 幕の布の地。襞の明暗は `rgba(255,255,255,.3–.75)` と `rgba(70,60,40,.05–.16)` | | `--ink` | `#111111` | 数字と進捗の塗りと点いた段階名とブランド名 | | `--graphite` | `#8E8E8A` | `%`、消えている段階名、ラベル | | `--rule` | `#DAD9D3` | 消えている段階名の前の短い線(進捗の溝は `rgba(17,17,17,.14)`) | | `--teal` | `#0E8F84` | 進捗の先端の点と、点いた段階名の前の線。唯一の色 | ## Typography - 数字: **Inter** 400、`clamp(140px, 40vw, min(480px, 54vh))`(モバイル 156px、デスクトップ 480px 前後)、`letter-spacing -.05em`、`tabular-nums`(ドラムの幅を揃える)。各ドラム幅 `.60em`。`%` は `.22em`、`--graphite`、数字の肩に置く。 - ラベル: Inter、11px(mobile 10px)、`letter-spacing .14em`、大文字。ブランド「VALE」は 500、`.22em`。 - ページ側の見出し: Zen Kaku Gothic New 500、`clamp(28px, 4vw, 48px)`。本文 300、15px。 ## Spacing & Layout - 幕は `grid-template-rows: auto 1fr auto`、`padding 24px clamp(20px,4vw,48px) 22px`。数字は画面の中央(`.stage` は `align-items: center; justify-content: center`)、線は幅いっぱい、段階名は線の 18px 下。 - 数字の左端は `-.04em` だけ外へ出し、光学的に揃える。 - 640px 以下: 下段を縦積み、段階名は折り返し可。 ## Motion - rAF 1 本、`dt` 上限 1/30 秒、`document.hidden` 中は止める。 - 0 → 100: 3.2 秒 + ストール 1.1 秒。100 保持 0.9 秒。幕 0.9 秒。ページ表示 2.2 秒。初回停止 5 秒。 - ドラムは毎フレーム `transform` を直接書く(CSS transition なし)。繰り上がりは数式で連動。 - reduced-motion: 50% の静止画のまま動かさない。幕の transition と布の揺れも無効。 ## Components - **.loader**: 幕。`role="status"`、クリック可。 - **.count**: 3 つの `.drum`(百の位は `.hide` で幅 0)+ `.pct`。 - **.line**: 本体が 1px の溝、`i` が 3px の塗り、`b` が先端の点。 - **.phase**: 4 つの段階名、`.on` で点灯。 - **.page**: 幕の下にあるページ(デモ用の見出し 1 本 + 1 文)。 ## Do / Don't **Do** - 数字は 1 つだけ、画面の中央に大きく。 - 背景は布の襞と織りの目で埋める。線や升目で埋めない。 - 途中で止まる間を入れる(等速だと機械的に見える)。 - 色は先端の点と段階名の線にだけ。 - 100 で一拍置いてから幕を上げる。 **Don't** - 小数点やミリ秒を出さない。 - 数字をフェードや拡大で飾らない。回るだけ。 - スピナーやスケルトンを併置しない。 - 幕を横や斜めに抜かない(上に 1 方向)。 ## References - **Resident**(stock/refero/md/resident.md): 白い紙に黒いヘアラインと詰めた幾何サンスだけで組む建築モノグラフの構えを借りた。Messina Sans の代わりに Inter、`-0.05em` の詰めは巨大数字にだけ使い、本文は詰めない。 - **LottieFiles**(stock/refero/md/lottiefiles.md): 明るい地に teal の 1 色だけを操作点に置く規律を借りた。`#019D91` より少し沈めた `#0E8F84` を、進捗の先端の点にだけ使う。 ## Usage 1. `.loader` の HTML と `