SSGOI

What is SSGOI?

SSGOI brings native app-like page transitions to the web. Transform your static page navigations into smooth, delightful experiences that users love.

try this: ssgoi.dev

!SSGOI Demo

$3

- 🌍 Works Everywhere - Unlike the browser's View Transition API, SSGOI works in all modern browsers (Chrome, Firefox, Safari)
- 🚀 SSR Ready - Perfect compatibility with Next.js, Nuxt, SvelteKit. No hydration issues, SEO-friendly
- 🎯 Use Your Router - Keep your existing routing. React Router, Next.js App Router, SvelteKit - all work seamlessly
- 💾 State Persistence - Remembers animation state during navigation, even with browser back/forward
- 🎨 Framework Agnostic - One consistent API for React, Svelte, Vue, SolidJS, and more

Quick Start

$3

``bash


React

npm install @ssgoi/react

Svelte

npm install @ssgoi/svelte
`

$3

#### 1. Wrap your app

`tsx
import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';

export default function App() {
return (





);
}
`

#### 2. Wrap your pages

`tsx
import { SsgoiTransition } from '@ssgoi/react';

export default function HomePage() {
return (



Welcome


{/ Page content /}

);
}
`

That's it! Your pages now transition smoothly with a fade effect.

Advanced Transitions

$3

Define different transitions for different routes:

`tsx
const config = {
transitions: [
// Scroll between tabs
{ from: '/home', to: '/about', transition: scroll({ direction: 'up' }) },
{ from: '/about', to: '/home', transition: scroll({ direction: 'down' }) },

// Drill in when entering details
{ from: '/products', to: '/products/*', transition: drill({ direction: 'enter' }) },

// Pinterest-style image transitions
{ from: '/gallery', to: '/photo/*', transition: pinterest() }
],
defaultTransition: fade()
};
`

$3

Automatically create bidirectional transitions:

`tsx
{
from: '/home',
to: '/about',
transition: scroll({ direction: 'up' }),
symmetric: true // Automatically creates reverse transition
}
`

$3

Animate specific elements during mount/unmount:

`tsx
import { transition } from '@ssgoi/react';
import { fade, slide } from '@ssgoi/react/transitions';

function Card() {
return (



);
}
`

Built-in Transitions

$3

- fade - Smooth opacity transition
- scroll - Vertical scrolling (up/down)
- drill - Drill in/out effect (enter/exit)
- hero - Shared element transitions
- pinterest - Pinterest-style expand effect

$3

- fade - Fade in/out
- scale - Scale in/out
- slide - Slide (direction: up/down/left/right)
- rotate - Rotate
- bounce - Bounce
- blur - Blur
- fly - Fly (custom x, y position)

Framework Examples

$3

`tsx
// app/layout.tsx
import { Ssgoi } from '@ssgoi/react';
import { scroll } from '@ssgoi/react/view-transitions';

export default function RootLayout({ children }) {
return (


defaultTransition: scroll({ direction: 'up' })
}}>


);
}

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

export default function Page() {
return (

{/ Your page content /}

);
}
`

$3

`svelte









`

Why SSGOI?

$3

- ✅ Works in all browsers, not just Chrome
- ✅ More animation options with spring physics
- ✅ Better developer experience

$3

- ✅ Built specifically for page transitions
- ✅ SSR-first design
- ✅ No router lock-in
- ✅ Minimal bundle size

How It Works

SSGOI intercepts DOM lifecycle events to create smooth transitions:

1. Route Change: Your router changes the URL
2. Exit Animation: Current page animates out
3. Enter Animation: New page animates in
4. State Sync: Animation state persists across navigation

All powered by a spring physics engine for natural, smooth motion.

Live Demos

Try out SSGOI with our framework-specific demo applications:

$3

`bash
pnpm react-demo:dev

Opens at http://localhost:3001

`
Explore Next.js App Router integration with various transition effects.

$3

`bash
pnpm svelte-demo:dev

Opens at http://localhost:5174

`
See SvelteKit integration with smooth page transitions.

Visit the /apps` directory to explore the demo source code and learn how to implement SSGOI in your own projects.

Documentation

Visit https://ssgoi.dev for:
- Detailed API reference
- Interactive examples
- Framework integration guides
- Custom transition recipes

Contributing

We welcome contributions! Please see our contributing guide for details.

License

MIT © MeurSyphus