Claude CodeとCodex向けのエージェントスキル。AI生成モーションを入力連動のWebアニメーションに変換
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
Claude Codeでマーケットプレイスを追加する
/plugin marketplace add oso95/scroll-world - 2
プラグインをインストールする
/plugin install scroll-world@scroll-world - 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 の数値は毎日更新されます。
関連プロジェクト
動画を最適化済みWebPフレーム列に変換し、スクロールで操作するcanvasサイトを構築するAgent Skill。
アートディレクション、実際の写真、ブラウザでのセルフチェックで、コーディングエージェントに個性あるフロントエンドを作らせるAgent Skills。
Baoyuが開発する、コンテンツ制作・画像生成・WeChat、X、Weiboへの投稿に対応した、Claude CodeやCodexなど向けのAIエージェントスキル集。
Stable Diffusion、Flux、Wanなどに対応し、ComfyUIワークフロータブも備えた、AI画像・動画・音声生成向けのモジュール式Web UI。
記事から、WeChat公式アカウントや小紅書向けの3:4縦型カバー画像プロンプトを生成するAIエージェントスキル。顔の一貫性も維持できます。