Communitygithub.com

scroll-film-site

用於建立或增強個人或作品集網站,使其像電影膠捲般捲動(類電影式滾動),包括自訂游標動畫與部署至所有者帳戶。

scroll-film-site 是什麼?

此技能專為開發者設計,協助建立或強化個人/作品集網站,使其具備「類電影式」的視差滾動體驗,而非單純播放影片。技能強調使用 CSS sticky 定位與滾動驅動動畫(scroll-driven animations)為核心,僅在 CSS 無法滿足固定或捲動場景時才考慮使用輕量級的滾動觸發函式庫。它提供一套清晰的規則,例如限制場景數量(4-6 個)、禁止預設的整頁滾動捕捉(mandatory snap),以及採用漸進增強的方式加入自訂游標效果。此技能支援所有主流框架,最終必須部署於所有者帳戶下,並確保內容在無 JavaScript 時仍可閱讀,且尊重使用者對減少動畫的偏好設定(prefers-reduced-motion: reduce)。透過此技能,開發者可快速打造出具有電影節奏感、視覺豐富且效能優異的個人網站。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Balllvin/balllvin-stack/tree/HEAD/skills/scroll-film-site

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

滾動電影風格個人網站

建立個人或作品集網站,讓滾動控制播放頭。不是影片檔案。節奏愉悅、完全響應式設計、漸進增強。

權限

  1. 優先使用 CSS sticky 場景和滾動驅動動畫。僅在 CSS 無法實現固定或捲動時才使用時間軸函式庫。
  2. 遵循儲存庫的藝術方向或品味技能。不要使用與該品味衝突的通用前端套件。
  3. 如果已安裝官方的 scroll-timeline 技能,則使用它們。
  4. 僅列舉想法(是/可能):模糊淡入、眩光懸停、滾動進度、延遲指標、噪點、光線。使用 CSS 或時間軸函式庫重新實作。不要貼上其他框架的動畫基本元素。
  5. 尊重 prefers-reduced-motion: reduce — 靜止畫面、內容順序不變、無依賴動畫的行動呼籲。

攝影機階梯(停在第一個可行的階梯)

  1. 刪除冗餘場景。
  2. CSS:sticky 場景、animation-timeline: view() / scroll()、僅使用 transform 和 opacity。
  3. 僅在 CSS 無法固定或捲動一個場景時,才使用滾動觸發函式庫。柔和捲動、線性緩動、卸載時終止。僅對 transform 和 opacity 進行動畫。
  4. 不要加入第三方平滑滾動劫持、畫布幀序列、3D 英雄區域或 <video> currentTime 捲動。

場景語法

  • 最多 4-6 個場景。相鄰的剪輯不得使用相同的佈局系列。
  • 開場、保持(固定並捲動)、剪輯、閉幕。
  • 固定模式:一個高大的捲動器加上一個固定的全視窗靜止畫面。
  • 無整頁強制滾動捕捉。
  • 內容必須在禁用 JavaScript 時可閱讀。無滾動劫持。無每個 tick 的框架狀態更新(滑鼠移動或滾動時)。

個人網站內容(根據需求調整)

典型的章節:身份、我建立的東西、目前的產品、連結(他們提供的真實個人檔案)、一個明確的行動呼籲。 連結只能是真實 URL — 永遠不要編造個人檔案。如果缺少,請詢問真實的。

游標

允許作為漸進增強加入自訂游標,具有彈簧延遲或眩光效果。為減少動畫模式和觸控保留原生游標。建議使用 pointer 監聽器加上 requestAnimationFrame 節流,而非在每次移動時更新框架狀態。

技術棧預設

  • 使用現代網頁框架即可。
  • 部署至所有者的託管帳戶,而非不同團隊的帳戶。
  • 編碼遵循本地編碼預設:實作,然後二次審查,並設置檢查常規。

完成定義

  • 所有者的帳戶下有一個可用的 URL
  • 滾動感覺像電影(愉悅,而非生硬)
  • 響應式;減少動畫模式下為靜止畫面
  • 僅包含真實連結
  • 上線時回報該 URL

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能