# ピクセル化 — Style Reference > 黒い舞台に置いた一台の板状の機械が、左から来る前線で粗いブロックに砕け、白い比較表の画面に置き換わる。 **Theme:** dark **Series:** PARTS 073 **World:** 薄い計算機「SLAB」の製品ページ。A は黒い舞台の製品紹介、B は白い比較表。 ## Concept 遷移パーツ。画面の解像度を落として粗くし、ブロック単位で次の画面に置き換える。前線が左から右へ進み、前線の近くほどブロックが大きい。前線から離れた所は鮮明なので、途中の静止画が「A / モザイク / B」の3領域で読める。 初期表示は進み具合 0.5。無操作 2.6 秒で自動往復。カーソルの横位置で前線を動かせる。 色は A が黒と白文字と青のリンク1点、B が白と墨と青のボタン。製品(板)は 2D キャンバスのグラデーションだけで描く。 ## Signature Technique WebGL1、全画面クアッド1枚。2画面は 2D キャンバスで描いてテクスチャにする。 - 前線 `front = p*(1 + 2*BAND) - BAND`(BAND = 0.42)。`d = uv.x - front`。 - 粗さ `k = smoothstep(BAND, 0, |d|)`。ブロック幅 `block = 2^round(log2(1 + MAX_BLOCK*k²))`(MAX_BLOCK = 14×DPR px。製品の輪郭と見出しの字形が残る粗さ)。2 の冪に量子化して隣接ピクセルが同じ格子を共有する(連続値だと縦の筋になった)。 - セル `cell = floor(px/block)`、セル内の4点(1/4・3/4 の格子)を平均してサンプリング。中心1点だと文字や縁で白黒が飛び、境目が砂嵐に見えた。`block ≤ 1.5` のときは元の uv。 - 置き換え: セルの hash で `sw = 1 - step(0, d + (hash-0.5)*SCATTER*BAND)`。前線付近のセルが個別に A→B へ切り替わる(SCATTER = 0.08。境目は細かく揺れる1本の線に留める)。 - 粗いブロックには 12 段階の階調丸めを加える。目地 `SEAM` は 0(白い面に格子線が出るため使わない)。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | obsidian | #000000 | A の地 | | salt | #F5F5F7 | A の文字、B の地 | | charcoal | #1D1D1F | B の文字 | | slab-hi / slab-mid / slab-lo | #3A3B40 / #15161A / #0A0A0C | 板の金属グラデーション(45% に mid) | | screen | #050506 | 板の画面の地 | | card | #FFFFFF | B の比較カード | | screen-tint | rgba(90,120,200,.35)→rgba(220,120,90,.25) | 板の画面の反射 | | link-blue | #2997FF | A のリンク | | action-blue | #0071E3 | B のボタン | ## Typography - Zen Kaku Gothic New。A の見出し 700 `min(W*0.07, H*0.11)` px 中央揃え、B の見出し 700 `min(W*0.06, H*0.1)` px 左揃え。 - 本文 16〜19px、比較表の項目 14px。 - HUD 11px(mobile 10px)、字間 .14em、行間 1.8、`mix-blend-mode: difference`。 ## Spacing & Layout - 余白 `pad = clamp(20, 5vw, 72)`。A: 見出しの下に幅 58% の板(角丸 28px 相当)を置き、床の反射と青いリンクを添える。B: 2列の白いカード(mobile 1列)、青いピル。 - HUD は右下 18px / 16px(+safe-area)。640px 以下は左 16px に寄せて左揃え。 ## Motion - 自動往復: 初回 4.0 秒静止 → 2.2 秒で 0 へ(cubic in-out。p ≥ .5 なら 0、未満なら 1 へ向かう)→ 1.4 秒静止 → 2.2 秒で 1 へ。 - カーソル: `p = x/width` を lerp 0.18 で追従。2.6 秒無操作で自動に戻る。 - reduced-motion: 自動往復なし、カーソルで直接変わる。 - WebGL なし: 2D キャンバスで左 B / 右 A に分け、前線の帯だけ縮小拡大でモザイクにする。 ## Components - 画面 A: ブランドの下に見出し「薄く、静かに。」と1行。板と青いリンク「仕様を見る」。 - 画面 B: ラベル、見出し「どちらを選ぶか。」、2枚の比較カード(項目5行、青いボタン「購入」)。 - HUD: `VALE / PARTS 073 / ピクセル化` と操作説明。 ## Do / Don't - Do: 前線から離れた所は鮮明に保つ。全面モザイクの 50% は何の画面か分からなかった。 - Do: ブロック幅は 2 の冪に量子化する。 - Do: 置き換えはセル単位でばらつかせる(面で切り替えるとただのワイプ)。 - Don't: 最大ブロックを 80px 以上にしない(画面の内容が消える)。 - Don't: 目地を濃くしない(背景のグリッドに見える)。 - Don't: A と B で青の役割を変えない(A はリンク、B はボタン。どちらも1点)。 ## References - Apple(stock/refero/md/apple-4.md): 「黒い舞台に1つの製品を正確に照らし、文字と青の操作は控えめなラベル」を抽象化して A にした。製品写真の代わりに板をグラデーションで描く。 - Apple España(stock/refero/md/apple-espa-a-4.md): 「黒の劇場と白の比較面を行き来し、青はボタンだけ、角丸 28px、影なし」を抽象化して B の比較表にした。 ## Usage 1. ``、`.hud`、`