Native app-like page transitions for the web.
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/llm.txt Contains complete setup guides, all transition types, troubleshooting, and API docs.
Web pages don't transition—they just swap. SSGOI changes that.
| View Transition API | Other Libraries | SSGOI | |
|---|---|---|---|
| All browsers | ❌ Chrome only | ✅ | ✅ |
| SSR support | ✅ | ||
| Spring physics | ❌ | ✅ | |
| Router agnostic | ❌ | ❌ | ✅ |
| Back/forward state | ❌ | ❌ | ✅ |
60fps guaranteed — Spring physics pre-computed to Web Animation API keyframes. GPU-accelerated, main thread free.
npm install @ssgoi/react @ssgoi/core"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> ); }// 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.
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 expandSee all transitions at ssgoi.dev
| Package | Framework |
|---|---|
@ssgoi/react | React, Next.js |
@ssgoi/svelte | Svelte, SvelteKit |
@ssgoi/angular | Angular |
@ssgoi/vue | Vue, Nuxt |
ssgoi.dev — Full docs, interactive examples, and API reference.
MIT © MeurSyphus