SSGOI

April 26, 2026 · View on GitHub

Native app-like page transitions for the web.

SSGOI Demo

AI-Assisted Setup

Using Claude, Cursor, ChatGPT, or other AI assistants? Let them set it up for you.

Add this to your AI's context:

https://ssgoi.dev/llms.txt

Contains complete setup guides, all transition types, troubleshooting, and API docs.

Why SSGOI?

Web pages don't transition—they just swap. SSGOI changes that.

	View Transition API	Other Libraries	SSGOI
All browsers	❌ Chrome only	✅	✅
SSR support	⚠️ Limited	⚠️ Varies	✅
Spring physics	❌	⚠️ Some	✅
Router agnostic	❌	❌	✅
Back/forward state	❌	❌	✅

60fps guaranteed — Spring physics pre-computed to Web Animation API keyframes. GPU-accelerated, main thread free.

Quick Start

npm install @ssgoi/react @ssgoi/core

1. Wrap your app (layout.tsx)

"use client";

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

const config = {
  transitions: [
    { from: "*", to: "/post/*", transition: drill({ direction: "enter" }) },
    { from: "/post/*", to: "*", transition: drill({ direction: "exit" }) },
  ],
};

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Ssgoi config={config}>
          <div className="relative z-0">{children}</div>
        </Ssgoi>
      </body>
    </html>
  );
}

2. Wrap your pages

// app/page.tsx
import { SsgoiTransition } from "@ssgoi/react";

export default function HomePage() {
  return (
    <SsgoiTransition id="/">
      <h1>Home</h1>
    </SsgoiTransition>
  );
}

// app/post/[id]/page.tsx
export default function PostPage({ params }) {
  return (
    <SsgoiTransition id={`/post/${params.id}`}>
      <h1>Post Detail</h1>
    </SsgoiTransition>
  );
}

That's it. Your pages now transition like a native app.

Transitions

import { drill, fade, scroll, slide, swap, sheet, hero, pinterest } from "@ssgoi/react/view-transitions";

drill({ direction: "enter" | "exit" })  // iOS-style (list → detail)
fade()                                   // Cross-fade
scroll({ direction: "up" | "down" })    // Vertical scroll
slide({ direction: "left" | "right" })  // Horizontal (tabs)
swap()                                   // Bottom tab navigation
sheet({ direction: "enter" | "exit" })  // Bottom sheet
hero()                                   // Shared element
pinterest()                              // Gallery expand

See all transitions at ssgoi.dev

Packages

Package	Framework
`@ssgoi/react`	React, Next.js
`@ssgoi/svelte`	Svelte, SvelteKit
`@ssgoi/angular`	Angular
`@ssgoi/vue`	Vue, Nuxt

Documentation

ssgoi.dev — Full docs, interactive examples, and API reference.