SSR Ready

ViewTransitions

네이티브 앱 같은 페이지 전환을 웹에서 구현하세요.

Next.js, Nuxt, SvelteKit 등 모든 SSR 프레임워크와 완벽 호환. SEO를 포기하지 않고도 멋진 애니메이션을 만들 수 있습니다.

React

npm install @ssgoi/react

Svelte

npm install @ssgoi/svelte

Vue (지원 예정)

npm install @ssgoi/vue

SolidJS (지원 예정)

npm install @ssgoi/solid

Qwik (지원 예정)

npm install @ssgoi/qwik

Latest Posts

Insights on Svelte, Flutter, and web development

Understanding Svelte 5 Runes: The Future of Reactivity

Understanding Svelte 5 Runes: The Future of Reactivity

Dive deep into Svelte 5's new rune system and discover how it revolutionizes state management and reactivity.

Sarah ChenSarah Chen12mSvelte
Mastering Flutter Animations: From Basics to Advanced

Mastering Flutter Animations: From Basics to Advanced

Learn how to create beautiful, performant animations in Flutter that bring your mobile apps to life.

Michael ParkMichael Park15mFlutter
Building Scalable Applications with SvelteKit

Building Scalable Applications with SvelteKit

A comprehensive guide to architecting large-scale applications with SvelteKit, covering best practices, patterns, and real-world examples.

Emma WilsonEmma Wilson18mSvelteKit
React Server Components: A Deep Dive

React Server Components: A Deep Dive

Understanding the revolutionary React Server Components and how they change the way we build React applications.

Alex JohnsonAlex Johnson10mReact
Modern CSS Techniques You Should Know in 2024

Modern CSS Techniques You Should Know in 2024

Explore the latest CSS features including Container Queries, Cascade Layers, and the :has() selector that are revolutionizing web styling.

Maria GarciaMaria Garcia8mCSS
Web Performance Optimization: A Comprehensive Guide

Web Performance Optimization: A Comprehensive Guide

Master the art of web performance with modern techniques including Core Web Vitals optimization, resource hints, and cutting-edge loading strategies.

David KimDavid Kim14mPerformance
Advanced TypeScript Patterns for Production

Advanced TypeScript Patterns for Production

Level up your TypeScript skills with advanced patterns including type guards, conditional types, and template literal types.

James ChenJames Chen12mTypeScript
60fps 유지
상태 기억

모든 환경에서 동일한 경험

프레임워크에 관계없이 일관된 API로 사용하세요

JavaScript
JavaScript
React
React
Svelte
Svelte
Vue
Vue(지원 예정)
SolidJS
SolidJS(지원 예정)
Qwik
Qwik(지원 예정)

SSGOI인가?

단 3가지만 기억하세요

SSR 완벽 지원

Next.js, Nuxt, SvelteKit 같은 SSR 프레임워크에서 완벽하게 작동. SEO를 포기하지 않고도 멋진 페이지 전환을 구현하세요.

모든 브라우저 호환

Chrome, Firefox, Safari 모든 브라우저에서 일관된 경험을 제공합니다.

제로 설정

프레임워크의 라우팅을 그대로 이용하세요. 복잡한 설정 없이 바로 시작할 수 있습니다.

놀랍도록 간단한 코드

단 몇 줄로 페이지 전환 애니메이션을 구현하세요

// app/layout.tsx
import { Ssgoi, SsgoiConfig } from '@ssgoi/react'
import { fade, hero } from '@ssgoi/react/view-transitions'

const config: SsgoiConfig = {
  transitions: [
    {
      from: "/*", to: "/profile", transition: fade()
    },
    {
      from: "/posts", to: "/posts/*", transition: hero()
    },
  ],
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <Ssgoi config={config}>
      {children}
    </Ssgoi>
  )
}
// app/posts/page.tsx
import { SsgoiTransition } from '@ssgoi/react'

export default function PostsPage() {
  return (
    <SsgoiTransition id="/posts">
      <div>
        <h1>Posts List</h1>
        {/* Page Content */}
      </div>
    </SsgoiTransition>
  )
}

지금 바로 시작하세요

5분이면 충분합니다. SSGOI로 웹에 네이티브 앱 경험을 더하세요.

SSGOI - 모던 웹을 위한 아름다운 페이지 전환 라이브러리