# シャッター — Style Reference > 紙色の画面の上を、からし色の縦帯が左の列から順に上から下へ通り抜け、通り過ぎた列から白い製品画面に変わる。途中は階段状。 **Theme:** light **Series:** PARTS 074 **World:** A は紙の見本帳のアトリエ、B はスクリーンショットの製品ページ。 ## Concept 遷移パーツ。画面を N 本の縦の列に分け、各列にからし色の帯を1本置く。帯は画面の上から下へ通り抜け、列ごとに少しずつ遅れる。帯がその列を覆っている間に、列の中身を A から B に入れ替える。進み具合 0.5 で帯が階段状に並び、左は B、右は A が見える。 DOM と CSS transform だけで作る(WebGL なし)。B は列ごとに複製して `overflow:hidden` の列に入れ、`left` をずらして自分の列の分だけ見せる。 色は A が紙の白とからし1点、B が白と青1点。帯の色はからし。 ## Signature Technique - 列数 N = 9(mobile 5)。列 i の遅れ `d_i = i/(N-1) × STAGGER`(STAGGER = 0.55)。 - 列の進み `l_i = ease(clamp(p × (1 + STAGGER) - d_i, 0, 1))`(cubic in-out)。 - 帯: `translateY((-100 + 200 × l_i)%)`。-100% で画面の上、0% で列を完全に覆う、+100% で画面の下。 - 列の中身: `l_i ≥ 0.5` のとき B の複製を表示(帯が完全に覆った瞬間に入れ替わる)。 - 帯の影: `box-shadow: inset -1px 0 0 rgba(36,36,36,.12), 0 -18px 30px rgba(36,36,36,.18)`。帯の上端が画面に落とす影で厚みを出す。 - 列幅は `flex:1`。複製 B の `left = -i × (innerWidth / N)`、幅 100vw。リサイズで置き直す。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | --paper | #FAF9F7 | A の地 | | --ink | #242424 | A の文字、HUD | | --felt | #D3D3D3 | A の罫 | | --mustard | #D9A441 | A のタグ、帯 | | --white | #FFFFFF | B の地 | | --blue | #1A6DFF | B のボタン、カードのグラデーション端 | | studio-black | #0F0F12 | B のカード(暗い画面の写真の代わり)、グラデーションの始点 | | night-blue | #1C2340 | B のカードのグラデーション中間(60%) | | b-ink | #000000 / #161618 | B の見出し / B のブランドとラベル | | b-mute | #6A6A6B | B の注記 | ## Typography - Zen Kaku Gothic New。A の見出し 700 `clamp(56px, 13vw, 180px)` letter-spacing −.04em、line-height .95(詰めた編集的な大見出し)。B の見出し 600 `clamp(34px, 5.6vw, 76px)` −.03em、line-height 1.15、最大幅 14em。 - ラベル 12px / .14em(ブランドは 500)、本文 14px / 1.8(A は文字色 72%、最大幅 28em)。A のタグ 12px / .12em。B のボタン 500 14px / .06em、注記 13px。 - HUD 11px(640px 以下 10px)、letter-spacing .14em、`mix-blend-mode: multiply`。 ## Spacing & Layout - 余白 `--pad: clamp(20px, 5vw, 72px)`。各画面は `grid-template-rows: auto 1fr auto`(上: ブランドとラベル / 中: 見出し / 下: 本文やボタン)。 - A の見出しは下寄せ、タグ(padding 6px 12px、角丸 6px)はその上 18px。本文は上罫 1px、上 16px。 - B の見出しは中央、右に `min(36vw, 440px)`・4:3・角丸 20px のカード(グラデーション 160deg、影 `0 30px 60px`)、下に青いピル(高さ 46px、左右 24px、青い影)と注記を間隔 18px で並べる。 - HUD は右下 18px / 16px。 - 640px 以下: カードを隠し、HUD を左下 16px に、各画面の下余白を +52px、A の本文と番号を縦積み。 ## Motion - 自動往復: 初回 4.0 秒静止 → 2.6 秒で 0 へ(全体の p は線形、帯ごとに cubic in-out。0.5 以上なら 0、未満なら 1 へ向かう)→ 1.4 秒静止 → 2.6 秒で 1 へ → … 。 - カーソル: `p = x/width` を lerp 0.18 で追従。2.6 秒無操作で、0.2 秒止まってから自動に戻る(現在位置から遠い端へ)。 - reduced-motion: 自動往復なし。0.5 で静止し、カーソルで直接変わる。 - transform だけを動かす(レイアウトは変えない)。`will-change: transform`。 ## Components - 画面 A: ブランド「KAMI ATELIER」の下に、からしのタグ「新しい見本帳」と見出し「紙を、選ぶ。」。上罫付きの本文と番号。 - 画面 B: ブランド「CAPTURE」、見出し、暗いカード(ウィンドウ風の枠)、青いピル「ダウンロード」と注記。 - 帯(.blade i): からし、右端 1px の暗い線、上端の影。 - HUD: `VALE / PARTS 074 / シャッター` と操作説明。 ## Do / Don't - Do: 帯は列ごとに1本、上から下へ通り抜けさせる。中身の入れ替えは帯が覆っている瞬間に。 - Do: 遅れは全体の半分程度(0.55)。小さいと一枚の面に見え、大きいと列がばらばらに見える。 - Do: 帯に影を1つ付けて厚みを出す。 - Don't: 「閉じ切ってから開く」2段階にしない(50% で画面全体が帯色になり、静止画で何も分からなかった)。 - Don't: 帯の色を2色以上にしない。 - Don't: 列を 12 本以上にしない(帯が細くなりストライプの模様に見える)。 ## References - Kalstore(stock/refero/md/kalstore.md): 「温かい紙の白、まばらな余白、からし1点、極端に詰めた大見出し」を抽象化して A と帯の色にした。 - CleanShot X(stock/refero/md/cleanshot-x.md): 「白い余白に小さな黒い文字、飽和した青の操作、暗い製品画像を柔らかい角丸の容器に」を抽象化して B にした。 ## Usage 1. `.stage` の中身(`.screen.b`、`.screen.a`、`.blades`)と `