[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-vercel-labs-vercel-react-view-transitions":3,"mdc-cqc5lm-key":33,"related-repo-vercel-labs-vercel-react-view-transitions":4696,"related-org-vercel-labs-vercel-react-view-transitions":4788},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":28,"sourceUrl":31,"mdContent":32},"vercel-react-view-transitions","implement React View Transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"vercel-labs","Vercel Labs","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fvercel-labs.png",[12,16,19],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Animation","animation",{"name":20,"slug":21,"type":15},"Frontend","frontend",28993,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills","2026-07-26T05:48:25.346984","MIT",2597,[],{"repoUrl":23,"stars":22,"forks":26,"topics":29,"description":30},[],"Vercel's official collection of agent skills","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Ftree\u002FHEAD\u002Fskills\u002Freact-view-transitions","---\nname: vercel-react-view-transitions\ndescription: Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.\nlicense: MIT\nmetadata:\n  author: vercel\n  version: \"1.0.0\"\n---\n\n# React View Transitions\n\nAnimate between UI states using the browser's native `document.startViewTransition`. Declare *what* with `\u003CViewTransition>`, trigger *when* with `startTransition` \u002F `useDeferredValue` \u002F `Suspense`, control *how* with CSS classes. Unsupported browsers skip animations gracefully.\n\n## When to Animate\n\nEvery `\u003CViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.\n\nImplement **all** applicable patterns from this list, in this order:\n\n| Priority | Pattern | What it communicates |\n|----------|---------|---------------------|\n| 1 | **Shared element** (`name`) | \"Same thing — going deeper\" |\n| 2 | **Suspense reveal** | \"Data loaded\" |\n| 3 | **List identity** (per-item `key`) | \"Same items, new arrangement\" |\n| 4 | **State change** (`enter`\u002F`exit`) | \"Something appeared\u002Fdisappeared\" |\n| 5 | **Route change** (layout-level) | \"Going to a new place\" |\n\nThis is an implementation order, not a \"pick one\" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.\n\n### Choosing Animation Style\n\n| Context | Animation | Why |\n|---------|-----------|-----|\n| Hierarchical navigation (list → detail) | Type-keyed `nav-forward` \u002F `nav-back` | Communicates spatial depth |\n| Lateral navigation (tab-to-tab) | Bare `\u003CViewTransition>` (fade) or `default=\"none\"` | No depth to communicate |\n| Suspense reveal | `enter`\u002F`exit` string props | Content arriving |\n| Revalidation \u002F background refresh | `default=\"none\"` | Silent — no animation needed |\n\nReserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev\u002Fnext photo, carousel, paginated results). For ordered sequences, the direction communicates position: \"next\" slides from right, \"previous\" from left. Lateral\u002Funordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.\n\n---\n\n## Availability\n\n- **Next.js:** Do **not** install `react@canary` — the App Router already bundles React canary internally. `ViewTransition` works out of the box. `npm ls react` may show a stable-looking version; this is expected.\n- **Without Next.js:** Install `react@canary react-dom@canary` (`ViewTransition` is not in stable React).\n- Browser support: Chromium 125+ (React needs the v2 object form of `startViewTransition`), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.\n\n---\n\n## Implementation Workflow\n\nWhen adding view transitions to an existing app, **follow [references\u002Fimplementation.md](references\u002Fimplementation.md) step by step.** Start with the audit — do not skip it. Copy the CSS recipes from [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md) into the global stylesheet — do not write your own animation CSS.\n\n---\n\n## Core Concepts\n\n### The `\u003CViewTransition>` Component\n\n```jsx\nimport { ViewTransition } from 'react';\n\n\u003CViewTransition>\n  \u003CComponent \u002F>\n\u003C\u002FViewTransition>\n```\n\nReact auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.\n\n### Animation Triggers\n\n| Trigger | When it fires |\n|---------|--------------|\n| **enter** | `\u003CViewTransition>` first inserted during a Transition |\n| **exit** | `\u003CViewTransition>` first removed during a Transition |\n| **update** | DOM mutations inside a `\u003CViewTransition>`, or the boundary itself changing size\u002Fposition due to an immediate sibling. With nested VTs, mutation applies to the innermost one |\n| **share** | Named VT unmounts and another with same `name` mounts in the same Transition |\n\nOnly `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.\n\n### Critical Placement Rule\n\n`\u003CViewTransition>` only activates enter\u002Fexit if it appears **before any DOM nodes**:\n\n```jsx\n\u002F\u002F Works\n\u003CViewTransition enter=\"auto\" exit=\"auto\">\n  \u003Cdiv>Content\u003C\u002Fdiv>\n\u003C\u002FViewTransition>\n\n\u002F\u002F Broken — div wraps the VT, suppressing enter\u002Fexit\n\u003Cdiv>\n  \u003CViewTransition enter=\"auto\" exit=\"auto\">\n    \u003Cdiv>Content\u003C\u002Fdiv>\n  \u003C\u002FViewTransition>\n\u003C\u002Fdiv>\n```\n\n---\n\n## Styling with View Transition Classes\n\n### Props\n\nValues: `\"auto\"` (browser cross-fade), `\"none\"` (disabled), `\"class-name\"` (custom CSS), or `{ [type]: value }` for type-specific animations.\n\n```jsx\n\u003CViewTransition default=\"none\" enter=\"slide-in\" exit=\"slide-out\" share=\"morph\" \u002F>\n```\n\nIf `default` is `\"none\"`, all triggers are off unless explicitly listed.\n\n### CSS Pseudo-Elements\n\n- `::view-transition-old(.class)` — outgoing snapshot\n- `::view-transition-new(.class)` — incoming snapshot\n- `::view-transition-group(.class)` — container\n- `::view-transition-image-pair(.class)` — old + new pair\n\nSee [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md) for ready-to-use animation recipes.\n\n---\n\n## Transition Types\n\nTag transitions with `addTransitionType` so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:\n\n```jsx\nstartTransition(() => {\n  addTransitionType('nav-forward');\n  addTransitionType('select-item');\n  router.push('\u002Fdetail\u002F1');\n});\n```\n\nPass an object to map types to CSS classes. Works on `enter`, `exit`, **and** `share`:\n\n```jsx\n\u003CViewTransition\n  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}\n  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}\n  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}\n  default=\"none\"\n>\n  \u003CPage \u002F>\n\u003C\u002FViewTransition>\n```\n\n`enter` and `exit` don't have to be symmetric. For example, fade in but slide out directionally:\n\n```jsx\n\u003CViewTransition\n  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}\n  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n  default=\"none\"\n>\n```\n\n**TypeScript:** `ViewTransitionClassPerType` requires a `default` key in the object.\n\nFor apps with multiple pages, extract the type-keyed VT into a reusable wrapper:\n\n```jsx\nexport function DirectionalTransition({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CViewTransition\n      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      default=\"none\"\n    >\n      {children}\n    \u003C\u002FViewTransition>\n  );\n}\n```\n\n### `router.back()` and Browser Back Button\n\n`router.back()` and the browser's back\u002Fforward buttons carry **no transition types**, so type-keyed animations (directional slides) resolve to their `default` and don't play — untyped shared-element morphs still apply. For typed animations, use `router.push()` with an explicit URL.\n\n### Types and Suspense\n\nTypes are available during navigation but **not** during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter\u002Fexit; use simple string props for Suspense reveals.\n\n---\n\n## Shared Element Transitions\n\nSame `name` on two VTs — one unmounting, one mounting — creates a shared element morph:\n\n```jsx\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Fthumb.jpg\" onClick={() => startTransition(() => onSelect())} \u002F>\n\u003C\u002FViewTransition>\n\n\u002F\u002F On the other view — same name\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Ffull.jpg\" \u002F>\n\u003C\u002FViewTransition>\n```\n\n- Only one VT with a given `name` can be mounted at a time — use unique names (`photo-${id}`). Watch for reusable components: if a component with a named VT is rendered in both a modal\u002Fpopover *and* a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.\n- `share` takes precedence over `enter`\u002F`exit`. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), `enter`\u002F`exit` fires instead. Consider whether the element needs a fallback animation for those paths.\n- Two ways a wired-up morph silently never fires: (1) `default=\"none\"` with no explicit `share` prop — share resolves to none; (2) type-keyed `share` where the navigation never adds the type — a plain link click resolves the map's `default`. Every link that should morph must add the type (`transitionTypes` on `next\u002Flink`, or `addTransitionType`).\n- Never use a fade-out exit on pages with shared morphs — use a directional slide instead.\n\n---\n\n## Common Patterns\n\n### Enter\u002FExit\n\n```jsx\n{show && (\n  \u003CViewTransition enter=\"fade-in\" exit=\"fade-out\">\u003CPanel \u002F>\u003C\u002FViewTransition>\n)}\n```\n\n### List Reorder\n\n```jsx\n{items.map(item => (\n  \u003CViewTransition key={item.id}>\u003CItemCard item={item} \u002F>\u003C\u002FViewTransition>\n))}\n```\n\nTrigger inside `startTransition`. Avoid wrapper `\u003Cdiv>`s between list and VT.\n\n### Layout Displacement Morph\n\nOnly content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing\u002Fshrinking list in a bare `\u003CViewTransition>` so it glides instead of jumping. See [Layout Displacement Morph](references\u002Fpatterns.md#layout-displacement-morph).\n\n### Composing Shared Elements with List Identity\n\nShared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested `\u003CViewTransition>` boundaries:\n\n```jsx\n{items.map(item => (\n  \u003CViewTransition key={item.id}>                                      {\u002F* list identity *\u002F}\n    \u003CLink href={`\u002Fitems\u002F${item.id}`}>\n      \u003CViewTransition name={`item-image-${item.id}`} share=\"morph\">   {\u002F* shared element *\u002F}\n        \u003CImage src={item.image} \u002F>\n      \u003C\u002FViewTransition>\n      \u003Cp>{item.name}\u003C\u002Fp>\n    \u003C\u002FLink>\n  \u003C\u002FViewTransition>\n))}\n```\n\nThe outer VT handles list reorder\u002Fenter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.\n\n### Force Re-Enter with `key`\n\n```jsx\n\u003CViewTransition key={searchParams.toString()} enter=\"slide-up\" default=\"none\">\n  \u003CResultsGrid \u002F>\n\u003C\u002FViewTransition>\n```\n\n**Caution:** If wrapping `\u003CSuspense>`, changing `key` remounts the boundary and refetches.\n\n### Suspense Fallback to Content\n\nSimple cross-fade:\n```jsx\n\u003CViewTransition>\n  \u003CSuspense fallback={\u003CSkeleton \u002F>}>\u003CContent \u002F>\u003C\u002FSuspense>\n\u003C\u002FViewTransition>\n```\n\nDirectional reveal:\n```jsx\n\u003CSuspense fallback={\u003CViewTransition exit=\"slide-down\">\u003CSkeleton \u002F>\u003C\u002FViewTransition>}>\n  \u003CViewTransition enter=\"slide-up\" default=\"none\">\u003CContent \u002F>\u003C\u002FViewTransition>\n\u003C\u002FSuspense>\n```\n\nFor more patterns, see [references\u002Fpatterns.md](references\u002Fpatterns.md).\n\n---\n\n## How Multiple VTs Interact\n\nEvery VT matching the trigger fires simultaneously in a single `document.startViewTransition`. VTs in **different** transitions (navigation vs later Suspense resolve) don't compete.\n\n### Use `default=\"none\"` Deliberately\n\nWithout it, every VT fires the browser cross-fade on **every** transition — Suspense resolves, `useDeferredValue` updates, background revalidations. Use `default=\"none\"` on named\u002Fshared elements and type-keyed page VTs.\n\nBut it also turns off `update` (layout\u002Freflow morphs) and `share` (a named pair with no explicit `share` prop never morphs). Keyed list items and displaced siblings *want* update — leave them bare or set `update=\"auto\"`.\n\n### Two Patterns Coexist\n\n**Pattern A — Directional slides:** Type-keyed VT on each page, fires during navigation.\n**Pattern B — Suspense reveals:** Simple string props, fires when data loads (no type).\n\nThey coexist because they fire at different moments. `default=\"none\"` on both prevents cross-interference. Always pair `enter` with `exit`. Place directional VTs in page components, not layouts.\n\n### Nested VT Limitation\n\nWhen a parent VT mounts\u002Funmounts **as one unit** with nested VTs inside it, the nested ones do not fire their own enter\u002Fexit — only the outermost VT animates. (A child VT mounted inside a *persistent* parent VT fires enter\u002Fexit normally.) Per-item staggered animations during page navigation are not possible today; the experimental opt-in is the `parentEnter`\u002F`parentExit` props ([react#36690](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fpull\u002F36690), experimental channel only).\n\n---\n\n## Next.js Integration\n\nFor Next.js setup (`experimental.viewTransition` flag, `transitionTypes` prop on `next\u002Flink`, App Router patterns, Server Components), see [references\u002Fnextjs.md](references\u002Fnextjs.md).\n\n---\n\n## Accessibility\n\nAlways add the reduced motion CSS from [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md#reduced-motion) to your global stylesheet.\n\n---\n\n## Reference Files\n\n- **[references\u002Fimplementation.md](references\u002Fimplementation.md)** — Step-by-step implementation workflow.\n- **[references\u002Fpatterns.md](references\u002Fpatterns.md)** — Patterns, animation timing, events API, troubleshooting.\n- **[references\u002Fcss-recipes.md](references\u002Fcss-recipes.md)** — Ready-to-use CSS animation recipes.\n- **[references\u002Fnextjs.md](references\u002Fnextjs.md)** — Next.js App Router patterns and Server Component details.\n\n## Full Compiled Document\n\nFor the complete guide with all reference files expanded: `AGENTS.md`\n",{"data":34,"body":38},{"name":4,"description":6,"license":25,"metadata":35},{"author":36,"version":37},"vercel","1.0.0",{"type":39,"children":40},"root",[41,50,117,124,136,149,324,329,336,473,478,482,488,571,574,580,607,610,616,629,759,786,792,900,934,940,957,1238,1241,1247,1253,1290,1398,1418,1424,1471,1482,1485,1491,1504,1662,1692,2083,2100,2347,2371,2376,2761,2773,2805,2811,2822,2825,2831,2843,3083,3208,3211,3217,3223,3338,3344,3471,3491,3497,3515,3521,3533,3911,3916,3927,4051,4076,4082,4087,4171,4176,4334,4345,4348,4354,4373,4386,4412,4452,4458,4475,4500,4506,4550,4553,4559,4592,4595,4601,4613,4616,4622,4673,4679,4690],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"react-view-transitions",[47],{"type":48,"value":49},"text","React View Transitions",{"type":42,"tag":51,"props":52,"children":53},"p",{},[54,56,63,65,71,73,79,81,86,87,93,95,101,102,108,110,115],{"type":48,"value":55},"Animate between UI states using the browser's native ",{"type":42,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":48,"value":62},"document.startViewTransition",{"type":48,"value":64},". Declare ",{"type":42,"tag":66,"props":67,"children":68},"em",{},[69],{"type":48,"value":70},"what",{"type":48,"value":72}," with ",{"type":42,"tag":57,"props":74,"children":76},{"className":75},[],[77],{"type":48,"value":78},"\u003CViewTransition>",{"type":48,"value":80},", trigger ",{"type":42,"tag":66,"props":82,"children":83},{},[84],{"type":48,"value":85},"when",{"type":48,"value":72},{"type":42,"tag":57,"props":88,"children":90},{"className":89},[],[91],{"type":48,"value":92},"startTransition",{"type":48,"value":94}," \u002F ",{"type":42,"tag":57,"props":96,"children":98},{"className":97},[],[99],{"type":48,"value":100},"useDeferredValue",{"type":48,"value":94},{"type":42,"tag":57,"props":103,"children":105},{"className":104},[],[106],{"type":48,"value":107},"Suspense",{"type":48,"value":109},", control ",{"type":42,"tag":66,"props":111,"children":112},{},[113],{"type":48,"value":114},"how",{"type":48,"value":116}," with CSS classes. Unsupported browsers skip animations gracefully.",{"type":42,"tag":118,"props":119,"children":121},"h2",{"id":120},"when-to-animate",[122],{"type":48,"value":123},"When to Animate",{"type":42,"tag":51,"props":125,"children":126},{},[127,129,134],{"type":48,"value":128},"Every ",{"type":42,"tag":57,"props":130,"children":132},{"className":131},[],[133],{"type":48,"value":78},{"type":48,"value":135}," should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.",{"type":42,"tag":51,"props":137,"children":138},{},[139,141,147],{"type":48,"value":140},"Implement ",{"type":42,"tag":142,"props":143,"children":144},"strong",{},[145],{"type":48,"value":146},"all",{"type":48,"value":148}," applicable patterns from this list, in this order:",{"type":42,"tag":150,"props":151,"children":152},"table",{},[153,177],{"type":42,"tag":154,"props":155,"children":156},"thead",{},[157],{"type":42,"tag":158,"props":159,"children":160},"tr",{},[161,167,172],{"type":42,"tag":162,"props":163,"children":164},"th",{},[165],{"type":48,"value":166},"Priority",{"type":42,"tag":162,"props":168,"children":169},{},[170],{"type":48,"value":171},"Pattern",{"type":42,"tag":162,"props":173,"children":174},{},[175],{"type":48,"value":176},"What it communicates",{"type":42,"tag":178,"props":179,"children":180},"tbody",{},[181,213,234,264,301],{"type":42,"tag":158,"props":182,"children":183},{},[184,190,208],{"type":42,"tag":185,"props":186,"children":187},"td",{},[188],{"type":48,"value":189},"1",{"type":42,"tag":185,"props":191,"children":192},{},[193,198,200,206],{"type":42,"tag":142,"props":194,"children":195},{},[196],{"type":48,"value":197},"Shared element",{"type":48,"value":199}," (",{"type":42,"tag":57,"props":201,"children":203},{"className":202},[],[204],{"type":48,"value":205},"name",{"type":48,"value":207},")",{"type":42,"tag":185,"props":209,"children":210},{},[211],{"type":48,"value":212},"\"Same thing — going deeper\"",{"type":42,"tag":158,"props":214,"children":215},{},[216,221,229],{"type":42,"tag":185,"props":217,"children":218},{},[219],{"type":48,"value":220},"2",{"type":42,"tag":185,"props":222,"children":223},{},[224],{"type":42,"tag":142,"props":225,"children":226},{},[227],{"type":48,"value":228},"Suspense reveal",{"type":42,"tag":185,"props":230,"children":231},{},[232],{"type":48,"value":233},"\"Data loaded\"",{"type":42,"tag":158,"props":235,"children":236},{},[237,242,259],{"type":42,"tag":185,"props":238,"children":239},{},[240],{"type":48,"value":241},"3",{"type":42,"tag":185,"props":243,"children":244},{},[245,250,252,258],{"type":42,"tag":142,"props":246,"children":247},{},[248],{"type":48,"value":249},"List identity",{"type":48,"value":251}," (per-item ",{"type":42,"tag":57,"props":253,"children":255},{"className":254},[],[256],{"type":48,"value":257},"key",{"type":48,"value":207},{"type":42,"tag":185,"props":260,"children":261},{},[262],{"type":48,"value":263},"\"Same items, new arrangement\"",{"type":42,"tag":158,"props":265,"children":266},{},[267,272,296],{"type":42,"tag":185,"props":268,"children":269},{},[270],{"type":48,"value":271},"4",{"type":42,"tag":185,"props":273,"children":274},{},[275,280,281,287,289,295],{"type":42,"tag":142,"props":276,"children":277},{},[278],{"type":48,"value":279},"State change",{"type":48,"value":199},{"type":42,"tag":57,"props":282,"children":284},{"className":283},[],[285],{"type":48,"value":286},"enter",{"type":48,"value":288},"\u002F",{"type":42,"tag":57,"props":290,"children":292},{"className":291},[],[293],{"type":48,"value":294},"exit",{"type":48,"value":207},{"type":42,"tag":185,"props":297,"children":298},{},[299],{"type":48,"value":300},"\"Something appeared\u002Fdisappeared\"",{"type":42,"tag":158,"props":302,"children":303},{},[304,309,319],{"type":42,"tag":185,"props":305,"children":306},{},[307],{"type":48,"value":308},"5",{"type":42,"tag":185,"props":310,"children":311},{},[312,317],{"type":42,"tag":142,"props":313,"children":314},{},[315],{"type":48,"value":316},"Route change",{"type":48,"value":318}," (layout-level)",{"type":42,"tag":185,"props":320,"children":321},{},[322],{"type":48,"value":323},"\"Going to a new place\"",{"type":42,"tag":51,"props":325,"children":326},{},[327],{"type":48,"value":328},"This is an implementation order, not a \"pick one\" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.",{"type":42,"tag":330,"props":331,"children":333},"h3",{"id":332},"choosing-animation-style",[334],{"type":48,"value":335},"Choosing Animation Style",{"type":42,"tag":150,"props":337,"children":338},{},[339,359],{"type":42,"tag":154,"props":340,"children":341},{},[342],{"type":42,"tag":158,"props":343,"children":344},{},[345,350,354],{"type":42,"tag":162,"props":346,"children":347},{},[348],{"type":48,"value":349},"Context",{"type":42,"tag":162,"props":351,"children":352},{},[353],{"type":48,"value":17},{"type":42,"tag":162,"props":355,"children":356},{},[357],{"type":48,"value":358},"Why",{"type":42,"tag":178,"props":360,"children":361},{},[362,393,424,452],{"type":42,"tag":158,"props":363,"children":364},{},[365,370,388],{"type":42,"tag":185,"props":366,"children":367},{},[368],{"type":48,"value":369},"Hierarchical navigation (list → detail)",{"type":42,"tag":185,"props":371,"children":372},{},[373,375,381,382],{"type":48,"value":374},"Type-keyed ",{"type":42,"tag":57,"props":376,"children":378},{"className":377},[],[379],{"type":48,"value":380},"nav-forward",{"type":48,"value":94},{"type":42,"tag":57,"props":383,"children":385},{"className":384},[],[386],{"type":48,"value":387},"nav-back",{"type":42,"tag":185,"props":389,"children":390},{},[391],{"type":48,"value":392},"Communicates spatial depth",{"type":42,"tag":158,"props":394,"children":395},{},[396,401,419],{"type":42,"tag":185,"props":397,"children":398},{},[399],{"type":48,"value":400},"Lateral navigation (tab-to-tab)",{"type":42,"tag":185,"props":402,"children":403},{},[404,406,411,413],{"type":48,"value":405},"Bare ",{"type":42,"tag":57,"props":407,"children":409},{"className":408},[],[410],{"type":48,"value":78},{"type":48,"value":412}," (fade) or ",{"type":42,"tag":57,"props":414,"children":416},{"className":415},[],[417],{"type":48,"value":418},"default=\"none\"",{"type":42,"tag":185,"props":420,"children":421},{},[422],{"type":48,"value":423},"No depth to communicate",{"type":42,"tag":158,"props":425,"children":426},{},[427,431,447],{"type":42,"tag":185,"props":428,"children":429},{},[430],{"type":48,"value":228},{"type":42,"tag":185,"props":432,"children":433},{},[434,439,440,445],{"type":42,"tag":57,"props":435,"children":437},{"className":436},[],[438],{"type":48,"value":286},{"type":48,"value":288},{"type":42,"tag":57,"props":441,"children":443},{"className":442},[],[444],{"type":48,"value":294},{"type":48,"value":446}," string props",{"type":42,"tag":185,"props":448,"children":449},{},[450],{"type":48,"value":451},"Content arriving",{"type":42,"tag":158,"props":453,"children":454},{},[455,460,468],{"type":42,"tag":185,"props":456,"children":457},{},[458],{"type":48,"value":459},"Revalidation \u002F background refresh",{"type":42,"tag":185,"props":461,"children":462},{},[463],{"type":42,"tag":57,"props":464,"children":466},{"className":465},[],[467],{"type":48,"value":418},{"type":42,"tag":185,"props":469,"children":470},{},[471],{"type":48,"value":472},"Silent — no animation needed",{"type":42,"tag":51,"props":474,"children":475},{},[476],{"type":48,"value":477},"Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev\u002Fnext photo, carousel, paginated results). For ordered sequences, the direction communicates position: \"next\" slides from right, \"previous\" from left. Lateral\u002Funordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.",{"type":42,"tag":479,"props":480,"children":481},"hr",{},[],{"type":42,"tag":118,"props":483,"children":485},{"id":484},"availability",[486],{"type":48,"value":487},"Availability",{"type":42,"tag":489,"props":490,"children":491},"ul",{},[492,534,558],{"type":42,"tag":493,"props":494,"children":495},"li",{},[496,501,503,508,510,516,518,524,526,532],{"type":42,"tag":142,"props":497,"children":498},{},[499],{"type":48,"value":500},"Next.js:",{"type":48,"value":502}," Do ",{"type":42,"tag":142,"props":504,"children":505},{},[506],{"type":48,"value":507},"not",{"type":48,"value":509}," install ",{"type":42,"tag":57,"props":511,"children":513},{"className":512},[],[514],{"type":48,"value":515},"react@canary",{"type":48,"value":517}," — the App Router already bundles React canary internally. ",{"type":42,"tag":57,"props":519,"children":521},{"className":520},[],[522],{"type":48,"value":523},"ViewTransition",{"type":48,"value":525}," works out of the box. ",{"type":42,"tag":57,"props":527,"children":529},{"className":528},[],[530],{"type":48,"value":531},"npm ls react",{"type":48,"value":533}," may show a stable-looking version; this is expected.",{"type":42,"tag":493,"props":535,"children":536},{},[537,542,544,550,551,556],{"type":42,"tag":142,"props":538,"children":539},{},[540],{"type":48,"value":541},"Without Next.js:",{"type":48,"value":543}," Install ",{"type":42,"tag":57,"props":545,"children":547},{"className":546},[],[548],{"type":48,"value":549},"react@canary react-dom@canary",{"type":48,"value":199},{"type":42,"tag":57,"props":552,"children":554},{"className":553},[],[555],{"type":48,"value":523},{"type":48,"value":557}," is not in stable React).",{"type":42,"tag":493,"props":559,"children":560},{},[561,563,569],{"type":48,"value":562},"Browser support: Chromium 125+ (React needs the v2 object form of ",{"type":42,"tag":57,"props":564,"children":566},{"className":565},[],[567],{"type":48,"value":568},"startViewTransition",{"type":48,"value":570},"), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.",{"type":42,"tag":479,"props":572,"children":573},{},[],{"type":42,"tag":118,"props":575,"children":577},{"id":576},"implementation-workflow",[578],{"type":48,"value":579},"Implementation Workflow",{"type":42,"tag":51,"props":581,"children":582},{},[583,585,598,600,605],{"type":48,"value":584},"When adding view transitions to an existing app, ",{"type":42,"tag":142,"props":586,"children":587},{},[588,590,596],{"type":48,"value":589},"follow ",{"type":42,"tag":591,"props":592,"children":594},"a",{"href":593},"references\u002Fimplementation.md",[595],{"type":48,"value":593},{"type":48,"value":597}," step by step.",{"type":48,"value":599}," Start with the audit — do not skip it. Copy the CSS recipes from ",{"type":42,"tag":591,"props":601,"children":603},{"href":602},"references\u002Fcss-recipes.md",[604],{"type":48,"value":602},{"type":48,"value":606}," into the global stylesheet — do not write your own animation CSS.",{"type":42,"tag":479,"props":608,"children":609},{},[],{"type":42,"tag":118,"props":611,"children":613},{"id":612},"core-concepts",[614],{"type":48,"value":615},"Core Concepts",{"type":42,"tag":330,"props":617,"children":619},{"id":618},"the-viewtransition-component",[620,622,627],{"type":48,"value":621},"The ",{"type":42,"tag":57,"props":623,"children":625},{"className":624},[],[626],{"type":48,"value":78},{"type":48,"value":628}," Component",{"type":42,"tag":630,"props":631,"children":636},"pre",{"className":632,"code":633,"language":634,"meta":635,"style":635},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ViewTransition } from 'react';\n\n\u003CViewTransition>\n  \u003CComponent \u002F>\n\u003C\u002FViewTransition>\n","jsx","",[637],{"type":42,"tag":57,"props":638,"children":639},{"__ignoreMap":635},[640,694,704,723,742],{"type":42,"tag":641,"props":642,"children":645},"span",{"class":643,"line":644},"line",1,[646,652,658,664,669,674,679,684,689],{"type":42,"tag":641,"props":647,"children":649},{"style":648},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[650],{"type":48,"value":651},"import",{"type":42,"tag":641,"props":653,"children":655},{"style":654},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[656],{"type":48,"value":657}," {",{"type":42,"tag":641,"props":659,"children":661},{"style":660},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[662],{"type":48,"value":663}," ViewTransition",{"type":42,"tag":641,"props":665,"children":666},{"style":654},[667],{"type":48,"value":668}," }",{"type":42,"tag":641,"props":670,"children":671},{"style":648},[672],{"type":48,"value":673}," from",{"type":42,"tag":641,"props":675,"children":676},{"style":654},[677],{"type":48,"value":678}," '",{"type":42,"tag":641,"props":680,"children":682},{"style":681},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[683],{"type":48,"value":14},{"type":42,"tag":641,"props":685,"children":686},{"style":654},[687],{"type":48,"value":688},"'",{"type":42,"tag":641,"props":690,"children":691},{"style":654},[692],{"type":48,"value":693},";\n",{"type":42,"tag":641,"props":695,"children":697},{"class":643,"line":696},2,[698],{"type":42,"tag":641,"props":699,"children":701},{"emptyLinePlaceholder":700},true,[702],{"type":48,"value":703},"\n",{"type":42,"tag":641,"props":705,"children":707},{"class":643,"line":706},3,[708,713,718],{"type":42,"tag":641,"props":709,"children":710},{"style":654},[711],{"type":48,"value":712},"\u003C",{"type":42,"tag":641,"props":714,"children":716},{"style":715},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[717],{"type":48,"value":523},{"type":42,"tag":641,"props":719,"children":720},{"style":654},[721],{"type":48,"value":722},">\n",{"type":42,"tag":641,"props":724,"children":726},{"class":643,"line":725},4,[727,732,737],{"type":42,"tag":641,"props":728,"children":729},{"style":654},[730],{"type":48,"value":731},"  \u003C",{"type":42,"tag":641,"props":733,"children":734},{"style":715},[735],{"type":48,"value":736},"Component",{"type":42,"tag":641,"props":738,"children":739},{"style":654},[740],{"type":48,"value":741}," \u002F>\n",{"type":42,"tag":641,"props":743,"children":745},{"class":643,"line":744},5,[746,751,755],{"type":42,"tag":641,"props":747,"children":748},{"style":654},[749],{"type":48,"value":750},"\u003C\u002F",{"type":42,"tag":641,"props":752,"children":753},{"style":715},[754],{"type":48,"value":523},{"type":42,"tag":641,"props":756,"children":757},{"style":654},[758],{"type":48,"value":722},{"type":42,"tag":51,"props":760,"children":761},{},[762,764,770,772,777,779,784],{"type":48,"value":763},"React auto-assigns a unique ",{"type":42,"tag":57,"props":765,"children":767},{"className":766},[],[768],{"type":48,"value":769},"view-transition-name",{"type":48,"value":771}," and calls ",{"type":42,"tag":57,"props":773,"children":775},{"className":774},[],[776],{"type":48,"value":62},{"type":48,"value":778}," behind the scenes. Never call ",{"type":42,"tag":57,"props":780,"children":782},{"className":781},[],[783],{"type":48,"value":568},{"type":48,"value":785}," yourself.",{"type":42,"tag":330,"props":787,"children":789},{"id":788},"animation-triggers",[790],{"type":48,"value":791},"Animation Triggers",{"type":42,"tag":150,"props":793,"children":794},{},[795,811],{"type":42,"tag":154,"props":796,"children":797},{},[798],{"type":42,"tag":158,"props":799,"children":800},{},[801,806],{"type":42,"tag":162,"props":802,"children":803},{},[804],{"type":48,"value":805},"Trigger",{"type":42,"tag":162,"props":807,"children":808},{},[809],{"type":48,"value":810},"When it fires",{"type":42,"tag":178,"props":812,"children":813},{},[814,834,854,877],{"type":42,"tag":158,"props":815,"children":816},{},[817,824],{"type":42,"tag":185,"props":818,"children":819},{},[820],{"type":42,"tag":142,"props":821,"children":822},{},[823],{"type":48,"value":286},{"type":42,"tag":185,"props":825,"children":826},{},[827,832],{"type":42,"tag":57,"props":828,"children":830},{"className":829},[],[831],{"type":48,"value":78},{"type":48,"value":833}," first inserted during a Transition",{"type":42,"tag":158,"props":835,"children":836},{},[837,844],{"type":42,"tag":185,"props":838,"children":839},{},[840],{"type":42,"tag":142,"props":841,"children":842},{},[843],{"type":48,"value":294},{"type":42,"tag":185,"props":845,"children":846},{},[847,852],{"type":42,"tag":57,"props":848,"children":850},{"className":849},[],[851],{"type":48,"value":78},{"type":48,"value":853}," first removed during a Transition",{"type":42,"tag":158,"props":855,"children":856},{},[857,865],{"type":42,"tag":185,"props":858,"children":859},{},[860],{"type":42,"tag":142,"props":861,"children":862},{},[863],{"type":48,"value":864},"update",{"type":42,"tag":185,"props":866,"children":867},{},[868,870,875],{"type":48,"value":869},"DOM mutations inside a ",{"type":42,"tag":57,"props":871,"children":873},{"className":872},[],[874],{"type":48,"value":78},{"type":48,"value":876},", or the boundary itself changing size\u002Fposition due to an immediate sibling. With nested VTs, mutation applies to the innermost one",{"type":42,"tag":158,"props":878,"children":879},{},[880,888],{"type":42,"tag":185,"props":881,"children":882},{},[883],{"type":42,"tag":142,"props":884,"children":885},{},[886],{"type":48,"value":887},"share",{"type":42,"tag":185,"props":889,"children":890},{},[891,893,898],{"type":48,"value":892},"Named VT unmounts and another with same ",{"type":42,"tag":57,"props":894,"children":896},{"className":895},[],[897],{"type":48,"value":205},{"type":48,"value":899}," mounts in the same Transition",{"type":42,"tag":51,"props":901,"children":902},{},[903,905,910,912,917,919,924,926,932],{"type":48,"value":904},"Only ",{"type":42,"tag":57,"props":906,"children":908},{"className":907},[],[909],{"type":48,"value":92},{"type":48,"value":911},", ",{"type":42,"tag":57,"props":913,"children":915},{"className":914},[],[916],{"type":48,"value":100},{"type":48,"value":918},", or ",{"type":42,"tag":57,"props":920,"children":922},{"className":921},[],[923],{"type":48,"value":107},{"type":48,"value":925}," activate VTs. Regular ",{"type":42,"tag":57,"props":927,"children":929},{"className":928},[],[930],{"type":48,"value":931},"setState",{"type":48,"value":933}," does not animate.",{"type":42,"tag":330,"props":935,"children":937},{"id":936},"critical-placement-rule",[938],{"type":48,"value":939},"Critical Placement Rule",{"type":42,"tag":51,"props":941,"children":942},{},[943,948,950,955],{"type":42,"tag":57,"props":944,"children":946},{"className":945},[],[947],{"type":48,"value":78},{"type":48,"value":949}," only activates enter\u002Fexit if it appears ",{"type":42,"tag":142,"props":951,"children":952},{},[953],{"type":48,"value":954},"before any DOM nodes",{"type":48,"value":956},":",{"type":42,"tag":630,"props":958,"children":960},{"className":632,"code":959,"language":634,"meta":635,"style":635},"\u002F\u002F Works\n\u003CViewTransition enter=\"auto\" exit=\"auto\">\n  \u003Cdiv>Content\u003C\u002Fdiv>\n\u003C\u002FViewTransition>\n\n\u002F\u002F Broken — div wraps the VT, suppressing enter\u002Fexit\n\u003Cdiv>\n  \u003CViewTransition enter=\"auto\" exit=\"auto\">\n    \u003Cdiv>Content\u003C\u002Fdiv>\n  \u003C\u002FViewTransition>\n\u003C\u002Fdiv>\n",[961],{"type":42,"tag":57,"props":962,"children":963},{"__ignoreMap":635},[964,973,1034,1069,1084,1091,1100,1116,1172,1205,1222],{"type":42,"tag":641,"props":965,"children":966},{"class":643,"line":644},[967],{"type":42,"tag":641,"props":968,"children":970},{"style":969},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[971],{"type":48,"value":972},"\u002F\u002F Works\n",{"type":42,"tag":641,"props":974,"children":975},{"class":643,"line":696},[976,980,984,990,995,1000,1005,1009,1014,1018,1022,1026,1030],{"type":42,"tag":641,"props":977,"children":978},{"style":654},[979],{"type":48,"value":712},{"type":42,"tag":641,"props":981,"children":982},{"style":715},[983],{"type":48,"value":523},{"type":42,"tag":641,"props":985,"children":987},{"style":986},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[988],{"type":48,"value":989}," enter",{"type":42,"tag":641,"props":991,"children":992},{"style":654},[993],{"type":48,"value":994},"=",{"type":42,"tag":641,"props":996,"children":997},{"style":654},[998],{"type":48,"value":999},"\"",{"type":42,"tag":641,"props":1001,"children":1002},{"style":681},[1003],{"type":48,"value":1004},"auto",{"type":42,"tag":641,"props":1006,"children":1007},{"style":654},[1008],{"type":48,"value":999},{"type":42,"tag":641,"props":1010,"children":1011},{"style":986},[1012],{"type":48,"value":1013}," exit",{"type":42,"tag":641,"props":1015,"children":1016},{"style":654},[1017],{"type":48,"value":994},{"type":42,"tag":641,"props":1019,"children":1020},{"style":654},[1021],{"type":48,"value":999},{"type":42,"tag":641,"props":1023,"children":1024},{"style":681},[1025],{"type":48,"value":1004},{"type":42,"tag":641,"props":1027,"children":1028},{"style":654},[1029],{"type":48,"value":999},{"type":42,"tag":641,"props":1031,"children":1032},{"style":654},[1033],{"type":48,"value":722},{"type":42,"tag":641,"props":1035,"children":1036},{"class":643,"line":706},[1037,1041,1047,1052,1057,1061,1065],{"type":42,"tag":641,"props":1038,"children":1039},{"style":654},[1040],{"type":48,"value":731},{"type":42,"tag":641,"props":1042,"children":1044},{"style":1043},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1045],{"type":48,"value":1046},"div",{"type":42,"tag":641,"props":1048,"children":1049},{"style":654},[1050],{"type":48,"value":1051},">",{"type":42,"tag":641,"props":1053,"children":1054},{"style":660},[1055],{"type":48,"value":1056},"Content",{"type":42,"tag":641,"props":1058,"children":1059},{"style":654},[1060],{"type":48,"value":750},{"type":42,"tag":641,"props":1062,"children":1063},{"style":1043},[1064],{"type":48,"value":1046},{"type":42,"tag":641,"props":1066,"children":1067},{"style":654},[1068],{"type":48,"value":722},{"type":42,"tag":641,"props":1070,"children":1071},{"class":643,"line":725},[1072,1076,1080],{"type":42,"tag":641,"props":1073,"children":1074},{"style":654},[1075],{"type":48,"value":750},{"type":42,"tag":641,"props":1077,"children":1078},{"style":715},[1079],{"type":48,"value":523},{"type":42,"tag":641,"props":1081,"children":1082},{"style":654},[1083],{"type":48,"value":722},{"type":42,"tag":641,"props":1085,"children":1086},{"class":643,"line":744},[1087],{"type":42,"tag":641,"props":1088,"children":1089},{"emptyLinePlaceholder":700},[1090],{"type":48,"value":703},{"type":42,"tag":641,"props":1092,"children":1094},{"class":643,"line":1093},6,[1095],{"type":42,"tag":641,"props":1096,"children":1097},{"style":969},[1098],{"type":48,"value":1099},"\u002F\u002F Broken — div wraps the VT, suppressing enter\u002Fexit\n",{"type":42,"tag":641,"props":1101,"children":1103},{"class":643,"line":1102},7,[1104,1108,1112],{"type":42,"tag":641,"props":1105,"children":1106},{"style":654},[1107],{"type":48,"value":712},{"type":42,"tag":641,"props":1109,"children":1110},{"style":1043},[1111],{"type":48,"value":1046},{"type":42,"tag":641,"props":1113,"children":1114},{"style":654},[1115],{"type":48,"value":722},{"type":42,"tag":641,"props":1117,"children":1119},{"class":643,"line":1118},8,[1120,1124,1128,1132,1136,1140,1144,1148,1152,1156,1160,1164,1168],{"type":42,"tag":641,"props":1121,"children":1122},{"style":654},[1123],{"type":48,"value":731},{"type":42,"tag":641,"props":1125,"children":1126},{"style":715},[1127],{"type":48,"value":523},{"type":42,"tag":641,"props":1129,"children":1130},{"style":986},[1131],{"type":48,"value":989},{"type":42,"tag":641,"props":1133,"children":1134},{"style":654},[1135],{"type":48,"value":994},{"type":42,"tag":641,"props":1137,"children":1138},{"style":654},[1139],{"type":48,"value":999},{"type":42,"tag":641,"props":1141,"children":1142},{"style":681},[1143],{"type":48,"value":1004},{"type":42,"tag":641,"props":1145,"children":1146},{"style":654},[1147],{"type":48,"value":999},{"type":42,"tag":641,"props":1149,"children":1150},{"style":986},[1151],{"type":48,"value":1013},{"type":42,"tag":641,"props":1153,"children":1154},{"style":654},[1155],{"type":48,"value":994},{"type":42,"tag":641,"props":1157,"children":1158},{"style":654},[1159],{"type":48,"value":999},{"type":42,"tag":641,"props":1161,"children":1162},{"style":681},[1163],{"type":48,"value":1004},{"type":42,"tag":641,"props":1165,"children":1166},{"style":654},[1167],{"type":48,"value":999},{"type":42,"tag":641,"props":1169,"children":1170},{"style":654},[1171],{"type":48,"value":722},{"type":42,"tag":641,"props":1173,"children":1175},{"class":643,"line":1174},9,[1176,1181,1185,1189,1193,1197,1201],{"type":42,"tag":641,"props":1177,"children":1178},{"style":654},[1179],{"type":48,"value":1180},"    \u003C",{"type":42,"tag":641,"props":1182,"children":1183},{"style":1043},[1184],{"type":48,"value":1046},{"type":42,"tag":641,"props":1186,"children":1187},{"style":654},[1188],{"type":48,"value":1051},{"type":42,"tag":641,"props":1190,"children":1191},{"style":660},[1192],{"type":48,"value":1056},{"type":42,"tag":641,"props":1194,"children":1195},{"style":654},[1196],{"type":48,"value":750},{"type":42,"tag":641,"props":1198,"children":1199},{"style":1043},[1200],{"type":48,"value":1046},{"type":42,"tag":641,"props":1202,"children":1203},{"style":654},[1204],{"type":48,"value":722},{"type":42,"tag":641,"props":1206,"children":1208},{"class":643,"line":1207},10,[1209,1214,1218],{"type":42,"tag":641,"props":1210,"children":1211},{"style":654},[1212],{"type":48,"value":1213},"  \u003C\u002F",{"type":42,"tag":641,"props":1215,"children":1216},{"style":715},[1217],{"type":48,"value":523},{"type":42,"tag":641,"props":1219,"children":1220},{"style":654},[1221],{"type":48,"value":722},{"type":42,"tag":641,"props":1223,"children":1225},{"class":643,"line":1224},11,[1226,1230,1234],{"type":42,"tag":641,"props":1227,"children":1228},{"style":654},[1229],{"type":48,"value":750},{"type":42,"tag":641,"props":1231,"children":1232},{"style":1043},[1233],{"type":48,"value":1046},{"type":42,"tag":641,"props":1235,"children":1236},{"style":654},[1237],{"type":48,"value":722},{"type":42,"tag":479,"props":1239,"children":1240},{},[],{"type":42,"tag":118,"props":1242,"children":1244},{"id":1243},"styling-with-view-transition-classes",[1245],{"type":48,"value":1246},"Styling with View Transition Classes",{"type":42,"tag":330,"props":1248,"children":1250},{"id":1249},"props",[1251],{"type":48,"value":1252},"Props",{"type":42,"tag":51,"props":1254,"children":1255},{},[1256,1258,1264,1266,1272,1274,1280,1282,1288],{"type":48,"value":1257},"Values: ",{"type":42,"tag":57,"props":1259,"children":1261},{"className":1260},[],[1262],{"type":48,"value":1263},"\"auto\"",{"type":48,"value":1265}," (browser cross-fade), ",{"type":42,"tag":57,"props":1267,"children":1269},{"className":1268},[],[1270],{"type":48,"value":1271},"\"none\"",{"type":48,"value":1273}," (disabled), ",{"type":42,"tag":57,"props":1275,"children":1277},{"className":1276},[],[1278],{"type":48,"value":1279},"\"class-name\"",{"type":48,"value":1281}," (custom CSS), or ",{"type":42,"tag":57,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":48,"value":1287},"{ [type]: value }",{"type":48,"value":1289}," for type-specific animations.",{"type":42,"tag":630,"props":1291,"children":1293},{"className":632,"code":1292,"language":634,"meta":635,"style":635},"\u003CViewTransition default=\"none\" enter=\"slide-in\" exit=\"slide-out\" share=\"morph\" \u002F>\n",[1294],{"type":42,"tag":57,"props":1295,"children":1296},{"__ignoreMap":635},[1297],{"type":42,"tag":641,"props":1298,"children":1299},{"class":643,"line":644},[1300,1304,1308,1313,1317,1321,1326,1330,1334,1338,1342,1347,1351,1355,1359,1363,1368,1372,1377,1381,1385,1390,1394],{"type":42,"tag":641,"props":1301,"children":1302},{"style":654},[1303],{"type":48,"value":712},{"type":42,"tag":641,"props":1305,"children":1306},{"style":715},[1307],{"type":48,"value":523},{"type":42,"tag":641,"props":1309,"children":1310},{"style":986},[1311],{"type":48,"value":1312}," default",{"type":42,"tag":641,"props":1314,"children":1315},{"style":654},[1316],{"type":48,"value":994},{"type":42,"tag":641,"props":1318,"children":1319},{"style":654},[1320],{"type":48,"value":999},{"type":42,"tag":641,"props":1322,"children":1323},{"style":681},[1324],{"type":48,"value":1325},"none",{"type":42,"tag":641,"props":1327,"children":1328},{"style":654},[1329],{"type":48,"value":999},{"type":42,"tag":641,"props":1331,"children":1332},{"style":986},[1333],{"type":48,"value":989},{"type":42,"tag":641,"props":1335,"children":1336},{"style":654},[1337],{"type":48,"value":994},{"type":42,"tag":641,"props":1339,"children":1340},{"style":654},[1341],{"type":48,"value":999},{"type":42,"tag":641,"props":1343,"children":1344},{"style":681},[1345],{"type":48,"value":1346},"slide-in",{"type":42,"tag":641,"props":1348,"children":1349},{"style":654},[1350],{"type":48,"value":999},{"type":42,"tag":641,"props":1352,"children":1353},{"style":986},[1354],{"type":48,"value":1013},{"type":42,"tag":641,"props":1356,"children":1357},{"style":654},[1358],{"type":48,"value":994},{"type":42,"tag":641,"props":1360,"children":1361},{"style":654},[1362],{"type":48,"value":999},{"type":42,"tag":641,"props":1364,"children":1365},{"style":681},[1366],{"type":48,"value":1367},"slide-out",{"type":42,"tag":641,"props":1369,"children":1370},{"style":654},[1371],{"type":48,"value":999},{"type":42,"tag":641,"props":1373,"children":1374},{"style":986},[1375],{"type":48,"value":1376}," share",{"type":42,"tag":641,"props":1378,"children":1379},{"style":654},[1380],{"type":48,"value":994},{"type":42,"tag":641,"props":1382,"children":1383},{"style":654},[1384],{"type":48,"value":999},{"type":42,"tag":641,"props":1386,"children":1387},{"style":681},[1388],{"type":48,"value":1389},"morph",{"type":42,"tag":641,"props":1391,"children":1392},{"style":654},[1393],{"type":48,"value":999},{"type":42,"tag":641,"props":1395,"children":1396},{"style":654},[1397],{"type":48,"value":741},{"type":42,"tag":51,"props":1399,"children":1400},{},[1401,1403,1409,1411,1416],{"type":48,"value":1402},"If ",{"type":42,"tag":57,"props":1404,"children":1406},{"className":1405},[],[1407],{"type":48,"value":1408},"default",{"type":48,"value":1410}," is ",{"type":42,"tag":57,"props":1412,"children":1414},{"className":1413},[],[1415],{"type":48,"value":1271},{"type":48,"value":1417},", all triggers are off unless explicitly listed.",{"type":42,"tag":330,"props":1419,"children":1421},{"id":1420},"css-pseudo-elements",[1422],{"type":48,"value":1423},"CSS Pseudo-Elements",{"type":42,"tag":489,"props":1425,"children":1426},{},[1427,1438,1449,1460],{"type":42,"tag":493,"props":1428,"children":1429},{},[1430,1436],{"type":42,"tag":57,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":48,"value":1435},"::view-transition-old(.class)",{"type":48,"value":1437}," — outgoing snapshot",{"type":42,"tag":493,"props":1439,"children":1440},{},[1441,1447],{"type":42,"tag":57,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":48,"value":1446},"::view-transition-new(.class)",{"type":48,"value":1448}," — incoming snapshot",{"type":42,"tag":493,"props":1450,"children":1451},{},[1452,1458],{"type":42,"tag":57,"props":1453,"children":1455},{"className":1454},[],[1456],{"type":48,"value":1457},"::view-transition-group(.class)",{"type":48,"value":1459}," — container",{"type":42,"tag":493,"props":1461,"children":1462},{},[1463,1469],{"type":42,"tag":57,"props":1464,"children":1466},{"className":1465},[],[1467],{"type":48,"value":1468},"::view-transition-image-pair(.class)",{"type":48,"value":1470}," — old + new pair",{"type":42,"tag":51,"props":1472,"children":1473},{},[1474,1476,1480],{"type":48,"value":1475},"See ",{"type":42,"tag":591,"props":1477,"children":1478},{"href":602},[1479],{"type":48,"value":602},{"type":48,"value":1481}," for ready-to-use animation recipes.",{"type":42,"tag":479,"props":1483,"children":1484},{},[],{"type":42,"tag":118,"props":1486,"children":1488},{"id":1487},"transition-types",[1489],{"type":48,"value":1490},"Transition Types",{"type":42,"tag":51,"props":1492,"children":1493},{},[1494,1496,1502],{"type":48,"value":1495},"Tag transitions with ",{"type":42,"tag":57,"props":1497,"children":1499},{"className":1498},[],[1500],{"type":48,"value":1501},"addTransitionType",{"type":48,"value":1503}," so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:",{"type":42,"tag":630,"props":1505,"children":1507},{"className":632,"code":1506,"language":634,"meta":635,"style":635},"startTransition(() => {\n  addTransitionType('nav-forward');\n  addTransitionType('select-item');\n  router.push('\u002Fdetail\u002F1');\n});\n",[1508],{"type":42,"tag":57,"props":1509,"children":1510},{"__ignoreMap":635},[1511,1539,1571,1603,1646],{"type":42,"tag":641,"props":1512,"children":1513},{"class":643,"line":644},[1514,1519,1524,1529,1534],{"type":42,"tag":641,"props":1515,"children":1517},{"style":1516},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1518],{"type":48,"value":92},{"type":42,"tag":641,"props":1520,"children":1521},{"style":660},[1522],{"type":48,"value":1523},"(",{"type":42,"tag":641,"props":1525,"children":1526},{"style":654},[1527],{"type":48,"value":1528},"()",{"type":42,"tag":641,"props":1530,"children":1531},{"style":986},[1532],{"type":48,"value":1533}," =>",{"type":42,"tag":641,"props":1535,"children":1536},{"style":654},[1537],{"type":48,"value":1538}," {\n",{"type":42,"tag":641,"props":1540,"children":1541},{"class":643,"line":696},[1542,1547,1551,1555,1559,1563,1567],{"type":42,"tag":641,"props":1543,"children":1544},{"style":1516},[1545],{"type":48,"value":1546},"  addTransitionType",{"type":42,"tag":641,"props":1548,"children":1549},{"style":1043},[1550],{"type":48,"value":1523},{"type":42,"tag":641,"props":1552,"children":1553},{"style":654},[1554],{"type":48,"value":688},{"type":42,"tag":641,"props":1556,"children":1557},{"style":681},[1558],{"type":48,"value":380},{"type":42,"tag":641,"props":1560,"children":1561},{"style":654},[1562],{"type":48,"value":688},{"type":42,"tag":641,"props":1564,"children":1565},{"style":1043},[1566],{"type":48,"value":207},{"type":42,"tag":641,"props":1568,"children":1569},{"style":654},[1570],{"type":48,"value":693},{"type":42,"tag":641,"props":1572,"children":1573},{"class":643,"line":706},[1574,1578,1582,1586,1591,1595,1599],{"type":42,"tag":641,"props":1575,"children":1576},{"style":1516},[1577],{"type":48,"value":1546},{"type":42,"tag":641,"props":1579,"children":1580},{"style":1043},[1581],{"type":48,"value":1523},{"type":42,"tag":641,"props":1583,"children":1584},{"style":654},[1585],{"type":48,"value":688},{"type":42,"tag":641,"props":1587,"children":1588},{"style":681},[1589],{"type":48,"value":1590},"select-item",{"type":42,"tag":641,"props":1592,"children":1593},{"style":654},[1594],{"type":48,"value":688},{"type":42,"tag":641,"props":1596,"children":1597},{"style":1043},[1598],{"type":48,"value":207},{"type":42,"tag":641,"props":1600,"children":1601},{"style":654},[1602],{"type":48,"value":693},{"type":42,"tag":641,"props":1604,"children":1605},{"class":643,"line":725},[1606,1611,1616,1621,1625,1629,1634,1638,1642],{"type":42,"tag":641,"props":1607,"children":1608},{"style":660},[1609],{"type":48,"value":1610},"  router",{"type":42,"tag":641,"props":1612,"children":1613},{"style":654},[1614],{"type":48,"value":1615},".",{"type":42,"tag":641,"props":1617,"children":1618},{"style":1516},[1619],{"type":48,"value":1620},"push",{"type":42,"tag":641,"props":1622,"children":1623},{"style":1043},[1624],{"type":48,"value":1523},{"type":42,"tag":641,"props":1626,"children":1627},{"style":654},[1628],{"type":48,"value":688},{"type":42,"tag":641,"props":1630,"children":1631},{"style":681},[1632],{"type":48,"value":1633},"\u002Fdetail\u002F1",{"type":42,"tag":641,"props":1635,"children":1636},{"style":654},[1637],{"type":48,"value":688},{"type":42,"tag":641,"props":1639,"children":1640},{"style":1043},[1641],{"type":48,"value":207},{"type":42,"tag":641,"props":1643,"children":1644},{"style":654},[1645],{"type":48,"value":693},{"type":42,"tag":641,"props":1647,"children":1648},{"class":643,"line":744},[1649,1654,1658],{"type":42,"tag":641,"props":1650,"children":1651},{"style":654},[1652],{"type":48,"value":1653},"}",{"type":42,"tag":641,"props":1655,"children":1656},{"style":660},[1657],{"type":48,"value":207},{"type":42,"tag":641,"props":1659,"children":1660},{"style":654},[1661],{"type":48,"value":693},{"type":42,"tag":51,"props":1663,"children":1664},{},[1665,1667,1672,1673,1678,1679,1684,1686,1691],{"type":48,"value":1666},"Pass an object to map types to CSS classes. Works on ",{"type":42,"tag":57,"props":1668,"children":1670},{"className":1669},[],[1671],{"type":48,"value":286},{"type":48,"value":911},{"type":42,"tag":57,"props":1674,"children":1676},{"className":1675},[],[1677],{"type":48,"value":294},{"type":48,"value":911},{"type":42,"tag":142,"props":1680,"children":1681},{},[1682],{"type":48,"value":1683},"and",{"type":48,"value":1685}," ",{"type":42,"tag":57,"props":1687,"children":1689},{"className":1688},[],[1690],{"type":48,"value":887},{"type":48,"value":956},{"type":42,"tag":630,"props":1693,"children":1695},{"className":632,"code":1694,"language":634,"meta":635,"style":635},"\u003CViewTransition\n  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}\n  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}\n  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}\n  default=\"none\"\n>\n  \u003CPage \u002F>\n\u003C\u002FViewTransition>\n",[1696],{"type":42,"tag":57,"props":1697,"children":1698},{"__ignoreMap":635},[1699,1711,1816,1918,2020,2045,2052,2068],{"type":42,"tag":641,"props":1700,"children":1701},{"class":643,"line":644},[1702,1706],{"type":42,"tag":641,"props":1703,"children":1704},{"style":654},[1705],{"type":48,"value":712},{"type":42,"tag":641,"props":1707,"children":1708},{"style":715},[1709],{"type":48,"value":1710},"ViewTransition\n",{"type":42,"tag":641,"props":1712,"children":1713},{"class":643,"line":696},[1714,1719,1724,1728,1732,1736,1740,1744,1749,1753,1758,1762,1766,1770,1774,1778,1783,1787,1791,1795,1799,1803,1807,1811],{"type":42,"tag":641,"props":1715,"children":1716},{"style":986},[1717],{"type":48,"value":1718},"  enter",{"type":42,"tag":641,"props":1720,"children":1721},{"style":654},[1722],{"type":48,"value":1723},"={{",{"type":42,"tag":641,"props":1725,"children":1726},{"style":654},[1727],{"type":48,"value":678},{"type":42,"tag":641,"props":1729,"children":1730},{"style":1043},[1731],{"type":48,"value":380},{"type":42,"tag":641,"props":1733,"children":1734},{"style":654},[1735],{"type":48,"value":688},{"type":42,"tag":641,"props":1737,"children":1738},{"style":654},[1739],{"type":48,"value":956},{"type":42,"tag":641,"props":1741,"children":1742},{"style":654},[1743],{"type":48,"value":678},{"type":42,"tag":641,"props":1745,"children":1746},{"style":681},[1747],{"type":48,"value":1748},"slide-from-right",{"type":42,"tag":641,"props":1750,"children":1751},{"style":654},[1752],{"type":48,"value":688},{"type":42,"tag":641,"props":1754,"children":1755},{"style":654},[1756],{"type":48,"value":1757},",",{"type":42,"tag":641,"props":1759,"children":1760},{"style":654},[1761],{"type":48,"value":678},{"type":42,"tag":641,"props":1763,"children":1764},{"style":1043},[1765],{"type":48,"value":387},{"type":42,"tag":641,"props":1767,"children":1768},{"style":654},[1769],{"type":48,"value":688},{"type":42,"tag":641,"props":1771,"children":1772},{"style":654},[1773],{"type":48,"value":956},{"type":42,"tag":641,"props":1775,"children":1776},{"style":654},[1777],{"type":48,"value":678},{"type":42,"tag":641,"props":1779,"children":1780},{"style":681},[1781],{"type":48,"value":1782},"slide-from-left",{"type":42,"tag":641,"props":1784,"children":1785},{"style":654},[1786],{"type":48,"value":688},{"type":42,"tag":641,"props":1788,"children":1789},{"style":654},[1790],{"type":48,"value":1757},{"type":42,"tag":641,"props":1792,"children":1793},{"style":1043},[1794],{"type":48,"value":1312},{"type":42,"tag":641,"props":1796,"children":1797},{"style":654},[1798],{"type":48,"value":956},{"type":42,"tag":641,"props":1800,"children":1801},{"style":654},[1802],{"type":48,"value":678},{"type":42,"tag":641,"props":1804,"children":1805},{"style":681},[1806],{"type":48,"value":1325},{"type":42,"tag":641,"props":1808,"children":1809},{"style":654},[1810],{"type":48,"value":688},{"type":42,"tag":641,"props":1812,"children":1813},{"style":654},[1814],{"type":48,"value":1815}," }}\n",{"type":42,"tag":641,"props":1817,"children":1818},{"class":643,"line":706},[1819,1824,1828,1832,1836,1840,1844,1848,1853,1857,1861,1865,1869,1873,1877,1881,1886,1890,1894,1898,1902,1906,1910,1914],{"type":42,"tag":641,"props":1820,"children":1821},{"style":986},[1822],{"type":48,"value":1823},"  exit",{"type":42,"tag":641,"props":1825,"children":1826},{"style":654},[1827],{"type":48,"value":1723},{"type":42,"tag":641,"props":1829,"children":1830},{"style":654},[1831],{"type":48,"value":678},{"type":42,"tag":641,"props":1833,"children":1834},{"style":1043},[1835],{"type":48,"value":380},{"type":42,"tag":641,"props":1837,"children":1838},{"style":654},[1839],{"type":48,"value":688},{"type":42,"tag":641,"props":1841,"children":1842},{"style":654},[1843],{"type":48,"value":956},{"type":42,"tag":641,"props":1845,"children":1846},{"style":654},[1847],{"type":48,"value":678},{"type":42,"tag":641,"props":1849,"children":1850},{"style":681},[1851],{"type":48,"value":1852},"slide-to-left",{"type":42,"tag":641,"props":1854,"children":1855},{"style":654},[1856],{"type":48,"value":688},{"type":42,"tag":641,"props":1858,"children":1859},{"style":654},[1860],{"type":48,"value":1757},{"type":42,"tag":641,"props":1862,"children":1863},{"style":654},[1864],{"type":48,"value":678},{"type":42,"tag":641,"props":1866,"children":1867},{"style":1043},[1868],{"type":48,"value":387},{"type":42,"tag":641,"props":1870,"children":1871},{"style":654},[1872],{"type":48,"value":688},{"type":42,"tag":641,"props":1874,"children":1875},{"style":654},[1876],{"type":48,"value":956},{"type":42,"tag":641,"props":1878,"children":1879},{"style":654},[1880],{"type":48,"value":678},{"type":42,"tag":641,"props":1882,"children":1883},{"style":681},[1884],{"type":48,"value":1885},"slide-to-right",{"type":42,"tag":641,"props":1887,"children":1888},{"style":654},[1889],{"type":48,"value":688},{"type":42,"tag":641,"props":1891,"children":1892},{"style":654},[1893],{"type":48,"value":1757},{"type":42,"tag":641,"props":1895,"children":1896},{"style":1043},[1897],{"type":48,"value":1312},{"type":42,"tag":641,"props":1899,"children":1900},{"style":654},[1901],{"type":48,"value":956},{"type":42,"tag":641,"props":1903,"children":1904},{"style":654},[1905],{"type":48,"value":678},{"type":42,"tag":641,"props":1907,"children":1908},{"style":681},[1909],{"type":48,"value":1325},{"type":42,"tag":641,"props":1911,"children":1912},{"style":654},[1913],{"type":48,"value":688},{"type":42,"tag":641,"props":1915,"children":1916},{"style":654},[1917],{"type":48,"value":1815},{"type":42,"tag":641,"props":1919,"children":1920},{"class":643,"line":725},[1921,1926,1930,1934,1938,1942,1946,1950,1955,1959,1963,1967,1971,1975,1979,1983,1988,1992,1996,2000,2004,2008,2012,2016],{"type":42,"tag":641,"props":1922,"children":1923},{"style":986},[1924],{"type":48,"value":1925},"  share",{"type":42,"tag":641,"props":1927,"children":1928},{"style":654},[1929],{"type":48,"value":1723},{"type":42,"tag":641,"props":1931,"children":1932},{"style":654},[1933],{"type":48,"value":678},{"type":42,"tag":641,"props":1935,"children":1936},{"style":1043},[1937],{"type":48,"value":380},{"type":42,"tag":641,"props":1939,"children":1940},{"style":654},[1941],{"type":48,"value":688},{"type":42,"tag":641,"props":1943,"children":1944},{"style":654},[1945],{"type":48,"value":956},{"type":42,"tag":641,"props":1947,"children":1948},{"style":654},[1949],{"type":48,"value":678},{"type":42,"tag":641,"props":1951,"children":1952},{"style":681},[1953],{"type":48,"value":1954},"morph-forward",{"type":42,"tag":641,"props":1956,"children":1957},{"style":654},[1958],{"type":48,"value":688},{"type":42,"tag":641,"props":1960,"children":1961},{"style":654},[1962],{"type":48,"value":1757},{"type":42,"tag":641,"props":1964,"children":1965},{"style":654},[1966],{"type":48,"value":678},{"type":42,"tag":641,"props":1968,"children":1969},{"style":1043},[1970],{"type":48,"value":387},{"type":42,"tag":641,"props":1972,"children":1973},{"style":654},[1974],{"type":48,"value":688},{"type":42,"tag":641,"props":1976,"children":1977},{"style":654},[1978],{"type":48,"value":956},{"type":42,"tag":641,"props":1980,"children":1981},{"style":654},[1982],{"type":48,"value":678},{"type":42,"tag":641,"props":1984,"children":1985},{"style":681},[1986],{"type":48,"value":1987},"morph-back",{"type":42,"tag":641,"props":1989,"children":1990},{"style":654},[1991],{"type":48,"value":688},{"type":42,"tag":641,"props":1993,"children":1994},{"style":654},[1995],{"type":48,"value":1757},{"type":42,"tag":641,"props":1997,"children":1998},{"style":1043},[1999],{"type":48,"value":1312},{"type":42,"tag":641,"props":2001,"children":2002},{"style":654},[2003],{"type":48,"value":956},{"type":42,"tag":641,"props":2005,"children":2006},{"style":654},[2007],{"type":48,"value":678},{"type":42,"tag":641,"props":2009,"children":2010},{"style":681},[2011],{"type":48,"value":1389},{"type":42,"tag":641,"props":2013,"children":2014},{"style":654},[2015],{"type":48,"value":688},{"type":42,"tag":641,"props":2017,"children":2018},{"style":654},[2019],{"type":48,"value":1815},{"type":42,"tag":641,"props":2021,"children":2022},{"class":643,"line":744},[2023,2028,2032,2036,2040],{"type":42,"tag":641,"props":2024,"children":2025},{"style":986},[2026],{"type":48,"value":2027},"  default",{"type":42,"tag":641,"props":2029,"children":2030},{"style":654},[2031],{"type":48,"value":994},{"type":42,"tag":641,"props":2033,"children":2034},{"style":654},[2035],{"type":48,"value":999},{"type":42,"tag":641,"props":2037,"children":2038},{"style":681},[2039],{"type":48,"value":1325},{"type":42,"tag":641,"props":2041,"children":2042},{"style":654},[2043],{"type":48,"value":2044},"\"\n",{"type":42,"tag":641,"props":2046,"children":2047},{"class":643,"line":1093},[2048],{"type":42,"tag":641,"props":2049,"children":2050},{"style":654},[2051],{"type":48,"value":722},{"type":42,"tag":641,"props":2053,"children":2054},{"class":643,"line":1102},[2055,2059,2064],{"type":42,"tag":641,"props":2056,"children":2057},{"style":654},[2058],{"type":48,"value":731},{"type":42,"tag":641,"props":2060,"children":2061},{"style":715},[2062],{"type":48,"value":2063},"Page",{"type":42,"tag":641,"props":2065,"children":2066},{"style":654},[2067],{"type":48,"value":741},{"type":42,"tag":641,"props":2069,"children":2070},{"class":643,"line":1118},[2071,2075,2079],{"type":42,"tag":641,"props":2072,"children":2073},{"style":654},[2074],{"type":48,"value":750},{"type":42,"tag":641,"props":2076,"children":2077},{"style":715},[2078],{"type":48,"value":523},{"type":42,"tag":641,"props":2080,"children":2081},{"style":654},[2082],{"type":48,"value":722},{"type":42,"tag":51,"props":2084,"children":2085},{},[2086,2091,2093,2098],{"type":42,"tag":57,"props":2087,"children":2089},{"className":2088},[],[2090],{"type":48,"value":286},{"type":48,"value":2092}," and ",{"type":42,"tag":57,"props":2094,"children":2096},{"className":2095},[],[2097],{"type":48,"value":294},{"type":48,"value":2099}," don't have to be symmetric. For example, fade in but slide out directionally:",{"type":42,"tag":630,"props":2101,"children":2103},{"className":632,"code":2102,"language":634,"meta":635,"style":635},"\u003CViewTransition\n  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}\n  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n  default=\"none\"\n>\n",[2104],{"type":42,"tag":57,"props":2105,"children":2106},{"__ignoreMap":635},[2107,2118,2218,2317,2340],{"type":42,"tag":641,"props":2108,"children":2109},{"class":643,"line":644},[2110,2114],{"type":42,"tag":641,"props":2111,"children":2112},{"style":654},[2113],{"type":48,"value":712},{"type":42,"tag":641,"props":2115,"children":2116},{"style":715},[2117],{"type":48,"value":1710},{"type":42,"tag":641,"props":2119,"children":2120},{"class":643,"line":696},[2121,2125,2129,2133,2137,2141,2145,2149,2154,2158,2162,2166,2170,2174,2178,2182,2186,2190,2194,2198,2202,2206,2210,2214],{"type":42,"tag":641,"props":2122,"children":2123},{"style":986},[2124],{"type":48,"value":1718},{"type":42,"tag":641,"props":2126,"children":2127},{"style":654},[2128],{"type":48,"value":1723},{"type":42,"tag":641,"props":2130,"children":2131},{"style":654},[2132],{"type":48,"value":678},{"type":42,"tag":641,"props":2134,"children":2135},{"style":1043},[2136],{"type":48,"value":380},{"type":42,"tag":641,"props":2138,"children":2139},{"style":654},[2140],{"type":48,"value":688},{"type":42,"tag":641,"props":2142,"children":2143},{"style":654},[2144],{"type":48,"value":956},{"type":42,"tag":641,"props":2146,"children":2147},{"style":654},[2148],{"type":48,"value":678},{"type":42,"tag":641,"props":2150,"children":2151},{"style":681},[2152],{"type":48,"value":2153},"fade-in",{"type":42,"tag":641,"props":2155,"children":2156},{"style":654},[2157],{"type":48,"value":688},{"type":42,"tag":641,"props":2159,"children":2160},{"style":654},[2161],{"type":48,"value":1757},{"type":42,"tag":641,"props":2163,"children":2164},{"style":654},[2165],{"type":48,"value":678},{"type":42,"tag":641,"props":2167,"children":2168},{"style":1043},[2169],{"type":48,"value":387},{"type":42,"tag":641,"props":2171,"children":2172},{"style":654},[2173],{"type":48,"value":688},{"type":42,"tag":641,"props":2175,"children":2176},{"style":654},[2177],{"type":48,"value":956},{"type":42,"tag":641,"props":2179,"children":2180},{"style":654},[2181],{"type":48,"value":678},{"type":42,"tag":641,"props":2183,"children":2184},{"style":681},[2185],{"type":48,"value":2153},{"type":42,"tag":641,"props":2187,"children":2188},{"style":654},[2189],{"type":48,"value":688},{"type":42,"tag":641,"props":2191,"children":2192},{"style":654},[2193],{"type":48,"value":1757},{"type":42,"tag":641,"props":2195,"children":2196},{"style":1043},[2197],{"type":48,"value":1312},{"type":42,"tag":641,"props":2199,"children":2200},{"style":654},[2201],{"type":48,"value":956},{"type":42,"tag":641,"props":2203,"children":2204},{"style":654},[2205],{"type":48,"value":678},{"type":42,"tag":641,"props":2207,"children":2208},{"style":681},[2209],{"type":48,"value":1325},{"type":42,"tag":641,"props":2211,"children":2212},{"style":654},[2213],{"type":48,"value":688},{"type":42,"tag":641,"props":2215,"children":2216},{"style":654},[2217],{"type":48,"value":1815},{"type":42,"tag":641,"props":2219,"children":2220},{"class":643,"line":706},[2221,2225,2229,2233,2237,2241,2245,2249,2253,2257,2261,2265,2269,2273,2277,2281,2285,2289,2293,2297,2301,2305,2309,2313],{"type":42,"tag":641,"props":2222,"children":2223},{"style":986},[2224],{"type":48,"value":1823},{"type":42,"tag":641,"props":2226,"children":2227},{"style":654},[2228],{"type":48,"value":1723},{"type":42,"tag":641,"props":2230,"children":2231},{"style":654},[2232],{"type":48,"value":678},{"type":42,"tag":641,"props":2234,"children":2235},{"style":1043},[2236],{"type":48,"value":380},{"type":42,"tag":641,"props":2238,"children":2239},{"style":654},[2240],{"type":48,"value":688},{"type":42,"tag":641,"props":2242,"children":2243},{"style":654},[2244],{"type":48,"value":956},{"type":42,"tag":641,"props":2246,"children":2247},{"style":654},[2248],{"type":48,"value":678},{"type":42,"tag":641,"props":2250,"children":2251},{"style":681},[2252],{"type":48,"value":380},{"type":42,"tag":641,"props":2254,"children":2255},{"style":654},[2256],{"type":48,"value":688},{"type":42,"tag":641,"props":2258,"children":2259},{"style":654},[2260],{"type":48,"value":1757},{"type":42,"tag":641,"props":2262,"children":2263},{"style":654},[2264],{"type":48,"value":678},{"type":42,"tag":641,"props":2266,"children":2267},{"style":1043},[2268],{"type":48,"value":387},{"type":42,"tag":641,"props":2270,"children":2271},{"style":654},[2272],{"type":48,"value":688},{"type":42,"tag":641,"props":2274,"children":2275},{"style":654},[2276],{"type":48,"value":956},{"type":42,"tag":641,"props":2278,"children":2279},{"style":654},[2280],{"type":48,"value":678},{"type":42,"tag":641,"props":2282,"children":2283},{"style":681},[2284],{"type":48,"value":387},{"type":42,"tag":641,"props":2286,"children":2287},{"style":654},[2288],{"type":48,"value":688},{"type":42,"tag":641,"props":2290,"children":2291},{"style":654},[2292],{"type":48,"value":1757},{"type":42,"tag":641,"props":2294,"children":2295},{"style":1043},[2296],{"type":48,"value":1312},{"type":42,"tag":641,"props":2298,"children":2299},{"style":654},[2300],{"type":48,"value":956},{"type":42,"tag":641,"props":2302,"children":2303},{"style":654},[2304],{"type":48,"value":678},{"type":42,"tag":641,"props":2306,"children":2307},{"style":681},[2308],{"type":48,"value":1325},{"type":42,"tag":641,"props":2310,"children":2311},{"style":654},[2312],{"type":48,"value":688},{"type":42,"tag":641,"props":2314,"children":2315},{"style":654},[2316],{"type":48,"value":1815},{"type":42,"tag":641,"props":2318,"children":2319},{"class":643,"line":725},[2320,2324,2328,2332,2336],{"type":42,"tag":641,"props":2321,"children":2322},{"style":986},[2323],{"type":48,"value":2027},{"type":42,"tag":641,"props":2325,"children":2326},{"style":654},[2327],{"type":48,"value":994},{"type":42,"tag":641,"props":2329,"children":2330},{"style":654},[2331],{"type":48,"value":999},{"type":42,"tag":641,"props":2333,"children":2334},{"style":681},[2335],{"type":48,"value":1325},{"type":42,"tag":641,"props":2337,"children":2338},{"style":654},[2339],{"type":48,"value":2044},{"type":42,"tag":641,"props":2341,"children":2342},{"class":643,"line":744},[2343],{"type":42,"tag":641,"props":2344,"children":2345},{"style":654},[2346],{"type":48,"value":722},{"type":42,"tag":51,"props":2348,"children":2349},{},[2350,2355,2356,2362,2364,2369],{"type":42,"tag":142,"props":2351,"children":2352},{},[2353],{"type":48,"value":2354},"TypeScript:",{"type":48,"value":1685},{"type":42,"tag":57,"props":2357,"children":2359},{"className":2358},[],[2360],{"type":48,"value":2361},"ViewTransitionClassPerType",{"type":48,"value":2363}," requires a ",{"type":42,"tag":57,"props":2365,"children":2367},{"className":2366},[],[2368],{"type":48,"value":1408},{"type":48,"value":2370}," key in the object.",{"type":42,"tag":51,"props":2372,"children":2373},{},[2374],{"type":48,"value":2375},"For apps with multiple pages, extract the type-keyed VT into a reusable wrapper:",{"type":42,"tag":630,"props":2377,"children":2379},{"className":632,"code":2378,"language":634,"meta":635,"style":635},"export function DirectionalTransition({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CViewTransition\n      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      default=\"none\"\n    >\n      {children}\n    \u003C\u002FViewTransition>\n  );\n}\n",[2380],{"type":42,"tag":57,"props":2381,"children":2382},{"__ignoreMap":635},[2383,2452,2465,2476,2576,2676,2700,2708,2726,2742,2754],{"type":42,"tag":641,"props":2384,"children":2385},{"class":643,"line":644},[2386,2391,2396,2401,2406,2412,2417,2421,2425,2429,2434,2438,2443,2448],{"type":42,"tag":641,"props":2387,"children":2388},{"style":648},[2389],{"type":48,"value":2390},"export",{"type":42,"tag":641,"props":2392,"children":2393},{"style":986},[2394],{"type":48,"value":2395}," function",{"type":42,"tag":641,"props":2397,"children":2398},{"style":1516},[2399],{"type":48,"value":2400}," DirectionalTransition",{"type":42,"tag":641,"props":2402,"children":2403},{"style":654},[2404],{"type":48,"value":2405},"({",{"type":42,"tag":641,"props":2407,"children":2409},{"style":2408},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[2410],{"type":48,"value":2411}," children",{"type":42,"tag":641,"props":2413,"children":2414},{"style":654},[2415],{"type":48,"value":2416}," }:",{"type":42,"tag":641,"props":2418,"children":2419},{"style":654},[2420],{"type":48,"value":657},{"type":42,"tag":641,"props":2422,"children":2423},{"style":1043},[2424],{"type":48,"value":2411},{"type":42,"tag":641,"props":2426,"children":2427},{"style":654},[2428],{"type":48,"value":956},{"type":42,"tag":641,"props":2430,"children":2431},{"style":715},[2432],{"type":48,"value":2433}," React",{"type":42,"tag":641,"props":2435,"children":2436},{"style":654},[2437],{"type":48,"value":1615},{"type":42,"tag":641,"props":2439,"children":2440},{"style":715},[2441],{"type":48,"value":2442},"ReactNode",{"type":42,"tag":641,"props":2444,"children":2445},{"style":654},[2446],{"type":48,"value":2447}," })",{"type":42,"tag":641,"props":2449,"children":2450},{"style":654},[2451],{"type":48,"value":1538},{"type":42,"tag":641,"props":2453,"children":2454},{"class":643,"line":696},[2455,2460],{"type":42,"tag":641,"props":2456,"children":2457},{"style":648},[2458],{"type":48,"value":2459},"  return",{"type":42,"tag":641,"props":2461,"children":2462},{"style":1043},[2463],{"type":48,"value":2464}," (\n",{"type":42,"tag":641,"props":2466,"children":2467},{"class":643,"line":706},[2468,2472],{"type":42,"tag":641,"props":2469,"children":2470},{"style":654},[2471],{"type":48,"value":1180},{"type":42,"tag":641,"props":2473,"children":2474},{"style":715},[2475],{"type":48,"value":1710},{"type":42,"tag":641,"props":2477,"children":2478},{"class":643,"line":725},[2479,2484,2488,2492,2496,2500,2504,2508,2512,2516,2520,2524,2528,2532,2536,2540,2544,2548,2552,2556,2560,2564,2568,2572],{"type":42,"tag":641,"props":2480,"children":2481},{"style":986},[2482],{"type":48,"value":2483},"      enter",{"type":42,"tag":641,"props":2485,"children":2486},{"style":654},[2487],{"type":48,"value":1723},{"type":42,"tag":641,"props":2489,"children":2490},{"style":654},[2491],{"type":48,"value":678},{"type":42,"tag":641,"props":2493,"children":2494},{"style":1043},[2495],{"type":48,"value":380},{"type":42,"tag":641,"props":2497,"children":2498},{"style":654},[2499],{"type":48,"value":688},{"type":42,"tag":641,"props":2501,"children":2502},{"style":654},[2503],{"type":48,"value":956},{"type":42,"tag":641,"props":2505,"children":2506},{"style":654},[2507],{"type":48,"value":678},{"type":42,"tag":641,"props":2509,"children":2510},{"style":681},[2511],{"type":48,"value":380},{"type":42,"tag":641,"props":2513,"children":2514},{"style":654},[2515],{"type":48,"value":688},{"type":42,"tag":641,"props":2517,"children":2518},{"style":654},[2519],{"type":48,"value":1757},{"type":42,"tag":641,"props":2521,"children":2522},{"style":654},[2523],{"type":48,"value":678},{"type":42,"tag":641,"props":2525,"children":2526},{"style":1043},[2527],{"type":48,"value":387},{"type":42,"tag":641,"props":2529,"children":2530},{"style":654},[2531],{"type":48,"value":688},{"type":42,"tag":641,"props":2533,"children":2534},{"style":654},[2535],{"type":48,"value":956},{"type":42,"tag":641,"props":2537,"children":2538},{"style":654},[2539],{"type":48,"value":678},{"type":42,"tag":641,"props":2541,"children":2542},{"style":681},[2543],{"type":48,"value":387},{"type":42,"tag":641,"props":2545,"children":2546},{"style":654},[2547],{"type":48,"value":688},{"type":42,"tag":641,"props":2549,"children":2550},{"style":654},[2551],{"type":48,"value":1757},{"type":42,"tag":641,"props":2553,"children":2554},{"style":1043},[2555],{"type":48,"value":1312},{"type":42,"tag":641,"props":2557,"children":2558},{"style":654},[2559],{"type":48,"value":956},{"type":42,"tag":641,"props":2561,"children":2562},{"style":654},[2563],{"type":48,"value":678},{"type":42,"tag":641,"props":2565,"children":2566},{"style":681},[2567],{"type":48,"value":1325},{"type":42,"tag":641,"props":2569,"children":2570},{"style":654},[2571],{"type":48,"value":688},{"type":42,"tag":641,"props":2573,"children":2574},{"style":654},[2575],{"type":48,"value":1815},{"type":42,"tag":641,"props":2577,"children":2578},{"class":643,"line":744},[2579,2584,2588,2592,2596,2600,2604,2608,2612,2616,2620,2624,2628,2632,2636,2640,2644,2648,2652,2656,2660,2664,2668,2672],{"type":42,"tag":641,"props":2580,"children":2581},{"style":986},[2582],{"type":48,"value":2583},"      exit",{"type":42,"tag":641,"props":2585,"children":2586},{"style":654},[2587],{"type":48,"value":1723},{"type":42,"tag":641,"props":2589,"children":2590},{"style":654},[2591],{"type":48,"value":678},{"type":42,"tag":641,"props":2593,"children":2594},{"style":1043},[2595],{"type":48,"value":380},{"type":42,"tag":641,"props":2597,"children":2598},{"style":654},[2599],{"type":48,"value":688},{"type":42,"tag":641,"props":2601,"children":2602},{"style":654},[2603],{"type":48,"value":956},{"type":42,"tag":641,"props":2605,"children":2606},{"style":654},[2607],{"type":48,"value":678},{"type":42,"tag":641,"props":2609,"children":2610},{"style":681},[2611],{"type":48,"value":380},{"type":42,"tag":641,"props":2613,"children":2614},{"style":654},[2615],{"type":48,"value":688},{"type":42,"tag":641,"props":2617,"children":2618},{"style":654},[2619],{"type":48,"value":1757},{"type":42,"tag":641,"props":2621,"children":2622},{"style":654},[2623],{"type":48,"value":678},{"type":42,"tag":641,"props":2625,"children":2626},{"style":1043},[2627],{"type":48,"value":387},{"type":42,"tag":641,"props":2629,"children":2630},{"style":654},[2631],{"type":48,"value":688},{"type":42,"tag":641,"props":2633,"children":2634},{"style":654},[2635],{"type":48,"value":956},{"type":42,"tag":641,"props":2637,"children":2638},{"style":654},[2639],{"type":48,"value":678},{"type":42,"tag":641,"props":2641,"children":2642},{"style":681},[2643],{"type":48,"value":387},{"type":42,"tag":641,"props":2645,"children":2646},{"style":654},[2647],{"type":48,"value":688},{"type":42,"tag":641,"props":2649,"children":2650},{"style":654},[2651],{"type":48,"value":1757},{"type":42,"tag":641,"props":2653,"children":2654},{"style":1043},[2655],{"type":48,"value":1312},{"type":42,"tag":641,"props":2657,"children":2658},{"style":654},[2659],{"type":48,"value":956},{"type":42,"tag":641,"props":2661,"children":2662},{"style":654},[2663],{"type":48,"value":678},{"type":42,"tag":641,"props":2665,"children":2666},{"style":681},[2667],{"type":48,"value":1325},{"type":42,"tag":641,"props":2669,"children":2670},{"style":654},[2671],{"type":48,"value":688},{"type":42,"tag":641,"props":2673,"children":2674},{"style":654},[2675],{"type":48,"value":1815},{"type":42,"tag":641,"props":2677,"children":2678},{"class":643,"line":1093},[2679,2684,2688,2692,2696],{"type":42,"tag":641,"props":2680,"children":2681},{"style":986},[2682],{"type":48,"value":2683},"      default",{"type":42,"tag":641,"props":2685,"children":2686},{"style":654},[2687],{"type":48,"value":994},{"type":42,"tag":641,"props":2689,"children":2690},{"style":654},[2691],{"type":48,"value":999},{"type":42,"tag":641,"props":2693,"children":2694},{"style":681},[2695],{"type":48,"value":1325},{"type":42,"tag":641,"props":2697,"children":2698},{"style":654},[2699],{"type":48,"value":2044},{"type":42,"tag":641,"props":2701,"children":2702},{"class":643,"line":1102},[2703],{"type":42,"tag":641,"props":2704,"children":2705},{"style":654},[2706],{"type":48,"value":2707},"    >\n",{"type":42,"tag":641,"props":2709,"children":2710},{"class":643,"line":1118},[2711,2716,2721],{"type":42,"tag":641,"props":2712,"children":2713},{"style":654},[2714],{"type":48,"value":2715},"      {",{"type":42,"tag":641,"props":2717,"children":2718},{"style":660},[2719],{"type":48,"value":2720},"children",{"type":42,"tag":641,"props":2722,"children":2723},{"style":654},[2724],{"type":48,"value":2725},"}\n",{"type":42,"tag":641,"props":2727,"children":2728},{"class":643,"line":1174},[2729,2734,2738],{"type":42,"tag":641,"props":2730,"children":2731},{"style":654},[2732],{"type":48,"value":2733},"    \u003C\u002F",{"type":42,"tag":641,"props":2735,"children":2736},{"style":715},[2737],{"type":48,"value":523},{"type":42,"tag":641,"props":2739,"children":2740},{"style":654},[2741],{"type":48,"value":722},{"type":42,"tag":641,"props":2743,"children":2744},{"class":643,"line":1207},[2745,2750],{"type":42,"tag":641,"props":2746,"children":2747},{"style":1043},[2748],{"type":48,"value":2749},"  )",{"type":42,"tag":641,"props":2751,"children":2752},{"style":654},[2753],{"type":48,"value":693},{"type":42,"tag":641,"props":2755,"children":2756},{"class":643,"line":1224},[2757],{"type":42,"tag":641,"props":2758,"children":2759},{"style":654},[2760],{"type":48,"value":2725},{"type":42,"tag":330,"props":2762,"children":2764},{"id":2763},"routerback-and-browser-back-button",[2765,2771],{"type":42,"tag":57,"props":2766,"children":2768},{"className":2767},[],[2769],{"type":48,"value":2770},"router.back()",{"type":48,"value":2772}," and Browser Back Button",{"type":42,"tag":51,"props":2774,"children":2775},{},[2776,2781,2783,2788,2790,2795,2797,2803],{"type":42,"tag":57,"props":2777,"children":2779},{"className":2778},[],[2780],{"type":48,"value":2770},{"type":48,"value":2782}," and the browser's back\u002Fforward buttons carry ",{"type":42,"tag":142,"props":2784,"children":2785},{},[2786],{"type":48,"value":2787},"no transition types",{"type":48,"value":2789},", so type-keyed animations (directional slides) resolve to their ",{"type":42,"tag":57,"props":2791,"children":2793},{"className":2792},[],[2794],{"type":48,"value":1408},{"type":48,"value":2796}," and don't play — untyped shared-element morphs still apply. For typed animations, use ",{"type":42,"tag":57,"props":2798,"children":2800},{"className":2799},[],[2801],{"type":48,"value":2802},"router.push()",{"type":48,"value":2804}," with an explicit URL.",{"type":42,"tag":330,"props":2806,"children":2808},{"id":2807},"types-and-suspense",[2809],{"type":48,"value":2810},"Types and Suspense",{"type":42,"tag":51,"props":2812,"children":2813},{},[2814,2816,2820],{"type":48,"value":2815},"Types are available during navigation but ",{"type":42,"tag":142,"props":2817,"children":2818},{},[2819],{"type":48,"value":507},{"type":48,"value":2821}," during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter\u002Fexit; use simple string props for Suspense reveals.",{"type":42,"tag":479,"props":2823,"children":2824},{},[],{"type":42,"tag":118,"props":2826,"children":2828},{"id":2827},"shared-element-transitions",[2829],{"type":48,"value":2830},"Shared Element Transitions",{"type":42,"tag":51,"props":2832,"children":2833},{},[2834,2836,2841],{"type":48,"value":2835},"Same ",{"type":42,"tag":57,"props":2837,"children":2839},{"className":2838},[],[2840],{"type":48,"value":205},{"type":48,"value":2842}," on two VTs — one unmounting, one mounting — creates a shared element morph:",{"type":42,"tag":630,"props":2844,"children":2846},{"className":632,"code":2845,"language":634,"meta":635,"style":635},"\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Fthumb.jpg\" onClick={() => startTransition(() => onSelect())} \u002F>\n\u003C\u002FViewTransition>\n\n\u002F\u002F On the other view — same name\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Ffull.jpg\" \u002F>\n\u003C\u002FViewTransition>\n",[2847],{"type":42,"tag":57,"props":2848,"children":2849},{"__ignoreMap":635},[2850,2887,2967,2982,2989,2997,3032,3068],{"type":42,"tag":641,"props":2851,"children":2852},{"class":643,"line":644},[2853,2857,2861,2866,2870,2874,2879,2883],{"type":42,"tag":641,"props":2854,"children":2855},{"style":654},[2856],{"type":48,"value":712},{"type":42,"tag":641,"props":2858,"children":2859},{"style":715},[2860],{"type":48,"value":523},{"type":42,"tag":641,"props":2862,"children":2863},{"style":986},[2864],{"type":48,"value":2865}," name",{"type":42,"tag":641,"props":2867,"children":2868},{"style":654},[2869],{"type":48,"value":994},{"type":42,"tag":641,"props":2871,"children":2872},{"style":654},[2873],{"type":48,"value":999},{"type":42,"tag":641,"props":2875,"children":2876},{"style":681},[2877],{"type":48,"value":2878},"hero-image",{"type":42,"tag":641,"props":2880,"children":2881},{"style":654},[2882],{"type":48,"value":999},{"type":42,"tag":641,"props":2884,"children":2885},{"style":654},[2886],{"type":48,"value":722},{"type":42,"tag":641,"props":2888,"children":2889},{"class":643,"line":696},[2890,2894,2899,2904,2908,2912,2917,2921,2926,2931,2935,2940,2944,2948,2952,2957,2962],{"type":42,"tag":641,"props":2891,"children":2892},{"style":654},[2893],{"type":48,"value":731},{"type":42,"tag":641,"props":2895,"children":2896},{"style":1043},[2897],{"type":48,"value":2898},"img",{"type":42,"tag":641,"props":2900,"children":2901},{"style":986},[2902],{"type":48,"value":2903}," src",{"type":42,"tag":641,"props":2905,"children":2906},{"style":654},[2907],{"type":48,"value":994},{"type":42,"tag":641,"props":2909,"children":2910},{"style":654},[2911],{"type":48,"value":999},{"type":42,"tag":641,"props":2913,"children":2914},{"style":681},[2915],{"type":48,"value":2916},"\u002Fthumb.jpg",{"type":42,"tag":641,"props":2918,"children":2919},{"style":654},[2920],{"type":48,"value":999},{"type":42,"tag":641,"props":2922,"children":2923},{"style":986},[2924],{"type":48,"value":2925}," onClick",{"type":42,"tag":641,"props":2927,"children":2928},{"style":654},[2929],{"type":48,"value":2930},"={()",{"type":42,"tag":641,"props":2932,"children":2933},{"style":986},[2934],{"type":48,"value":1533},{"type":42,"tag":641,"props":2936,"children":2937},{"style":1516},[2938],{"type":48,"value":2939}," startTransition",{"type":42,"tag":641,"props":2941,"children":2942},{"style":660},[2943],{"type":48,"value":1523},{"type":42,"tag":641,"props":2945,"children":2946},{"style":654},[2947],{"type":48,"value":1528},{"type":42,"tag":641,"props":2949,"children":2950},{"style":986},[2951],{"type":48,"value":1533},{"type":42,"tag":641,"props":2953,"children":2954},{"style":1516},[2955],{"type":48,"value":2956}," onSelect",{"type":42,"tag":641,"props":2958,"children":2959},{"style":660},[2960],{"type":48,"value":2961},"())",{"type":42,"tag":641,"props":2963,"children":2964},{"style":654},[2965],{"type":48,"value":2966},"} \u002F>\n",{"type":42,"tag":641,"props":2968,"children":2969},{"class":643,"line":706},[2970,2974,2978],{"type":42,"tag":641,"props":2971,"children":2972},{"style":654},[2973],{"type":48,"value":750},{"type":42,"tag":641,"props":2975,"children":2976},{"style":715},[2977],{"type":48,"value":523},{"type":42,"tag":641,"props":2979,"children":2980},{"style":654},[2981],{"type":48,"value":722},{"type":42,"tag":641,"props":2983,"children":2984},{"class":643,"line":725},[2985],{"type":42,"tag":641,"props":2986,"children":2987},{"emptyLinePlaceholder":700},[2988],{"type":48,"value":703},{"type":42,"tag":641,"props":2990,"children":2991},{"class":643,"line":744},[2992],{"type":42,"tag":641,"props":2993,"children":2994},{"style":969},[2995],{"type":48,"value":2996},"\u002F\u002F On the other view — same name\n",{"type":42,"tag":641,"props":2998,"children":2999},{"class":643,"line":1093},[3000,3004,3008,3012,3016,3020,3024,3028],{"type":42,"tag":641,"props":3001,"children":3002},{"style":654},[3003],{"type":48,"value":712},{"type":42,"tag":641,"props":3005,"children":3006},{"style":715},[3007],{"type":48,"value":523},{"type":42,"tag":641,"props":3009,"children":3010},{"style":986},[3011],{"type":48,"value":2865},{"type":42,"tag":641,"props":3013,"children":3014},{"style":654},[3015],{"type":48,"value":994},{"type":42,"tag":641,"props":3017,"children":3018},{"style":654},[3019],{"type":48,"value":999},{"type":42,"tag":641,"props":3021,"children":3022},{"style":681},[3023],{"type":48,"value":2878},{"type":42,"tag":641,"props":3025,"children":3026},{"style":654},[3027],{"type":48,"value":999},{"type":42,"tag":641,"props":3029,"children":3030},{"style":654},[3031],{"type":48,"value":722},{"type":42,"tag":641,"props":3033,"children":3034},{"class":643,"line":1102},[3035,3039,3043,3047,3051,3055,3060,3064],{"type":42,"tag":641,"props":3036,"children":3037},{"style":654},[3038],{"type":48,"value":731},{"type":42,"tag":641,"props":3040,"children":3041},{"style":1043},[3042],{"type":48,"value":2898},{"type":42,"tag":641,"props":3044,"children":3045},{"style":986},[3046],{"type":48,"value":2903},{"type":42,"tag":641,"props":3048,"children":3049},{"style":654},[3050],{"type":48,"value":994},{"type":42,"tag":641,"props":3052,"children":3053},{"style":654},[3054],{"type":48,"value":999},{"type":42,"tag":641,"props":3056,"children":3057},{"style":681},[3058],{"type":48,"value":3059},"\u002Ffull.jpg",{"type":42,"tag":641,"props":3061,"children":3062},{"style":654},[3063],{"type":48,"value":999},{"type":42,"tag":641,"props":3065,"children":3066},{"style":654},[3067],{"type":48,"value":741},{"type":42,"tag":641,"props":3069,"children":3070},{"class":643,"line":1118},[3071,3075,3079],{"type":42,"tag":641,"props":3072,"children":3073},{"style":654},[3074],{"type":48,"value":750},{"type":42,"tag":641,"props":3076,"children":3077},{"style":715},[3078],{"type":48,"value":523},{"type":42,"tag":641,"props":3080,"children":3081},{"style":654},[3082],{"type":48,"value":722},{"type":42,"tag":489,"props":3084,"children":3085},{},[3086,3112,3148,3203],{"type":42,"tag":493,"props":3087,"children":3088},{},[3089,3091,3096,3098,3104,3106,3110],{"type":48,"value":3090},"Only one VT with a given ",{"type":42,"tag":57,"props":3092,"children":3094},{"className":3093},[],[3095],{"type":48,"value":205},{"type":48,"value":3097}," can be mounted at a time — use unique names (",{"type":42,"tag":57,"props":3099,"children":3101},{"className":3100},[],[3102],{"type":48,"value":3103},"photo-${id}",{"type":48,"value":3105},"). Watch for reusable components: if a component with a named VT is rendered in both a modal\u002Fpopover ",{"type":42,"tag":66,"props":3107,"children":3108},{},[3109],{"type":48,"value":1683},{"type":48,"value":3111}," a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.",{"type":42,"tag":493,"props":3113,"children":3114},{},[3115,3120,3122,3127,3128,3133,3135,3140,3141,3146],{"type":42,"tag":57,"props":3116,"children":3118},{"className":3117},[],[3119],{"type":48,"value":887},{"type":48,"value":3121}," takes precedence over ",{"type":42,"tag":57,"props":3123,"children":3125},{"className":3124},[],[3126],{"type":48,"value":286},{"type":48,"value":288},{"type":42,"tag":57,"props":3129,"children":3131},{"className":3130},[],[3132],{"type":48,"value":294},{"type":48,"value":3134},". Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), ",{"type":42,"tag":57,"props":3136,"children":3138},{"className":3137},[],[3139],{"type":48,"value":286},{"type":48,"value":288},{"type":42,"tag":57,"props":3142,"children":3144},{"className":3143},[],[3145],{"type":48,"value":294},{"type":48,"value":3147}," fires instead. Consider whether the element needs a fallback animation for those paths.",{"type":42,"tag":493,"props":3149,"children":3150},{},[3151,3153,3158,3160,3165,3167,3172,3174,3179,3181,3187,3189,3195,3196,3201],{"type":48,"value":3152},"Two ways a wired-up morph silently never fires: (1) ",{"type":42,"tag":57,"props":3154,"children":3156},{"className":3155},[],[3157],{"type":48,"value":418},{"type":48,"value":3159}," with no explicit ",{"type":42,"tag":57,"props":3161,"children":3163},{"className":3162},[],[3164],{"type":48,"value":887},{"type":48,"value":3166}," prop — share resolves to none; (2) type-keyed ",{"type":42,"tag":57,"props":3168,"children":3170},{"className":3169},[],[3171],{"type":48,"value":887},{"type":48,"value":3173}," where the navigation never adds the type — a plain link click resolves the map's ",{"type":42,"tag":57,"props":3175,"children":3177},{"className":3176},[],[3178],{"type":48,"value":1408},{"type":48,"value":3180},". Every link that should morph must add the type (",{"type":42,"tag":57,"props":3182,"children":3184},{"className":3183},[],[3185],{"type":48,"value":3186},"transitionTypes",{"type":48,"value":3188}," on ",{"type":42,"tag":57,"props":3190,"children":3192},{"className":3191},[],[3193],{"type":48,"value":3194},"next\u002Flink",{"type":48,"value":918},{"type":42,"tag":57,"props":3197,"children":3199},{"className":3198},[],[3200],{"type":48,"value":1501},{"type":48,"value":3202},").",{"type":42,"tag":493,"props":3204,"children":3205},{},[3206],{"type":48,"value":3207},"Never use a fade-out exit on pages with shared morphs — use a directional slide instead.",{"type":42,"tag":479,"props":3209,"children":3210},{},[],{"type":42,"tag":118,"props":3212,"children":3214},{"id":3213},"common-patterns",[3215],{"type":48,"value":3216},"Common Patterns",{"type":42,"tag":330,"props":3218,"children":3220},{"id":3219},"enterexit",[3221],{"type":48,"value":3222},"Enter\u002FExit",{"type":42,"tag":630,"props":3224,"children":3226},{"className":632,"code":3225,"language":634,"meta":635,"style":635},"{show && (\n  \u003CViewTransition enter=\"fade-in\" exit=\"fade-out\">\u003CPanel \u002F>\u003C\u002FViewTransition>\n)}\n",[3227],{"type":42,"tag":57,"props":3228,"children":3229},{"__ignoreMap":635},[3230,3252,3327],{"type":42,"tag":641,"props":3231,"children":3232},{"class":643,"line":644},[3233,3238,3243,3248],{"type":42,"tag":641,"props":3234,"children":3235},{"style":654},[3236],{"type":48,"value":3237},"{",{"type":42,"tag":641,"props":3239,"children":3240},{"style":660},[3241],{"type":48,"value":3242},"show",{"type":42,"tag":641,"props":3244,"children":3245},{"style":654},[3246],{"type":48,"value":3247}," &&",{"type":42,"tag":641,"props":3249,"children":3250},{"style":1043},[3251],{"type":48,"value":2464},{"type":42,"tag":641,"props":3253,"children":3254},{"class":643,"line":696},[3255,3259,3263,3267,3271,3275,3279,3283,3287,3291,3295,3300,3304,3309,3314,3319,3323],{"type":42,"tag":641,"props":3256,"children":3257},{"style":654},[3258],{"type":48,"value":731},{"type":42,"tag":641,"props":3260,"children":3261},{"style":715},[3262],{"type":48,"value":523},{"type":42,"tag":641,"props":3264,"children":3265},{"style":986},[3266],{"type":48,"value":989},{"type":42,"tag":641,"props":3268,"children":3269},{"style":654},[3270],{"type":48,"value":994},{"type":42,"tag":641,"props":3272,"children":3273},{"style":654},[3274],{"type":48,"value":999},{"type":42,"tag":641,"props":3276,"children":3277},{"style":681},[3278],{"type":48,"value":2153},{"type":42,"tag":641,"props":3280,"children":3281},{"style":654},[3282],{"type":48,"value":999},{"type":42,"tag":641,"props":3284,"children":3285},{"style":986},[3286],{"type":48,"value":1013},{"type":42,"tag":641,"props":3288,"children":3289},{"style":654},[3290],{"type":48,"value":994},{"type":42,"tag":641,"props":3292,"children":3293},{"style":654},[3294],{"type":48,"value":999},{"type":42,"tag":641,"props":3296,"children":3297},{"style":681},[3298],{"type":48,"value":3299},"fade-out",{"type":42,"tag":641,"props":3301,"children":3302},{"style":654},[3303],{"type":48,"value":999},{"type":42,"tag":641,"props":3305,"children":3306},{"style":654},[3307],{"type":48,"value":3308},">\u003C",{"type":42,"tag":641,"props":3310,"children":3311},{"style":715},[3312],{"type":48,"value":3313},"Panel",{"type":42,"tag":641,"props":3315,"children":3316},{"style":654},[3317],{"type":48,"value":3318}," \u002F>\u003C\u002F",{"type":42,"tag":641,"props":3320,"children":3321},{"style":715},[3322],{"type":48,"value":523},{"type":42,"tag":641,"props":3324,"children":3325},{"style":654},[3326],{"type":48,"value":722},{"type":42,"tag":641,"props":3328,"children":3329},{"class":643,"line":706},[3330,3334],{"type":42,"tag":641,"props":3331,"children":3332},{"style":1043},[3333],{"type":48,"value":207},{"type":42,"tag":641,"props":3335,"children":3336},{"style":654},[3337],{"type":48,"value":2725},{"type":42,"tag":330,"props":3339,"children":3341},{"id":3340},"list-reorder",[3342],{"type":48,"value":3343},"List Reorder",{"type":42,"tag":630,"props":3345,"children":3347},{"className":632,"code":3346,"language":634,"meta":635,"style":635},"{items.map(item => (\n  \u003CViewTransition key={item.id}>\u003CItemCard item={item} \u002F>\u003C\u002FViewTransition>\n))}\n",[3348],{"type":42,"tag":57,"props":3349,"children":3350},{"__ignoreMap":635},[3351,3389,3459],{"type":42,"tag":641,"props":3352,"children":3353},{"class":643,"line":644},[3354,3358,3363,3367,3372,3376,3381,3385],{"type":42,"tag":641,"props":3355,"children":3356},{"style":654},[3357],{"type":48,"value":3237},{"type":42,"tag":641,"props":3359,"children":3360},{"style":660},[3361],{"type":48,"value":3362},"items",{"type":42,"tag":641,"props":3364,"children":3365},{"style":654},[3366],{"type":48,"value":1615},{"type":42,"tag":641,"props":3368,"children":3369},{"style":1516},[3370],{"type":48,"value":3371},"map",{"type":42,"tag":641,"props":3373,"children":3374},{"style":1043},[3375],{"type":48,"value":1523},{"type":42,"tag":641,"props":3377,"children":3378},{"style":2408},[3379],{"type":48,"value":3380},"item",{"type":42,"tag":641,"props":3382,"children":3383},{"style":986},[3384],{"type":48,"value":1533},{"type":42,"tag":641,"props":3386,"children":3387},{"style":1043},[3388],{"type":48,"value":2464},{"type":42,"tag":641,"props":3390,"children":3391},{"class":643,"line":696},[3392,3396,3400,3405,3410,3414,3418,3423,3428,3433,3438,3442,3446,3451,3455],{"type":42,"tag":641,"props":3393,"children":3394},{"style":654},[3395],{"type":48,"value":731},{"type":42,"tag":641,"props":3397,"children":3398},{"style":715},[3399],{"type":48,"value":523},{"type":42,"tag":641,"props":3401,"children":3402},{"style":986},[3403],{"type":48,"value":3404}," key",{"type":42,"tag":641,"props":3406,"children":3407},{"style":654},[3408],{"type":48,"value":3409},"={",{"type":42,"tag":641,"props":3411,"children":3412},{"style":660},[3413],{"type":48,"value":3380},{"type":42,"tag":641,"props":3415,"children":3416},{"style":654},[3417],{"type":48,"value":1615},{"type":42,"tag":641,"props":3419,"children":3420},{"style":660},[3421],{"type":48,"value":3422},"id",{"type":42,"tag":641,"props":3424,"children":3425},{"style":654},[3426],{"type":48,"value":3427},"}>\u003C",{"type":42,"tag":641,"props":3429,"children":3430},{"style":715},[3431],{"type":48,"value":3432},"ItemCard",{"type":42,"tag":641,"props":3434,"children":3435},{"style":986},[3436],{"type":48,"value":3437}," item",{"type":42,"tag":641,"props":3439,"children":3440},{"style":654},[3441],{"type":48,"value":3409},{"type":42,"tag":641,"props":3443,"children":3444},{"style":660},[3445],{"type":48,"value":3380},{"type":42,"tag":641,"props":3447,"children":3448},{"style":654},[3449],{"type":48,"value":3450},"} \u002F>\u003C\u002F",{"type":42,"tag":641,"props":3452,"children":3453},{"style":715},[3454],{"type":48,"value":523},{"type":42,"tag":641,"props":3456,"children":3457},{"style":654},[3458],{"type":48,"value":722},{"type":42,"tag":641,"props":3460,"children":3461},{"class":643,"line":706},[3462,3467],{"type":42,"tag":641,"props":3463,"children":3464},{"style":1043},[3465],{"type":48,"value":3466},"))",{"type":42,"tag":641,"props":3468,"children":3469},{"style":654},[3470],{"type":48,"value":2725},{"type":42,"tag":51,"props":3472,"children":3473},{},[3474,3476,3481,3483,3489],{"type":48,"value":3475},"Trigger inside ",{"type":42,"tag":57,"props":3477,"children":3479},{"className":3478},[],[3480],{"type":48,"value":92},{"type":48,"value":3482},". Avoid wrapper ",{"type":42,"tag":57,"props":3484,"children":3486},{"className":3485},[],[3487],{"type":48,"value":3488},"\u003Cdiv>",{"type":48,"value":3490},"s between list and VT.",{"type":42,"tag":330,"props":3492,"children":3494},{"id":3493},"layout-displacement-morph",[3495],{"type":48,"value":3496},"Layout Displacement Morph",{"type":42,"tag":51,"props":3498,"children":3499},{},[3500,3502,3507,3509,3514],{"type":48,"value":3501},"Only content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing\u002Fshrinking list in a bare ",{"type":42,"tag":57,"props":3503,"children":3505},{"className":3504},[],[3506],{"type":48,"value":78},{"type":48,"value":3508}," so it glides instead of jumping. See ",{"type":42,"tag":591,"props":3510,"children":3512},{"href":3511},"references\u002Fpatterns.md#layout-displacement-morph",[3513],{"type":48,"value":3496},{"type":48,"value":1615},{"type":42,"tag":330,"props":3516,"children":3518},{"id":3517},"composing-shared-elements-with-list-identity",[3519],{"type":48,"value":3520},"Composing Shared Elements with List Identity",{"type":42,"tag":51,"props":3522,"children":3523},{},[3524,3526,3531],{"type":48,"value":3525},"Shared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested ",{"type":42,"tag":57,"props":3527,"children":3529},{"className":3528},[],[3530],{"type":48,"value":78},{"type":48,"value":3532}," boundaries:",{"type":42,"tag":630,"props":3534,"children":3536},{"className":632,"code":3535,"language":634,"meta":635,"style":635},"{items.map(item => (\n  \u003CViewTransition key={item.id}>                                      {\u002F* list identity *\u002F}\n    \u003CLink href={`\u002Fitems\u002F${item.id}`}>\n      \u003CViewTransition name={`item-image-${item.id}`} share=\"morph\">   {\u002F* shared element *\u002F}\n        \u003CImage src={item.image} \u002F>\n      \u003C\u002FViewTransition>\n      \u003Cp>{item.name}\u003C\u002Fp>\n    \u003C\u002FLink>\n  \u003C\u002FViewTransition>\n))}\n",[3537],{"type":42,"tag":57,"props":3538,"children":3539},{"__ignoreMap":635},[3540,3575,3625,3683,3775,3813,3829,3870,3885,3900],{"type":42,"tag":641,"props":3541,"children":3542},{"class":643,"line":644},[3543,3547,3551,3555,3559,3563,3567,3571],{"type":42,"tag":641,"props":3544,"children":3545},{"style":654},[3546],{"type":48,"value":3237},{"type":42,"tag":641,"props":3548,"children":3549},{"style":660},[3550],{"type":48,"value":3362},{"type":42,"tag":641,"props":3552,"children":3553},{"style":654},[3554],{"type":48,"value":1615},{"type":42,"tag":641,"props":3556,"children":3557},{"style":1516},[3558],{"type":48,"value":3371},{"type":42,"tag":641,"props":3560,"children":3561},{"style":1043},[3562],{"type":48,"value":1523},{"type":42,"tag":641,"props":3564,"children":3565},{"style":2408},[3566],{"type":48,"value":3380},{"type":42,"tag":641,"props":3568,"children":3569},{"style":986},[3570],{"type":48,"value":1533},{"type":42,"tag":641,"props":3572,"children":3573},{"style":1043},[3574],{"type":48,"value":2464},{"type":42,"tag":641,"props":3576,"children":3577},{"class":643,"line":696},[3578,3582,3586,3590,3594,3598,3602,3606,3611,3616,3621],{"type":42,"tag":641,"props":3579,"children":3580},{"style":654},[3581],{"type":48,"value":731},{"type":42,"tag":641,"props":3583,"children":3584},{"style":715},[3585],{"type":48,"value":523},{"type":42,"tag":641,"props":3587,"children":3588},{"style":986},[3589],{"type":48,"value":3404},{"type":42,"tag":641,"props":3591,"children":3592},{"style":654},[3593],{"type":48,"value":3409},{"type":42,"tag":641,"props":3595,"children":3596},{"style":660},[3597],{"type":48,"value":3380},{"type":42,"tag":641,"props":3599,"children":3600},{"style":654},[3601],{"type":48,"value":1615},{"type":42,"tag":641,"props":3603,"children":3604},{"style":660},[3605],{"type":48,"value":3422},{"type":42,"tag":641,"props":3607,"children":3608},{"style":654},[3609],{"type":48,"value":3610},"}>",{"type":42,"tag":641,"props":3612,"children":3613},{"style":654},[3614],{"type":48,"value":3615},"                                      {",{"type":42,"tag":641,"props":3617,"children":3618},{"style":969},[3619],{"type":48,"value":3620},"\u002F* list identity *\u002F",{"type":42,"tag":641,"props":3622,"children":3623},{"style":654},[3624],{"type":48,"value":2725},{"type":42,"tag":641,"props":3626,"children":3627},{"class":643,"line":706},[3628,3632,3637,3642,3646,3651,3656,3661,3665,3669,3673,3678],{"type":42,"tag":641,"props":3629,"children":3630},{"style":654},[3631],{"type":48,"value":1180},{"type":42,"tag":641,"props":3633,"children":3634},{"style":715},[3635],{"type":48,"value":3636},"Link",{"type":42,"tag":641,"props":3638,"children":3639},{"style":986},[3640],{"type":48,"value":3641}," href",{"type":42,"tag":641,"props":3643,"children":3644},{"style":654},[3645],{"type":48,"value":3409},{"type":42,"tag":641,"props":3647,"children":3648},{"style":654},[3649],{"type":48,"value":3650},"`",{"type":42,"tag":641,"props":3652,"children":3653},{"style":681},[3654],{"type":48,"value":3655},"\u002Fitems\u002F",{"type":42,"tag":641,"props":3657,"children":3658},{"style":654},[3659],{"type":48,"value":3660},"${",{"type":42,"tag":641,"props":3662,"children":3663},{"style":660},[3664],{"type":48,"value":3380},{"type":42,"tag":641,"props":3666,"children":3667},{"style":654},[3668],{"type":48,"value":1615},{"type":42,"tag":641,"props":3670,"children":3671},{"style":660},[3672],{"type":48,"value":3422},{"type":42,"tag":641,"props":3674,"children":3675},{"style":654},[3676],{"type":48,"value":3677},"}`",{"type":42,"tag":641,"props":3679,"children":3680},{"style":654},[3681],{"type":48,"value":3682},"}>\n",{"type":42,"tag":641,"props":3684,"children":3685},{"class":643,"line":725},[3686,3691,3695,3699,3703,3707,3712,3716,3720,3724,3728,3732,3737,3741,3745,3749,3753,3757,3761,3766,3771],{"type":42,"tag":641,"props":3687,"children":3688},{"style":654},[3689],{"type":48,"value":3690},"      \u003C",{"type":42,"tag":641,"props":3692,"children":3693},{"style":715},[3694],{"type":48,"value":523},{"type":42,"tag":641,"props":3696,"children":3697},{"style":986},[3698],{"type":48,"value":2865},{"type":42,"tag":641,"props":3700,"children":3701},{"style":654},[3702],{"type":48,"value":3409},{"type":42,"tag":641,"props":3704,"children":3705},{"style":654},[3706],{"type":48,"value":3650},{"type":42,"tag":641,"props":3708,"children":3709},{"style":681},[3710],{"type":48,"value":3711},"item-image-",{"type":42,"tag":641,"props":3713,"children":3714},{"style":654},[3715],{"type":48,"value":3660},{"type":42,"tag":641,"props":3717,"children":3718},{"style":660},[3719],{"type":48,"value":3380},{"type":42,"tag":641,"props":3721,"children":3722},{"style":654},[3723],{"type":48,"value":1615},{"type":42,"tag":641,"props":3725,"children":3726},{"style":660},[3727],{"type":48,"value":3422},{"type":42,"tag":641,"props":3729,"children":3730},{"style":654},[3731],{"type":48,"value":3677},{"type":42,"tag":641,"props":3733,"children":3734},{"style":654},[3735],{"type":48,"value":3736},"} ",{"type":42,"tag":641,"props":3738,"children":3739},{"style":986},[3740],{"type":48,"value":887},{"type":42,"tag":641,"props":3742,"children":3743},{"style":654},[3744],{"type":48,"value":994},{"type":42,"tag":641,"props":3746,"children":3747},{"style":654},[3748],{"type":48,"value":999},{"type":42,"tag":641,"props":3750,"children":3751},{"style":681},[3752],{"type":48,"value":1389},{"type":42,"tag":641,"props":3754,"children":3755},{"style":654},[3756],{"type":48,"value":999},{"type":42,"tag":641,"props":3758,"children":3759},{"style":654},[3760],{"type":48,"value":1051},{"type":42,"tag":641,"props":3762,"children":3763},{"style":654},[3764],{"type":48,"value":3765},"   {",{"type":42,"tag":641,"props":3767,"children":3768},{"style":969},[3769],{"type":48,"value":3770},"\u002F* shared element *\u002F",{"type":42,"tag":641,"props":3772,"children":3773},{"style":654},[3774],{"type":48,"value":2725},{"type":42,"tag":641,"props":3776,"children":3777},{"class":643,"line":744},[3778,3783,3788,3792,3796,3800,3804,3809],{"type":42,"tag":641,"props":3779,"children":3780},{"style":654},[3781],{"type":48,"value":3782},"        \u003C",{"type":42,"tag":641,"props":3784,"children":3785},{"style":715},[3786],{"type":48,"value":3787},"Image",{"type":42,"tag":641,"props":3789,"children":3790},{"style":986},[3791],{"type":48,"value":2903},{"type":42,"tag":641,"props":3793,"children":3794},{"style":654},[3795],{"type":48,"value":3409},{"type":42,"tag":641,"props":3797,"children":3798},{"style":660},[3799],{"type":48,"value":3380},{"type":42,"tag":641,"props":3801,"children":3802},{"style":654},[3803],{"type":48,"value":1615},{"type":42,"tag":641,"props":3805,"children":3806},{"style":660},[3807],{"type":48,"value":3808},"image",{"type":42,"tag":641,"props":3810,"children":3811},{"style":654},[3812],{"type":48,"value":2966},{"type":42,"tag":641,"props":3814,"children":3815},{"class":643,"line":1093},[3816,3821,3825],{"type":42,"tag":641,"props":3817,"children":3818},{"style":654},[3819],{"type":48,"value":3820},"      \u003C\u002F",{"type":42,"tag":641,"props":3822,"children":3823},{"style":715},[3824],{"type":48,"value":523},{"type":42,"tag":641,"props":3826,"children":3827},{"style":654},[3828],{"type":48,"value":722},{"type":42,"tag":641,"props":3830,"children":3831},{"class":643,"line":1102},[3832,3836,3840,3845,3849,3853,3857,3862,3866],{"type":42,"tag":641,"props":3833,"children":3834},{"style":654},[3835],{"type":48,"value":3690},{"type":42,"tag":641,"props":3837,"children":3838},{"style":1043},[3839],{"type":48,"value":51},{"type":42,"tag":641,"props":3841,"children":3842},{"style":654},[3843],{"type":48,"value":3844},">{",{"type":42,"tag":641,"props":3846,"children":3847},{"style":660},[3848],{"type":48,"value":3380},{"type":42,"tag":641,"props":3850,"children":3851},{"style":654},[3852],{"type":48,"value":1615},{"type":42,"tag":641,"props":3854,"children":3855},{"style":660},[3856],{"type":48,"value":205},{"type":42,"tag":641,"props":3858,"children":3859},{"style":654},[3860],{"type":48,"value":3861},"}\u003C\u002F",{"type":42,"tag":641,"props":3863,"children":3864},{"style":1043},[3865],{"type":48,"value":51},{"type":42,"tag":641,"props":3867,"children":3868},{"style":654},[3869],{"type":48,"value":722},{"type":42,"tag":641,"props":3871,"children":3872},{"class":643,"line":1118},[3873,3877,3881],{"type":42,"tag":641,"props":3874,"children":3875},{"style":654},[3876],{"type":48,"value":2733},{"type":42,"tag":641,"props":3878,"children":3879},{"style":715},[3880],{"type":48,"value":3636},{"type":42,"tag":641,"props":3882,"children":3883},{"style":654},[3884],{"type":48,"value":722},{"type":42,"tag":641,"props":3886,"children":3887},{"class":643,"line":1174},[3888,3892,3896],{"type":42,"tag":641,"props":3889,"children":3890},{"style":654},[3891],{"type":48,"value":1213},{"type":42,"tag":641,"props":3893,"children":3894},{"style":715},[3895],{"type":48,"value":523},{"type":42,"tag":641,"props":3897,"children":3898},{"style":654},[3899],{"type":48,"value":722},{"type":42,"tag":641,"props":3901,"children":3902},{"class":643,"line":1207},[3903,3907],{"type":42,"tag":641,"props":3904,"children":3905},{"style":1043},[3906],{"type":48,"value":3466},{"type":42,"tag":641,"props":3908,"children":3909},{"style":654},[3910],{"type":48,"value":2725},{"type":42,"tag":51,"props":3912,"children":3913},{},[3914],{"type":48,"value":3915},"The outer VT handles list reorder\u002Fenter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.",{"type":42,"tag":330,"props":3917,"children":3919},{"id":3918},"force-re-enter-with-key",[3920,3922],{"type":48,"value":3921},"Force Re-Enter with ",{"type":42,"tag":57,"props":3923,"children":3925},{"className":3924},[],[3926],{"type":48,"value":257},{"type":42,"tag":630,"props":3928,"children":3930},{"className":632,"code":3929,"language":634,"meta":635,"style":635},"\u003CViewTransition key={searchParams.toString()} enter=\"slide-up\" default=\"none\">\n  \u003CResultsGrid \u002F>\n\u003C\u002FViewTransition>\n",[3931],{"type":42,"tag":57,"props":3932,"children":3933},{"__ignoreMap":635},[3934,4020,4036],{"type":42,"tag":641,"props":3935,"children":3936},{"class":643,"line":644},[3937,3941,3945,3949,3953,3958,3962,3967,3971,3975,3979,3983,3987,3992,3996,4000,4004,4008,4012,4016],{"type":42,"tag":641,"props":3938,"children":3939},{"style":654},[3940],{"type":48,"value":712},{"type":42,"tag":641,"props":3942,"children":3943},{"style":715},[3944],{"type":48,"value":523},{"type":42,"tag":641,"props":3946,"children":3947},{"style":986},[3948],{"type":48,"value":3404},{"type":42,"tag":641,"props":3950,"children":3951},{"style":654},[3952],{"type":48,"value":3409},{"type":42,"tag":641,"props":3954,"children":3955},{"style":660},[3956],{"type":48,"value":3957},"searchParams",{"type":42,"tag":641,"props":3959,"children":3960},{"style":654},[3961],{"type":48,"value":1615},{"type":42,"tag":641,"props":3963,"children":3964},{"style":1516},[3965],{"type":48,"value":3966},"toString",{"type":42,"tag":641,"props":3968,"children":3969},{"style":660},[3970],{"type":48,"value":1528},{"type":42,"tag":641,"props":3972,"children":3973},{"style":654},[3974],{"type":48,"value":3736},{"type":42,"tag":641,"props":3976,"children":3977},{"style":986},[3978],{"type":48,"value":286},{"type":42,"tag":641,"props":3980,"children":3981},{"style":654},[3982],{"type":48,"value":994},{"type":42,"tag":641,"props":3984,"children":3985},{"style":654},[3986],{"type":48,"value":999},{"type":42,"tag":641,"props":3988,"children":3989},{"style":681},[3990],{"type":48,"value":3991},"slide-up",{"type":42,"tag":641,"props":3993,"children":3994},{"style":654},[3995],{"type":48,"value":999},{"type":42,"tag":641,"props":3997,"children":3998},{"style":986},[3999],{"type":48,"value":1312},{"type":42,"tag":641,"props":4001,"children":4002},{"style":654},[4003],{"type":48,"value":994},{"type":42,"tag":641,"props":4005,"children":4006},{"style":654},[4007],{"type":48,"value":999},{"type":42,"tag":641,"props":4009,"children":4010},{"style":681},[4011],{"type":48,"value":1325},{"type":42,"tag":641,"props":4013,"children":4014},{"style":654},[4015],{"type":48,"value":999},{"type":42,"tag":641,"props":4017,"children":4018},{"style":654},[4019],{"type":48,"value":722},{"type":42,"tag":641,"props":4021,"children":4022},{"class":643,"line":696},[4023,4027,4032],{"type":42,"tag":641,"props":4024,"children":4025},{"style":654},[4026],{"type":48,"value":731},{"type":42,"tag":641,"props":4028,"children":4029},{"style":715},[4030],{"type":48,"value":4031},"ResultsGrid",{"type":42,"tag":641,"props":4033,"children":4034},{"style":654},[4035],{"type":48,"value":741},{"type":42,"tag":641,"props":4037,"children":4038},{"class":643,"line":706},[4039,4043,4047],{"type":42,"tag":641,"props":4040,"children":4041},{"style":654},[4042],{"type":48,"value":750},{"type":42,"tag":641,"props":4044,"children":4045},{"style":715},[4046],{"type":48,"value":523},{"type":42,"tag":641,"props":4048,"children":4049},{"style":654},[4050],{"type":48,"value":722},{"type":42,"tag":51,"props":4052,"children":4053},{},[4054,4059,4061,4067,4069,4074],{"type":42,"tag":142,"props":4055,"children":4056},{},[4057],{"type":48,"value":4058},"Caution:",{"type":48,"value":4060}," If wrapping ",{"type":42,"tag":57,"props":4062,"children":4064},{"className":4063},[],[4065],{"type":48,"value":4066},"\u003CSuspense>",{"type":48,"value":4068},", changing ",{"type":42,"tag":57,"props":4070,"children":4072},{"className":4071},[],[4073],{"type":48,"value":257},{"type":48,"value":4075}," remounts the boundary and refetches.",{"type":42,"tag":330,"props":4077,"children":4079},{"id":4078},"suspense-fallback-to-content",[4080],{"type":48,"value":4081},"Suspense Fallback to Content",{"type":42,"tag":51,"props":4083,"children":4084},{},[4085],{"type":48,"value":4086},"Simple cross-fade:",{"type":42,"tag":630,"props":4088,"children":4090},{"className":632,"code":4089,"language":634,"meta":635,"style":635},"\u003CViewTransition>\n  \u003CSuspense fallback={\u003CSkeleton \u002F>}>\u003CContent \u002F>\u003C\u002FSuspense>\n\u003C\u002FViewTransition>\n",[4091],{"type":42,"tag":57,"props":4092,"children":4093},{"__ignoreMap":635},[4094,4109,4156],{"type":42,"tag":641,"props":4095,"children":4096},{"class":643,"line":644},[4097,4101,4105],{"type":42,"tag":641,"props":4098,"children":4099},{"style":654},[4100],{"type":48,"value":712},{"type":42,"tag":641,"props":4102,"children":4103},{"style":715},[4104],{"type":48,"value":523},{"type":42,"tag":641,"props":4106,"children":4107},{"style":654},[4108],{"type":48,"value":722},{"type":42,"tag":641,"props":4110,"children":4111},{"class":643,"line":696},[4112,4116,4120,4125,4130,4135,4140,4144,4148,4152],{"type":42,"tag":641,"props":4113,"children":4114},{"style":654},[4115],{"type":48,"value":731},{"type":42,"tag":641,"props":4117,"children":4118},{"style":715},[4119],{"type":48,"value":107},{"type":42,"tag":641,"props":4121,"children":4122},{"style":986},[4123],{"type":48,"value":4124}," fallback",{"type":42,"tag":641,"props":4126,"children":4127},{"style":654},[4128],{"type":48,"value":4129},"={\u003C",{"type":42,"tag":641,"props":4131,"children":4132},{"style":715},[4133],{"type":48,"value":4134},"Skeleton",{"type":42,"tag":641,"props":4136,"children":4137},{"style":654},[4138],{"type":48,"value":4139}," \u002F>}>\u003C",{"type":42,"tag":641,"props":4141,"children":4142},{"style":715},[4143],{"type":48,"value":1056},{"type":42,"tag":641,"props":4145,"children":4146},{"style":654},[4147],{"type":48,"value":3318},{"type":42,"tag":641,"props":4149,"children":4150},{"style":715},[4151],{"type":48,"value":107},{"type":42,"tag":641,"props":4153,"children":4154},{"style":654},[4155],{"type":48,"value":722},{"type":42,"tag":641,"props":4157,"children":4158},{"class":643,"line":706},[4159,4163,4167],{"type":42,"tag":641,"props":4160,"children":4161},{"style":654},[4162],{"type":48,"value":750},{"type":42,"tag":641,"props":4164,"children":4165},{"style":715},[4166],{"type":48,"value":523},{"type":42,"tag":641,"props":4168,"children":4169},{"style":654},[4170],{"type":48,"value":722},{"type":42,"tag":51,"props":4172,"children":4173},{},[4174],{"type":48,"value":4175},"Directional reveal:",{"type":42,"tag":630,"props":4177,"children":4179},{"className":632,"code":4178,"language":634,"meta":635,"style":635},"\u003CSuspense fallback={\u003CViewTransition exit=\"slide-down\">\u003CSkeleton \u002F>\u003C\u002FViewTransition>}>\n  \u003CViewTransition enter=\"slide-up\" default=\"none\">\u003CContent \u002F>\u003C\u002FViewTransition>\n\u003C\u002FSuspense>\n",[4180],{"type":42,"tag":57,"props":4181,"children":4182},{"__ignoreMap":635},[4183,4248,4319],{"type":42,"tag":641,"props":4184,"children":4185},{"class":643,"line":644},[4186,4190,4194,4198,4202,4206,4210,4214,4218,4223,4227,4231,4235,4239,4243],{"type":42,"tag":641,"props":4187,"children":4188},{"style":654},[4189],{"type":48,"value":712},{"type":42,"tag":641,"props":4191,"children":4192},{"style":715},[4193],{"type":48,"value":107},{"type":42,"tag":641,"props":4195,"children":4196},{"style":986},[4197],{"type":48,"value":4124},{"type":42,"tag":641,"props":4199,"children":4200},{"style":654},[4201],{"type":48,"value":4129},{"type":42,"tag":641,"props":4203,"children":4204},{"style":715},[4205],{"type":48,"value":523},{"type":42,"tag":641,"props":4207,"children":4208},{"style":986},[4209],{"type":48,"value":1013},{"type":42,"tag":641,"props":4211,"children":4212},{"style":654},[4213],{"type":48,"value":994},{"type":42,"tag":641,"props":4215,"children":4216},{"style":654},[4217],{"type":48,"value":999},{"type":42,"tag":641,"props":4219,"children":4220},{"style":681},[4221],{"type":48,"value":4222},"slide-down",{"type":42,"tag":641,"props":4224,"children":4225},{"style":654},[4226],{"type":48,"value":999},{"type":42,"tag":641,"props":4228,"children":4229},{"style":654},[4230],{"type":48,"value":3308},{"type":42,"tag":641,"props":4232,"children":4233},{"style":715},[4234],{"type":48,"value":4134},{"type":42,"tag":641,"props":4236,"children":4237},{"style":654},[4238],{"type":48,"value":3318},{"type":42,"tag":641,"props":4240,"children":4241},{"style":715},[4242],{"type":48,"value":523},{"type":42,"tag":641,"props":4244,"children":4245},{"style":654},[4246],{"type":48,"value":4247},">}>\n",{"type":42,"tag":641,"props":4249,"children":4250},{"class":643,"line":696},[4251,4255,4259,4263,4267,4271,4275,4279,4283,4287,4291,4295,4299,4303,4307,4311,4315],{"type":42,"tag":641,"props":4252,"children":4253},{"style":654},[4254],{"type":48,"value":731},{"type":42,"tag":641,"props":4256,"children":4257},{"style":715},[4258],{"type":48,"value":523},{"type":42,"tag":641,"props":4260,"children":4261},{"style":986},[4262],{"type":48,"value":989},{"type":42,"tag":641,"props":4264,"children":4265},{"style":654},[4266],{"type":48,"value":994},{"type":42,"tag":641,"props":4268,"children":4269},{"style":654},[4270],{"type":48,"value":999},{"type":42,"tag":641,"props":4272,"children":4273},{"style":681},[4274],{"type":48,"value":3991},{"type":42,"tag":641,"props":4276,"children":4277},{"style":654},[4278],{"type":48,"value":999},{"type":42,"tag":641,"props":4280,"children":4281},{"style":986},[4282],{"type":48,"value":1312},{"type":42,"tag":641,"props":4284,"children":4285},{"style":654},[4286],{"type":48,"value":994},{"type":42,"tag":641,"props":4288,"children":4289},{"style":654},[4290],{"type":48,"value":999},{"type":42,"tag":641,"props":4292,"children":4293},{"style":681},[4294],{"type":48,"value":1325},{"type":42,"tag":641,"props":4296,"children":4297},{"style":654},[4298],{"type":48,"value":999},{"type":42,"tag":641,"props":4300,"children":4301},{"style":654},[4302],{"type":48,"value":3308},{"type":42,"tag":641,"props":4304,"children":4305},{"style":715},[4306],{"type":48,"value":1056},{"type":42,"tag":641,"props":4308,"children":4309},{"style":654},[4310],{"type":48,"value":3318},{"type":42,"tag":641,"props":4312,"children":4313},{"style":715},[4314],{"type":48,"value":523},{"type":42,"tag":641,"props":4316,"children":4317},{"style":654},[4318],{"type":48,"value":722},{"type":42,"tag":641,"props":4320,"children":4321},{"class":643,"line":706},[4322,4326,4330],{"type":42,"tag":641,"props":4323,"children":4324},{"style":654},[4325],{"type":48,"value":750},{"type":42,"tag":641,"props":4327,"children":4328},{"style":715},[4329],{"type":48,"value":107},{"type":42,"tag":641,"props":4331,"children":4332},{"style":654},[4333],{"type":48,"value":722},{"type":42,"tag":51,"props":4335,"children":4336},{},[4337,4339,4344],{"type":48,"value":4338},"For more patterns, see ",{"type":42,"tag":591,"props":4340,"children":4342},{"href":4341},"references\u002Fpatterns.md",[4343],{"type":48,"value":4341},{"type":48,"value":1615},{"type":42,"tag":479,"props":4346,"children":4347},{},[],{"type":42,"tag":118,"props":4349,"children":4351},{"id":4350},"how-multiple-vts-interact",[4352],{"type":48,"value":4353},"How Multiple VTs Interact",{"type":42,"tag":51,"props":4355,"children":4356},{},[4357,4359,4364,4366,4371],{"type":48,"value":4358},"Every VT matching the trigger fires simultaneously in a single ",{"type":42,"tag":57,"props":4360,"children":4362},{"className":4361},[],[4363],{"type":48,"value":62},{"type":48,"value":4365},". VTs in ",{"type":42,"tag":142,"props":4367,"children":4368},{},[4369],{"type":48,"value":4370},"different",{"type":48,"value":4372}," transitions (navigation vs later Suspense resolve) don't compete.",{"type":42,"tag":330,"props":4374,"children":4376},{"id":4375},"use-defaultnone-deliberately",[4377,4379,4384],{"type":48,"value":4378},"Use ",{"type":42,"tag":57,"props":4380,"children":4382},{"className":4381},[],[4383],{"type":48,"value":418},{"type":48,"value":4385}," Deliberately",{"type":42,"tag":51,"props":4387,"children":4388},{},[4389,4391,4396,4398,4403,4405,4410],{"type":48,"value":4390},"Without it, every VT fires the browser cross-fade on ",{"type":42,"tag":142,"props":4392,"children":4393},{},[4394],{"type":48,"value":4395},"every",{"type":48,"value":4397}," transition — Suspense resolves, ",{"type":42,"tag":57,"props":4399,"children":4401},{"className":4400},[],[4402],{"type":48,"value":100},{"type":48,"value":4404}," updates, background revalidations. Use ",{"type":42,"tag":57,"props":4406,"children":4408},{"className":4407},[],[4409],{"type":48,"value":418},{"type":48,"value":4411}," on named\u002Fshared elements and type-keyed page VTs.",{"type":42,"tag":51,"props":4413,"children":4414},{},[4415,4417,4422,4424,4429,4431,4436,4438,4443,4445,4451],{"type":48,"value":4416},"But it also turns off ",{"type":42,"tag":57,"props":4418,"children":4420},{"className":4419},[],[4421],{"type":48,"value":864},{"type":48,"value":4423}," (layout\u002Freflow morphs) and ",{"type":42,"tag":57,"props":4425,"children":4427},{"className":4426},[],[4428],{"type":48,"value":887},{"type":48,"value":4430}," (a named pair with no explicit ",{"type":42,"tag":57,"props":4432,"children":4434},{"className":4433},[],[4435],{"type":48,"value":887},{"type":48,"value":4437}," prop never morphs). Keyed list items and displaced siblings ",{"type":42,"tag":66,"props":4439,"children":4440},{},[4441],{"type":48,"value":4442},"want",{"type":48,"value":4444}," update — leave them bare or set ",{"type":42,"tag":57,"props":4446,"children":4448},{"className":4447},[],[4449],{"type":48,"value":4450},"update=\"auto\"",{"type":48,"value":1615},{"type":42,"tag":330,"props":4453,"children":4455},{"id":4454},"two-patterns-coexist",[4456],{"type":48,"value":4457},"Two Patterns Coexist",{"type":42,"tag":51,"props":4459,"children":4460},{},[4461,4466,4468,4473],{"type":42,"tag":142,"props":4462,"children":4463},{},[4464],{"type":48,"value":4465},"Pattern A — Directional slides:",{"type":48,"value":4467}," Type-keyed VT on each page, fires during navigation.\n",{"type":42,"tag":142,"props":4469,"children":4470},{},[4471],{"type":48,"value":4472},"Pattern B — Suspense reveals:",{"type":48,"value":4474}," Simple string props, fires when data loads (no type).",{"type":42,"tag":51,"props":4476,"children":4477},{},[4478,4480,4485,4487,4492,4493,4498],{"type":48,"value":4479},"They coexist because they fire at different moments. ",{"type":42,"tag":57,"props":4481,"children":4483},{"className":4482},[],[4484],{"type":48,"value":418},{"type":48,"value":4486}," on both prevents cross-interference. Always pair ",{"type":42,"tag":57,"props":4488,"children":4490},{"className":4489},[],[4491],{"type":48,"value":286},{"type":48,"value":72},{"type":42,"tag":57,"props":4494,"children":4496},{"className":4495},[],[4497],{"type":48,"value":294},{"type":48,"value":4499},". Place directional VTs in page components, not layouts.",{"type":42,"tag":330,"props":4501,"children":4503},{"id":4502},"nested-vt-limitation",[4504],{"type":48,"value":4505},"Nested VT Limitation",{"type":42,"tag":51,"props":4507,"children":4508},{},[4509,4511,4516,4518,4523,4525,4531,4532,4538,4540,4548],{"type":48,"value":4510},"When a parent VT mounts\u002Funmounts ",{"type":42,"tag":142,"props":4512,"children":4513},{},[4514],{"type":48,"value":4515},"as one unit",{"type":48,"value":4517}," with nested VTs inside it, the nested ones do not fire their own enter\u002Fexit — only the outermost VT animates. (A child VT mounted inside a ",{"type":42,"tag":66,"props":4519,"children":4520},{},[4521],{"type":48,"value":4522},"persistent",{"type":48,"value":4524}," parent VT fires enter\u002Fexit normally.) Per-item staggered animations during page navigation are not possible today; the experimental opt-in is the ",{"type":42,"tag":57,"props":4526,"children":4528},{"className":4527},[],[4529],{"type":48,"value":4530},"parentEnter",{"type":48,"value":288},{"type":42,"tag":57,"props":4533,"children":4535},{"className":4534},[],[4536],{"type":48,"value":4537},"parentExit",{"type":48,"value":4539}," props (",{"type":42,"tag":591,"props":4541,"children":4545},{"href":4542,"rel":4543},"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fpull\u002F36690",[4544],"nofollow",[4546],{"type":48,"value":4547},"react#36690",{"type":48,"value":4549},", experimental channel only).",{"type":42,"tag":479,"props":4551,"children":4552},{},[],{"type":42,"tag":118,"props":4554,"children":4556},{"id":4555},"nextjs-integration",[4557],{"type":48,"value":4558},"Next.js Integration",{"type":42,"tag":51,"props":4560,"children":4561},{},[4562,4564,4570,4572,4577,4579,4584,4586,4591],{"type":48,"value":4563},"For Next.js setup (",{"type":42,"tag":57,"props":4565,"children":4567},{"className":4566},[],[4568],{"type":48,"value":4569},"experimental.viewTransition",{"type":48,"value":4571}," flag, ",{"type":42,"tag":57,"props":4573,"children":4575},{"className":4574},[],[4576],{"type":48,"value":3186},{"type":48,"value":4578}," prop on ",{"type":42,"tag":57,"props":4580,"children":4582},{"className":4581},[],[4583],{"type":48,"value":3194},{"type":48,"value":4585},", App Router patterns, Server Components), see ",{"type":42,"tag":591,"props":4587,"children":4589},{"href":4588},"references\u002Fnextjs.md",[4590],{"type":48,"value":4588},{"type":48,"value":1615},{"type":42,"tag":479,"props":4593,"children":4594},{},[],{"type":42,"tag":118,"props":4596,"children":4598},{"id":4597},"accessibility",[4599],{"type":48,"value":4600},"Accessibility",{"type":42,"tag":51,"props":4602,"children":4603},{},[4604,4606,4611],{"type":48,"value":4605},"Always add the reduced motion CSS from ",{"type":42,"tag":591,"props":4607,"children":4609},{"href":4608},"references\u002Fcss-recipes.md#reduced-motion",[4610],{"type":48,"value":602},{"type":48,"value":4612}," to your global stylesheet.",{"type":42,"tag":479,"props":4614,"children":4615},{},[],{"type":42,"tag":118,"props":4617,"children":4619},{"id":4618},"reference-files",[4620],{"type":48,"value":4621},"Reference Files",{"type":42,"tag":489,"props":4623,"children":4624},{},[4625,4637,4649,4661],{"type":42,"tag":493,"props":4626,"children":4627},{},[4628,4635],{"type":42,"tag":142,"props":4629,"children":4630},{},[4631],{"type":42,"tag":591,"props":4632,"children":4633},{"href":593},[4634],{"type":48,"value":593},{"type":48,"value":4636}," — Step-by-step implementation workflow.",{"type":42,"tag":493,"props":4638,"children":4639},{},[4640,4647],{"type":42,"tag":142,"props":4641,"children":4642},{},[4643],{"type":42,"tag":591,"props":4644,"children":4645},{"href":4341},[4646],{"type":48,"value":4341},{"type":48,"value":4648}," — Patterns, animation timing, events API, troubleshooting.",{"type":42,"tag":493,"props":4650,"children":4651},{},[4652,4659],{"type":42,"tag":142,"props":4653,"children":4654},{},[4655],{"type":42,"tag":591,"props":4656,"children":4657},{"href":602},[4658],{"type":48,"value":602},{"type":48,"value":4660}," — Ready-to-use CSS animation recipes.",{"type":42,"tag":493,"props":4662,"children":4663},{},[4664,4671],{"type":42,"tag":142,"props":4665,"children":4666},{},[4667],{"type":42,"tag":591,"props":4668,"children":4669},{"href":4588},[4670],{"type":48,"value":4588},{"type":48,"value":4672}," — Next.js App Router patterns and Server Component details.",{"type":42,"tag":118,"props":4674,"children":4676},{"id":4675},"full-compiled-document",[4677],{"type":48,"value":4678},"Full Compiled Document",{"type":42,"tag":51,"props":4680,"children":4681},{},[4682,4684],{"type":48,"value":4683},"For the complete guide with all reference files expanded: ",{"type":42,"tag":57,"props":4685,"children":4687},{"className":4686},[],[4688],{"type":48,"value":4689},"AGENTS.md",{"type":42,"tag":4691,"props":4692,"children":4693},"style",{},[4694],{"type":48,"value":4695},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4697,"total":1174},[4698,4710,4722,4737,4752,4765,4782],{"slug":4699,"name":4699,"fn":4700,"description":4701,"org":4702,"tags":4703,"stars":22,"repoUrl":23,"updatedAt":4709},"deploy-to-vercel","deploy applications to Vercel","Deploy applications and websites to Vercel. Use when the user requests deployment actions like \"deploy my app\", \"deploy and give me the link\", \"push this live\", or \"create a preview deployment\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4704,4707],{"name":4705,"slug":4706,"type":15},"Deployment","deployment",{"name":4708,"slug":36,"type":15},"Vercel","2026-07-17T06:08:41.18374",{"slug":4711,"name":4711,"fn":4712,"description":4713,"org":4714,"tags":4715,"stars":22,"repoUrl":23,"updatedAt":4721},"vercel-cli-with-tokens","manage Vercel projects via CLI","Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. \"deploy to vercel\", \"set up vercel\", \"add environment variables to vercel\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4716,4719,4720],{"name":4717,"slug":4718,"type":15},"CLI","cli",{"name":4705,"slug":4706,"type":15},{"name":4708,"slug":36,"type":15},"2026-07-17T06:08:41.84179",{"slug":4723,"name":4723,"fn":4724,"description":4725,"org":4726,"tags":4727,"stars":22,"repoUrl":23,"updatedAt":4736},"vercel-composition-patterns","implement scalable React composition patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4728,4731,4732,4733],{"name":4729,"slug":4730,"type":15},"Best Practices","best-practices",{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":4734,"slug":4735,"type":15},"UI Components","ui-components","2026-07-17T06:05:40.576913",{"slug":4738,"name":4738,"fn":4739,"description":4740,"org":4741,"tags":4742,"stars":22,"repoUrl":23,"updatedAt":4751},"vercel-optimize","optimize Vercel project performance and costs","Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel\u002Fframework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4743,4746,4747,4750],{"name":4744,"slug":4745,"type":15},"Cost Optimization","cost-optimization",{"name":4705,"slug":4706,"type":15},{"name":4748,"slug":4749,"type":15},"Performance","performance",{"name":4708,"slug":36,"type":15},"2026-07-17T06:04:08.327515",{"slug":4753,"name":4753,"fn":4754,"description":4755,"org":4756,"tags":4757,"stars":22,"repoUrl":23,"updatedAt":4764},"vercel-react-best-practices","optimize React and Next.js performance","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4758,4759,4762,4763],{"name":20,"slug":21,"type":15},{"name":4760,"slug":4761,"type":15},"Next.js","next-js",{"name":4748,"slug":4749,"type":15},{"name":13,"slug":14,"type":15},"2026-07-17T06:08:41.518893",{"slug":4766,"name":4766,"fn":4767,"description":4768,"org":4769,"tags":4770,"stars":22,"repoUrl":23,"updatedAt":4781},"vercel-react-native-skills","build performant React Native mobile apps","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4771,4774,4777,4778],{"name":4772,"slug":4773,"type":15},"Expo","expo",{"name":4775,"slug":4776,"type":15},"Mobile","mobile",{"name":4748,"slug":4749,"type":15},{"name":4779,"slug":4780,"type":15},"React Native","react-native","2026-07-17T06:04:08.681158",{"slug":4,"name":4,"fn":5,"description":6,"org":4783,"tags":4784,"stars":22,"repoUrl":23,"updatedAt":24},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4785,4786,4787],{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"items":4789,"total":4925},[4790,4808,4820,4832,4847,4864,4876,4889,4900,4905,4911,4918],{"slug":4791,"name":4791,"fn":4792,"description":4793,"org":4794,"tags":4795,"stars":4805,"repoUrl":4806,"updatedAt":4807},"agent-browser","automate browser interactions for AI agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to \"open a website\", \"fill out a form\", \"click a button\", \"take a screenshot\", \"scrape data from a page\", \"test this web app\", \"login to a site\", \"automate browser actions\", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4796,4799,4802],{"name":4797,"slug":4798,"type":15},"Agents","agents",{"name":4800,"slug":4801,"type":15},"Automation","automation",{"name":4803,"slug":4804,"type":15},"Browser Automation","browser-automation",38346,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-browser","2026-07-20T05:55:17.314329",{"slug":4809,"name":4809,"fn":4810,"description":4811,"org":4812,"tags":4813,"stars":4805,"repoUrl":4806,"updatedAt":4819},"agentcore","run browser automation on AWS Bedrock","Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include \"use agentcore\", \"run on AWS\", \"cloud browser with AWS\", \"bedrock browser\", \"agentcore session\", or any task requiring AWS-hosted browser automation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4814,4815,4818],{"name":4800,"slug":4801,"type":15},{"name":4816,"slug":4817,"type":15},"AWS","aws",{"name":4803,"slug":4804,"type":15},"2026-07-17T06:08:33.665276",{"slug":4821,"name":4821,"fn":4822,"description":4823,"org":4824,"tags":4825,"stars":4805,"repoUrl":4806,"updatedAt":4831},"core","navigate and interact with web pages","Core agent-browser usage guide. Read this before running any agent-browser commands. Covers the snapshot-and-ref workflow, navigating pages, interacting with elements (click, fill, type, select), extracting text and data, taking screenshots, managing tabs, handling forms and auth, waiting for content, running multiple browser sessions in parallel, and troubleshooting common failures. Use when the user asks to interact with a website, fill a form, click something, extract data, take a screenshot, log into a site, test a web app, or automate any browser task.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4826,4827,4828],{"name":4797,"slug":4798,"type":15},{"name":4803,"slug":4804,"type":15},{"name":4829,"slug":4830,"type":15},"Navigation","navigation","2026-07-26T05:47:42.378419",{"slug":4833,"name":4833,"fn":4834,"description":4835,"org":4836,"tags":4837,"stars":4805,"repoUrl":4806,"updatedAt":4846},"derive-client","reverse engineer internal APIs from browser traffic","Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to \"derive a client\", \"build a CLI for \u003Csite>\", \"reverse engineer this site's API\", \"record network requests\", \"turn this site into an API\", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4838,4841,4842,4843],{"name":4839,"slug":4840,"type":15},"API Development","api-development",{"name":4800,"slug":4801,"type":15},{"name":4803,"slug":4804,"type":15},{"name":4844,"slug":4845,"type":15},"Web Scraping","web-scraping","2026-07-20T06:24:11.928835",{"slug":4848,"name":4848,"fn":4849,"description":4850,"org":4851,"tags":4852,"stars":4805,"repoUrl":4806,"updatedAt":4863},"dogfood","perform exploratory testing on web applications","Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to \"dogfood\", \"QA\", \"exploratory test\", \"find issues\", \"bug hunt\", \"test this app\u002Fsite\u002Fplatform\", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4853,4854,4857,4860],{"name":4803,"slug":4804,"type":15},{"name":4855,"slug":4856,"type":15},"Debugging","debugging",{"name":4858,"slug":4859,"type":15},"QA","qa",{"name":4861,"slug":4862,"type":15},"Testing","testing","2026-07-17T06:07:41.421482",{"slug":4865,"name":4865,"fn":4866,"description":4867,"org":4868,"tags":4869,"stars":4805,"repoUrl":4806,"updatedAt":4875},"electron","automate Electron desktop applications","Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include \"automate Slack app\", \"control VS Code\", \"interact with Discord app\", \"test this Electron app\", \"connect to desktop app\", or any task requiring automation of a native Electron application.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4870,4871,4872],{"name":4797,"slug":4798,"type":15},{"name":4803,"slug":4804,"type":15},{"name":4873,"slug":4874,"type":15},"Desktop","desktop","2026-07-17T06:08:28.007783",{"slug":4877,"name":4877,"fn":4878,"description":4879,"org":4880,"tags":4881,"stars":4805,"repoUrl":4806,"updatedAt":4888},"slack","interact with Slack workspaces","Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include \"check my Slack\", \"what channels have unreads\", \"send a message to\", \"search Slack for\", \"extract from Slack\", \"find who said\", or any task requiring programmatic Slack interaction.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4882,4883,4886],{"name":4803,"slug":4804,"type":15},{"name":4884,"slug":4885,"type":15},"Messaging","messaging",{"name":4887,"slug":4877,"type":15},"Slack","2026-07-17T06:08:27.679015",{"slug":4890,"name":4890,"fn":4891,"description":4892,"org":4893,"tags":4894,"stars":4805,"repoUrl":4806,"updatedAt":4899},"vercel-sandbox","run browser automation in Vercel Sandbox","Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include \"Vercel Sandbox browser\", \"microVM Chrome\", \"agent-browser in sandbox\", \"browser automation on Vercel\", or any task requiring Chrome in a Vercel Sandbox.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4895,4896,4897,4898],{"name":4800,"slug":4801,"type":15},{"name":4803,"slug":4804,"type":15},{"name":4861,"slug":4862,"type":15},{"name":4708,"slug":36,"type":15},"2026-07-17T06:08:28.349899",{"slug":4699,"name":4699,"fn":4700,"description":4701,"org":4901,"tags":4902,"stars":22,"repoUrl":23,"updatedAt":4709},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4903,4904],{"name":4705,"slug":4706,"type":15},{"name":4708,"slug":36,"type":15},{"slug":4711,"name":4711,"fn":4712,"description":4713,"org":4906,"tags":4907,"stars":22,"repoUrl":23,"updatedAt":4721},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4908,4909,4910],{"name":4717,"slug":4718,"type":15},{"name":4705,"slug":4706,"type":15},{"name":4708,"slug":36,"type":15},{"slug":4723,"name":4723,"fn":4724,"description":4725,"org":4912,"tags":4913,"stars":22,"repoUrl":23,"updatedAt":4736},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4914,4915,4916,4917],{"name":4729,"slug":4730,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":4734,"slug":4735,"type":15},{"slug":4738,"name":4738,"fn":4739,"description":4740,"org":4919,"tags":4920,"stars":22,"repoUrl":23,"updatedAt":4751},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4921,4922,4923,4924],{"name":4744,"slug":4745,"type":15},{"name":4705,"slug":4706,"type":15},{"name":4748,"slug":4749,"type":15},{"name":4708,"slug":36,"type":15},100]