@squadbase/vantage 0.5.3-dev.71d2349 → 0.6.0-dev.3cc6138

package/skills/vantage-slide/references/morph.md

@@ -0,0 +1,102 @@
+# モーフトランジション（`MorphElement`）
+
+> モーフは `SlideTransition` の契約の上に載っています。まだなら `transitions.md` を先に読んでください。
+
+**同じ視覚的対象**が隣り合う 2 枚に存在するとき、切り替えの間それを連続して動かせます ——
+位置・大きさ・角丸・色が 1 つの動きとして補間されます（Keynote の「マジックムーブ」）。
+フェードアウトして入り直すのではなく。opt-in は 2 段階:
+
+1. **両方の**スライドで対象を `MorphElement` に包み、**同じ `id`** を付ける
+2. **入ってくる側**のスライドの `transition` で `morph` を有効にする
+
+```tsx
+import { MorphElement, Slide, SlideDeck, type SlideTransition } from "@squadbase/vantage/slide"
+
+// enter / exit を opacity だけにして、動きを全部クローンに預ける（→ 規則 1）
+const MORPH: SlideTransition = {
+  duration: 280,
+  exit: { duration: 224, easing: "cubic-bezier(0.4, 0, 1, 1)", keyframes: [{ opacity: 1 }, { opacity: 0 }] },
+  enter: { duration: 308, delay: 112, easing: "cubic-bezier(0, 0, 0.2, 1)", keyframes: [{ opacity: 0 }, { opacity: 1 }] },
+  morph: { duration: 868, easing: "cubic-bezier(0.4, 0, 0.2, 1)" },
+}
+
+const STAGE = { width: "100%", height: "100%", position: "relative", background: "#000" } as const
+
+<SlideDeck>
+  <Slide transition={MORPH}>
+    <div style={STAGE}>
+      <MorphElement id="pill">
+        <div style={{ position: "absolute", left: 842, top: 479, width: 236, height: 122, borderRadius: 999, background: "#fff" }} />
+      </MorphElement>
+    </div>
+  </Slide>
+  <Slide transition={MORPH}>
+    <div style={STAGE}>
+      <MorphElement id="pill">
+        <div style={{ position: "absolute", left: 721, top: 479, width: 478, height: 122, borderRadius: 999, background: "#0a0a0a" }} />
+      </MorphElement>
+    </div>
+  </Slide>
+</SlideDeck>
+```
+
+## 契約
+
+- `morph: true` は上位の `duration` / `easing` を継承します。`{ duration?, easing?, delay? }` を渡すと
+  ページのクロスフェードと独立に時間を決められます。**モーフはフェードの 2〜4 倍長い方がよく読めます**
+  （例: フェード 280ms、モーフ 868ms）。モーフするページのフェードは `transitions.md` の 140–280ms の帯を
+  超えてよい —— 長いモーフに合わせて時間を取っているからで、帯は非モーフのページを縛り続けます。
+- 要素は `id` で対応付けられます。対になったものは FLIP でモーフします: 両方の矩形を測り、出ていく側の
+  要素をクローンして両ページの上のオーバーレイに置き、元を隠して、transform・角丸・色をアニメートする
+  （枠線の太さは別のフレームに乗るので、箱と一緒に伸びません）。**`id` は 1 ページ内で一意にすること。**
+  `MorphElement` を入れ子にしないこと。
+- **片側にしかない `id` はその場でフェードイン / アウトします。** 「列に 3 つ目の箱が加わる」が
+  こう読めます —— 引き継がれた箱は新しい位置へ滑り、新しい箱はその場で像を結ぶ。
+- **モーフノードとその子孫の色も補間されます。** 途中で黒 → 白に反転するラベルもそのまま動きます。
+- トランジションは**入ってくる側**に付きます。戻るときも動かしたいなら、上の例のように**両方の
+  スライドに同じオブジェクトを渡す**こと。
+
+## 規則 —— どれも実際のデッキで学んだもの
+
+1. **モーフするページの enter / exit は opacity だけにする。** どの family でも正しく合成されます
+   （共有矩形はフェーズが始まる前に測られる）が、クローンが滑っている間に transform を持つ enter が
+   ページ全体も動かすと、2 つの動きが競合します。**動きを全部クローンに預けて残りをフェードさせる**のが、
+   モーフを 1 つの確信ある動作に見せる条件です。
+2. **モーフの座標はマウント時点で確定していること。** 矩形は切り替えの瞬間に 1 度だけ記録されます。
+   モーフ対象は**ピクセル定数で配置**し、マウント後に effect で測った値で置かないこと（再描画が
+   目標をずらし、動きが飛びます）。中の文字が時間とともに伸びる（タイプライタ等）なら、
+   測る箱が変わらないように**全幅の不可視スペーサ**を置きます。
+3. **モーフノード自身に `transform` を置かない。** パーセント指定の translate
+   （`translate(-50%, -50%)`）はモーフのスケールで誤って拡大され、クローンが数十 px ずれて着地します。
+   中央寄せ等の transform は `MorphElement` を**包む**プレーンな `<div>` に置くこと。
+4. **`MorphElement` は `className` / `style` を単一のホスト子要素にマージします**（子が単独の DOM 要素の
+   ときはラッパーを足しません）。したがって切り抜き用の箱（`overflow: hidden` + 固定幅）には
+   明示的な入れ子の `<div>` が要ります —— さもないと箱が中の `<img>` に潰れて画像が歪みます。
+5. **入場アニメーションは `useIsActiveSlide()` で門番すること。** 切り替えの間、ランタイムは出ていく
+   ページの**新しいインスタンス**をマウントして exit の状態を記録します（pptx 書き出しも全スライドを
+   オフスクリーンでマウントします）。そこで入場が再生されると、記録される状態がアニメーションの途中に
+   なり、モーフがおかしな位置から始まります。このフックは**聴衆が見ているインスタンスでだけ true** で、
+   それ以外（出ていく側の記録用、書き出し用）は完成した静止状態を描くべきです。
+
+   ```tsx
+   import { useIsActiveSlide } from "@squadbase/vantage/slide"
+
+   const animate = useIsActiveSlide()
+   ```
+
+6. **クローンは全ての上を通ります。** モーフのオーバーレイは両ページの上にあるので、クローンが
+   「着地したとき」に現れてほしい要素は、そのままだと早く出てしまいます。そういう出現には
+   モーフと同じだけの遅延を与えること（`animation: "slide-fade 0.63s ease-out 0.868s both"`。
+   `0.868s` は `morph.duration`。`slide-fade` はフレームワークが用意しないので
+   `@keyframes slide-fade { from { opacity: 0 } to { opacity: 1 } }` を自分で書く）。
+   その数値は共有の const に 1 つ置いて、ずれないようにします。
+7. **「そのまま留める」ページは別のスライドにする。** トランジションは入ってくる側に付くので、
+   モーフの後に同じ中身をカットで見せたいなら、`transition` を持たない `<Slide>` をもう 1 枚置きます。
+
+## いつ使うか
+
+モーフは**状態の連続**のための道具です: トグルのつまみが次の選択肢へ滑る、カードが詳細ビューへ広がる、
+ロゴが中央から次のページの図の中へ移る、列に箱が 1 つ増える。**その対象が切り替えをまたぐ物語そのもの**
+であるとき。装飾をモーフさせないこと、「念のため」でタグを付けないこと —— モーフの id はどれも
+「これは同じ物です」という聴衆への約束です。1 章につきモーフする流れは 1〜2 回で十分で、
+周りのページは静かにカットかフェードしているべきです。

package/skills/vantage-slide/references/steps.md

@@ -0,0 +1,57 @@
+# 段階表示（`<Steps>` / `<Step>`）
+
+一度に全部見せる代わりに、1 拍ずつ開いていきます。後から出す部分を `<Step>` で、そのまとまりを
+`<Steps>` で包む。`→` を押すたびに次の `<Step>` が現れ、最後の 1 つの後の `→` で次のスライドへ
+進みます。`←` は直前の 1 つを畳みます。**順序そのものが主張になっている**ときに使う道具です
+—— 前提 → 帰結 → 転換のように、聴衆が話し手の速さで読むようにするためのもの。
+
+```tsx
+import { Step, Steps } from "@squadbase/vantage/slide"
+
+<Steps>
+  <Step><p style={ROW}>聴衆は話し手より速く読む。</p></Step>
+  <Step><p style={ROW}>全部を一度に出すと先読みされる。</p></Step>
+  <Step><p style={ROW}>時間差で出すと注意を配れる。</p></Step>
+</Steps>
+```
+
+## 規則
+
+- **`<Step>` は `<Steps>` の直接の子でなければならない。** 深くネストした（あるいは `<Steps>` の
+  外に置いた）`<Step>` は**最初から全部表示された状態**で描かれ、何も遅延しません。静かに効かない
+  ので気づきにくい。
+- **`<Step>` でない子はすぐ表示される。** 見出しや導入の段落を `<Steps>` の中にプレーンな要素として
+  置けば最初から見えます。「見出しは常に、本文は順に」のパターン:
+
+  ```tsx
+  <Steps>
+    <h2>全部が待つ必要はない。</h2>{/* 最初から見える */}
+    <Step><p>まず状況を置いて…</p></Step>
+    <Step><p>次に帰結を重ねる…</p></Step>
+  </Steps>
+  ```
+
+- **1 ページに複数の `<Steps>` があるとマウント順に連なる。** 最初のまとまりが全部開いてから
+  次が始まり、`←` は逆順に畳みます。左の列 → 右の列の順に組み上げる 2 カラムは、各列が自分の
+  `<Steps>` を持てばそのまま実現できます。
+- **入り方で初期状態が変わる —— 同じ中身、2 つのリズム。** 前のスライドから `→` で進んで入ると
+  空から積み上がります。`?p=` のリンクで直接入る、あるいは後ろのスライドから戻ってくると、
+  **全部開いた完成形**で表示されます。**どちらでも読めるように設計すること** —— 直リンクで開いた
+  ときに白紙に見えるページは失敗です。
+- **`<Step>` は `duration` ミリ秒（既定 180）でフェードインする。** `<Step duration={...}>` で変えられます。
+  `prefers-reduced-motion: reduce` は自動で即時カットになるので、フォールバックを書く必要はありません。
+- **pptx 書き出しでは全部開いた状態で出ます。** 書き出しは `<Steps>` のホストを持たないインスタンスで
+  描かれるため。段階表示は画面での演出であって、配布物の状態ではありません。
+
+## いつ使うか
+
+順序が主張になっているとき —— 最後の項目が落ちどころになる箇条書き、結論への積み上げ、
+before / after。**全ページの中身を反射的に `<Step>` で包まないこと**: 一目で受け取ってほしい
+ページ（ヒーロータイトル、引用 1 つ、図）は、丸ごと見せた方が強い。段階表示は演出ではなく
+タイミングの道具で、トランジションと同じ節度が要ります。
+
+## アンチパターン
+
+- ❌ 全ページの中身を反射的に `<Step>` で包む。一目で伝わるページは丸ごと見せる方が強い
+- ❌ `<Steps>` の直接の子でない `<Step>`（深いネスト、`<Steps>` 無し）。全開で描かれ、何も遅延しない
+- ❌ 直リンクで開くと白紙に見えるページ。`?p=` で入ると全開になることを前提に設計する

package/skills/vantage-slide/references/tokens.md

@@ -0,0 +1,87 @@
+# デザイントークンと書体
+
+## トークンの解決順
+
+スライドの色と書体は CSS カスタムプロパティ `--slide-*` から来ます。値は 3 段で解決されます:
+
+1. **`theme.css`（フレームワーク）** —— `--slide-bg: var(--background)` のように、アプリ自身の
+   トークンへの**別名**が張ってあります。CSS 変数は遅延解決なので、これだけでデッキは
+   アプリのライト / ダークの切り替えに自動で追従します
+2. **アプリの `styles.css`** —— アプリがトークンを上書きしていれば、デッキもそれに従います
+3. **`<SlideDeck theme={{ … }}>`** —— そのデッキのルートにインラインで書かれ、上の 2 つに勝ちます
+
+| プロパティ | CSS 変数 | 既定 |
+| --- | --- | --- |
+| `bg` | `--slide-bg` | `var(--background)` |
+| `fg` | `--slide-fg` | `var(--foreground)` |
+| `accent` | `--slide-accent` | `var(--primary)` |
+| `muted` | `--slide-muted` | `var(--muted-foreground)` |
+| `fontDisplay` | `--slide-font-display` | 日本語を含むシステムスタック |
+| `fontBody` | `--slide-font-body` | `var(--slide-font-display)` |
+| `sizeHero` | `--slide-size-hero` | `168px` |
+| `sizeBody` | `--slide-size-body` | `36px` |
+| `radius` | `--slide-radius` | `var(--radius)` |
+
+```tsx
+<SlideDeck theme={{ bg: "#0f172a", fg: "#f8fafc", accent: "#fbbf24" }}>
+```
+
+**使うときは変数で参照します** —— `color: "var(--slide-fg)"`、`fontSize: "var(--slide-size-hero)"`。
+`theme` に渡した値を直接書かないこと。変数経由にしておけば、`theme` を 1 行変えるだけでデッキ全体が
+追従します。
+
+**`theme` に無い色はプレーンな const に置く**（`const muted = "#94a3b8"`）。`theme` は
+「デッキの土台となる 3〜4 色」のためのもので、パレット全部を入れる場所ではありません。
+
+## ダークモード
+
+`theme` を渡さないデッキは、アプリのトークンをそのまま使います —— つまり `.dark` /
+`[data-theme="dark"]` が祖先に付いていればダークで描かれます。**明暗の両方を自分で管理する必要は
+ありません。**
+
+`theme` に具体的な色（`bg: "#0f172a"`）を書いた瞬間、そのデッキは明暗に追従しなくなります。
+これは意図的です —— 配色を決め打ちしたデッキは、どちらのモードでもその配色であるべきだからです。
+追従させたいなら `theme` を渡さないこと。
+
+## 書体
+
+**既定はシステムスタックで、まずこれを使ってください。** 日本語を含むスタックが最初から入っています。
+
+webfont が本当に必要なとき（ブランドフォント、あるいはシステムのカバーが薄い言語）:
+
+- **`<head>` に 1 回だけ、冪等に読み込む。** スライドコンポーネントの中でスタイルシートを描かないこと。
+  切り替え中は 2 枚のスライドが同時にマウントされ、pptx 書き出しでは全スライドが同時にマウントされます
+  —— コンポーネントの中で `<link>` を描くと `@font-face` の集合が**マウント数だけ**登録されます。
+  `.slide.tsx` のモジュールのトップレベルから 1 回だけ注入します:
+
+  ```tsx
+  const FONT_HREF = "https://fonts.googleapis.com/css2?family=...&display=swap"
+  const FONT_LINK_ID = "vantage-slide-font-june"  // デッキごとに違う id にする
+  if (typeof document !== "undefined" && !document.getElementById(FONT_LINK_ID)) {
+    const link = document.createElement("link")
+    link.id = FONT_LINK_ID
+    link.rel = "stylesheet"
+    link.href = FONT_HREF
+    document.head.appendChild(link)
+  }
+  ```
+
+- **実際に使うウェイトだけを列挙する。** 余分な 1 ウェイトが `@font-face` の数を倍にします。
+
+## webfont と pptx 書き出し —— ここが壊れやすい
+
+pptx 書き出しは、スライドを SVG の `foreignObject` の中でラスタライズします。この隔離された
+描画コンテキストでは:
+
+- **ローカルにインストールされたフォントはファミリ名で解決されます。** システムスタックなら
+  埋め込みは 1 バイトも要りません。既定のままなら何もしなくてよい、ということです
+- **webfont は data URL としてインライン化されていなければ使えません。** 書き出しは
+  `getFontEmbedCSS` で自動的にインライン化しますが、それには 2 つの条件があります:
+  - **同一オリジンか CORS が有効**であること（Google Fonts は CORS 有効）
+  - **サブセットしてあること。** 日本語の webfont は致命的です —— Noto Sans JP のフルセットは
+    100 を超える `unicode-range` の face を持ち、全部を base64 化しようとして書き出しが
+    タイムアウトするか、文字が豆腐になります。デッキの文字が固定なら Google Fonts の URL に
+    **`&text=<使う文字>`** を付けて、単一 face の小さなサブセットを要求してください
+
+**判断の目安**: 日本語のデッキで pptx を配る予定があるなら、**システムスタックのままにする**のが
+最も確実です。ブランドフォントが要件なら `&text=` のサブセットにすること。

package/skills/vantage-slide/references/transitions.md

@@ -0,0 +1,196 @@
+# ページ間トランジション（`SlideTransition`）
+
+スライドが切り替わるときの enter / exit アニメーションです。**既定はありません** ——
+宣言しない限りページはスナップで入れ替わり、そのスナップも十分に上品な既定です。
+動きが何かを足すときだけ opt-in してください。
+
+`prefers-reduced-motion: reduce` は自動で尊重されます。フォールバックを書く必要はありません。
+
+（2 枚にまたがる同一要素を動かす「Magic Move」は `morph.md`。この契約の上に載っています。）
+
+## 契約
+
+トランジションは `<Slide transition={...}>` に付けます。**入ってくる側が勝ちます**:
+A → B の移動では B の `transition` が使われ、その `exit` が A で、`enter` が B で再生されます。
+B → A と戻るときは A の `transition` が使われるので、**両方向で動かしたいなら両方のスライドに
+同じオブジェクトを渡します**。
+
+```tsx
+import { Slide, SlideDeck, type SlideTransition } from "@squadbase/vantage/slide"
+
+const RISE: SlideTransition = { /* … */ }
+
+<SlideDeck>
+  <Slide>…</Slide>
+  <Slide transition={RISE}>…</Slide>
+</SlideDeck>
+```
+
+```ts
+type TransitionPhase = {
+  keyframes: Keyframe[] | PropertyIndexedKeyframes  // WAAPI のキーフレーム
+  duration?: number   // ms（省略時は上位の duration）
+  easing?: string     // CSS easing
+  delay?: number      // ms —— exit と enter を重ねるのに使う
+}
+type SlideTransition = {
+  duration: number                     // 上位のフォールバック
+  easing?: string
+  enter?: TransitionPhase              // 入ってくる側で再生
+  exit?: TransitionPhase               // 出ていく側で再生
+  morph?: boolean | MorphTransition    // 共有要素のモーフ → morph.md
+}
+```
+
+ラッパーには `--slide-dir`（前進 `1` / 後退 `-1`）と `data-slide-dir`（`"forward"` / `"backward"`）が
+出るので、JS のコールバック無しに 1 つのキーフレームで方向を反転できます。
+
+## 設計原則（ここは崩さない）
+
+「PowerPoint で作りました」と最も大きく告げるのは、1 つのデッキに 6 種類のトランジションがあることです。
+節度がリズムを作ります。
+
+- **DNA を 1 つ選び、デッキ全体で保つ。** 同じ duration 帯、同じ easing の組、同じ out → in のずらし方。
+  変えてよいのは**どのプロパティに小さな一押しを乗せるか**だけ —— Y、X、opacity、scale、blur
+- **duration: 140–280ms。** exit 140–180ms、enter 200–280ms、enter を 80ms ほど遅らせて重ねる。
+  350ms を超えると動画編集の領域で、本当の状態変化のために取っておく
+- **振れ幅の上限: 12px か 3% スケール。** 6px の Y 上昇は「次の考え」に読める。1920px の translateX は
+  「別の書類」に読める。上質なツールは、気づく分だけしか動かさない
+- **opacity は常に混ぜる。** transform だけのトランジションは硬く、opacity だけのものは最も安全な既定
+- **easing: exit は ease-in、enter は ease-out。** 出るとき `cubic-bezier(0.4, 0, 1, 1)`、
+  入るとき `cubic-bezier(0, 0, 0.2, 1)`。`linear` は使わない（スライドショーに見える）。
+  対称な ease-in-out は状態が繋がるモーフのために取っておく
+
+## 上品な family —— 6 つ、1 つの DNA
+
+ここから選んでください。1 つをデッキの標準にし、必要ならヒーロー / 表紙用に 2 つ目、
+本当の章の切れ目に 3 つ目を取っておきます。
+
+```tsx
+const EASE_OUT = "cubic-bezier(0, 0, 0.2, 1)"
+const EASE_IN = "cubic-bezier(0.4, 0, 1, 1)"
+
+// RISE —— 標準の静けさ。Y に 6px。デッキの既定にする
+const RISE: SlideTransition = {
+  duration: 200,
+  exit: {
+    duration: 140, easing: EASE_IN,
+    keyframes: [
+      { opacity: 1, transform: "translateY(0)" },
+      { opacity: 0, transform: "translateY(-4px)" },
+    ],
+  },
+  enter: {
+    duration: 200, delay: 80, easing: EASE_OUT,
+    keyframes: [
+      { opacity: 0, transform: "translateY(6px)" },
+      { opacity: 1, transform: "translateY(0)" },
+    ],
+  },
+}
+
+// DISSOLVE —— opacity だけ。最も静か
+const DISSOLVE: SlideTransition = {
+  duration: 240,
+  exit: { duration: 200, easing: EASE_IN, keyframes: [{ opacity: 1 }, { opacity: 0 }] },
+  enter: { duration: 240, delay: 40, easing: EASE_OUT, keyframes: [{ opacity: 0 }, { opacity: 1 }] },
+}
+
+// SETTLE —— 表紙向き。上昇 + enter だけにわずかな blur
+const SETTLE: SlideTransition = {
+  duration: 280,
+  exit: {
+    duration: 160, easing: EASE_IN,
+    keyframes: [
+      { opacity: 1, transform: "translateY(0)" },
+      { opacity: 0, transform: "translateY(-6px)" },
+    ],
+  },
+  enter: {
+    duration: 280, delay: 100, easing: EASE_OUT,
+    keyframes: [
+      { opacity: 0, transform: "translateY(12px)", filter: "blur(4px)" },
+      { opacity: 1, transform: "translateY(0)", filter: "blur(0)" },
+    ],
+  },
+}
+
+// BLOOM —— scale 0.97 → 1、移動なし。その場で像を結ぶ
+const BLOOM: SlideTransition = {
+  duration: 240,
+  exit: {
+    duration: 160, easing: EASE_IN,
+    keyframes: [
+      { opacity: 1, transform: "scale(1)" },
+      { opacity: 0, transform: "scale(1.01)" },
+    ],
+  },
+  enter: {
+    duration: 240, delay: 80, easing: EASE_OUT,
+    keyframes: [
+      { opacity: 0, transform: "scale(0.97)" },
+      { opacity: 1, transform: "scale(1)" },
+    ],
+  },
+}
+
+// FALL —— RISE の鏡像。上から降りてくる
+const FALL: SlideTransition = {
+  duration: 200,
+  exit: {
+    duration: 140, easing: EASE_IN,
+    keyframes: [
+      { opacity: 1, transform: "translateY(0)" },
+      { opacity: 0, transform: "translateY(4px)" },
+    ],
+  },
+  enter: {
+    duration: 200, delay: 80, easing: EASE_OUT,
+    keyframes: [
+      { opacity: 0, transform: "translateY(-6px)" },
+      { opacity: 1, transform: "translateY(0)" },
+    ],
+  },
+}
+
+// BREATH —— 章の切れ目。完全に消してから 120ms 置いて入る
+// 本当の区切りにだけ、デッキ 1 本で 1〜2 回まで
+const BREATH: SlideTransition = {
+  duration: 460,
+  exit: { duration: 180, easing: EASE_IN, keyframes: [{ opacity: 1 }, { opacity: 0 }] },
+  enter: {
+    duration: 240, delay: 300, easing: EASE_OUT,
+    keyframes: [
+      { opacity: 0, transform: "translateY(8px)" },
+      { opacity: 1, transform: "translateY(0)" },
+    ],
+  },
+}
+```
+
+6 つは同じ DNA を共有していて、小さな一押しをどのプロパティに乗せるかだけが違います。
+読み手には変化に見え、それでいて 1 つの手つきに読めます。
+
+## 方向を意識したキーフレーム（控えめに）
+
+上品なツールの多くは後退時に鏡像化しません。本当に必要なとき（横に流れるスライドを逆再生したい等）
+だけ `--slide-dir` を `calc()` の中で使います:
+
+```tsx
+{ transform: "translateX(calc(var(--slide-dir, 1) * 8px))" },
+{ transform: "translateX(0)" },
+```
+
+毎回これに手が伸びるなら、たぶん設計しすぎです。前進 = 後退の方が洗練された既定。
+
+## アンチパターン
+
+- ❌ 6 ページに 6 種類のトランジション —— 最も大きな「PowerPoint 感」の合図
+- ❌ `translateX(100%)` の横スライド —— iOS のモーダルや PowerPoint の Push であって、スライドの切り替えではない
+- ❌ 強いスケールのポップ（`0.85 → 1`）+ blur —— ライトボックスの語彙で、何かに「ズームイン」する意味になる
+- ❌ `clip-path: inset(…)` のワイプ —— After Effects の語彙。芝居がかる
+- ❌ 両方のレイヤーに同時に blur —— 視覚的な濁り。目が焦点を結べない
+- ❌ 通常の切り替えで 350ms を超える duration —— 間延びする
+- ❌ 12px / 3% を超える移動 —— 連続ではなく断絶に読める
+- ❌ `linear` easing —— プロダクトではなくスライドショーに見える
+- ❌ とりあえずトランジションを宣言する。**理由が無いなら書かない。** スナップで十分