SSGOI

Native app-like page transitions for mobile web apps.

Router agnostic · Cross-browser · SSR ready · Web Animations API powered

Live showcase · Documentation

Why SSGOI?

---

Set it up with one link

Give this URL to Claude, Codex, Cursor, or another coding agent:

https://ssgoi.dev/llms.txt

It contains the full setup for React and Next.js, Svelte and SvelteKit, Vue and Nuxt, Solid and SolidStart, Angular, and Qwik.

---

Or install the agent plugin

The same mobile-web-app skill works in Codex and Claude Code.

Codex:

codex plugin marketplace add meursyphus/ssgoi
codex plugin add ssgoi@ssgoi

Claude Code:

claude plugin marketplace add meursyphus/ssgoi
claude plugin install ssgoi@ssgoi

Then ask the agent to apply SSGOI to the current mobile web app. The skill reads the canonical llms.txt, selects the matching framework guide, and follows the app's existing router and layout structure.

---

Or add it in just two files

The Next.js setup is one config, one provider, and one simple ready-made route boundary.

npm install @ssgoi/react

// app/ssgoi-provider.tsx
"use client";

import { type ReactNode } from "react";
import { Ssgoi } from "@ssgoi/react";
import { drill } from "@ssgoi/react/view-transitions";

const config = {
  transitions: [{ on: "/**", except: "/", transition: drill() }],
};

export function SsgoiProvider({ children }: { children: ReactNode }) {
  return <Ssgoi config={config}>{children}</Ssgoi>;
}

Import the route boundary directly; it reads the pathname and handles URL-hook Suspense:

import { SsgoiRouteBoundary } from "@ssgoi/react/nextjs";

<SsgoiRouteBoundary>{children}</SsgoiRouteBoundary>;

// app/layout.tsx
import { type ReactNode } from "react";
import { SsgoiProvider } from "./ssgoi-provider";
import { SsgoiRouteBoundary } from "@ssgoi/react/nextjs";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <main className="relative z-0 min-h-dvh overflow-x-clip">
          <SsgoiProvider>
            <SsgoiRouteBoundary>{children}</SsgoiRouteBoundary>
          </SsgoiProvider>
        </main>
      </body>
    </html>
  );
}

The class string above is Tailwind shorthand. Without Tailwind, apply position: relative; z-index: 0; min-height: 100dvh; overflow-x: clip to the shell. Use 100vh only where dvh is unsupported.

That is enough for a simple app. Router subpaths use optional peers, so importing @ssgoi/react does not install or load Next.js. Other frameworks use the same small boundary model with their own router state. For complete files, persistent layouts, nested boundaries, and framework-specific setup, see the documentation.

---

Compatibility

SSGOI depends on the broadly available Web Animations API instead of requiring the View Transition API.

These are core Web Animations API runtime targets. The blur types in Sheet and Zoom also use backdrop-filter (Firefox 103+); earlier Firefox keeps the transition, scale, and dimming but omits the backdrop blur.

It observes the DOM lifecycle your framework already owns, so routing and SSR stay with your existing stack.

React · Svelte · Vue · Solid · Angular · Qwik · framework-agnostic core

An experimental React Native / Expo Router integration adds native fade/slide transitions with the same SsgoiRouteBoundary naming. Try the Expo template for the current implementation and device checks.

See complete compatibility and framework guides →

---

Why SSGOI doesn't use the View Transition API

SSGOI owns the geometry, temporary visual layers, live outgoing DOM, and navigation policy needed to turn complex motion into reusable presets.

Read why SSGOI doesn't use the View Transition API →

---

License

MIT Licensed © MeurSyphus