SSGOI

Why SSGOI

Keep the router you have and give every navigation the sense of direction a native app has.

SSGOI animates the page that leaves against the page that arrives. It does not route: your router keeps URLs, data loading, history and SSR, and SSGOI only watches the routed element unmount and mount. Adding it means one provider file, plus one edit to the layout you already have — so you can try it on an existing app and take it out again just as fast.

Motion is simulated, not hand-tuned. A spring is integrated up front, compiled into keyframes and handed to the browser's Web Animations API, so no JavaScript runs per frame to move the page and the result is the same in Chrome, Safari, Firefox and Edge.

Because it animates live DOM rather than snapshots, a preset can measure geometry, insert its own layers and keep a video playing — which is what makes Drill, Sheet, Slide and Zoom read as hierarchy, a temporary task, an ordered set and a card opening into its page, instead of decoration.

A small surface area

One provider, one boundary component, one layout edit.

app/
  ssgoi-provider.tsx         # new — config + <Ssgoi>
  layout.tsx                 # already yours — wrap routed content

Start with the pathname as both the boundary key and the route id. Only apps with persistent UI, such as a bottom nav, need to split those two later. Copy the quick start.

The rule carries more than the effect

A route rule says which navigations it covers, and SSGOI derives direction and scroll behaviour from that.

on with except covers a whole family, such as a list and everything under it. from/to names one precise pair. ordered gives tabs or steps an index so direction follows position. The winning rule also decides whether the arriving page resets its scroll or comes back where you left it.

Mobile and desktop can get different rule sets from transitions({ isMobile }). Route rules has the matching details.

Complexity stays opt-in

One boundary is enough until part of the routed UI has to survive a navigation.

When a bottom nav should stay put across tab changes but leave on a detail route, keep the nav outside an inner content boundary. That still uses one provider and one config — persistent layouts shows the shape.

Read next