[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-vercel-labs-phase":3,"mdc-uw7boq-key":33,"related-repo-vercel-labs-phase":3223,"related-org-vercel-labs-phase":3231},{"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},"phase","optimize web animations and rendering performance","Use when building, reviewing, or optimizing web animations OR rendering performance (frame loops, scroll\u002Fviewport reveals, mount\u002Funmount transitions, canvas\u002FWebGL lifecycles, reduced-motion handling, lazy rendering, deferring off-screen or non-critical work) with the phase library. Also use when auditing existing animation or rendering code to decide between CSS-only, minimal JS, phase, or a heavier library like motion. Trigger on janky animations, per-frame allocations, forced reflows, re-renders from animation loops, animations that don't pause off-screen, missing reduced-motion support, content-visibility, lazy-mounting on viewport or idle, requestIdleCallback, deferring rendering of long pages, or questions like 'should I use CSS or JS for this animation' or 'how do I render this off-screen content faster'. Always use this skill when you mention phase or any phase export.",{"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},"Performance","performance","tag",{"name":17,"slug":18,"type":15},"Animation","animation",{"name":20,"slug":21,"type":15},"Frontend","frontend",5,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fphase","2026-07-17T06:06:17.551429","MIT",1,[],{"repoUrl":23,"stars":22,"forks":26,"topics":29,"description":30},[],"Lifecycle-aware UI performance layer for the web","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fphase\u002Ftree\u002FHEAD\u002Fskills\u002Fphase","---\nname: phase\ndescription: \"Use when building, reviewing, or optimizing web animations OR rendering performance (frame loops, scroll\u002Fviewport reveals, mount\u002Funmount transitions, canvas\u002FWebGL lifecycles, reduced-motion handling, lazy rendering, deferring off-screen or non-critical work) with the phase library. Also use when auditing existing animation or rendering code to decide between CSS-only, minimal JS, phase, or a heavier library like motion. Trigger on janky animations, per-frame allocations, forced reflows, re-renders from animation loops, animations that don't pause off-screen, missing reduced-motion support, content-visibility, lazy-mounting on viewport or idle, requestIdleCallback, deferring rendering of long pages, or questions like 'should I use CSS or JS for this animation' or 'how do I render this off-screen content faster'. Always use this skill when you mention phase or any phase export.\"\nlicense: MIT\nmetadata:\n  author: vercel\n  version: '0.0.9'\n  abstract: 'Lifecycle-aware animation and rendering skill. Implement phase primitives correctly, follow performant-animation and render-gating best practices, and audit existing code to recommend CSS-only, minimal JS, phase, or an external library.'\n---\n\n## Prerequisite: ensure phase is installed\n\nBefore recommending phase imports, check the **consumer project's** `package.json` for `\"phase\"` in `dependencies`. If it is missing, install `phase` as a production dependency in that project. Do not install it in the phase repo itself (where phase is the package being developed). Skip this check when the task is auditing or advising without code changes.\n\n# phase\n\nThis skill teaches you to implement phase primitives correctly, preserve performance guarantees, and audit animation code. Phase is the lifecycle-aware performance layer for the web: it composes visibility, reduced motion, and frame budget signals so animations pause when unseen, respect user preferences, and never force a reflow.\n\n## The animation ladder\n\nAlways prefer the cheapest tier that satisfies the requirement. Never recommend phase where CSS suffices; never recommend an external library where phase suffices.\n\n| Tier                 | When                                                                           | Tools                                                                                          |\n| -------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |\n| **CSS-only**         | Enter\u002Fexit, hover, state toggles, opacity and transform toggles                | `transition`, `@starting-style`, `animation`, View Transitions API                             |\n| **Minimal JS**       | One value into React render, no per-frame DOM writes                           | `useTween` (or CSS if render cost is trivial)                                                  |\n| **phase**            | Per-frame JS, visibility pausing, canvas, lifecycle-aware loops, render gating | `useLoop`, `useCanvas`, `useLifecycle`, `Presence`, `Swap`, `WhenVisible`, `WhenIdle`, `Defer` |\n| **External library** | Spring physics, gesture systems, declarative keyframe orchestration            | `motion`, GSAP, etc.                                                                           |\n\nFor the full decision tree, read [references\u002Fdecision-guide.md](references\u002Fdecision-guide.md). This ladder ranks _animation_ cost; rendering work runs on a parallel track.\n\n## When to render, not only when to animate\n\nphase is the _when_ layer (when to animate, render, and pause) from one set of signals. Three helpers skip increasing amounts of work for off-screen content:\n\n| Helper        | Defers                              | In DOM? | In SSR HTML? | Reach for it when                                  |\n| ------------- | ----------------------------------- | ------- | ------------ | -------------------------------------------------- |\n| `Defer`       | browser render (style\u002Flayout\u002Fpaint) | yes     | yes          | content must stay crawlable but need not paint yet |\n| `WhenIdle`    | React mount until idle              | no      | no           | non-critical UI that shouldn't block first paint   |\n| `WhenVisible` | React mount until near viewport     | no      | no           | viewport-gated lazy loading \u002F reveals              |\n\n`Defer` is the cheapest and safest (keeps content, skips paint) and never causes a hard layout shift; its children stay in the DOM at true size. `When*` save the most (no DOM until triggered) but **will shift layout \u002F cause CLS unless the `fallback` reserves the exact final content height**, so always size it (see [references\u002Frendering-recipes.md](references\u002Frendering-recipes.md)).\n\nTwo idle hooks defer work off the critical path: `useIdle` gates rendering with a boolean once the browser is idle, and `useWhenIdle` runs a side effect (prefetch, `import()`) once idle. `useRenderState(ref)` reads a `Defer` subtree's render-skip state to pause **raw, non-phase** work (a hand-written rAF loop, `setInterval`); phase's own loops already self-pause off-screen.\n\n## Choosing a primitive\n\nThe ladder picks a _tier_; this table picks the _primitive_ once phase is the right tier.\n\n| Need                                                 | Use                                                                                         |\n| ---------------------------------------------------- | ------------------------------------------------------------------------------------------- |\n| Know if it's on screen?                              | `useSight`                                                                                  |\n| Want phase to run your frame loop?                   | `useLoop` (DOM) \u002F `useCanvas` (canvas)                                                      |\n| You own the loop (WebGL, three.js, Web Worker)?      | `useLifecycle` (active\u002Fpaused signal)                                                       |\n| Animating one value into render?                     | `useTween`                                                                                  |\n| Mount\u002Funmount transitions?                           | `Presence` \u002F `Swap` \u002F `WhenVisible`                                                         |\n| Skip painting off-screen content (keep in DOM)?      | `Defer`                                                                                     |\n| Mount non-critical UI when idle?                     | `WhenIdle` \u002F `useIdle`                                                                      |\n| Run a side effect (prefetch, `import()`) when idle?  | `useWhenIdle`                                                                               |\n| Pause raw work inside a `Defer` subtree?             | `useRenderState`                                                                            |\n| React to DOM mutations without reflow?               | `useMutation`                                                                               |\n| Reactive scroll\u002Fsize\u002Fmedia values?                   | `useScrollProgress` \u002F `useSize` \u002F `useContainerQuery` \u002F `useMediaQuery`                     |\n| Scroll\u002Fsize\u002Fvisibility without re-renders?           | Same hooks with a callback (`onProgress` \u002F `onResize` \u002F `onVisibilityChange`), read via ref |\n| Reactive reduced-motion check for non-phase code?    | `usePrefersReducedMotion`                                                                   |\n| Need reactive `devicePixelRatio` for buffer sizing?  | `useDevicePixelRatio`                                                                       |\n| Visibility-aware timed sequences (do X, wait, do Y)? | `useLoop` with `fps: 1–2` and `frame.elapsed`-based steps                                   |\n\n## React first\n\nIn React components, prefer the React hooks (`useLoop`, `useCanvas`, `useLifecycle`, `useSight`, etc.) over the core API (`createLoop`, `createTicker`, `createLifecycle`, `createSight`). Hooks manage refs, teardown, and React lifecycle automatically. Using `createLoop` inside a `useEffect` when `useLoop` would work is a bug waiting to happen (manual cleanup, stale refs, no `enabled` prop).\n\nReach for core primitives in React when the hook doesn't fit, such as building a custom hook on top of `createLoop`, composing multiple primitives via a shared `AbortController`, or wiring up an imperative manager that owns its own lifecycle. In those cases you own the teardown. Call `stop()` or abort the signal in the effect cleanup.\n\n## Non-negotiable invariants\n\nTests enforce these guarantees for animation hot paths. Violating them in consumer code is always a bug. (Rendering helpers carry one rule of their own: reserve fallback height so `WhenVisible` \u002F `WhenIdle` don't shift layout, see [references\u002Frendering-recipes.md](references\u002Frendering-recipes.md).)\n\n1. **Zero per-frame allocations.** No objects, arrays, closures, template literals, or spreads in `onTick`\u002F`draw`.\n2. **Never `setState` inside `onTick`.** Write to refs or the DOM directly. Only phase changes trigger re-renders.\n3. **No forced reflows.** Never call `getBoundingClientRect()`, `offsetWidth`, `getComputedStyle()` in animation paths. Use `useSize` \u002F ResizeObserver.\n4. **Strong pause.** `cancelAnimationFrame()` stops scheduling entirely. Zero callbacks, zero CPU when paused.\n5. **Reduced motion by default.** All primitives respect `prefers-reduced-motion: reduce` automatically. Bypassing requires explicit `reducedMotion: 'ignore'`.\n6. **Frame-locked shared clock.** One `performance.now()` per rAF frame. Multiple animations stay in sync.\n\nFor the full performance ruleset, read [references\u002Fperformance.md](references\u002Fperformance.md).\n\n## Export taxonomy\n\nEvery export belongs to a category. The choosing table above picks the primitive; this table shows the organizational structure.\n\n| Category    | What it covers                               | Exports                                                                                                                                                                                                                                                                                             |\n| ----------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Timing      | Frame clocks and animation loops             | `createTicker`, `createLoop`, `useLoop`, `useCanvas`, `useTween`                                                                                                                                                                                                                                    |\n| Observation | Reactive wrappers around browser observers   | `createSight`, `createScrollProgress`, `createRenderState`, `createDevicePixelRatio`, `createMutation`, `useSight`, `useScrollProgress`, `useSize`, `useContainerQuery`, `useMediaQuery`, `useRenderState`, `useDevicePixelRatio`, `usePrefersReducedMotion`, `useMutation`, `prefersReducedMotion` |\n| Lifecycle   | Activation signals composed from IO+MQL+rIC  | `createLifecycle`, `useLifecycle`, `whenIdle`, `useIdle`, `useWhenIdle`                                                                                                                                                                                                                             |\n| Composition | Mount\u002Funmount orchestration with transitions | `Presence`, `usePresence`, `Swap`, `WhenVisible`, `WhenIdle`, `Defer`                                                                                                                                                                                                                               |\n| Math        | Pure easing and interpolation functions      | `clamp`, `clamp01`, `lerp`, `inverseLerp`, `remap`, `easeOutCubic`, `easeOutQuart`, `easeOutBack`, `easeInOutCubic`, `linear`                                                                                                                                                                       |\n| Utility     | React ref\u002Fcallback patterns for phase users  | `useSyncedRef`, `useStableCallback`                                                                                                                                                                                                                                                                 |\n\n## Audit\n\nWhen you review, optimize, or audit animation code, follow [references\u002Faudit.md](references\u002Faudit.md). It provides a repeatable procedure backed by a deterministic scanner (`scripts\u002Fscan.mjs`) that surfaces anti-pattern candidates before judgment.\n\n## API reference index\n\nEach export has its own reference file. Read the relevant file when implementing or advising on that export.\n\n### Core (`phase`)\n\n| Export                        | Use when                                             | Reference                                                               |\n| ----------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------- |\n| `createLoop`                  | Building a lifecycle-aware rAF animation loop        | [create-loop.md](references\u002Fcreate-loop.md)                             |\n| `createTicker`                | Need a raw frame clock without visibility management | [create-ticker.md](references\u002Fcreate-ticker.md)                         |\n| `createSight`                 | Observing element visibility (viewport + document)   | [create-sight.md](references\u002Fcreate-sight.md)                           |\n| `createLifecycle`             | Providing active\u002Fpaused signal to your own renderer  | [create-lifecycle.md](references\u002Fcreate-lifecycle.md)                   |\n| `createScrollProgress`        | Tracking intersection ratio (0–1) for reveals        | [create-scroll-progress.md](references\u002Fcreate-scroll-progress.md)       |\n| `createRenderState`           | Observing `content-visibility` render-skip state     | [create-render-state.md](references\u002Fcreate-render-state.md)             |\n| `createDevicePixelRatio`      | Tracking DPR changes in framework-free code          | [create-device-pixel-ratio.md](references\u002Fcreate-device-pixel-ratio.md) |\n| `whenIdle`                    | Running a one-off callback when the browser is idle  | [when-idle.md](references\u002Fwhen-idle.md)                                 |\n| `prefersReducedMotion`        | Gating expensive setup or conditional imports        | [prefers-reduced-motion.md](references\u002Fprefers-reduced-motion.md)       |\n| `createMutation`              | Lifecycle-aware MutationObserver with rAF batching   | [create-mutation.md](references\u002Fcreate-mutation.md)                     |\n| `PhaseError` \u002F `isPhaseError` | Handling or classifying phase errors                 | [errors.md](references\u002Ferrors.md)                                       |\n\n### React (`phase\u002Freact`)\n\n| Export                    | Use when                                                 | Reference                                                                 |\n| ------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------- |\n| `useLoop`                 | Animating DOM elements in a per-frame loop               | [use-loop.md](references\u002Fuse-loop.md)                                     |\n| `useCanvas`               | Canvas\u002FWebGL animation with DPR + resize handling        | [use-canvas.md](references\u002Fuse-canvas.md)                                 |\n| `useLifecycle`            | Gating a renderer you own (three.js, Pixi, WebGL)        | [use-lifecycle.md](references\u002Fuse-lifecycle.md)                           |\n| `useSight`                | Tracking visibility as a reactive phase                  | [use-sight.md](references\u002Fuse-sight.md)                                   |\n| `useTween`                | Animating a single number into React render output       | [use-tween.md](references\u002Fuse-tween.md)                                   |\n| `usePresence`             | Custom mount\u002Funmount transitions (full control)          | [use-presence.md](references\u002Fuse-presence.md)                             |\n| `useScrollProgress`       | Driving opacity\u002Freveals from intersection ratio          | [use-scroll-progress.md](references\u002Fuse-scroll-progress.md)               |\n| `useMutation`             | Lifecycle-aware MutationObserver with rAF batching       | [use-mutation.md](references\u002Fuse-mutation.md)                             |\n| `useRenderState`          | Pausing raw work when a `Defer` subtree is skipped       | [use-render-state.md](references\u002Fuse-render-state.md)                     |\n| `useIdle`                 | Boolean that flips true once the browser is idle         | [use-idle.md](references\u002Fuse-idle.md)                                     |\n| `useWhenIdle`             | Run a side effect (prefetch, `import()`) once idle       | [use-when-idle.md](references\u002Fuse-when-idle.md)                           |\n| `useSize`                 | Reading element dimensions without reflows               | [use-size.md](references\u002Fuse-size.md)                                     |\n| `useContainerQuery`       | Breakpoint matching against element width\u002Fheight         | [use-container-query.md](references\u002Fuse-container-query.md)               |\n| `useMediaQuery`           | Reactive CSS media query subscription                    | [use-media-query.md](references\u002Fuse-media-query.md)                       |\n| `usePrefersReducedMotion` | Reactive reduced-motion boolean for non-phase animations | [use-prefers-reduced-motion.md](references\u002Fuse-prefers-reduced-motion.md) |\n| `useDevicePixelRatio`     | Reactive DPR for buffer sizing outside `useCanvas`       | [use-device-pixel-ratio.md](references\u002Fuse-device-pixel-ratio.md)         |\n| `useSyncedRef`            | Keeping a ref always in sync with latest value           | [use-synced-ref.md](references\u002Fuse-synced-ref.md)                         |\n| `useStableCallback`       | Stable-identity function for memo'd children             | [use-stable-callback.md](references\u002Fuse-stable-callback.md)               |\n| `Presence`                | Show\u002Fhide with enter\u002Fexit transitions                    | [presence.md](references\u002Fpresence.md)                                     |\n| `WhenVisible`             | Viewport-gated lazy mount (one-shot)                     | [when-visible.md](references\u002Fwhen-visible.md)                             |\n| `WhenIdle`                | Idle-gated lazy mount for non-critical UI                | [when-idle.md](references\u002Fwhen-idle.md)                                   |\n| `Defer`                   | Skip painting off-screen content (keep in DOM)           | [defer.md](references\u002Fdefer.md)                                           |\n| `Swap`                    | Coordinated exit-then-enter between N states             | [swap.md](references\u002Fswap.md)                                             |\n\n### Ease (`phase\u002Fease`)\n\n| Export            | Use when                                               | Reference                     |\n| ----------------- | ------------------------------------------------------ | ----------------------------- |\n| All easing + math | Computing animated values (lerp, clamp, easing curves) | [ease.md](references\u002Fease.md) |\n\n### Search across references\n\nFor concepts that span multiple references, grep is faster than guessing which file to open.\n\n```bash\ngrep -ri \"reduced motion\" skills\u002Fphase\u002Freferences\u002F   # every export's motion behavior\ngrep -ri \"data-phase\" skills\u002Fphase\u002Freferences\u002F        # which components stamp phase attributes\ngrep -ri \"cleanup\\|unmount\\|stop()\" skills\u002Fphase\u002Freferences\u002F  # teardown behavior across hooks\ngrep -ri \"pooled\\|observer\" skills\u002Fphase\u002Freferences\u002F  # which exports use shared observer pools\ngrep -ri \"will-change\" skills\u002Fphase\u002Freferences\u002F       # GPU layer guidance across contexts\ngrep -ri \"FrameState\\|frame\\.delta\\|frame\\.elapsed\" skills\u002Fphase\u002Freferences\u002F  # frame timing across loop primitives\ngrep -ri \"starting:opacity\\|data-\\[phase=exiting\\]\" skills\u002Fphase\u002Freferences\u002F  # the canonical CSS transition pattern\n```\n\n## Cross-cutting references\n\n| Reference                                               | Use when                                                             |\n| ------------------------------------------------------- | -------------------------------------------------------------------- |\n| [decision-guide.md](references\u002Fdecision-guide.md)       | Choosing between CSS, phase, or an external library                  |\n| [rendering-recipes.md](references\u002Frendering-recipes.md) | Composing `Defer` \u002F `WhenIdle` \u002F `WhenVisible` \u002F `useRenderState`    |\n| [performance.md](references\u002Fperformance.md)             | Writing or reviewing hot-path animation code                         |\n| [audit.md](references\u002Faudit.md)                         | Auditing existing animations for optimization opportunities          |\n| [abort-signals.md](references\u002Fabort-signals.md)         | Tearing down core primitives with an `AbortSignal` (`signal` option) |\n| [timed-sequences.md](references\u002Ftimed-sequences.md)     | Building multi-step timed animation sequences with `useLoop`         |\n\n## Full compiled document\n\nFor all references expanded inline: `AGENTS.md`\n",{"data":34,"body":39},{"name":4,"description":6,"license":25,"metadata":35},{"author":36,"version":37,"abstract":38},"vercel","0.0.9","Lifecycle-aware animation and rendering skill. Implement phase primitives correctly, follow performant-animation and render-gating best practices, and audit existing code to recommend CSS-only, minimal JS, phase, or an external library.",{"type":40,"children":41},"root",[42,51,97,102,107,113,118,319,339,345,357,483,523,582,588,607,985,991,1080,1108,1114,1138,1292,1303,1309,1314,1708,1714,1734,1740,1745,1759,2077,2090,2704,2717,2763,2769,2774,3032,3038,3200,3206,3217],{"type":43,"tag":44,"props":45,"children":47},"element","h2",{"id":46},"prerequisite-ensure-phase-is-installed",[48],{"type":49,"value":50},"text","Prerequisite: ensure phase is installed",{"type":43,"tag":52,"props":53,"children":54},"p",{},[55,57,63,65,72,74,80,82,88,90,95],{"type":49,"value":56},"Before recommending phase imports, check the ",{"type":43,"tag":58,"props":59,"children":60},"strong",{},[61],{"type":49,"value":62},"consumer project's",{"type":49,"value":64}," ",{"type":43,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":49,"value":71},"package.json",{"type":49,"value":73}," for ",{"type":43,"tag":66,"props":75,"children":77},{"className":76},[],[78],{"type":49,"value":79},"\"phase\"",{"type":49,"value":81}," in ",{"type":43,"tag":66,"props":83,"children":85},{"className":84},[],[86],{"type":49,"value":87},"dependencies",{"type":49,"value":89},". If it is missing, install ",{"type":43,"tag":66,"props":91,"children":93},{"className":92},[],[94],{"type":49,"value":4},{"type":49,"value":96}," as a production dependency in that project. Do not install it in the phase repo itself (where phase is the package being developed). Skip this check when the task is auditing or advising without code changes.",{"type":43,"tag":98,"props":99,"children":100},"h1",{"id":4},[101],{"type":49,"value":4},{"type":43,"tag":52,"props":103,"children":104},{},[105],{"type":49,"value":106},"This skill teaches you to implement phase primitives correctly, preserve performance guarantees, and audit animation code. Phase is the lifecycle-aware performance layer for the web: it composes visibility, reduced motion, and frame budget signals so animations pause when unseen, respect user preferences, and never force a reflow.",{"type":43,"tag":44,"props":108,"children":110},{"id":109},"the-animation-ladder",[111],{"type":49,"value":112},"The animation ladder",{"type":43,"tag":52,"props":114,"children":115},{},[116],{"type":49,"value":117},"Always prefer the cheapest tier that satisfies the requirement. Never recommend phase where CSS suffices; never recommend an external library where phase suffices.",{"type":43,"tag":119,"props":120,"children":121},"table",{},[122,146],{"type":43,"tag":123,"props":124,"children":125},"thead",{},[126],{"type":43,"tag":127,"props":128,"children":129},"tr",{},[130,136,141],{"type":43,"tag":131,"props":132,"children":133},"th",{},[134],{"type":49,"value":135},"Tier",{"type":43,"tag":131,"props":137,"children":138},{},[139],{"type":49,"value":140},"When",{"type":43,"tag":131,"props":142,"children":143},{},[144],{"type":49,"value":145},"Tools",{"type":43,"tag":147,"props":148,"children":149},"tbody",{},[150,192,219,292],{"type":43,"tag":127,"props":151,"children":152},{},[153,162,167],{"type":43,"tag":154,"props":155,"children":156},"td",{},[157],{"type":43,"tag":58,"props":158,"children":159},{},[160],{"type":49,"value":161},"CSS-only",{"type":43,"tag":154,"props":163,"children":164},{},[165],{"type":49,"value":166},"Enter\u002Fexit, hover, state toggles, opacity and transform toggles",{"type":43,"tag":154,"props":168,"children":169},{},[170,176,178,184,185,190],{"type":43,"tag":66,"props":171,"children":173},{"className":172},[],[174],{"type":49,"value":175},"transition",{"type":49,"value":177},", ",{"type":43,"tag":66,"props":179,"children":181},{"className":180},[],[182],{"type":49,"value":183},"@starting-style",{"type":49,"value":177},{"type":43,"tag":66,"props":186,"children":188},{"className":187},[],[189],{"type":49,"value":18},{"type":49,"value":191},", View Transitions API",{"type":43,"tag":127,"props":193,"children":194},{},[195,203,208],{"type":43,"tag":154,"props":196,"children":197},{},[198],{"type":43,"tag":58,"props":199,"children":200},{},[201],{"type":49,"value":202},"Minimal JS",{"type":43,"tag":154,"props":204,"children":205},{},[206],{"type":49,"value":207},"One value into React render, no per-frame DOM writes",{"type":43,"tag":154,"props":209,"children":210},{},[211,217],{"type":43,"tag":66,"props":212,"children":214},{"className":213},[],[215],{"type":49,"value":216},"useTween",{"type":49,"value":218}," (or CSS if render cost is trivial)",{"type":43,"tag":127,"props":220,"children":221},{},[222,229,234],{"type":43,"tag":154,"props":223,"children":224},{},[225],{"type":43,"tag":58,"props":226,"children":227},{},[228],{"type":49,"value":4},{"type":43,"tag":154,"props":230,"children":231},{},[232],{"type":49,"value":233},"Per-frame JS, visibility pausing, canvas, lifecycle-aware loops, render gating",{"type":43,"tag":154,"props":235,"children":236},{},[237,243,244,250,251,257,258,264,265,271,272,278,279,285,286],{"type":43,"tag":66,"props":238,"children":240},{"className":239},[],[241],{"type":49,"value":242},"useLoop",{"type":49,"value":177},{"type":43,"tag":66,"props":245,"children":247},{"className":246},[],[248],{"type":49,"value":249},"useCanvas",{"type":49,"value":177},{"type":43,"tag":66,"props":252,"children":254},{"className":253},[],[255],{"type":49,"value":256},"useLifecycle",{"type":49,"value":177},{"type":43,"tag":66,"props":259,"children":261},{"className":260},[],[262],{"type":49,"value":263},"Presence",{"type":49,"value":177},{"type":43,"tag":66,"props":266,"children":268},{"className":267},[],[269],{"type":49,"value":270},"Swap",{"type":49,"value":177},{"type":43,"tag":66,"props":273,"children":275},{"className":274},[],[276],{"type":49,"value":277},"WhenVisible",{"type":49,"value":177},{"type":43,"tag":66,"props":280,"children":282},{"className":281},[],[283],{"type":49,"value":284},"WhenIdle",{"type":49,"value":177},{"type":43,"tag":66,"props":287,"children":289},{"className":288},[],[290],{"type":49,"value":291},"Defer",{"type":43,"tag":127,"props":293,"children":294},{},[295,303,308],{"type":43,"tag":154,"props":296,"children":297},{},[298],{"type":43,"tag":58,"props":299,"children":300},{},[301],{"type":49,"value":302},"External library",{"type":43,"tag":154,"props":304,"children":305},{},[306],{"type":49,"value":307},"Spring physics, gesture systems, declarative keyframe orchestration",{"type":43,"tag":154,"props":309,"children":310},{},[311,317],{"type":43,"tag":66,"props":312,"children":314},{"className":313},[],[315],{"type":49,"value":316},"motion",{"type":49,"value":318},", GSAP, etc.",{"type":43,"tag":52,"props":320,"children":321},{},[322,324,330,332,337],{"type":49,"value":323},"For the full decision tree, read ",{"type":43,"tag":325,"props":326,"children":328},"a",{"href":327},"references\u002Fdecision-guide.md",[329],{"type":49,"value":327},{"type":49,"value":331},". This ladder ranks ",{"type":43,"tag":333,"props":334,"children":335},"em",{},[336],{"type":49,"value":18},{"type":49,"value":338}," cost; rendering work runs on a parallel track.",{"type":43,"tag":44,"props":340,"children":342},{"id":341},"when-to-render-not-only-when-to-animate",[343],{"type":49,"value":344},"When to render, not only when to animate",{"type":43,"tag":52,"props":346,"children":347},{},[348,350,355],{"type":49,"value":349},"phase is the ",{"type":43,"tag":333,"props":351,"children":352},{},[353],{"type":49,"value":354},"when",{"type":49,"value":356}," layer (when to animate, render, and pause) from one set of signals. Three helpers skip increasing amounts of work for off-screen content:",{"type":43,"tag":119,"props":358,"children":359},{},[360,391],{"type":43,"tag":123,"props":361,"children":362},{},[363],{"type":43,"tag":127,"props":364,"children":365},{},[366,371,376,381,386],{"type":43,"tag":131,"props":367,"children":368},{},[369],{"type":49,"value":370},"Helper",{"type":43,"tag":131,"props":372,"children":373},{},[374],{"type":49,"value":375},"Defers",{"type":43,"tag":131,"props":377,"children":378},{},[379],{"type":49,"value":380},"In DOM?",{"type":43,"tag":131,"props":382,"children":383},{},[384],{"type":49,"value":385},"In SSR HTML?",{"type":43,"tag":131,"props":387,"children":388},{},[389],{"type":49,"value":390},"Reach for it when",{"type":43,"tag":147,"props":392,"children":393},{},[394,424,454],{"type":43,"tag":127,"props":395,"children":396},{},[397,405,410,415,419],{"type":43,"tag":154,"props":398,"children":399},{},[400],{"type":43,"tag":66,"props":401,"children":403},{"className":402},[],[404],{"type":49,"value":291},{"type":43,"tag":154,"props":406,"children":407},{},[408],{"type":49,"value":409},"browser render (style\u002Flayout\u002Fpaint)",{"type":43,"tag":154,"props":411,"children":412},{},[413],{"type":49,"value":414},"yes",{"type":43,"tag":154,"props":416,"children":417},{},[418],{"type":49,"value":414},{"type":43,"tag":154,"props":420,"children":421},{},[422],{"type":49,"value":423},"content must stay crawlable but need not paint yet",{"type":43,"tag":127,"props":425,"children":426},{},[427,435,440,445,449],{"type":43,"tag":154,"props":428,"children":429},{},[430],{"type":43,"tag":66,"props":431,"children":433},{"className":432},[],[434],{"type":49,"value":284},{"type":43,"tag":154,"props":436,"children":437},{},[438],{"type":49,"value":439},"React mount until idle",{"type":43,"tag":154,"props":441,"children":442},{},[443],{"type":49,"value":444},"no",{"type":43,"tag":154,"props":446,"children":447},{},[448],{"type":49,"value":444},{"type":43,"tag":154,"props":450,"children":451},{},[452],{"type":49,"value":453},"non-critical UI that shouldn't block first paint",{"type":43,"tag":127,"props":455,"children":456},{},[457,465,470,474,478],{"type":43,"tag":154,"props":458,"children":459},{},[460],{"type":43,"tag":66,"props":461,"children":463},{"className":462},[],[464],{"type":49,"value":277},{"type":43,"tag":154,"props":466,"children":467},{},[468],{"type":49,"value":469},"React mount until near viewport",{"type":43,"tag":154,"props":471,"children":472},{},[473],{"type":49,"value":444},{"type":43,"tag":154,"props":475,"children":476},{},[477],{"type":49,"value":444},{"type":43,"tag":154,"props":479,"children":480},{},[481],{"type":49,"value":482},"viewport-gated lazy loading \u002F reveals",{"type":43,"tag":52,"props":484,"children":485},{},[486,491,493,499,501,514,516,521],{"type":43,"tag":66,"props":487,"children":489},{"className":488},[],[490],{"type":49,"value":291},{"type":49,"value":492}," is the cheapest and safest (keeps content, skips paint) and never causes a hard layout shift; its children stay in the DOM at true size. ",{"type":43,"tag":66,"props":494,"children":496},{"className":495},[],[497],{"type":49,"value":498},"When*",{"type":49,"value":500}," save the most (no DOM until triggered) but ",{"type":43,"tag":58,"props":502,"children":503},{},[504,506,512],{"type":49,"value":505},"will shift layout \u002F cause CLS unless the ",{"type":43,"tag":66,"props":507,"children":509},{"className":508},[],[510],{"type":49,"value":511},"fallback",{"type":49,"value":513}," reserves the exact final content height",{"type":49,"value":515},", so always size it (see ",{"type":43,"tag":325,"props":517,"children":519},{"href":518},"references\u002Frendering-recipes.md",[520],{"type":49,"value":518},{"type":49,"value":522},").",{"type":43,"tag":52,"props":524,"children":525},{},[526,528,534,536,542,544,550,552,558,560,565,567,572,574,580],{"type":49,"value":527},"Two idle hooks defer work off the critical path: ",{"type":43,"tag":66,"props":529,"children":531},{"className":530},[],[532],{"type":49,"value":533},"useIdle",{"type":49,"value":535}," gates rendering with a boolean once the browser is idle, and ",{"type":43,"tag":66,"props":537,"children":539},{"className":538},[],[540],{"type":49,"value":541},"useWhenIdle",{"type":49,"value":543}," runs a side effect (prefetch, ",{"type":43,"tag":66,"props":545,"children":547},{"className":546},[],[548],{"type":49,"value":549},"import()",{"type":49,"value":551},") once idle. ",{"type":43,"tag":66,"props":553,"children":555},{"className":554},[],[556],{"type":49,"value":557},"useRenderState(ref)",{"type":49,"value":559}," reads a ",{"type":43,"tag":66,"props":561,"children":563},{"className":562},[],[564],{"type":49,"value":291},{"type":49,"value":566}," subtree's render-skip state to pause ",{"type":43,"tag":58,"props":568,"children":569},{},[570],{"type":49,"value":571},"raw, non-phase",{"type":49,"value":573}," work (a hand-written rAF loop, ",{"type":43,"tag":66,"props":575,"children":577},{"className":576},[],[578],{"type":49,"value":579},"setInterval",{"type":49,"value":581},"); phase's own loops already self-pause off-screen.",{"type":43,"tag":44,"props":583,"children":585},{"id":584},"choosing-a-primitive",[586],{"type":49,"value":587},"Choosing a primitive",{"type":43,"tag":52,"props":589,"children":590},{},[591,593,598,600,605],{"type":49,"value":592},"The ladder picks a ",{"type":43,"tag":333,"props":594,"children":595},{},[596],{"type":49,"value":597},"tier",{"type":49,"value":599},"; this table picks the ",{"type":43,"tag":333,"props":601,"children":602},{},[603],{"type":49,"value":604},"primitive",{"type":49,"value":606}," once phase is the right tier.",{"type":43,"tag":119,"props":608,"children":609},{},[610,626],{"type":43,"tag":123,"props":611,"children":612},{},[613],{"type":43,"tag":127,"props":614,"children":615},{},[616,621],{"type":43,"tag":131,"props":617,"children":618},{},[619],{"type":49,"value":620},"Need",{"type":43,"tag":131,"props":622,"children":623},{},[624],{"type":49,"value":625},"Use",{"type":43,"tag":147,"props":627,"children":628},{},[629,646,671,689,705,734,750,772,795,819,836,874,909,926,951],{"type":43,"tag":127,"props":630,"children":631},{},[632,637],{"type":43,"tag":154,"props":633,"children":634},{},[635],{"type":49,"value":636},"Know if it's on screen?",{"type":43,"tag":154,"props":638,"children":639},{},[640],{"type":43,"tag":66,"props":641,"children":643},{"className":642},[],[644],{"type":49,"value":645},"useSight",{"type":43,"tag":127,"props":647,"children":648},{},[649,654],{"type":43,"tag":154,"props":650,"children":651},{},[652],{"type":49,"value":653},"Want phase to run your frame loop?",{"type":43,"tag":154,"props":655,"children":656},{},[657,662,664,669],{"type":43,"tag":66,"props":658,"children":660},{"className":659},[],[661],{"type":49,"value":242},{"type":49,"value":663}," (DOM) \u002F ",{"type":43,"tag":66,"props":665,"children":667},{"className":666},[],[668],{"type":49,"value":249},{"type":49,"value":670}," (canvas)",{"type":43,"tag":127,"props":672,"children":673},{},[674,679],{"type":43,"tag":154,"props":675,"children":676},{},[677],{"type":49,"value":678},"You own the loop (WebGL, three.js, Web Worker)?",{"type":43,"tag":154,"props":680,"children":681},{},[682,687],{"type":43,"tag":66,"props":683,"children":685},{"className":684},[],[686],{"type":49,"value":256},{"type":49,"value":688}," (active\u002Fpaused signal)",{"type":43,"tag":127,"props":690,"children":691},{},[692,697],{"type":43,"tag":154,"props":693,"children":694},{},[695],{"type":49,"value":696},"Animating one value into render?",{"type":43,"tag":154,"props":698,"children":699},{},[700],{"type":43,"tag":66,"props":701,"children":703},{"className":702},[],[704],{"type":49,"value":216},{"type":43,"tag":127,"props":706,"children":707},{},[708,713],{"type":43,"tag":154,"props":709,"children":710},{},[711],{"type":49,"value":712},"Mount\u002Funmount transitions?",{"type":43,"tag":154,"props":714,"children":715},{},[716,721,723,728,729],{"type":43,"tag":66,"props":717,"children":719},{"className":718},[],[720],{"type":49,"value":263},{"type":49,"value":722}," \u002F ",{"type":43,"tag":66,"props":724,"children":726},{"className":725},[],[727],{"type":49,"value":270},{"type":49,"value":722},{"type":43,"tag":66,"props":730,"children":732},{"className":731},[],[733],{"type":49,"value":277},{"type":43,"tag":127,"props":735,"children":736},{},[737,742],{"type":43,"tag":154,"props":738,"children":739},{},[740],{"type":49,"value":741},"Skip painting off-screen content (keep in DOM)?",{"type":43,"tag":154,"props":743,"children":744},{},[745],{"type":43,"tag":66,"props":746,"children":748},{"className":747},[],[749],{"type":49,"value":291},{"type":43,"tag":127,"props":751,"children":752},{},[753,758],{"type":43,"tag":154,"props":754,"children":755},{},[756],{"type":49,"value":757},"Mount non-critical UI when idle?",{"type":43,"tag":154,"props":759,"children":760},{},[761,766,767],{"type":43,"tag":66,"props":762,"children":764},{"className":763},[],[765],{"type":49,"value":284},{"type":49,"value":722},{"type":43,"tag":66,"props":768,"children":770},{"className":769},[],[771],{"type":49,"value":533},{"type":43,"tag":127,"props":773,"children":774},{},[775,787],{"type":43,"tag":154,"props":776,"children":777},{},[778,780,785],{"type":49,"value":779},"Run a side effect (prefetch, ",{"type":43,"tag":66,"props":781,"children":783},{"className":782},[],[784],{"type":49,"value":549},{"type":49,"value":786},") when idle?",{"type":43,"tag":154,"props":788,"children":789},{},[790],{"type":43,"tag":66,"props":791,"children":793},{"className":792},[],[794],{"type":49,"value":541},{"type":43,"tag":127,"props":796,"children":797},{},[798,810],{"type":43,"tag":154,"props":799,"children":800},{},[801,803,808],{"type":49,"value":802},"Pause raw work inside a ",{"type":43,"tag":66,"props":804,"children":806},{"className":805},[],[807],{"type":49,"value":291},{"type":49,"value":809}," subtree?",{"type":43,"tag":154,"props":811,"children":812},{},[813],{"type":43,"tag":66,"props":814,"children":816},{"className":815},[],[817],{"type":49,"value":818},"useRenderState",{"type":43,"tag":127,"props":820,"children":821},{},[822,827],{"type":43,"tag":154,"props":823,"children":824},{},[825],{"type":49,"value":826},"React to DOM mutations without reflow?",{"type":43,"tag":154,"props":828,"children":829},{},[830],{"type":43,"tag":66,"props":831,"children":833},{"className":832},[],[834],{"type":49,"value":835},"useMutation",{"type":43,"tag":127,"props":837,"children":838},{},[839,844],{"type":43,"tag":154,"props":840,"children":841},{},[842],{"type":49,"value":843},"Reactive scroll\u002Fsize\u002Fmedia values?",{"type":43,"tag":154,"props":845,"children":846},{},[847,853,854,860,861,867,868],{"type":43,"tag":66,"props":848,"children":850},{"className":849},[],[851],{"type":49,"value":852},"useScrollProgress",{"type":49,"value":722},{"type":43,"tag":66,"props":855,"children":857},{"className":856},[],[858],{"type":49,"value":859},"useSize",{"type":49,"value":722},{"type":43,"tag":66,"props":862,"children":864},{"className":863},[],[865],{"type":49,"value":866},"useContainerQuery",{"type":49,"value":722},{"type":43,"tag":66,"props":869,"children":871},{"className":870},[],[872],{"type":49,"value":873},"useMediaQuery",{"type":43,"tag":127,"props":875,"children":876},{},[877,882],{"type":43,"tag":154,"props":878,"children":879},{},[880],{"type":49,"value":881},"Scroll\u002Fsize\u002Fvisibility without re-renders?",{"type":43,"tag":154,"props":883,"children":884},{},[885,887,893,894,900,901,907],{"type":49,"value":886},"Same hooks with a callback (",{"type":43,"tag":66,"props":888,"children":890},{"className":889},[],[891],{"type":49,"value":892},"onProgress",{"type":49,"value":722},{"type":43,"tag":66,"props":895,"children":897},{"className":896},[],[898],{"type":49,"value":899},"onResize",{"type":49,"value":722},{"type":43,"tag":66,"props":902,"children":904},{"className":903},[],[905],{"type":49,"value":906},"onVisibilityChange",{"type":49,"value":908},"), read via ref",{"type":43,"tag":127,"props":910,"children":911},{},[912,917],{"type":43,"tag":154,"props":913,"children":914},{},[915],{"type":49,"value":916},"Reactive reduced-motion check for non-phase code?",{"type":43,"tag":154,"props":918,"children":919},{},[920],{"type":43,"tag":66,"props":921,"children":923},{"className":922},[],[924],{"type":49,"value":925},"usePrefersReducedMotion",{"type":43,"tag":127,"props":927,"children":928},{},[929,942],{"type":43,"tag":154,"props":930,"children":931},{},[932,934,940],{"type":49,"value":933},"Need reactive ",{"type":43,"tag":66,"props":935,"children":937},{"className":936},[],[938],{"type":49,"value":939},"devicePixelRatio",{"type":49,"value":941}," for buffer sizing?",{"type":43,"tag":154,"props":943,"children":944},{},[945],{"type":43,"tag":66,"props":946,"children":948},{"className":947},[],[949],{"type":49,"value":950},"useDevicePixelRatio",{"type":43,"tag":127,"props":952,"children":953},{},[954,959],{"type":43,"tag":154,"props":955,"children":956},{},[957],{"type":49,"value":958},"Visibility-aware timed sequences (do X, wait, do Y)?",{"type":43,"tag":154,"props":960,"children":961},{},[962,967,969,975,977,983],{"type":43,"tag":66,"props":963,"children":965},{"className":964},[],[966],{"type":49,"value":242},{"type":49,"value":968}," with ",{"type":43,"tag":66,"props":970,"children":972},{"className":971},[],[973],{"type":49,"value":974},"fps: 1–2",{"type":49,"value":976}," and ",{"type":43,"tag":66,"props":978,"children":980},{"className":979},[],[981],{"type":49,"value":982},"frame.elapsed",{"type":49,"value":984},"-based steps",{"type":43,"tag":44,"props":986,"children":988},{"id":987},"react-first",[989],{"type":49,"value":990},"React first",{"type":43,"tag":52,"props":992,"children":993},{},[994,996,1001,1002,1007,1008,1013,1014,1019,1021,1027,1028,1034,1035,1041,1042,1048,1050,1055,1057,1063,1065,1070,1072,1078],{"type":49,"value":995},"In React components, prefer the React hooks (",{"type":43,"tag":66,"props":997,"children":999},{"className":998},[],[1000],{"type":49,"value":242},{"type":49,"value":177},{"type":43,"tag":66,"props":1003,"children":1005},{"className":1004},[],[1006],{"type":49,"value":249},{"type":49,"value":177},{"type":43,"tag":66,"props":1009,"children":1011},{"className":1010},[],[1012],{"type":49,"value":256},{"type":49,"value":177},{"type":43,"tag":66,"props":1015,"children":1017},{"className":1016},[],[1018],{"type":49,"value":645},{"type":49,"value":1020},", etc.) over the core API (",{"type":43,"tag":66,"props":1022,"children":1024},{"className":1023},[],[1025],{"type":49,"value":1026},"createLoop",{"type":49,"value":177},{"type":43,"tag":66,"props":1029,"children":1031},{"className":1030},[],[1032],{"type":49,"value":1033},"createTicker",{"type":49,"value":177},{"type":43,"tag":66,"props":1036,"children":1038},{"className":1037},[],[1039],{"type":49,"value":1040},"createLifecycle",{"type":49,"value":177},{"type":43,"tag":66,"props":1043,"children":1045},{"className":1044},[],[1046],{"type":49,"value":1047},"createSight",{"type":49,"value":1049},"). Hooks manage refs, teardown, and React lifecycle automatically. Using ",{"type":43,"tag":66,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":49,"value":1026},{"type":49,"value":1056}," inside a ",{"type":43,"tag":66,"props":1058,"children":1060},{"className":1059},[],[1061],{"type":49,"value":1062},"useEffect",{"type":49,"value":1064}," when ",{"type":43,"tag":66,"props":1066,"children":1068},{"className":1067},[],[1069],{"type":49,"value":242},{"type":49,"value":1071}," would work is a bug waiting to happen (manual cleanup, stale refs, no ",{"type":43,"tag":66,"props":1073,"children":1075},{"className":1074},[],[1076],{"type":49,"value":1077},"enabled",{"type":49,"value":1079}," prop).",{"type":43,"tag":52,"props":1081,"children":1082},{},[1083,1085,1090,1092,1098,1100,1106],{"type":49,"value":1084},"Reach for core primitives in React when the hook doesn't fit, such as building a custom hook on top of ",{"type":43,"tag":66,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":49,"value":1026},{"type":49,"value":1091},", composing multiple primitives via a shared ",{"type":43,"tag":66,"props":1093,"children":1095},{"className":1094},[],[1096],{"type":49,"value":1097},"AbortController",{"type":49,"value":1099},", or wiring up an imperative manager that owns its own lifecycle. In those cases you own the teardown. Call ",{"type":43,"tag":66,"props":1101,"children":1103},{"className":1102},[],[1104],{"type":49,"value":1105},"stop()",{"type":49,"value":1107}," or abort the signal in the effect cleanup.",{"type":43,"tag":44,"props":1109,"children":1111},{"id":1110},"non-negotiable-invariants",[1112],{"type":49,"value":1113},"Non-negotiable invariants",{"type":43,"tag":52,"props":1115,"children":1116},{},[1117,1119,1124,1125,1130,1132,1136],{"type":49,"value":1118},"Tests enforce these guarantees for animation hot paths. Violating them in consumer code is always a bug. (Rendering helpers carry one rule of their own: reserve fallback height so ",{"type":43,"tag":66,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":49,"value":277},{"type":49,"value":722},{"type":43,"tag":66,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":49,"value":284},{"type":49,"value":1131}," don't shift layout, see ",{"type":43,"tag":325,"props":1133,"children":1134},{"href":518},[1135],{"type":49,"value":518},{"type":49,"value":1137},".)",{"type":43,"tag":1139,"props":1140,"children":1141},"ol",{},[1142,1169,1193,1232,1249,1274],{"type":43,"tag":1143,"props":1144,"children":1145},"li",{},[1146,1151,1153,1159,1161,1167],{"type":43,"tag":58,"props":1147,"children":1148},{},[1149],{"type":49,"value":1150},"Zero per-frame allocations.",{"type":49,"value":1152}," No objects, arrays, closures, template literals, or spreads in ",{"type":43,"tag":66,"props":1154,"children":1156},{"className":1155},[],[1157],{"type":49,"value":1158},"onTick",{"type":49,"value":1160},"\u002F",{"type":43,"tag":66,"props":1162,"children":1164},{"className":1163},[],[1165],{"type":49,"value":1166},"draw",{"type":49,"value":1168},".",{"type":43,"tag":1143,"props":1170,"children":1171},{},[1172,1191],{"type":43,"tag":58,"props":1173,"children":1174},{},[1175,1177,1183,1185,1190],{"type":49,"value":1176},"Never ",{"type":43,"tag":66,"props":1178,"children":1180},{"className":1179},[],[1181],{"type":49,"value":1182},"setState",{"type":49,"value":1184}," inside ",{"type":43,"tag":66,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":49,"value":1158},{"type":49,"value":1168},{"type":49,"value":1192}," Write to refs or the DOM directly. Only phase changes trigger re-renders.",{"type":43,"tag":1143,"props":1194,"children":1195},{},[1196,1201,1203,1209,1210,1216,1217,1223,1225,1230],{"type":43,"tag":58,"props":1197,"children":1198},{},[1199],{"type":49,"value":1200},"No forced reflows.",{"type":49,"value":1202}," Never call ",{"type":43,"tag":66,"props":1204,"children":1206},{"className":1205},[],[1207],{"type":49,"value":1208},"getBoundingClientRect()",{"type":49,"value":177},{"type":43,"tag":66,"props":1211,"children":1213},{"className":1212},[],[1214],{"type":49,"value":1215},"offsetWidth",{"type":49,"value":177},{"type":43,"tag":66,"props":1218,"children":1220},{"className":1219},[],[1221],{"type":49,"value":1222},"getComputedStyle()",{"type":49,"value":1224}," in animation paths. Use ",{"type":43,"tag":66,"props":1226,"children":1228},{"className":1227},[],[1229],{"type":49,"value":859},{"type":49,"value":1231}," \u002F ResizeObserver.",{"type":43,"tag":1143,"props":1233,"children":1234},{},[1235,1240,1241,1247],{"type":43,"tag":58,"props":1236,"children":1237},{},[1238],{"type":49,"value":1239},"Strong pause.",{"type":49,"value":64},{"type":43,"tag":66,"props":1242,"children":1244},{"className":1243},[],[1245],{"type":49,"value":1246},"cancelAnimationFrame()",{"type":49,"value":1248}," stops scheduling entirely. Zero callbacks, zero CPU when paused.",{"type":43,"tag":1143,"props":1250,"children":1251},{},[1252,1257,1259,1265,1267,1273],{"type":43,"tag":58,"props":1253,"children":1254},{},[1255],{"type":49,"value":1256},"Reduced motion by default.",{"type":49,"value":1258}," All primitives respect ",{"type":43,"tag":66,"props":1260,"children":1262},{"className":1261},[],[1263],{"type":49,"value":1264},"prefers-reduced-motion: reduce",{"type":49,"value":1266}," automatically. Bypassing requires explicit ",{"type":43,"tag":66,"props":1268,"children":1270},{"className":1269},[],[1271],{"type":49,"value":1272},"reducedMotion: 'ignore'",{"type":49,"value":1168},{"type":43,"tag":1143,"props":1275,"children":1276},{},[1277,1282,1284,1290],{"type":43,"tag":58,"props":1278,"children":1279},{},[1280],{"type":49,"value":1281},"Frame-locked shared clock.",{"type":49,"value":1283}," One ",{"type":43,"tag":66,"props":1285,"children":1287},{"className":1286},[],[1288],{"type":49,"value":1289},"performance.now()",{"type":49,"value":1291}," per rAF frame. Multiple animations stay in sync.",{"type":43,"tag":52,"props":1293,"children":1294},{},[1295,1297,1302],{"type":49,"value":1296},"For the full performance ruleset, read ",{"type":43,"tag":325,"props":1298,"children":1300},{"href":1299},"references\u002Fperformance.md",[1301],{"type":49,"value":1299},{"type":49,"value":1168},{"type":43,"tag":44,"props":1304,"children":1306},{"id":1305},"export-taxonomy",[1307],{"type":49,"value":1308},"Export taxonomy",{"type":43,"tag":52,"props":1310,"children":1311},{},[1312],{"type":49,"value":1313},"Every export belongs to a category. The choosing table above picks the primitive; this table shows the organizational structure.",{"type":43,"tag":119,"props":1315,"children":1316},{},[1317,1338],{"type":43,"tag":123,"props":1318,"children":1319},{},[1320],{"type":43,"tag":127,"props":1321,"children":1322},{},[1323,1328,1333],{"type":43,"tag":131,"props":1324,"children":1325},{},[1326],{"type":49,"value":1327},"Category",{"type":43,"tag":131,"props":1329,"children":1330},{},[1331],{"type":49,"value":1332},"What it covers",{"type":43,"tag":131,"props":1334,"children":1335},{},[1336],{"type":49,"value":1337},"Exports",{"type":43,"tag":147,"props":1339,"children":1340},{},[1341,1386,1496,1542,1594,1679],{"type":43,"tag":127,"props":1342,"children":1343},{},[1344,1349,1354],{"type":43,"tag":154,"props":1345,"children":1346},{},[1347],{"type":49,"value":1348},"Timing",{"type":43,"tag":154,"props":1350,"children":1351},{},[1352],{"type":49,"value":1353},"Frame clocks and animation loops",{"type":43,"tag":154,"props":1355,"children":1356},{},[1357,1362,1363,1368,1369,1374,1375,1380,1381],{"type":43,"tag":66,"props":1358,"children":1360},{"className":1359},[],[1361],{"type":49,"value":1033},{"type":49,"value":177},{"type":43,"tag":66,"props":1364,"children":1366},{"className":1365},[],[1367],{"type":49,"value":1026},{"type":49,"value":177},{"type":43,"tag":66,"props":1370,"children":1372},{"className":1371},[],[1373],{"type":49,"value":242},{"type":49,"value":177},{"type":43,"tag":66,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":49,"value":249},{"type":49,"value":177},{"type":43,"tag":66,"props":1382,"children":1384},{"className":1383},[],[1385],{"type":49,"value":216},{"type":43,"tag":127,"props":1387,"children":1388},{},[1389,1394,1399],{"type":43,"tag":154,"props":1390,"children":1391},{},[1392],{"type":49,"value":1393},"Observation",{"type":43,"tag":154,"props":1395,"children":1396},{},[1397],{"type":49,"value":1398},"Reactive wrappers around browser observers",{"type":43,"tag":154,"props":1400,"children":1401},{},[1402,1407,1408,1414,1415,1421,1422,1428,1429,1435,1436,1441,1442,1447,1448,1453,1454,1459,1460,1465,1466,1471,1472,1477,1478,1483,1484,1489,1490],{"type":43,"tag":66,"props":1403,"children":1405},{"className":1404},[],[1406],{"type":49,"value":1047},{"type":49,"value":177},{"type":43,"tag":66,"props":1409,"children":1411},{"className":1410},[],[1412],{"type":49,"value":1413},"createScrollProgress",{"type":49,"value":177},{"type":43,"tag":66,"props":1416,"children":1418},{"className":1417},[],[1419],{"type":49,"value":1420},"createRenderState",{"type":49,"value":177},{"type":43,"tag":66,"props":1423,"children":1425},{"className":1424},[],[1426],{"type":49,"value":1427},"createDevicePixelRatio",{"type":49,"value":177},{"type":43,"tag":66,"props":1430,"children":1432},{"className":1431},[],[1433],{"type":49,"value":1434},"createMutation",{"type":49,"value":177},{"type":43,"tag":66,"props":1437,"children":1439},{"className":1438},[],[1440],{"type":49,"value":645},{"type":49,"value":177},{"type":43,"tag":66,"props":1443,"children":1445},{"className":1444},[],[1446],{"type":49,"value":852},{"type":49,"value":177},{"type":43,"tag":66,"props":1449,"children":1451},{"className":1450},[],[1452],{"type":49,"value":859},{"type":49,"value":177},{"type":43,"tag":66,"props":1455,"children":1457},{"className":1456},[],[1458],{"type":49,"value":866},{"type":49,"value":177},{"type":43,"tag":66,"props":1461,"children":1463},{"className":1462},[],[1464],{"type":49,"value":873},{"type":49,"value":177},{"type":43,"tag":66,"props":1467,"children":1469},{"className":1468},[],[1470],{"type":49,"value":818},{"type":49,"value":177},{"type":43,"tag":66,"props":1473,"children":1475},{"className":1474},[],[1476],{"type":49,"value":950},{"type":49,"value":177},{"type":43,"tag":66,"props":1479,"children":1481},{"className":1480},[],[1482],{"type":49,"value":925},{"type":49,"value":177},{"type":43,"tag":66,"props":1485,"children":1487},{"className":1486},[],[1488],{"type":49,"value":835},{"type":49,"value":177},{"type":43,"tag":66,"props":1491,"children":1493},{"className":1492},[],[1494],{"type":49,"value":1495},"prefersReducedMotion",{"type":43,"tag":127,"props":1497,"children":1498},{},[1499,1504,1509],{"type":43,"tag":154,"props":1500,"children":1501},{},[1502],{"type":49,"value":1503},"Lifecycle",{"type":43,"tag":154,"props":1505,"children":1506},{},[1507],{"type":49,"value":1508},"Activation signals composed from IO+MQL+rIC",{"type":43,"tag":154,"props":1510,"children":1511},{},[1512,1517,1518,1523,1524,1530,1531,1536,1537],{"type":43,"tag":66,"props":1513,"children":1515},{"className":1514},[],[1516],{"type":49,"value":1040},{"type":49,"value":177},{"type":43,"tag":66,"props":1519,"children":1521},{"className":1520},[],[1522],{"type":49,"value":256},{"type":49,"value":177},{"type":43,"tag":66,"props":1525,"children":1527},{"className":1526},[],[1528],{"type":49,"value":1529},"whenIdle",{"type":49,"value":177},{"type":43,"tag":66,"props":1532,"children":1534},{"className":1533},[],[1535],{"type":49,"value":533},{"type":49,"value":177},{"type":43,"tag":66,"props":1538,"children":1540},{"className":1539},[],[1541],{"type":49,"value":541},{"type":43,"tag":127,"props":1543,"children":1544},{},[1545,1550,1555],{"type":43,"tag":154,"props":1546,"children":1547},{},[1548],{"type":49,"value":1549},"Composition",{"type":43,"tag":154,"props":1551,"children":1552},{},[1553],{"type":49,"value":1554},"Mount\u002Funmount orchestration with transitions",{"type":43,"tag":154,"props":1556,"children":1557},{},[1558,1563,1564,1570,1571,1576,1577,1582,1583,1588,1589],{"type":43,"tag":66,"props":1559,"children":1561},{"className":1560},[],[1562],{"type":49,"value":263},{"type":49,"value":177},{"type":43,"tag":66,"props":1565,"children":1567},{"className":1566},[],[1568],{"type":49,"value":1569},"usePresence",{"type":49,"value":177},{"type":43,"tag":66,"props":1572,"children":1574},{"className":1573},[],[1575],{"type":49,"value":270},{"type":49,"value":177},{"type":43,"tag":66,"props":1578,"children":1580},{"className":1579},[],[1581],{"type":49,"value":277},{"type":49,"value":177},{"type":43,"tag":66,"props":1584,"children":1586},{"className":1585},[],[1587],{"type":49,"value":284},{"type":49,"value":177},{"type":43,"tag":66,"props":1590,"children":1592},{"className":1591},[],[1593],{"type":49,"value":291},{"type":43,"tag":127,"props":1595,"children":1596},{},[1597,1602,1607],{"type":43,"tag":154,"props":1598,"children":1599},{},[1600],{"type":49,"value":1601},"Math",{"type":43,"tag":154,"props":1603,"children":1604},{},[1605],{"type":49,"value":1606},"Pure easing and interpolation functions",{"type":43,"tag":154,"props":1608,"children":1609},{},[1610,1616,1617,1623,1624,1630,1631,1637,1638,1644,1645,1651,1652,1658,1659,1665,1666,1672,1673],{"type":43,"tag":66,"props":1611,"children":1613},{"className":1612},[],[1614],{"type":49,"value":1615},"clamp",{"type":49,"value":177},{"type":43,"tag":66,"props":1618,"children":1620},{"className":1619},[],[1621],{"type":49,"value":1622},"clamp01",{"type":49,"value":177},{"type":43,"tag":66,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":49,"value":1629},"lerp",{"type":49,"value":177},{"type":43,"tag":66,"props":1632,"children":1634},{"className":1633},[],[1635],{"type":49,"value":1636},"inverseLerp",{"type":49,"value":177},{"type":43,"tag":66,"props":1639,"children":1641},{"className":1640},[],[1642],{"type":49,"value":1643},"remap",{"type":49,"value":177},{"type":43,"tag":66,"props":1646,"children":1648},{"className":1647},[],[1649],{"type":49,"value":1650},"easeOutCubic",{"type":49,"value":177},{"type":43,"tag":66,"props":1653,"children":1655},{"className":1654},[],[1656],{"type":49,"value":1657},"easeOutQuart",{"type":49,"value":177},{"type":43,"tag":66,"props":1660,"children":1662},{"className":1661},[],[1663],{"type":49,"value":1664},"easeOutBack",{"type":49,"value":177},{"type":43,"tag":66,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":49,"value":1671},"easeInOutCubic",{"type":49,"value":177},{"type":43,"tag":66,"props":1674,"children":1676},{"className":1675},[],[1677],{"type":49,"value":1678},"linear",{"type":43,"tag":127,"props":1680,"children":1681},{},[1682,1687,1692],{"type":43,"tag":154,"props":1683,"children":1684},{},[1685],{"type":49,"value":1686},"Utility",{"type":43,"tag":154,"props":1688,"children":1689},{},[1690],{"type":49,"value":1691},"React ref\u002Fcallback patterns for phase users",{"type":43,"tag":154,"props":1693,"children":1694},{},[1695,1701,1702],{"type":43,"tag":66,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":49,"value":1700},"useSyncedRef",{"type":49,"value":177},{"type":43,"tag":66,"props":1703,"children":1705},{"className":1704},[],[1706],{"type":49,"value":1707},"useStableCallback",{"type":43,"tag":44,"props":1709,"children":1711},{"id":1710},"audit",[1712],{"type":49,"value":1713},"Audit",{"type":43,"tag":52,"props":1715,"children":1716},{},[1717,1719,1724,1726,1732],{"type":49,"value":1718},"When you review, optimize, or audit animation code, follow ",{"type":43,"tag":325,"props":1720,"children":1722},{"href":1721},"references\u002Faudit.md",[1723],{"type":49,"value":1721},{"type":49,"value":1725},". It provides a repeatable procedure backed by a deterministic scanner (",{"type":43,"tag":66,"props":1727,"children":1729},{"className":1728},[],[1730],{"type":49,"value":1731},"scripts\u002Fscan.mjs",{"type":49,"value":1733},") that surfaces anti-pattern candidates before judgment.",{"type":43,"tag":44,"props":1735,"children":1737},{"id":1736},"api-reference-index",[1738],{"type":49,"value":1739},"API reference index",{"type":43,"tag":52,"props":1741,"children":1742},{},[1743],{"type":49,"value":1744},"Each export has its own reference file. Read the relevant file when implementing or advising on that export.",{"type":43,"tag":1746,"props":1747,"children":1749},"h3",{"id":1748},"core-phase",[1750,1752,1757],{"type":49,"value":1751},"Core (",{"type":43,"tag":66,"props":1753,"children":1755},{"className":1754},[],[1756],{"type":49,"value":4},{"type":49,"value":1758},")",{"type":43,"tag":119,"props":1760,"children":1761},{},[1762,1783],{"type":43,"tag":123,"props":1763,"children":1764},{},[1765],{"type":43,"tag":127,"props":1766,"children":1767},{},[1768,1773,1778],{"type":43,"tag":131,"props":1769,"children":1770},{},[1771],{"type":49,"value":1772},"Export",{"type":43,"tag":131,"props":1774,"children":1775},{},[1776],{"type":49,"value":1777},"Use when",{"type":43,"tag":131,"props":1779,"children":1780},{},[1781],{"type":49,"value":1782},"Reference",{"type":43,"tag":147,"props":1784,"children":1785},{},[1786,1811,1836,1861,1886,1911,1944,1969,1994,2019,2044],{"type":43,"tag":127,"props":1787,"children":1788},{},[1789,1797,1802],{"type":43,"tag":154,"props":1790,"children":1791},{},[1792],{"type":43,"tag":66,"props":1793,"children":1795},{"className":1794},[],[1796],{"type":49,"value":1026},{"type":43,"tag":154,"props":1798,"children":1799},{},[1800],{"type":49,"value":1801},"Building a lifecycle-aware rAF animation loop",{"type":43,"tag":154,"props":1803,"children":1804},{},[1805],{"type":43,"tag":325,"props":1806,"children":1808},{"href":1807},"references\u002Fcreate-loop.md",[1809],{"type":49,"value":1810},"create-loop.md",{"type":43,"tag":127,"props":1812,"children":1813},{},[1814,1822,1827],{"type":43,"tag":154,"props":1815,"children":1816},{},[1817],{"type":43,"tag":66,"props":1818,"children":1820},{"className":1819},[],[1821],{"type":49,"value":1033},{"type":43,"tag":154,"props":1823,"children":1824},{},[1825],{"type":49,"value":1826},"Need a raw frame clock without visibility management",{"type":43,"tag":154,"props":1828,"children":1829},{},[1830],{"type":43,"tag":325,"props":1831,"children":1833},{"href":1832},"references\u002Fcreate-ticker.md",[1834],{"type":49,"value":1835},"create-ticker.md",{"type":43,"tag":127,"props":1837,"children":1838},{},[1839,1847,1852],{"type":43,"tag":154,"props":1840,"children":1841},{},[1842],{"type":43,"tag":66,"props":1843,"children":1845},{"className":1844},[],[1846],{"type":49,"value":1047},{"type":43,"tag":154,"props":1848,"children":1849},{},[1850],{"type":49,"value":1851},"Observing element visibility (viewport + document)",{"type":43,"tag":154,"props":1853,"children":1854},{},[1855],{"type":43,"tag":325,"props":1856,"children":1858},{"href":1857},"references\u002Fcreate-sight.md",[1859],{"type":49,"value":1860},"create-sight.md",{"type":43,"tag":127,"props":1862,"children":1863},{},[1864,1872,1877],{"type":43,"tag":154,"props":1865,"children":1866},{},[1867],{"type":43,"tag":66,"props":1868,"children":1870},{"className":1869},[],[1871],{"type":49,"value":1040},{"type":43,"tag":154,"props":1873,"children":1874},{},[1875],{"type":49,"value":1876},"Providing active\u002Fpaused signal to your own renderer",{"type":43,"tag":154,"props":1878,"children":1879},{},[1880],{"type":43,"tag":325,"props":1881,"children":1883},{"href":1882},"references\u002Fcreate-lifecycle.md",[1884],{"type":49,"value":1885},"create-lifecycle.md",{"type":43,"tag":127,"props":1887,"children":1888},{},[1889,1897,1902],{"type":43,"tag":154,"props":1890,"children":1891},{},[1892],{"type":43,"tag":66,"props":1893,"children":1895},{"className":1894},[],[1896],{"type":49,"value":1413},{"type":43,"tag":154,"props":1898,"children":1899},{},[1900],{"type":49,"value":1901},"Tracking intersection ratio (0–1) for reveals",{"type":43,"tag":154,"props":1903,"children":1904},{},[1905],{"type":43,"tag":325,"props":1906,"children":1908},{"href":1907},"references\u002Fcreate-scroll-progress.md",[1909],{"type":49,"value":1910},"create-scroll-progress.md",{"type":43,"tag":127,"props":1912,"children":1913},{},[1914,1922,1935],{"type":43,"tag":154,"props":1915,"children":1916},{},[1917],{"type":43,"tag":66,"props":1918,"children":1920},{"className":1919},[],[1921],{"type":49,"value":1420},{"type":43,"tag":154,"props":1923,"children":1924},{},[1925,1927,1933],{"type":49,"value":1926},"Observing ",{"type":43,"tag":66,"props":1928,"children":1930},{"className":1929},[],[1931],{"type":49,"value":1932},"content-visibility",{"type":49,"value":1934}," render-skip state",{"type":43,"tag":154,"props":1936,"children":1937},{},[1938],{"type":43,"tag":325,"props":1939,"children":1941},{"href":1940},"references\u002Fcreate-render-state.md",[1942],{"type":49,"value":1943},"create-render-state.md",{"type":43,"tag":127,"props":1945,"children":1946},{},[1947,1955,1960],{"type":43,"tag":154,"props":1948,"children":1949},{},[1950],{"type":43,"tag":66,"props":1951,"children":1953},{"className":1952},[],[1954],{"type":49,"value":1427},{"type":43,"tag":154,"props":1956,"children":1957},{},[1958],{"type":49,"value":1959},"Tracking DPR changes in framework-free code",{"type":43,"tag":154,"props":1961,"children":1962},{},[1963],{"type":43,"tag":325,"props":1964,"children":1966},{"href":1965},"references\u002Fcreate-device-pixel-ratio.md",[1967],{"type":49,"value":1968},"create-device-pixel-ratio.md",{"type":43,"tag":127,"props":1970,"children":1971},{},[1972,1980,1985],{"type":43,"tag":154,"props":1973,"children":1974},{},[1975],{"type":43,"tag":66,"props":1976,"children":1978},{"className":1977},[],[1979],{"type":49,"value":1529},{"type":43,"tag":154,"props":1981,"children":1982},{},[1983],{"type":49,"value":1984},"Running a one-off callback when the browser is idle",{"type":43,"tag":154,"props":1986,"children":1987},{},[1988],{"type":43,"tag":325,"props":1989,"children":1991},{"href":1990},"references\u002Fwhen-idle.md",[1992],{"type":49,"value":1993},"when-idle.md",{"type":43,"tag":127,"props":1995,"children":1996},{},[1997,2005,2010],{"type":43,"tag":154,"props":1998,"children":1999},{},[2000],{"type":43,"tag":66,"props":2001,"children":2003},{"className":2002},[],[2004],{"type":49,"value":1495},{"type":43,"tag":154,"props":2006,"children":2007},{},[2008],{"type":49,"value":2009},"Gating expensive setup or conditional imports",{"type":43,"tag":154,"props":2011,"children":2012},{},[2013],{"type":43,"tag":325,"props":2014,"children":2016},{"href":2015},"references\u002Fprefers-reduced-motion.md",[2017],{"type":49,"value":2018},"prefers-reduced-motion.md",{"type":43,"tag":127,"props":2020,"children":2021},{},[2022,2030,2035],{"type":43,"tag":154,"props":2023,"children":2024},{},[2025],{"type":43,"tag":66,"props":2026,"children":2028},{"className":2027},[],[2029],{"type":49,"value":1434},{"type":43,"tag":154,"props":2031,"children":2032},{},[2033],{"type":49,"value":2034},"Lifecycle-aware MutationObserver with rAF batching",{"type":43,"tag":154,"props":2036,"children":2037},{},[2038],{"type":43,"tag":325,"props":2039,"children":2041},{"href":2040},"references\u002Fcreate-mutation.md",[2042],{"type":49,"value":2043},"create-mutation.md",{"type":43,"tag":127,"props":2045,"children":2046},{},[2047,2063,2068],{"type":43,"tag":154,"props":2048,"children":2049},{},[2050,2056,2057],{"type":43,"tag":66,"props":2051,"children":2053},{"className":2052},[],[2054],{"type":49,"value":2055},"PhaseError",{"type":49,"value":722},{"type":43,"tag":66,"props":2058,"children":2060},{"className":2059},[],[2061],{"type":49,"value":2062},"isPhaseError",{"type":43,"tag":154,"props":2064,"children":2065},{},[2066],{"type":49,"value":2067},"Handling or classifying phase errors",{"type":43,"tag":154,"props":2069,"children":2070},{},[2071],{"type":43,"tag":325,"props":2072,"children":2074},{"href":2073},"references\u002Ferrors.md",[2075],{"type":49,"value":2076},"errors.md",{"type":43,"tag":1746,"props":2078,"children":2080},{"id":2079},"react-phasereact",[2081,2083,2089],{"type":49,"value":2082},"React (",{"type":43,"tag":66,"props":2084,"children":2086},{"className":2085},[],[2087],{"type":49,"value":2088},"phase\u002Freact",{"type":49,"value":1758},{"type":43,"tag":119,"props":2091,"children":2092},{},[2093,2111],{"type":43,"tag":123,"props":2094,"children":2095},{},[2096],{"type":43,"tag":127,"props":2097,"children":2098},{},[2099,2103,2107],{"type":43,"tag":131,"props":2100,"children":2101},{},[2102],{"type":49,"value":1772},{"type":43,"tag":131,"props":2104,"children":2105},{},[2106],{"type":49,"value":1777},{"type":43,"tag":131,"props":2108,"children":2109},{},[2110],{"type":49,"value":1782},{"type":43,"tag":147,"props":2112,"children":2113},{},[2114,2139,2164,2189,2214,2239,2264,2289,2313,2345,2370,2401,2426,2451,2476,2501,2531,2556,2581,2606,2631,2654,2679],{"type":43,"tag":127,"props":2115,"children":2116},{},[2117,2125,2130],{"type":43,"tag":154,"props":2118,"children":2119},{},[2120],{"type":43,"tag":66,"props":2121,"children":2123},{"className":2122},[],[2124],{"type":49,"value":242},{"type":43,"tag":154,"props":2126,"children":2127},{},[2128],{"type":49,"value":2129},"Animating DOM elements in a per-frame loop",{"type":43,"tag":154,"props":2131,"children":2132},{},[2133],{"type":43,"tag":325,"props":2134,"children":2136},{"href":2135},"references\u002Fuse-loop.md",[2137],{"type":49,"value":2138},"use-loop.md",{"type":43,"tag":127,"props":2140,"children":2141},{},[2142,2150,2155],{"type":43,"tag":154,"props":2143,"children":2144},{},[2145],{"type":43,"tag":66,"props":2146,"children":2148},{"className":2147},[],[2149],{"type":49,"value":249},{"type":43,"tag":154,"props":2151,"children":2152},{},[2153],{"type":49,"value":2154},"Canvas\u002FWebGL animation with DPR + resize handling",{"type":43,"tag":154,"props":2156,"children":2157},{},[2158],{"type":43,"tag":325,"props":2159,"children":2161},{"href":2160},"references\u002Fuse-canvas.md",[2162],{"type":49,"value":2163},"use-canvas.md",{"type":43,"tag":127,"props":2165,"children":2166},{},[2167,2175,2180],{"type":43,"tag":154,"props":2168,"children":2169},{},[2170],{"type":43,"tag":66,"props":2171,"children":2173},{"className":2172},[],[2174],{"type":49,"value":256},{"type":43,"tag":154,"props":2176,"children":2177},{},[2178],{"type":49,"value":2179},"Gating a renderer you own (three.js, Pixi, WebGL)",{"type":43,"tag":154,"props":2181,"children":2182},{},[2183],{"type":43,"tag":325,"props":2184,"children":2186},{"href":2185},"references\u002Fuse-lifecycle.md",[2187],{"type":49,"value":2188},"use-lifecycle.md",{"type":43,"tag":127,"props":2190,"children":2191},{},[2192,2200,2205],{"type":43,"tag":154,"props":2193,"children":2194},{},[2195],{"type":43,"tag":66,"props":2196,"children":2198},{"className":2197},[],[2199],{"type":49,"value":645},{"type":43,"tag":154,"props":2201,"children":2202},{},[2203],{"type":49,"value":2204},"Tracking visibility as a reactive phase",{"type":43,"tag":154,"props":2206,"children":2207},{},[2208],{"type":43,"tag":325,"props":2209,"children":2211},{"href":2210},"references\u002Fuse-sight.md",[2212],{"type":49,"value":2213},"use-sight.md",{"type":43,"tag":127,"props":2215,"children":2216},{},[2217,2225,2230],{"type":43,"tag":154,"props":2218,"children":2219},{},[2220],{"type":43,"tag":66,"props":2221,"children":2223},{"className":2222},[],[2224],{"type":49,"value":216},{"type":43,"tag":154,"props":2226,"children":2227},{},[2228],{"type":49,"value":2229},"Animating a single number into React render output",{"type":43,"tag":154,"props":2231,"children":2232},{},[2233],{"type":43,"tag":325,"props":2234,"children":2236},{"href":2235},"references\u002Fuse-tween.md",[2237],{"type":49,"value":2238},"use-tween.md",{"type":43,"tag":127,"props":2240,"children":2241},{},[2242,2250,2255],{"type":43,"tag":154,"props":2243,"children":2244},{},[2245],{"type":43,"tag":66,"props":2246,"children":2248},{"className":2247},[],[2249],{"type":49,"value":1569},{"type":43,"tag":154,"props":2251,"children":2252},{},[2253],{"type":49,"value":2254},"Custom mount\u002Funmount transitions (full control)",{"type":43,"tag":154,"props":2256,"children":2257},{},[2258],{"type":43,"tag":325,"props":2259,"children":2261},{"href":2260},"references\u002Fuse-presence.md",[2262],{"type":49,"value":2263},"use-presence.md",{"type":43,"tag":127,"props":2265,"children":2266},{},[2267,2275,2280],{"type":43,"tag":154,"props":2268,"children":2269},{},[2270],{"type":43,"tag":66,"props":2271,"children":2273},{"className":2272},[],[2274],{"type":49,"value":852},{"type":43,"tag":154,"props":2276,"children":2277},{},[2278],{"type":49,"value":2279},"Driving opacity\u002Freveals from intersection ratio",{"type":43,"tag":154,"props":2281,"children":2282},{},[2283],{"type":43,"tag":325,"props":2284,"children":2286},{"href":2285},"references\u002Fuse-scroll-progress.md",[2287],{"type":49,"value":2288},"use-scroll-progress.md",{"type":43,"tag":127,"props":2290,"children":2291},{},[2292,2300,2304],{"type":43,"tag":154,"props":2293,"children":2294},{},[2295],{"type":43,"tag":66,"props":2296,"children":2298},{"className":2297},[],[2299],{"type":49,"value":835},{"type":43,"tag":154,"props":2301,"children":2302},{},[2303],{"type":49,"value":2034},{"type":43,"tag":154,"props":2305,"children":2306},{},[2307],{"type":43,"tag":325,"props":2308,"children":2310},{"href":2309},"references\u002Fuse-mutation.md",[2311],{"type":49,"value":2312},"use-mutation.md",{"type":43,"tag":127,"props":2314,"children":2315},{},[2316,2324,2336],{"type":43,"tag":154,"props":2317,"children":2318},{},[2319],{"type":43,"tag":66,"props":2320,"children":2322},{"className":2321},[],[2323],{"type":49,"value":818},{"type":43,"tag":154,"props":2325,"children":2326},{},[2327,2329,2334],{"type":49,"value":2328},"Pausing raw work when a ",{"type":43,"tag":66,"props":2330,"children":2332},{"className":2331},[],[2333],{"type":49,"value":291},{"type":49,"value":2335}," subtree is skipped",{"type":43,"tag":154,"props":2337,"children":2338},{},[2339],{"type":43,"tag":325,"props":2340,"children":2342},{"href":2341},"references\u002Fuse-render-state.md",[2343],{"type":49,"value":2344},"use-render-state.md",{"type":43,"tag":127,"props":2346,"children":2347},{},[2348,2356,2361],{"type":43,"tag":154,"props":2349,"children":2350},{},[2351],{"type":43,"tag":66,"props":2352,"children":2354},{"className":2353},[],[2355],{"type":49,"value":533},{"type":43,"tag":154,"props":2357,"children":2358},{},[2359],{"type":49,"value":2360},"Boolean that flips true once the browser is idle",{"type":43,"tag":154,"props":2362,"children":2363},{},[2364],{"type":43,"tag":325,"props":2365,"children":2367},{"href":2366},"references\u002Fuse-idle.md",[2368],{"type":49,"value":2369},"use-idle.md",{"type":43,"tag":127,"props":2371,"children":2372},{},[2373,2381,2392],{"type":43,"tag":154,"props":2374,"children":2375},{},[2376],{"type":43,"tag":66,"props":2377,"children":2379},{"className":2378},[],[2380],{"type":49,"value":541},{"type":43,"tag":154,"props":2382,"children":2383},{},[2384,2385,2390],{"type":49,"value":779},{"type":43,"tag":66,"props":2386,"children":2388},{"className":2387},[],[2389],{"type":49,"value":549},{"type":49,"value":2391},") once idle",{"type":43,"tag":154,"props":2393,"children":2394},{},[2395],{"type":43,"tag":325,"props":2396,"children":2398},{"href":2397},"references\u002Fuse-when-idle.md",[2399],{"type":49,"value":2400},"use-when-idle.md",{"type":43,"tag":127,"props":2402,"children":2403},{},[2404,2412,2417],{"type":43,"tag":154,"props":2405,"children":2406},{},[2407],{"type":43,"tag":66,"props":2408,"children":2410},{"className":2409},[],[2411],{"type":49,"value":859},{"type":43,"tag":154,"props":2413,"children":2414},{},[2415],{"type":49,"value":2416},"Reading element dimensions without reflows",{"type":43,"tag":154,"props":2418,"children":2419},{},[2420],{"type":43,"tag":325,"props":2421,"children":2423},{"href":2422},"references\u002Fuse-size.md",[2424],{"type":49,"value":2425},"use-size.md",{"type":43,"tag":127,"props":2427,"children":2428},{},[2429,2437,2442],{"type":43,"tag":154,"props":2430,"children":2431},{},[2432],{"type":43,"tag":66,"props":2433,"children":2435},{"className":2434},[],[2436],{"type":49,"value":866},{"type":43,"tag":154,"props":2438,"children":2439},{},[2440],{"type":49,"value":2441},"Breakpoint matching against element width\u002Fheight",{"type":43,"tag":154,"props":2443,"children":2444},{},[2445],{"type":43,"tag":325,"props":2446,"children":2448},{"href":2447},"references\u002Fuse-container-query.md",[2449],{"type":49,"value":2450},"use-container-query.md",{"type":43,"tag":127,"props":2452,"children":2453},{},[2454,2462,2467],{"type":43,"tag":154,"props":2455,"children":2456},{},[2457],{"type":43,"tag":66,"props":2458,"children":2460},{"className":2459},[],[2461],{"type":49,"value":873},{"type":43,"tag":154,"props":2463,"children":2464},{},[2465],{"type":49,"value":2466},"Reactive CSS media query subscription",{"type":43,"tag":154,"props":2468,"children":2469},{},[2470],{"type":43,"tag":325,"props":2471,"children":2473},{"href":2472},"references\u002Fuse-media-query.md",[2474],{"type":49,"value":2475},"use-media-query.md",{"type":43,"tag":127,"props":2477,"children":2478},{},[2479,2487,2492],{"type":43,"tag":154,"props":2480,"children":2481},{},[2482],{"type":43,"tag":66,"props":2483,"children":2485},{"className":2484},[],[2486],{"type":49,"value":925},{"type":43,"tag":154,"props":2488,"children":2489},{},[2490],{"type":49,"value":2491},"Reactive reduced-motion boolean for non-phase animations",{"type":43,"tag":154,"props":2493,"children":2494},{},[2495],{"type":43,"tag":325,"props":2496,"children":2498},{"href":2497},"references\u002Fuse-prefers-reduced-motion.md",[2499],{"type":49,"value":2500},"use-prefers-reduced-motion.md",{"type":43,"tag":127,"props":2502,"children":2503},{},[2504,2512,2522],{"type":43,"tag":154,"props":2505,"children":2506},{},[2507],{"type":43,"tag":66,"props":2508,"children":2510},{"className":2509},[],[2511],{"type":49,"value":950},{"type":43,"tag":154,"props":2513,"children":2514},{},[2515,2517],{"type":49,"value":2516},"Reactive DPR for buffer sizing outside ",{"type":43,"tag":66,"props":2518,"children":2520},{"className":2519},[],[2521],{"type":49,"value":249},{"type":43,"tag":154,"props":2523,"children":2524},{},[2525],{"type":43,"tag":325,"props":2526,"children":2528},{"href":2527},"references\u002Fuse-device-pixel-ratio.md",[2529],{"type":49,"value":2530},"use-device-pixel-ratio.md",{"type":43,"tag":127,"props":2532,"children":2533},{},[2534,2542,2547],{"type":43,"tag":154,"props":2535,"children":2536},{},[2537],{"type":43,"tag":66,"props":2538,"children":2540},{"className":2539},[],[2541],{"type":49,"value":1700},{"type":43,"tag":154,"props":2543,"children":2544},{},[2545],{"type":49,"value":2546},"Keeping a ref always in sync with latest value",{"type":43,"tag":154,"props":2548,"children":2549},{},[2550],{"type":43,"tag":325,"props":2551,"children":2553},{"href":2552},"references\u002Fuse-synced-ref.md",[2554],{"type":49,"value":2555},"use-synced-ref.md",{"type":43,"tag":127,"props":2557,"children":2558},{},[2559,2567,2572],{"type":43,"tag":154,"props":2560,"children":2561},{},[2562],{"type":43,"tag":66,"props":2563,"children":2565},{"className":2564},[],[2566],{"type":49,"value":1707},{"type":43,"tag":154,"props":2568,"children":2569},{},[2570],{"type":49,"value":2571},"Stable-identity function for memo'd children",{"type":43,"tag":154,"props":2573,"children":2574},{},[2575],{"type":43,"tag":325,"props":2576,"children":2578},{"href":2577},"references\u002Fuse-stable-callback.md",[2579],{"type":49,"value":2580},"use-stable-callback.md",{"type":43,"tag":127,"props":2582,"children":2583},{},[2584,2592,2597],{"type":43,"tag":154,"props":2585,"children":2586},{},[2587],{"type":43,"tag":66,"props":2588,"children":2590},{"className":2589},[],[2591],{"type":49,"value":263},{"type":43,"tag":154,"props":2593,"children":2594},{},[2595],{"type":49,"value":2596},"Show\u002Fhide with enter\u002Fexit transitions",{"type":43,"tag":154,"props":2598,"children":2599},{},[2600],{"type":43,"tag":325,"props":2601,"children":2603},{"href":2602},"references\u002Fpresence.md",[2604],{"type":49,"value":2605},"presence.md",{"type":43,"tag":127,"props":2607,"children":2608},{},[2609,2617,2622],{"type":43,"tag":154,"props":2610,"children":2611},{},[2612],{"type":43,"tag":66,"props":2613,"children":2615},{"className":2614},[],[2616],{"type":49,"value":277},{"type":43,"tag":154,"props":2618,"children":2619},{},[2620],{"type":49,"value":2621},"Viewport-gated lazy mount (one-shot)",{"type":43,"tag":154,"props":2623,"children":2624},{},[2625],{"type":43,"tag":325,"props":2626,"children":2628},{"href":2627},"references\u002Fwhen-visible.md",[2629],{"type":49,"value":2630},"when-visible.md",{"type":43,"tag":127,"props":2632,"children":2633},{},[2634,2642,2647],{"type":43,"tag":154,"props":2635,"children":2636},{},[2637],{"type":43,"tag":66,"props":2638,"children":2640},{"className":2639},[],[2641],{"type":49,"value":284},{"type":43,"tag":154,"props":2643,"children":2644},{},[2645],{"type":49,"value":2646},"Idle-gated lazy mount for non-critical UI",{"type":43,"tag":154,"props":2648,"children":2649},{},[2650],{"type":43,"tag":325,"props":2651,"children":2652},{"href":1990},[2653],{"type":49,"value":1993},{"type":43,"tag":127,"props":2655,"children":2656},{},[2657,2665,2670],{"type":43,"tag":154,"props":2658,"children":2659},{},[2660],{"type":43,"tag":66,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":49,"value":291},{"type":43,"tag":154,"props":2666,"children":2667},{},[2668],{"type":49,"value":2669},"Skip painting off-screen content (keep in DOM)",{"type":43,"tag":154,"props":2671,"children":2672},{},[2673],{"type":43,"tag":325,"props":2674,"children":2676},{"href":2675},"references\u002Fdefer.md",[2677],{"type":49,"value":2678},"defer.md",{"type":43,"tag":127,"props":2680,"children":2681},{},[2682,2690,2695],{"type":43,"tag":154,"props":2683,"children":2684},{},[2685],{"type":43,"tag":66,"props":2686,"children":2688},{"className":2687},[],[2689],{"type":49,"value":270},{"type":43,"tag":154,"props":2691,"children":2692},{},[2693],{"type":49,"value":2694},"Coordinated exit-then-enter between N states",{"type":43,"tag":154,"props":2696,"children":2697},{},[2698],{"type":43,"tag":325,"props":2699,"children":2701},{"href":2700},"references\u002Fswap.md",[2702],{"type":49,"value":2703},"swap.md",{"type":43,"tag":1746,"props":2705,"children":2707},{"id":2706},"ease-phaseease",[2708,2710,2716],{"type":49,"value":2709},"Ease (",{"type":43,"tag":66,"props":2711,"children":2713},{"className":2712},[],[2714],{"type":49,"value":2715},"phase\u002Fease",{"type":49,"value":1758},{"type":43,"tag":119,"props":2718,"children":2719},{},[2720,2738],{"type":43,"tag":123,"props":2721,"children":2722},{},[2723],{"type":43,"tag":127,"props":2724,"children":2725},{},[2726,2730,2734],{"type":43,"tag":131,"props":2727,"children":2728},{},[2729],{"type":49,"value":1772},{"type":43,"tag":131,"props":2731,"children":2732},{},[2733],{"type":49,"value":1777},{"type":43,"tag":131,"props":2735,"children":2736},{},[2737],{"type":49,"value":1782},{"type":43,"tag":147,"props":2739,"children":2740},{},[2741],{"type":43,"tag":127,"props":2742,"children":2743},{},[2744,2749,2754],{"type":43,"tag":154,"props":2745,"children":2746},{},[2747],{"type":49,"value":2748},"All easing + math",{"type":43,"tag":154,"props":2750,"children":2751},{},[2752],{"type":49,"value":2753},"Computing animated values (lerp, clamp, easing curves)",{"type":43,"tag":154,"props":2755,"children":2756},{},[2757],{"type":43,"tag":325,"props":2758,"children":2760},{"href":2759},"references\u002Fease.md",[2761],{"type":49,"value":2762},"ease.md",{"type":43,"tag":1746,"props":2764,"children":2766},{"id":2765},"search-across-references",[2767],{"type":49,"value":2768},"Search across references",{"type":43,"tag":52,"props":2770,"children":2771},{},[2772],{"type":49,"value":2773},"For concepts that span multiple references, grep is faster than guessing which file to open.",{"type":43,"tag":2775,"props":2776,"children":2781},"pre",{"className":2777,"code":2778,"language":2779,"meta":2780,"style":2780},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","grep -ri \"reduced motion\" skills\u002Fphase\u002Freferences\u002F   # every export's motion behavior\ngrep -ri \"data-phase\" skills\u002Fphase\u002Freferences\u002F        # which components stamp phase attributes\ngrep -ri \"cleanup\\|unmount\\|stop()\" skills\u002Fphase\u002Freferences\u002F  # teardown behavior across hooks\ngrep -ri \"pooled\\|observer\" skills\u002Fphase\u002Freferences\u002F  # which exports use shared observer pools\ngrep -ri \"will-change\" skills\u002Fphase\u002Freferences\u002F       # GPU layer guidance across contexts\ngrep -ri \"FrameState\\|frame\\.delta\\|frame\\.elapsed\" skills\u002Fphase\u002Freferences\u002F  # frame timing across loop primitives\ngrep -ri \"starting:opacity\\|data-\\[phase=exiting\\]\" skills\u002Fphase\u002Freferences\u002F  # the canonical CSS transition pattern\n","bash","",[2782],{"type":43,"tag":66,"props":2783,"children":2784},{"__ignoreMap":2780},[2785,2829,2863,2897,2931,2964,2998],{"type":43,"tag":2786,"props":2787,"children":2789},"span",{"class":2788,"line":26},"line",[2790,2796,2802,2808,2813,2818,2823],{"type":43,"tag":2786,"props":2791,"children":2793},{"style":2792},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[2794],{"type":49,"value":2795},"grep",{"type":43,"tag":2786,"props":2797,"children":2799},{"style":2798},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[2800],{"type":49,"value":2801}," -ri",{"type":43,"tag":2786,"props":2803,"children":2805},{"style":2804},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[2806],{"type":49,"value":2807}," \"",{"type":43,"tag":2786,"props":2809,"children":2810},{"style":2798},[2811],{"type":49,"value":2812},"reduced motion",{"type":43,"tag":2786,"props":2814,"children":2815},{"style":2804},[2816],{"type":49,"value":2817},"\"",{"type":43,"tag":2786,"props":2819,"children":2820},{"style":2798},[2821],{"type":49,"value":2822}," skills\u002Fphase\u002Freferences\u002F",{"type":43,"tag":2786,"props":2824,"children":2826},{"style":2825},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[2827],{"type":49,"value":2828},"   # every export's motion behavior\n",{"type":43,"tag":2786,"props":2830,"children":2832},{"class":2788,"line":2831},2,[2833,2837,2841,2845,2850,2854,2858],{"type":43,"tag":2786,"props":2834,"children":2835},{"style":2792},[2836],{"type":49,"value":2795},{"type":43,"tag":2786,"props":2838,"children":2839},{"style":2798},[2840],{"type":49,"value":2801},{"type":43,"tag":2786,"props":2842,"children":2843},{"style":2804},[2844],{"type":49,"value":2807},{"type":43,"tag":2786,"props":2846,"children":2847},{"style":2798},[2848],{"type":49,"value":2849},"data-phase",{"type":43,"tag":2786,"props":2851,"children":2852},{"style":2804},[2853],{"type":49,"value":2817},{"type":43,"tag":2786,"props":2855,"children":2856},{"style":2798},[2857],{"type":49,"value":2822},{"type":43,"tag":2786,"props":2859,"children":2860},{"style":2825},[2861],{"type":49,"value":2862},"        # which components stamp phase attributes\n",{"type":43,"tag":2786,"props":2864,"children":2866},{"class":2788,"line":2865},3,[2867,2871,2875,2879,2884,2888,2892],{"type":43,"tag":2786,"props":2868,"children":2869},{"style":2792},[2870],{"type":49,"value":2795},{"type":43,"tag":2786,"props":2872,"children":2873},{"style":2798},[2874],{"type":49,"value":2801},{"type":43,"tag":2786,"props":2876,"children":2877},{"style":2804},[2878],{"type":49,"value":2807},{"type":43,"tag":2786,"props":2880,"children":2881},{"style":2798},[2882],{"type":49,"value":2883},"cleanup\\|unmount\\|stop()",{"type":43,"tag":2786,"props":2885,"children":2886},{"style":2804},[2887],{"type":49,"value":2817},{"type":43,"tag":2786,"props":2889,"children":2890},{"style":2798},[2891],{"type":49,"value":2822},{"type":43,"tag":2786,"props":2893,"children":2894},{"style":2825},[2895],{"type":49,"value":2896},"  # teardown behavior across hooks\n",{"type":43,"tag":2786,"props":2898,"children":2900},{"class":2788,"line":2899},4,[2901,2905,2909,2913,2918,2922,2926],{"type":43,"tag":2786,"props":2902,"children":2903},{"style":2792},[2904],{"type":49,"value":2795},{"type":43,"tag":2786,"props":2906,"children":2907},{"style":2798},[2908],{"type":49,"value":2801},{"type":43,"tag":2786,"props":2910,"children":2911},{"style":2804},[2912],{"type":49,"value":2807},{"type":43,"tag":2786,"props":2914,"children":2915},{"style":2798},[2916],{"type":49,"value":2917},"pooled\\|observer",{"type":43,"tag":2786,"props":2919,"children":2920},{"style":2804},[2921],{"type":49,"value":2817},{"type":43,"tag":2786,"props":2923,"children":2924},{"style":2798},[2925],{"type":49,"value":2822},{"type":43,"tag":2786,"props":2927,"children":2928},{"style":2825},[2929],{"type":49,"value":2930},"  # which exports use shared observer pools\n",{"type":43,"tag":2786,"props":2932,"children":2933},{"class":2788,"line":22},[2934,2938,2942,2946,2951,2955,2959],{"type":43,"tag":2786,"props":2935,"children":2936},{"style":2792},[2937],{"type":49,"value":2795},{"type":43,"tag":2786,"props":2939,"children":2940},{"style":2798},[2941],{"type":49,"value":2801},{"type":43,"tag":2786,"props":2943,"children":2944},{"style":2804},[2945],{"type":49,"value":2807},{"type":43,"tag":2786,"props":2947,"children":2948},{"style":2798},[2949],{"type":49,"value":2950},"will-change",{"type":43,"tag":2786,"props":2952,"children":2953},{"style":2804},[2954],{"type":49,"value":2817},{"type":43,"tag":2786,"props":2956,"children":2957},{"style":2798},[2958],{"type":49,"value":2822},{"type":43,"tag":2786,"props":2960,"children":2961},{"style":2825},[2962],{"type":49,"value":2963},"       # GPU layer guidance across contexts\n",{"type":43,"tag":2786,"props":2965,"children":2967},{"class":2788,"line":2966},6,[2968,2972,2976,2980,2985,2989,2993],{"type":43,"tag":2786,"props":2969,"children":2970},{"style":2792},[2971],{"type":49,"value":2795},{"type":43,"tag":2786,"props":2973,"children":2974},{"style":2798},[2975],{"type":49,"value":2801},{"type":43,"tag":2786,"props":2977,"children":2978},{"style":2804},[2979],{"type":49,"value":2807},{"type":43,"tag":2786,"props":2981,"children":2982},{"style":2798},[2983],{"type":49,"value":2984},"FrameState\\|frame\\.delta\\|frame\\.elapsed",{"type":43,"tag":2786,"props":2986,"children":2987},{"style":2804},[2988],{"type":49,"value":2817},{"type":43,"tag":2786,"props":2990,"children":2991},{"style":2798},[2992],{"type":49,"value":2822},{"type":43,"tag":2786,"props":2994,"children":2995},{"style":2825},[2996],{"type":49,"value":2997},"  # frame timing across loop primitives\n",{"type":43,"tag":2786,"props":2999,"children":3001},{"class":2788,"line":3000},7,[3002,3006,3010,3014,3019,3023,3027],{"type":43,"tag":2786,"props":3003,"children":3004},{"style":2792},[3005],{"type":49,"value":2795},{"type":43,"tag":2786,"props":3007,"children":3008},{"style":2798},[3009],{"type":49,"value":2801},{"type":43,"tag":2786,"props":3011,"children":3012},{"style":2804},[3013],{"type":49,"value":2807},{"type":43,"tag":2786,"props":3015,"children":3016},{"style":2798},[3017],{"type":49,"value":3018},"starting:opacity\\|data-\\[phase=exiting\\]",{"type":43,"tag":2786,"props":3020,"children":3021},{"style":2804},[3022],{"type":49,"value":2817},{"type":43,"tag":2786,"props":3024,"children":3025},{"style":2798},[3026],{"type":49,"value":2822},{"type":43,"tag":2786,"props":3028,"children":3029},{"style":2825},[3030],{"type":49,"value":3031},"  # the canonical CSS transition pattern\n",{"type":43,"tag":44,"props":3033,"children":3035},{"id":3034},"cross-cutting-references",[3036],{"type":49,"value":3037},"Cross-cutting references",{"type":43,"tag":119,"props":3039,"children":3040},{},[3041,3055],{"type":43,"tag":123,"props":3042,"children":3043},{},[3044],{"type":43,"tag":127,"props":3045,"children":3046},{},[3047,3051],{"type":43,"tag":131,"props":3048,"children":3049},{},[3050],{"type":49,"value":1782},{"type":43,"tag":131,"props":3052,"children":3053},{},[3054],{"type":49,"value":1777},{"type":43,"tag":147,"props":3056,"children":3057},{},[3058,3074,3113,3129,3145,3178],{"type":43,"tag":127,"props":3059,"children":3060},{},[3061,3069],{"type":43,"tag":154,"props":3062,"children":3063},{},[3064],{"type":43,"tag":325,"props":3065,"children":3066},{"href":327},[3067],{"type":49,"value":3068},"decision-guide.md",{"type":43,"tag":154,"props":3070,"children":3071},{},[3072],{"type":49,"value":3073},"Choosing between CSS, phase, or an external library",{"type":43,"tag":127,"props":3075,"children":3076},{},[3077,3085],{"type":43,"tag":154,"props":3078,"children":3079},{},[3080],{"type":43,"tag":325,"props":3081,"children":3082},{"href":518},[3083],{"type":49,"value":3084},"rendering-recipes.md",{"type":43,"tag":154,"props":3086,"children":3087},{},[3088,3090,3095,3096,3101,3102,3107,3108],{"type":49,"value":3089},"Composing ",{"type":43,"tag":66,"props":3091,"children":3093},{"className":3092},[],[3094],{"type":49,"value":291},{"type":49,"value":722},{"type":43,"tag":66,"props":3097,"children":3099},{"className":3098},[],[3100],{"type":49,"value":284},{"type":49,"value":722},{"type":43,"tag":66,"props":3103,"children":3105},{"className":3104},[],[3106],{"type":49,"value":277},{"type":49,"value":722},{"type":43,"tag":66,"props":3109,"children":3111},{"className":3110},[],[3112],{"type":49,"value":818},{"type":43,"tag":127,"props":3114,"children":3115},{},[3116,3124],{"type":43,"tag":154,"props":3117,"children":3118},{},[3119],{"type":43,"tag":325,"props":3120,"children":3121},{"href":1299},[3122],{"type":49,"value":3123},"performance.md",{"type":43,"tag":154,"props":3125,"children":3126},{},[3127],{"type":49,"value":3128},"Writing or reviewing hot-path animation code",{"type":43,"tag":127,"props":3130,"children":3131},{},[3132,3140],{"type":43,"tag":154,"props":3133,"children":3134},{},[3135],{"type":43,"tag":325,"props":3136,"children":3137},{"href":1721},[3138],{"type":49,"value":3139},"audit.md",{"type":43,"tag":154,"props":3141,"children":3142},{},[3143],{"type":49,"value":3144},"Auditing existing animations for optimization opportunities",{"type":43,"tag":127,"props":3146,"children":3147},{},[3148,3157],{"type":43,"tag":154,"props":3149,"children":3150},{},[3151],{"type":43,"tag":325,"props":3152,"children":3154},{"href":3153},"references\u002Fabort-signals.md",[3155],{"type":49,"value":3156},"abort-signals.md",{"type":43,"tag":154,"props":3158,"children":3159},{},[3160,3162,3168,3170,3176],{"type":49,"value":3161},"Tearing down core primitives with an ",{"type":43,"tag":66,"props":3163,"children":3165},{"className":3164},[],[3166],{"type":49,"value":3167},"AbortSignal",{"type":49,"value":3169}," (",{"type":43,"tag":66,"props":3171,"children":3173},{"className":3172},[],[3174],{"type":49,"value":3175},"signal",{"type":49,"value":3177}," option)",{"type":43,"tag":127,"props":3179,"children":3180},{},[3181,3190],{"type":43,"tag":154,"props":3182,"children":3183},{},[3184],{"type":43,"tag":325,"props":3185,"children":3187},{"href":3186},"references\u002Ftimed-sequences.md",[3188],{"type":49,"value":3189},"timed-sequences.md",{"type":43,"tag":154,"props":3191,"children":3192},{},[3193,3195],{"type":49,"value":3194},"Building multi-step timed animation sequences with ",{"type":43,"tag":66,"props":3196,"children":3198},{"className":3197},[],[3199],{"type":49,"value":242},{"type":43,"tag":44,"props":3201,"children":3203},{"id":3202},"full-compiled-document",[3204],{"type":49,"value":3205},"Full compiled document",{"type":43,"tag":52,"props":3207,"children":3208},{},[3209,3211],{"type":49,"value":3210},"For all references expanded inline: ",{"type":43,"tag":66,"props":3212,"children":3214},{"className":3213},[],[3215],{"type":49,"value":3216},"AGENTS.md",{"type":43,"tag":3218,"props":3219,"children":3220},"style",{},[3221],{"type":49,"value":3222},"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":3224,"total":26},[3225],{"slug":4,"name":4,"fn":5,"description":6,"org":3226,"tags":3227,"stars":22,"repoUrl":23,"updatedAt":24},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3228,3229,3230],{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"items":3232,"total":3399},[3233,3251,3263,3275,3290,3307,3319,3332,3344,3357,3369,3386],{"slug":3234,"name":3234,"fn":3235,"description":3236,"org":3237,"tags":3238,"stars":3248,"repoUrl":3249,"updatedAt":3250},"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},[3239,3242,3245],{"name":3240,"slug":3241,"type":15},"Agents","agents",{"name":3243,"slug":3244,"type":15},"Automation","automation",{"name":3246,"slug":3247,"type":15},"Browser Automation","browser-automation",38346,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-browser","2026-07-20T05:55:17.314329",{"slug":3252,"name":3252,"fn":3253,"description":3254,"org":3255,"tags":3256,"stars":3248,"repoUrl":3249,"updatedAt":3262},"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},[3257,3258,3261],{"name":3243,"slug":3244,"type":15},{"name":3259,"slug":3260,"type":15},"AWS","aws",{"name":3246,"slug":3247,"type":15},"2026-07-17T06:08:33.665276",{"slug":3264,"name":3264,"fn":3265,"description":3266,"org":3267,"tags":3268,"stars":3248,"repoUrl":3249,"updatedAt":3274},"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},[3269,3270,3271],{"name":3240,"slug":3241,"type":15},{"name":3246,"slug":3247,"type":15},{"name":3272,"slug":3273,"type":15},"Navigation","navigation","2026-07-26T05:47:42.378419",{"slug":3276,"name":3276,"fn":3277,"description":3278,"org":3279,"tags":3280,"stars":3248,"repoUrl":3249,"updatedAt":3289},"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},[3281,3284,3285,3286],{"name":3282,"slug":3283,"type":15},"API Development","api-development",{"name":3243,"slug":3244,"type":15},{"name":3246,"slug":3247,"type":15},{"name":3287,"slug":3288,"type":15},"Web Scraping","web-scraping","2026-07-20T06:24:11.928835",{"slug":3291,"name":3291,"fn":3292,"description":3293,"org":3294,"tags":3295,"stars":3248,"repoUrl":3249,"updatedAt":3306},"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},[3296,3297,3300,3303],{"name":3246,"slug":3247,"type":15},{"name":3298,"slug":3299,"type":15},"Debugging","debugging",{"name":3301,"slug":3302,"type":15},"QA","qa",{"name":3304,"slug":3305,"type":15},"Testing","testing","2026-07-17T06:07:41.421482",{"slug":3308,"name":3308,"fn":3309,"description":3310,"org":3311,"tags":3312,"stars":3248,"repoUrl":3249,"updatedAt":3318},"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},[3313,3314,3315],{"name":3240,"slug":3241,"type":15},{"name":3246,"slug":3247,"type":15},{"name":3316,"slug":3317,"type":15},"Desktop","desktop","2026-07-17T06:08:28.007783",{"slug":3320,"name":3320,"fn":3321,"description":3322,"org":3323,"tags":3324,"stars":3248,"repoUrl":3249,"updatedAt":3331},"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},[3325,3326,3329],{"name":3246,"slug":3247,"type":15},{"name":3327,"slug":3328,"type":15},"Messaging","messaging",{"name":3330,"slug":3320,"type":15},"Slack","2026-07-17T06:08:27.679015",{"slug":3333,"name":3333,"fn":3334,"description":3335,"org":3336,"tags":3337,"stars":3248,"repoUrl":3249,"updatedAt":3343},"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},[3338,3339,3340,3341],{"name":3243,"slug":3244,"type":15},{"name":3246,"slug":3247,"type":15},{"name":3304,"slug":3305,"type":15},{"name":3342,"slug":36,"type":15},"Vercel","2026-07-17T06:08:28.349899",{"slug":3345,"name":3345,"fn":3346,"description":3347,"org":3348,"tags":3349,"stars":3354,"repoUrl":3355,"updatedAt":3356},"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},[3350,3353],{"name":3351,"slug":3352,"type":15},"Deployment","deployment",{"name":3342,"slug":36,"type":15},28993,"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills","2026-07-17T06:08:41.18374",{"slug":3358,"name":3358,"fn":3359,"description":3360,"org":3361,"tags":3362,"stars":3354,"repoUrl":3355,"updatedAt":3368},"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},[3363,3366,3367],{"name":3364,"slug":3365,"type":15},"CLI","cli",{"name":3351,"slug":3352,"type":15},{"name":3342,"slug":36,"type":15},"2026-07-17T06:08:41.84179",{"slug":3370,"name":3370,"fn":3371,"description":3372,"org":3373,"tags":3374,"stars":3354,"repoUrl":3355,"updatedAt":3385},"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},[3375,3378,3379,3382],{"name":3376,"slug":3377,"type":15},"Best Practices","best-practices",{"name":20,"slug":21,"type":15},{"name":3380,"slug":3381,"type":15},"React","react",{"name":3383,"slug":3384,"type":15},"UI Components","ui-components","2026-07-17T06:05:40.576913",{"slug":3387,"name":3387,"fn":3388,"description":3389,"org":3390,"tags":3391,"stars":3354,"repoUrl":3355,"updatedAt":3398},"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},[3392,3395,3396,3397],{"name":3393,"slug":3394,"type":15},"Cost Optimization","cost-optimization",{"name":3351,"slug":3352,"type":15},{"name":13,"slug":14,"type":15},{"name":3342,"slug":36,"type":15},"2026-07-17T06:04:08.327515",100]