SSGOI

Why it's ranked here

The case is breadth plus a concrete technical bet. One MIT licensed engine ships thirteen named effects, from plain fade to shared element hero and sheet, behind adapters for six frameworks, and it targets browsers as old as Safari 13.1 and Chrome 84 because it avoids the newer View Transition API. Route rules cover the cases that usually need custom code: ordered tabs, exact page pairs, priority, and scroll restore per side. The core package declares unit and browser test runs. The weak spots are a React Native integration still labelled experimental and a design history written partly in Korean.

What's good

Adoption is small: the Next.js setup is one install, one provider holding a rules object, and one route boundary component, and the router integrations are optional peers, so the base React package does not pull in Next.js. Back navigation replays the exact effect recorded for that pair of pages rather than guessing. Nested boundaries follow the page tree, so a persistent layout can animate only its inner tab. Spring motion is computed ahead of time into browser keyframes, and each preset accepts an override that retunes one direction or one named group without forking the preset.

Tradeoffs

The page shell needs specific layout styles, relative position, a zero stacking level and horizontal clipping, or horizontal effects break. Blur variants of sheet and zoom need Firefox 103 or later; older Firefox drops the blur. Phone back swipes are left to the operating system, so the gesture does not drive the animation. A superseded design note measured the presets' springs at perceived lengths from 257 to 482 milliseconds, which is why the override hooks exist; mixing presets may need tuning for a consistent feel. Svelte's wrapper component is marked deprecated in favour of a plain data attribute.

How to use it well

Reach for it when a mobile web app, PWA or WebView build should feel like a native app and you do not want to swap routers. Start with one effect on a route family, such as drill for list to detail, then add pair rules for galleries and ordered rules for tabs. Apply the shell styles first. The README also offers a hosted setup guide and a plugin for Codex and Claude Code that applies the library for you. It does not provide app screens or gesture driven back navigation; the authors point to a separate component kit for screens.

Observed

License

MIT (LICENSE)

Language

TypeScript (packages/core/package.json)

Packaging

npm packages: a framework-agnostic core plus React, Svelte, Vue, Solid, Angular and Qwik adapters (package.json)

Module formats

ESM and CommonJS builds with type declarations (packages/core/package.json)

Interfaces

Library API; agent plugin installable in Codex and Claude Code (README.md)

Browser targets

Chrome 84+, Safari 13.1+, Firefox 75+, Edge 84+; backdrop blur needs Firefox 103+ (README.md)

Platform support

Runs in Capacitor, Ionic, Tauri and React Native WebView shells and as an installed PWA (README.md)

Transition presets

Thirteen exported presets (packages/core/src/lib/transitions/index.ts)

Test tooling

Vitest unit and Playwright browser test scripts declared in the core package (packages/core/package.json)

React Native

Expo Router integration described as experimental (README.md)