# 絞り — Style Reference > 夜の画面に、暖色の縁をもつ円が開いて朝の画面が見える **Theme:** dark **Series:** PARTS 079 **World:** 架空のメールアプリ「Tide」。夜に下書きを揃え、朝に一度に送る 2 画面の切り替え。 ## Concept ページ遷移。次の画面を `clip-path: circle()` で切り抜き、押した場所を中心に円が広がって前の画面を覆う。円の縁には琥珀の輪(18px)と広い光を添え、絞りが「開いている途中」であることが静止画でも分かる。読み込み時は夜の画面が円の中、朝の画面が円の外にある半開き(半径 = 短辺の 40%)で 6 秒止まり、その後は自動で開く→閉じる→開くを繰り返す。クリックやタップで、その場所から開き直す。 2 画面は「夜の作業画面(藍黒)」と「朝の送信画面(暖かい生成り)」。遷移そのものが「夜から朝へ」の意味を持つ。 ## Signature Technique - 2 枚の `section.screen` を重ね、上の 1 枚(`front`)に `clip-path: circle(Rpx at X Y)` を毎フレーム書く。R は `r × maxR`、`maxR` は中心から最も遠い隅までの距離 + GLOW。 - `r` は 0→1 を easeInOutCubic(`k<.5 ? 4k³ : 1-(-2k+2)³/2`)で OPEN 1300ms、1→0 を CLOSE 900ms。 - 縁: `.rim`(同じ中心で +18px、琥珀 #e8a24a、opacity 1、blur 1px)と `.rim2`(+70px、opacity .3、blur 22px)を front の下、back の上に重ねる。`r` が 0 または 1 のとき消す。 - 初期: `front` = 夜の画面、`r0 = .4·min(W,H) / maxR`。夜が円の中、朝が外。 - 完全に開いたら `swap()`: front と back を入れ替え、新しい front を r=0 で閉じた状態にする。次の開きは画面中央付近のランダムな点から。 - pointerdown: 開ききっていれば swap してから、押した座標を中心に `open` を始める。 - `prefers-reduced-motion`: r=.5 の半開きで静止し、縁の光だけ表示。 ```js front.style.clipPath=`circle(${r*maxR}px at ${cx}px ${cy}px)`; rim.style.clipPath =`circle(${r*maxR+14}px at ${cx}px ${cy}px)`; rim2.style.clipPath =`circle(${r*maxR+70}px at ${cx}px ${cy}px)`; ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --night | #0b0e13 | 夜画面の地(放射グラデの外側) | | --slate | #151a22 | 夜画面の中間色 | | twilight | #2a3b5a | 夜画面の左上の青い光 | | --cream | #eef0f3 | 夜画面の文字 | | --fog | #8b94a3 | 夜画面の本文とラベル | | --blue | #2f6fff | 夜画面の CTA。唯一の彩度の高い色 | | --dawn | #f4e9d8 | 朝画面の地 | | dawn light | #ffd9a8 | 朝画面の右下の光 | | --ember | #e8a24a | 絞りの縁の光、focus ring | | --ink | #1a1612 | 朝画面の文字と CTA | ## Typography - 見出し: Inter 400、`clamp(34px, 5vw, 68px)`、line-height 1.15、letter-spacing -.02em(モバイル `clamp(30px, 8.5vw, 40px)`)。太さを変えず大きさで階層を作る。 - 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.1vw, 16px)`、line-height 1.9、最大幅 32em。 - ラベル: Inter 12px、letter-spacing .08em。アプリ名は 500。 - ボタン: Inter 500 14px、角丸 8px、高さ 46px。 ## Spacing & Layout - 画面は `position: fixed; inset: 0`、3 行グリッド(上ラベル / 本文 / 下ラベル)。余白 `clamp(20px, 5vw, 72px)`、上 28px + safe-area、下 22px + safe-area。 - 本文は縦中央、最大幅 720px、左寄せ。 - タグは右下固定(モバイルは左下)、`mix-blend-mode: difference` で両画面の上で読める。 ## Motion - OPEN 1300ms / CLOSE 900ms、easeInOutCubic。開いた後 2200ms 保持、閉じた後 300ms 保持。読み込み時は半開きで 6000ms 保持(window の load の 2 フレーム後に `document.fonts.ready` を待ってから数える。フォント読み込みが遅くても半開きの静止画が残る)。 - 縁の光は clip-path に追従するだけで独自のアニメーションを持たない。 - `prefers-reduced-motion: reduce`: 半開きで静止、クリックでも動かない。 ## Components - screen: 上ラベル行(アプリ名 / 文脈)、見出し、1 文、CTA、下ラベル行(時刻 / 件数)。 - rim / rim2: 装飾のみ、`pointer-events: none`。 - tag: `VALE / PARTS 079 / 絞り` と操作説明 1 行(タッチ端末で文言差し替え)。 ## Do / Don't - Do: 円の中心は押した場所にする。中央固定だと、ただのフェードに見える。 - Do: 2 画面の色を大きく変える。似た色だと円が見えない。 - Do: 縁の光は細く。太くすると輪が主役になる。 - Don't: 開く時間を 800ms 未満にしない。円が見えないうちに終わる。 - Don't: 円の外側を暗くしない(オーバーレイ禁止)。前の画面がそのまま残っているのが絞りの性質。 ## References - Spline: 「黒い虚空の中で、内容だけが光を発する」構成を借りた。半透明のガラス面は使わず、絞りの縁の光 1 本に置き換えた。 - Tatem: 「静かな暗い作業画面に、青から黒への柔らかい勾配と暖色 1 点」という配色の考え方を借りた。暖色を朝の画面全体に広げ、遷移そのものを夜→朝にした。 ## Usage 1. HTML: 遷移させたい 2 画面を `.screen` として同じ親(`position: fixed; inset: 0`)に重ね、後の方に `.front` を付ける。`.rim2` と `.rim` の空 div も親の中に置く。 2. CSS: `.front{will-change:clip-path}`、`.rim`、`.rim2` の 3 ルールを移植。`--ember` を自分の色に。 3. JS: `