Repolode
oso95

oso95/scroll-world

シーンの外から内部へカメラが途切れず飛び込む、スクロール連動型3Dランディングページを生成するエージェントスキル。

スター
10,261
フォーク
1,128
未解決の Issue
10
最終コミット
3 か月前

これは何?

scroll-worldは、Claude Code、Codex、その他のSKILL.md互換エージェント向けのエージェントスキルです。あらゆるブランドや業界向けに、スクロールするとカメラが各シーンの外から内部へ移動し、そのまま途切れることなく次のシーンへ飛び込むランディングページを構築します。

このスキルはAIでビジュアルを生成します。GPT Image 2(HiggsfieldまたはCodex CLI経由)でアイソメトリックなジオラマの静止画を、SeedanceまたはKlingで画像から動画へのカメラクリップを作成します。接続用クリップは隣り合うシーンのレンダリング済みフレームをもとに生成するため、つなぎ目がフレーム単位で一致します。スクロール位置によって再生時間が決まり、カメラ自体は生成された映像の中で動きます。

スクロールエンジンは、プレーンなHTML、Next.js、Vue、Pythonで配信するページで使える、フレームワーク非依存のVanilla JavaScriptモジュールです。また、スマートフォン向けに別途レンダリングするオプションの9:16モバイル版にも対応し、レンダリング開始前に推定生成コストを提示します。

主な機能

  • 01AI画像・動画モデルで、アイソメトリックなジオラマのシーン静止画とカメラのフライトクリップを生成します。
  • 02隣り合うシーンのレンダリング済みフレームから接続用クリップを作り、シーン間をシームレスにつなぎます。
  • 03遅延読み込みとつなぎ目のクロスフェードに対応した、フレームワーク非依存のVanilla JavaScript製スクロールエンジンを提供します。
  • 04別途構成するオプションの9:16モバイル版に対応します。
  • 05クレジットまたは金額で推定コストを提示し、生成前に承認を求めます。

ユースケース

  • 物流・産業分野の企業向けに、スクロール連動型の商品・ブランドランディングページを作成する。
  • 3Dモデリングの制作工程を用意せずに、没入感のある3D風マーケティングページを試作する。
  • 既存のNext.js、Vue、またはプレーンなHTMLサイトに、シネマティックなスクロールセクションを追加する。

クイックスタート

  1. 1

    Claude Codeでマーケットプレイスを追加する

    /plugin marketplace add oso95/scroll-world
  2. 2

    プラグインをインストールする

    /plugin install scroll-world@scroll-world
  3. 3

    スクロールして巡るワールドのランディングページを依頼するか、/scroll-worldを実行する

使う前に知っておきたいこと

  • アセットの生成には費用がかかります。残高のあるMonid APIキーまたはHiggsfieldクレジットが必要です。
  • Higgsfield CLI、ffmpeg、Pillowを含むPython 3も必要です。
  • これはアセットを生成するエージェントスキルであり、すぐに実行できるウェブサイトではありません。また、生成されたメディアは同梱されていません。

トピック

よくある質問

scroll-world とは?
シーンの外から内部へカメラが途切れず飛び込む、スクロール連動型3Dランディングページを生成するエージェントスキル。 scroll-worldは、Claude Code、Codex、その他のSKILL.md互換エージェント向けのエージェントスキルです。あらゆるブランドや業界向けに、スクロールするとカメラが各シーンの外から内部へ移動し、そのまま途切れることなく次のシーンへ飛び込むランディングページを構築します。
scroll-world は無料で使えますか?ライセンスは?
scroll-world は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
scroll-world は今もメンテナンスされていますか?
半年以内に更新あり。scroll-world の最終コミットは 2026年7月29日 です。
scroll-world は何に使えますか?
物流・産業分野の企業向けに、スクロール連動型の商品・ブランドランディングページを作成する。 3Dモデリングの制作工程を用意せずに、没入感のある3D風マーケティングページを試作する。 既存のNext.js、Vue、またはプレーンなHTMLサイトに、シネマティックなスクロールセクションを追加する。
scroll-world のインストール方法は?
Claude Codeでマーケットプレイスを追加する: /plugin marketplace add oso95/scroll-world プラグインをインストールする: /plugin install scroll-world@scroll-world スクロールして巡るワールドのランディングページを依頼するか、/scroll-worldを実行する
scroll-world はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/oso95/scroll-world

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト