モバイルウェブアプリにネイティブアプリのようなページ遷移を提供するフレームワークです。
中辛 の解説
React・Next.js・Svelte・SvelteKit・Vue・Nuxt など複数のフレームワークに対応しています。Web Animations をベースに動作するため、Chrome・Safari・Firefox・Edge の主要ブラウザで動きます。設定ファイル・プロバイダー・ルート境界の3つを変更するだけで使え、複雑な遷移もプリセットで実現できます。ライブデモが ssgoi.dev にあります。
이런 레포예요
이럴 때 쓰면 좋아요
- モバイルウェブアプリにネイティブアプリのような遷移効果を追加したいとき
- 複数のフレームワークで統一感のあるページ切り替え動作を実装したいとき
- 既存ルーターの機能を保ちながらアニメーションを導入したいとき
핵심 기능
대안 대비 차별점
View Transition API の限界を超えて、生きたDOM・ランタイムレイヤー・複雑な几何操作を組み合わせた高度な遷移効果が実現できます。
食べた人たち
実際に使ってみた人の記録です — 一言も完走の記録も、確認のうえで公開しています。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
すぐ動かしてみるNode.js (pnpm)
ギット飯がリポジトリの構成を確認して組み立てた実行コマンドです。ターミナルに貼り付ければ、取得から実行までまとめて進みます。
git clone --depth 1 https://github.com/meursyphus/ssgoi.git && cd ssgoi && pnpm install && pnpm run dev
コードは自分の環境で動きます — はじめて見るリポジトリなら、中身にひととおり目を通してから実行するのがおすすめです。
README가 안내하는 자세한 단계 보기
- パッケージをインストールします。
npm install @ssgoi/react
- アプリ直下に SSGOI プロバイダーを作成します。
// app/ssgoi-provider.tsx
"use client";
import { type ReactNode } from "react";
import { Ssgoi } from "@ssgoi/react";
import { drill } from "@ssgoi/react/view-transitions";
const config = {
transitions: [{ on: "/**", except: "/", transition: drill() }],
};
export function SsgoiProvider({ children }: { children: ReactNode }) {
return <Ssgoi config={config}>{children}</Ssgoi>;
}
- ルート境界コンポーネントを作成します。
// app/ssgoi-route-boundary.tsx
"use client";
import { type ReactNode } from "react";
import { usePathname } from "next/navigation";
export function SsgoiRouteBoundary({ children }: { children: ReactNode }) {
const pathname = usePathname();
return (
<div key={pathname} data-ssgoi-transition={pathname}>
{children}
</div>
);
}
- ルートレイアウトにプロバイダーと境界を配置します。
// app/layout.tsx
import { type ReactNode } from "react";
import { SsgoiProvider } from "./ssgoi-provider";
import { SsgoiRouteBoundary } from "./ssgoi-route-boundary";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<main className="relative z-0 min-h-dvh overflow-x-clip">
<SsgoiProvider>
<SsgoiRouteBoundary>{children}</SsgoiRouteBoundary>
</SsgoiProvider>
</main>
</body>
</html>
);
}
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try meursyphus/ssgoi
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2023 年に作成
「웹·Next.js·풀스택」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/meursyphus/ssgoi)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る