Ssgoi
animated page transition for major ssr frameworks and browsers, including Safari
Install / Use
/learn @meursyphus/SsgoiREADME
SSGOI
Native app-like page transitions for the web.
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/llm.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.
License
MIT © MeurSyphus
Related Skills
bluebubbles
341.6kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
node-connect
341.6kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
slack
341.6kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
84.6kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
