Motion Skills
← Skills
付費講解

網頁滾動展示

傾斜的瀏覽器視窗平滑滾過整個頁面。

貼上到 Claude Code、Codex、Cursor 或任何支援 Skills 的 Agent 中。

需要: Node.js 22+、FFmpeg、Chrome。不需要 API Key。

其他配色和畫面比例

網頁滾動展示 · 電光 · 9:16
配色: 電光 · 9:16
網頁滾動展示 · 墨黑 · 1:1
配色: 墨黑 · 1:1

同一個範本換了配色和畫面比例後渲染出的結尾畫面。

5 套配色

  • 墨黑
    ink
  • 紙白
    paper
  • 電光
    electric
  • 黑白
    noir
  • 沙色 · 預設
    sand

在提示詞裡寫上配色名稱就能切換,也可以自訂強調色、背景色和文字色。

安裝提示詞
閱讀 https://claude-motion.com/skills/browser-scroll/install.md,依說明安裝「browser-scroll」Skill,然後用它做出第一支影片。

貼上到 Claude Code、Codex、Cursor 或任何支援 Skills 的 Agent 中。

範例提示詞
Use the browser-scroll skill with our full-page screenshot assets/home-full.png, url "fable.dev", caption "Redesigned from the ground up". Flat, ink theme, 9:16.
風格提示詞(Claude Motion 或 Opus 5.5)
Make an 8-second 16:9 website showcase for [who will watch, e.g. customers and the press], playing [where, e.g. the launch post]. Use only the headline and the full-page screenshot I give. Sand background.

Bold text with the headline sits on the left. On the right, a browser window with the page settles in, tilted slightly in 3D. The page scrolls smoothly from the hero down to the footer while a small cursor drifts over it. End frame: the tilt relaxes on the footer.

Headline: [e.g. "The new homepage, live today"]
Attach: [a full-page screenshot of your site]

無需安裝:貼到 Claude Motion(Team 或 Enterprise),或直接傳給 Opus 5.5,就能得到相近的風格。每次執行結果會有差異;用 Skill 則每次結果一致。

同系列更多

裝置介面 →