Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions README.ja.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
# scroll-world

[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)

https://github.com/user-attachments/assets/b08e641e-985b-4bd4-83ff-6750272d0c37


Claude Code、Codex、および `SKILL.md` に対応するあらゆるエージェント向けのスキルです。業界やブランドを問わず、没入感のある、スクロール連動でスクラブ再生される「世界を飛び抜ける」ランディングページを構築します。スクロールすると、カメラは各シーンの外側から内部へ飛び込み、カットを挟まずに次のシーンへ流れていきます。生成された小さな世界を、ひと続きの飛行で巡ります(Emons の物流サイトの演出を、好きなテーマに応用するイメージです)。

## インストール

### Claude Code — プラグインとして(推奨)

```
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world
```

あとは、スクロールで世界を巡るランディングページを依頼するか、`/scroll-world` を実行するだけです。

### Codex とその他のエージェント — skills CLI 経由

[Vercel の skills CLI](https://github.com/vercel-labs/skills) を使用します。Codex、Claude Code、Cursor、および 20 種類以上のエージェントにインストールできます。

```bash
npx skills add oso95/scroll-world # pick your agent(s) when prompted
npx skills add oso95/scroll-world -a codex # or target Codex directly
```

Codex では `$scroll-world` で実行します(`/skills` から探すこともできます)。または、スクロールで世界を巡るランディングページを作るよう、そのまま依頼してください。

### 手動(ドロップインスキル)

スキルフォルダーをエージェントのスキルディレクトリへコピーします。

```bash
git clone https://github.com/oso95/scroll-world
cp -R scroll-world/skills/scroll-world ~/.claude/skills/ # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/ # Codex
```

## 必要なもの

- 認証済み(`higgsfield auth login`)で、利用可能なクレジットがある [Higgsfield CLI](https://higgsfield.ai)。
- フレーム抽出とエンコードに使用する `ffmpeg` / `ffprobe`。
- Pillow をインストールした Python 3(モバイル向け縦長キャンバス、および任意の透過シーン背景抜きに使用)。
- [Codex CLI](https://github.com/openai/codex)(任意)— インストールされている場合、シーンの静止画は Codex 内蔵の `image_gen`(同じ GPT Image モデル)でも生成できます。Higgsfield クレジットの代わりに ChatGPT サブスクリプションへ課金されます。

## 機能

[Higgsfield](https://higgsfield.ai) を使って、統一感のあるアイソメトリックなジオラマシーン(Higgsfield、または ChatGPT サブスクリプション上の Codex CLI を介した GPT Image 2)と、カメラの飛行映像(Seedance または Kling の image-to-video。継ぎ目のフレームを固定できるモデルのみ)を制作し、スクロール位置に応じてスクラブ再生します。Apple のスクロール連動型製品ページと同じ手法です。カメラは実際に移動し、スクロールは時間だけを制御します。**フレームワークには依存しません**。Higgsfield パイプライン、プロンプトテンプレート、移植可能な Vanilla JavaScript のスクラブエンジンが提供され、プレーン HTML、Next.js、Vue、Python で配信するページのいずれにも組み込めます。特定の技術スタックは前提としていません。

実行すると、このスキルは次の処理を行います。

1. **ヒアリング** — 題材や業界と訴求内容、ブランドキット(URL からの取り込み、手渡し、または提案)、アートディレクション、カメラが順番に訪れるシーン、**モバイル版**が必要かどうか(横長映像を切り抜くのではなく、スマートフォン向けに 9:16 の縦長で構成した第 2 のシーケンスをネイティブレンダリング)、そして**予算**を確認します。レンダリングの各プランと静止画の生成元を推定クレジット費用とともに提示し、何かを生成する前に承認を得ます。
2. **アセット生成** — 各シーンにつき 1 枚の静止画と 1 本の「飛び込み」カメラクリップを生成します。さらに、隣接するシーンで実際にレンダリングされたフレームから、連続するシーンをつなぐ接続クリップを生成し、すべての継ぎ目でフレームを完全に一致させます。モバイル版を有効にした場合も、独自の 9:16 レンダリング結果に対してフレームを固定し、同じ方法で縦長シーケンスを並行生成します。
3. **組み込み** — 設定駆動のスクロールエンジンでシーケンス全体をひと続きの飛行として再生し、スマートフォンでは縦長クリップとポスター画像を自動的に配信します。

## スキルの内容

```
skills/scroll-world/
├── SKILL.md the procedure + the seam rule + gotchas
└── references/
├── prompts.md intake checklist + every Higgsfield prompt template
├── pipeline.md copy-paste batch scripts (generate → frames → connectors → encode)
├── scrub-engine.js portable, config-driven scrub engine (blob-seek, lazy load, seam crossfade)
├── index-template.html a minimal standalone page that mounts the engine
└── knockout.py background knockout for floating scenes
```

## 注意事項

- アセット生成には Higgsfield クレジットが必要です(N 個のシーンに対して、画像生成は約 N 回、動画生成は約 2N-1 回。モバイル用シーケンスを追加すると動画生成回数は 2 倍になります)。また、完了まで時間がかかるため、スキルはバックグラウンドで生成を実行し、状態をポーリングします。CLI では生成 1 回ごとの料金が公開されていないため、スキルは現在の残高から費用を算出し、クレジットを消費する前に推定総額を提示します。
- 生成される `.mp4` / `.webp` アセットはプロジェクトごとに作られるため、このリポジトリには同梱されません。

## Star 履歴

<a href="https://www.star-history.com/?type=date&repos=oso95%2Fscroll-world">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=oso95/scroll-world&type=date&theme=dark&legend=top-left&sealed_token=rsHNX9eWfbhlu820oC1dzsc66Y8UZI4dawuHvAUlbn36F0gwOWXRDi-Qq4QFopkoEJE7bzgXPUkAmSnmMcglxAo_rM7TvGDKFehk5MzprmeT2euDRbHnTQZIxEWwjjpGQ3nodpdblW6WjTssURtDxXO2MCVL_WgJ_WnCIoVbV8qhsB_Z-Eeo8KCyVerC" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=oso95/scroll-world&type=date&legend=top-left&sealed_token=rsHNX9eWfbhlu820oC1dzsc66Y8UZI4dawuHvAUlbn36F0gwOWXRDi-Qq4QFopkoEJE7bzgXPUkAmSnmMcglxAo_rM7TvGDKFehk5MzprmeT2euDRbHnTQZIxEWwjjpGQ3nodpdblW6WjTssURtDxXO2MCVL_WgJ_WnCIoVbV8qhsB_Z-Eeo8KCyVerC" />
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=oso95/scroll-world&type=date&legend=top-left&sealed_token=rsHNX9eWfbhlu820oC1dzsc66Y8UZI4dawuHvAUlbn36F0gwOWXRDi-Qq4QFopkoEJE7bzgXPUkAmSnmMcglxAo_rM7TvGDKFehk5MzprmeT2euDRbHnTQZIxEWwjjpGQ3nodpdblW6WjTssURtDxXO2MCVL_WgJ_WnCIoVbV8qhsB_Z-Eeo8KCyVerC" />
</picture>
</a>

## ライセンス

MIT — 詳細は [LICENSE](LICENSE) を参照してください。
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# scroll-world

[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)

https://github.com/user-attachments/assets/b08e641e-985b-4bd4-83ff-6750272d0c37

Expand Down
89 changes: 89 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
# scroll-world

[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)

https://github.com/user-attachments/assets/b08e641e-985b-4bd4-83ff-6750272d0c37


这是一个面向 Claude Code、Codex 以及任何兼容 `SKILL.md` 的智能体的技能,可为任意行业或品牌构建沉浸式、随滚动擦洗播放的“飞越世界”落地页:随着页面滚动,镜头从每个场景外部飞入内部,再无剪辑地衔接至下一场景。整个过程是在一个生成的小世界中连续连贯的飞行(可以想象 Emons 物流网站的效果,只是可应用于任何主题)。

## 安装

### Claude Code — 作为插件安装(推荐)

```
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world
```

然后,只需提出制作一个滚动穿越世界的落地页,或调用 `/scroll-world`。

### Codex 和其他智能体 — 通过 skills CLI 安装

使用 [Vercel 的 skills CLI](https://github.com/vercel-labs/skills),它可以将技能安装到 Codex、Claude Code、Cursor 以及其他 20 多种智能体:

```bash
npx skills add oso95/scroll-world # pick your agent(s) when prompted
npx skills add oso95/scroll-world -a codex # or target Codex directly
```

在 Codex 中,使用 `$scroll-world` 调用该技能(也可以通过 `/skills` 浏览技能),或直接提出制作一个滚动穿越世界的落地页。

### 手动安装(直接放入技能目录)

将技能文件夹复制到智能体的技能目录:

```bash
git clone https://github.com/oso95/scroll-world
cp -R scroll-world/skills/scroll-world ~/.claude/skills/ # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/ # Codex
```

## 要求

- 已完成身份验证(`higgsfield auth login`)且拥有可用额度的 [Higgsfield CLI](https://higgsfield.ai)。
- `ffmpeg` / `ffprobe`,用于提取帧和编码。
- 安装了 Pillow 的 Python 3(用于移动端竖屏画布,也用于可选的透明场景背景抠图)。
- [Codex CLI](https://github.com/openai/codex)(可选)— 如果已安装,可以通过 Codex 内置的 `image_gen`(同一个 GPT Image 模型)生成场景静帧,费用计入 ChatGPT 订阅,而不是消耗 Higgsfield 额度。

## 功能

它使用 [Higgsfield](https://higgsfield.ai) 完成美术制作:生成风格统一的等距微缩场景(通过 Higgsfield 或 ChatGPT 订阅中的 Codex CLI 使用 GPT Image 2)以及镜头飞行动画(使用 Seedance 或 Kling 的图生视频功能,只采用能够锁定衔接帧的模型),再根据滚动位置擦洗播放——这与 Apple 滚动产品页面背后的技术相同。镜头确实在移动,滚动操作只负责控制时间进度。它**不依赖特定框架**:你会获得 Higgsfield 流水线、提示词模板和可移植的原生 JavaScript 擦洗引擎,可以放入纯 HTML、Next.js、Vue 或由 Python 提供服务的页面中,不预设任何技术栈。

调用该技能后,它会:

1. **向你提问** — 了解主题/行业和宣传重点、品牌素材(从 URL 导入、由你提供或让技能提出方案)、美术方向、镜头依次访问的场景、是否需要**移动端版本**(以 9:16 竖屏原生渲染第二套序列,专为手机构图,并非横屏影片的裁剪版),以及**预算**——展示各渲染档位、静帧来源和预估额度成本,并在生成任何内容之前征得批准。
2. **生成素材** — 为每个场景生成一张静帧和一段“飞入”镜头,并根据相邻场景实际渲染出的帧生成连接片段,使每处衔接的帧完全一致。若启用移动端版本,则会以同样方式并行渲染一套竖屏序列,并基于其自身的 9:16 渲染结果锁定衔接帧。
3. **完成接入** — 配置一个由配置驱动的滚动引擎,将整套序列作为一次连续飞行播放,并在手机上自动提供竖屏片段和封面图。

## 技能内容

```
skills/scroll-world/
├── SKILL.md the procedure + the seam rule + gotchas
└── references/
├── prompts.md intake checklist + every Higgsfield prompt template
├── pipeline.md copy-paste batch scripts (generate → frames → connectors → encode)
├── scrub-engine.js portable, config-driven scrub engine (blob-seek, lazy load, seam crossfade)
├── index-template.html a minimal standalone page that mounts the engine
└── knockout.py background knockout for floating scenes
```

## 说明

- 素材生成会消耗 Higgsfield 额度(N 个场景大约需要生成 N 张图片和 2N-1 段视频;移动端序列会使视频生成数量翻倍),并且需要一定时间——技能会在后台运行生成任务并轮询状态。CLI 不会直接显示单次生成的价格,因此技能会根据你的实时余额进行校准,并在消费额度前说明预估总成本。
- 生成的 `.mp4` / `.webp` 素材按项目制作,不会随本仓库分发。

## Star 历史

<a href="https://www.star-history.com/?type=date&repos=oso95%2Fscroll-world">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=oso95/scroll-world&type=date&theme=dark&legend=top-left&sealed_token=rsHNX9eWfbhlu820oC1dzsc66Y8UZI4dawuHvAUlbn36F0gwOWXRDi-Qq4QFopkoEJE7bzgXPUkAmSnmMcglxAo_rM7TvGDKFehk5MzprmeT2euDRbHnTQZIxEWwjjpGQ3nodpdblW6WjTssURtDxXO2MCVL_WgJ_WnCIoVbV8qhsB_Z-Eeo8KCyVerC" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=oso95/scroll-world&type=date&legend=top-left&sealed_token=rsHNX9eWfbhlu820oC1dzsc66Y8UZI4dawuHvAUlbn36F0gwOWXRDi-Qq4QFopkoEJE7bzgXPUkAmSnmMcglxAo_rM7TvGDKFehk5MzprmeT2euDRbHnTQZIxEWwjjpGQ3nodpdblW6WjTssURtDxXO2MCVL_WgJ_WnCIoVbV8qhsB_Z-Eeo8KCyVerC" />
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=oso95/scroll-world&type=date&legend=top-left&sealed_token=rsHNX9eWfbhlu820oC1dzsc66Y8UZI4dawuHvAUlbn36F0gwOWXRDi-Qq4QFopkoEJE7bzgXPUkAmSnmMcglxAo_rM7TvGDKFehk5MzprmeT2euDRbHnTQZIxEWwjjpGQ3nodpdblW6WjTssURtDxXO2MCVL_WgJ_WnCIoVbV8qhsB_Z-Eeo8KCyVerC" />
</picture>
</a>

## 许可证

MIT — 详见 [LICENSE](LICENSE)。