vercel-react-view-transitions

React のアプリの画面の切り替えに、自然なつなぎの動きを付けたいときに効きます。Vercel の公開元の手引きです。

何を・いつ・どう動かすかを分けて決める

仕組みは、ブラウザの document.startViewTransition を React が裏で呼ぶ形です。何を動かすかは <ViewTransition> で、いつかは startTransition などで、どう動くかは CSS で決めます。

既存のアプリに足すときは、同梱の references/implementation.md の手順に 1 段ずつ従い、最初の点検を飛ばすな、と本文にあります。

5 つの型を優先の順に

1. 共通の要素（name）「同じもの、奥へ進む」
2. 読み込み完了（Suspense）「データが来た」
3. 一覧の同一性（key）「同じ項目、並びが変わった」
4. 状態の変化（出入り）「現れた・消えた」
5. 頁の移動「新しい場所へ」

本文は、これは「1 つ選べ」ではなく当てはまるものを全部、この順に実装せよとしています。一方で、何を伝えるか言えない動きは付けるな、とも書かれています。

安定版の React だけで作りたいとき

ViewTransition は安定版に無く、Next.js の App Router 以外では canary 版を入れる必要があります。

動かすべきかから考えたいとき

動きを付ける前に、使う頻度で「動かさない」判断をするなら animate、候補を洗い出すなら find-animation-opportunities です。考え方がやや違います。

解析で見つかった記述と同梱ファイル

SKILL.md の解析では、シェルコマンドの実行の記述（npm ls react）が見つかっています。同梱ファイルは 8 件で、導入の手順、CSS の型、エージェント向けの説明などです。

Next.js では canary 版を入れません

App Router は React の canary 版を中に含んでいるので、そのまま使える、と本文にあります。npm ls react が安定版らしく見えても想定どおりだ、とも書かれています。

置き場所の決まりに注意が要ります

startViewTransition を自分で呼ばない

React が名前を振って document.startViewTransition を裏で呼ぶので、自分では決して呼ぶな、と本文にあります。

戻るボタンでは向きの付いた動きが出ない

router.back() とブラウザの戻る・進むボタンには遷移の種類が付かないため、種類で分けたスライドは既定の値になり、再生されません。種類の付かない共通の要素のつなぎは効きます。向きの付いた動きが要るなら、URL を明示した router.push() を使え、とされています。

動きを減らす設定は、必ず入れる決まりです

同梱の CSS の型に、動きを減らす設定用の CSS があり、全体のスタイルに足せ、と書かれています。

「全部実装せよ」は動きが多くなりがちです

頻繁に切り替える画面では、本文の使い分けを守ってください。横の移動（タブ間）はフェードか動き無し、裏の再読み込みは動き無し、です。

ライセンスの記載

SKILL.md は MIT としています。LICENSE のファイルはありませんが、リポジトリの README にも MIT と書かれています。

インストール数

インストール数は約 11.5 万件です。同じリポジトリの 9 件は約 6 万〜69.4 万件に散っていて（2026-09-20 の上流集計）、1 件ずつ選ばれている形です。

ふつうの setState では動きませんか

動きません。startTransition、useDeferredValue、Suspense のときだけ動く、と本文にあります。

対応していないブラウザでは

動きが付かないだけで、画面の切り替えはふつうに行われます（段階的な劣化）。