# 鎖 — Style Reference > 深夜の闇に、鋼の鎖が一本垂れている。輪の下側だけミントの光 **Theme:** dark **Series:** PARTS 049 **World:** 架空の金物ブランド「Kusari」のトップ。製品の鎖を両端から吊るし、輪が噛み合う様子をそのまま見せる。 ## Concept 画面の上部に、左右の吊り金具から鎖が一本垂れている。起動時は懸垂線に落ち着いた状態から横に軽く揺れ始め、数秒で静まる。各輪は隣と 90 度ずれて噛み合い、鎖が揺れると輪が軸まわりに回って幅が変わる。上から白い光、下からミントの環境光で鋼に見せる。つかんで引ける。文字は左下に見出し 1 行と本文 2 文。 ## Signature Technique 剛体リンクの距離制約(Verlet)+ 軸まわり回転のばね。2D canvas で描く。 1. **節点**: `n+1` 個(n = 18、モバイル 11)。両端 `pts[0]`、`pts[n]` は金具に固定。リンク長 `L = 両端の距離 × slack(1.34) / n`。輪の幅 `linkW = 0.56L`。 2. **積分**(1 フレームに 4 ステップ): `v = (p − prev)·drag(0.996)`、`p += v + g·dt²`(重力 2400 px/s²)。 3. **距離制約**(24 反復): 隣接節点の距離を L に戻す。固定端側は動かさず、もう一方の節点を 2 倍動かす。つかんでいる節点は毎反復 50% でカーソルへ寄せる。 4. **回転**: リンク i の軸まわり角 `roll[i]` を状態として持つ。 ```js acc = −rollC·rollV + lateralVel·rollKick·40·(±1) // 横に動くと回り出す(偶奇で逆向き) + rollK·((roll[i−1] + π/2) − roll[i]) + rollK·((roll[i+1] − π/2) − roll[i]); // 隣と 90 度差を保つばね(30)、減衰 6 ``` 初期値は `(i % 2)·π/2`。 5. **描画**: 各リンクを節点の中点に置いた楕円の環として描く。長半径 `0.5L + 0.2wire`、短半径 `max(0.55wire, 0.5·linkW·|cos roll|)`。`|cos roll|` が 0 に近い輪は細い棒になり、噛み合って見える。 - 影: 右下へ (0.6wire, 1.2wire) ずらした黒 45% の環。 - 金属: 環の線に縦方向の線形グラデーション(#f2f3f5 → #9a9ea8 → #3a3d45 → #6b7078 → #1b2a28)。 - リムライト: 右下の弧 0.3–1.9 rad にミント `rgba(34,226,168,.55)` 幅 0.28wire。スペキュラ: 左上の弧 3.5–5.2 rad に白 75% 幅 0.22wire。 - 描画順: 吊り金具(#1e1f24 の円、#807f7f の縁 1.5px、中心に地色の穴)→ 影 → 偶数番(平たい輪)→ 奇数番(縦の輪)。 6. **停止**: 節点の移動量と回転速度の平均が 0.02 未満で 90 フレーム続いたら rAF を止める。つかむと再開。IntersectionObserver と visibilitychange で画面外停止。 ## Color Palette | Token | HEX | Role | |---|---|---| | --midnight | #040714 | 地 | | --carbon | #1e1f24 | 吊り金具の面 | | --slate | #807f7f | 金具の縁、ヘッダーのラベル、操作説明 | | --mist | #b7b8bd | 本文 | | --luminous | #fafafa | 見出し、ブランド名、クレジット | | --mint | #22e2a8 | 輪の下側のリムライト、読み出しの区切り点 | | (steel) | #f2f3f5 / #9a9ea8 / #3a3d45 / #6b7078 / #1b2a28 | 鋼のグラデーション(上から下) | ## Typography - ブランド名: Inter 700、15px、letter-spacing −0.02em。 - 日本語見出し: Noto Sans JP 400、`clamp(20px, 1.8vw, 26px)`、letter-spacing −0.01em、line-height 1.45。 - 本文: Noto Sans JP 300、`clamp(13px, 1.05vw, 15px)`、最大幅 30em。本文は文節ごとに `white-space:nowrap` の span(`.nw`)で包み、改行は文節の境目だけで起きる(「る。」や「。」だけが行頭に落ちない)。リンク数は JS で書き込む。 - ラベル: JetBrains Mono 400、11–12px、letter-spacing 0.06–0.08em。 - canvas 不可時は `.fallback` にブランド名を Inter 700 で出す。 ## Spacing & Layout - hero `min-height: 100svh`、3行グリッド。canvas は背面全面(`touch-action: none`、`cursor: grab`)。 - 余白: 横 `clamp(20px, 5vw, 72px)`、上 `clamp(20px, 3vw, 40px)`、下 `clamp(18px, 2.6vw, 32px)`。モバイル左右 18px。 - 金具: 左 `(0.2W, 0.24H)`、右 `(0.8W, 0.3H)`(モバイル `(0.06W, 0.16H)` と `(0.94W, 0.2H)`)。右をわずかに低くして左右対称を崩す。 - 線材の太さ 10px(モバイル 7px)。 - breakpoint 760px: ブランド横の説明を消し、フッターを縦積み。 ## Motion - 起動: 直線に置いて 800 ステップ進め、懸垂線に落ち着かせてから固定端以外の全節点に `sin(i/n·π)·5` px/ステップの横速度(中央で最大)を与えて揺らす。揺れは 4–6 秒で収まる。 - 回転: 横方向の速度で輪が回り、ばね 30 / 減衰 6 で 90 度差に戻る。 - つかむ: 半径 48px 以内の節点。離すと距離制約だけで戻る。 - `prefers-reduced-motion: reduce`: 同じ 800 ステップの後、揺らさずに懸垂線の鎖を 1 枚描く。つかむ操作は動く。 ## Components - hero: 背面 canvas + 前面テキスト。テキスト層は `pointer-events: none`。 - header: 左にブランド名、右に `18 links · steel`。 - copy: 見出し 1 行+本文 2 文。 - footer tag: `VALE / PARTS 049 / 鎖` と操作説明 1 行(タッチ端末では文言差し替え)。 ## Do / Don't - Do: 輪の幅を `|cos roll|` で変える。これが無いと数珠に見える。 - Do: 偶数番と奇数番で描画順を分ける。同じ順だと噛み合いが読めない。 - Do: リムライトは下側の弧だけ。全周に回すとネオン管になる。 - Don't: リンクを 30 以上にしない。輪が小さくなり、回転が見えない。 - Don't: 鎖を 2 本以上吊らない。 - Don't: 鋼のグラデーションを滑らかにしすぎない。暗い帯(#3a3d45)が無いと金属に見えない。 ## References - Cosmos Network: 黒い面に白い文字、ミント 1 色を補助として置く配色を借りた。ミントを面からリムライトに移した。 - Watch new Originals: 闇の中の 1 点の電気的な光という考え方を借りた。光を鎖の下側に回し、鋼の質感に使った。 ## Usage 1. `` を hero の背面に置く。フォントは任意。 2. `