GitHub Research · 2026-09-04

Scroll-driven Web Design
GitHub 專案地圖

以 oso95/scroll-world 為比較基準,優先搜尋近一年新出現、低知名度但高度同型的專案,再補上成熟的實作底層。

24 個 Repository(含基準) 優先來源:GitHub/官方 README/Issue 排除中文網站來源 相似度為研究判斷,非自動 benchmark

最可能找回的專案

「你記得近一年出現、而且不只是熱門老牌函式庫」這條線索,最符合下列排序。這是基於公開日期、產品定位與實作重疊度的推論,不是對個人記憶的證明。

最高把握
#1 · 最可能的名稱

nateherkai/scroll-craft ↗

2026 年 8 月 21–22 日才公開,與 scroll-world 同樣採用 Agent Skill 工作流;它的八種 page grammar 裡還直接包含 continuous world,並把 scroll 定義成完整的 timeline。

時間完全符合「最近看過」 同樣由 coding agent 產生電影式 scroll-driven 網站 同樣依賴影片/frame scrub 與 ffmpeg 類管線 不是只提供 animation API,而是完整設計與驗證流程
#2 · 功能形態最像

AIwithhassan/lets-scroll ↗

README 描述的 AI camera path、場景鏈、真實首尾影格 connector clips、桌機/手機 scrub engine,與 scroll-world 幾乎同型。

最接近「連續穿越世界」成品 但目前無足夠證據確認正式 fork/衍生關係
#3 · 程式血緣最直接

agiwhitelist/auteur ↗

它的 README 明確寫出 scroll-flight-engine.js 是 adapted from scroll-world (MIT)。若你記得的是「明顯像同一引擎、但包裝更完整」,它非常可能。

有明示 attribution,不靠外觀猜測 新增 WebGL、asset sourcing、anti-slop 與 motion QA
判定
先打開 scroll-craft。 若畫面或 README 不像你記憶中的專案,下一個依序檢查 lets-scroll、auteur、cinematic-scroll-skill。這四個比單純列出 GSAP、Lenis 等熱門函式庫,更符合「近期、很像 scroll-world」的描述。

完整 Repository 比較表

預設依研究排名排列。可搜尋名稱、描述或 tag,並按類型、近期訊號篩選。分數衡量的是與 scroll-world 的工作流/輸出相似度,不代表品質。

Rank Repository 類型 相似度 核心方法 差異/適用情境 時間訊號
REF oso95/scroll-world
Agent SkillAI videoworld-flightffmpeg
基準專案
100極高
比較基準
Agent Skill;AI 生成場景與連續鏡頭,透過影片逐幀/currentTime 與捲動位置同步,形成穿越世界的 camera flight。 本頁所有相似度均以此專案的輸出、媒體管線、runtime 與 Agent 整合方式作比較。 原始參考
1 nateherkai/scroll-craft
Claude Codecontinuous worldPlaywright QA2026 新作
Agent Skill/網站生成器
94極高
最可能是你在找的
Claude Code skill,把 scroll 當作完整時間軸;支援影片逐幀 scrub、pinned sections、horizontal rails,以及八種 page grammar,其中包含 continuous world。 比 scroll-world 更廣:不只世界飛行,也涵蓋 editorial、gallery、typographic poster 等型態,並以 headless browser 驗證 dead scroll、對比與影片解碼。 2026-08-21/22 公開;2026-08-25 進入趨勢榜
2 AIwithhassan/lets-scroll
AI videoworld-flightmobile chainscrub engine
AI world-flight 生成器
93極高
功能形態最接近
由 AI 生成連續 camera path、世界場景與 connector clips,再用可攜式 scrub engine 把桌機與手機影片鏈接到捲動進度。 README 呈現的工作流程幾乎與 scroll-world 同型,但目前沒有足夠公開證據可斷言它是 fork 或正式衍生專案。 近期、小型、同型候選
3 agiwhitelist/auteur
direct lineageWebGLGSAPquality gates
Agent Skill/電影式網站導演
90極高
技術血緣最直接
從 commit-sheet、素材生成、WebGL/GSAP/Lenis 建置,到 slopscan 與 motionqa 上線門檻的完整電影式網站流程。 README 明確表示 scroll-flight engine 改編自 scroll-world;但整體範圍更廣,包含 WebGL、粒子、資料視覺化與多頁產品。 2026-08 近期出現
4 prantikmedhi/scroll-earth
Google FlowVeoworld-flightzero-dependency
AI world-flight 生成器
88高
高度相似
同樣以共享的實際影格銜接連續鏡頭,使用 Google Flow Imagen/Veo 與零依賴 JS scrub engine,另支援原生 9:16 手機版本。 媒體供應鏈改用 Google Flow/gflow-cli;社群規模仍小,較適合研究實作而非直接採用成熟生態。 2026 新作/低知名度
5 MustBeSimo/cinematic-scroll-skill
multi-agentstoryboard3D tiltquality gate
多 Agent Skill/網站生成器
84高
強力近期備選
從 brief、視覺系統、motion storyboard 到 pinned chapters、parallax、3D tilt 與 release page 的五階段 gated pipeline。 偏完整 creative-direction system,不只 camera-flight;較適合需要設計 token、theme 與品質檢查的團隊。 至少於 2026-06-01 已公開
6 tahabahrami/artistic-web-designer
normalized progresskeyframesreversibleAgent Skill
Agent Skill/藝術指導
82高
高度相似
以單一 normalized progress 驅動純 render functions,先核准 key frames,再生成 artwork;強調可逆、重新整理穩定與 state determinism。 更偏方法論與可控動畫狀態;世界飛行只是可做的形式之一,而非唯一主軸。 2026 新作/極小型
7 artem-techman/scroll-attached-website
canvasproduct heroHiggsfieldNext.js
Agent Skill/產品 Hero
80高
近期且非常接近
從產品參考圖產生 start/end frames 與轉場影片,再抽成 frames,做成 full-screen canvas scroll-scrub hero。 鏡頭聚焦單一產品的組裝、環繞或解構,而不是跨多個世界場景的長距離 camera flight。 2026-08-17 左右出現
8 KubeezMedia/kubeez-scroll-world-video
demovideo scrubtransition framesbrand workflow
參考實作/Demo
79中高
同型實作參考
以主世界圖、各場景圖、dive clips 與真正的首尾影格轉場,將影片 currentTime 映射到捲動位置。 比較像具體品牌 demo 與供應商工作流,不是通用 Agent Skill;適合直接閱讀成品實作。 小型參考專案
9 Black-Line-Ops/scroll-scrub-hero
locked cameraWebP framescontact sheetKling
AI 影片/Frame Hero
77中高
近似製作管線
照片與一句話 → storyboard → keyframes → contact sheet 核准 → first/last-frame tween → WebP frames 與 canvas scrub。 刻意鎖定鏡頭、讓主體變形;scroll-world 則是鏡頭穿越世界。對產品變形 hero 更合適。 近期活躍
10 TidyFactor/Cinematic
single-fileluxuryGSAPLenis
Agent Skill/單頁電影式網站
76中高
廣義近似
通用 Agent Skill,製作單檔 luxury landing page;以 GSAP、Lenis 與 canvas frame sequence 組合 scroll-driven product film。 偏 Apple/精品產品式展示,世界場景連續性不如 scroll-world 專門化。 2026-08 仍有活動
11 OpaceDigitalAgency/ai-ui-ux-motion-engine
multi-agentmotion engineR3FFramer Motion
多 Agent Motion Engine
70中高
較廣的替代方案
涵蓋 scroll-linked video、canvas image sequences、3D、GSAP、Framer Motion 與 R3F 的多代理網站設計/動效流程。 範圍很廣,需自行選定 cinematic workflow;不會像 scroll-world 一樣把 camera-flight 作為單一清楚的輸出。 持續版本化
12 hoodini/ai-agents-skills
monorepovideo-to-pageffmpegself-contained HTML
Agent Skills 合集
69中高
可拆用的工作流
包含 parallax-landing-page、video-to-landing-page、cinematic-scrub-landing 等技能,將短片抽幀並做成 sticky scroll narrative。 是技能 monorepo,不是一個聚焦的 scroll-world 替代品;優點是可挑單一 workflow 使用。 近期技能集合
13 MengTo/Skills
recipesvisual sequencestorytellingAgent Skills
Agent Skills 合集
68中高
設計教學型替代
收錄 scroll-scrubbed-visual-sequence、cinematic-scroll-storytelling、scroll-world-storytelling 等可逆視覺序列技能與示例。 更像可組合的設計/coding recipes,不包含 scroll-world 那麼完整的 AI 影片供應鏈。 近期活躍集合
14 tangyistudio/scroll-frame-sequence
zero-dependencyframe sequencemobile2026 新作
低階 Frame Sequence Engine
66中高
近期引擎候選
零依賴的 scroll-driven image sequence player,支援 hold loops、手機直式平移、三層載入與診斷 overlay。 只解決 runtime 播放層,不生成場景、影片或故事;適合把 scroll-world 的媒體產出接到更精簡的前端引擎。 2026-08-13 左右出現
15 btahir/react-kino
Reactcomponentsaccessibilityzero-dep core
React Component Library
60中
React 開發首選之一
以 Scene、Reveal、ScrollTransform、Parallax、VideoScroll、HorizontalScroll 等元件建立電影式捲動敘事;核心捲動數學零依賴。 不負責 AI 素材生成,也不是 camera-flight workflow;但能快速把同類互動組合進 React/Next.js。 近期活躍;新型元件庫
16 greensock/gsap-skills
officialAgent SkillsScrollTriggerGSAP
官方 Agent Skills/動效基礎
58中
Agent 實作基礎
GSAP 官方為 AI coding agents 提供的技能集合,其中包含 ScrollTrigger 專用指引與最佳實務。 是底層動效知識與 implementation skill,不會替你生成連續世界或素材。 官方、持續維護
17 dkaoster/scrolly-video
videoReactVueSvelte
影片 Scroll Scrub Library
57中
影片播放層替代
以 0–1 progress 控制影片播放,支援 plain HTML、React、Vue 與 Svelte,專門處理 scroll-controlled video。 只做影片控制,不做 AI 場景鏈、轉場生成或網站 art direction。 成熟、專門化
18 14islands/r3f-scroll-rig
React Three FiberWebGLDOM sync3D
Real-time 3D Scroll Rig
55中
即時 3D 替代路線
同步 DOM 與 React Three Fiber 3D scene;ScrollScene 追蹤 DOM 尺寸/位置並把 scroll state 傳入 WebGL。 用即時 3D 取代預先生成影片,因此可互動性高但開發成本、GPU 與跨裝置測試負擔也較高。 成熟、持續發布
19 greensock/GSAP
animationScrollTriggertimelineproduction
動效基礎函式庫
52中
成熟底層方案
跨框架動畫工具;ScrollTrigger 是大量 pinned、scrub、timeline 與 horizontal scroll 網站的常見底層。 需自行建立敘事、素材管線、效能策略與 QA;不是開箱即用的 scroll-world 生成器。 高度成熟、官方
20 darkroomengineering/lenis
smooth scrollnative scrollGSAP syncWebGL sync
Smooth Scroll 基礎函式庫
45基礎關聯
常見搭配元件
輕量 smooth scrolling,保留原生捲動語意並方便與 GSAP/WebGL 同步。 本身不提供故事、timeline 或影片 scrub;通常是 scroll-craft、auteur 類專案的輔助層。 成熟、廣泛採用
21 russellsamora/scrollama
scrollytellingIntersectionObserverstickyeditorial
Editorial Scrollytelling Library
42基礎關聯
章節式敘事替代
以 IntersectionObserver 管理 step-based scrollytelling 與 sticky graphic,常用於新聞、資料故事與段落驅動視覺。 適合「每段文字觸發一個狀態」,而非 scroll-world 的連續電影鏡頭。 成熟、輕量
22 css-scroll-driven/scroll-timeline-builder
CSSScrollTimelinevisual builderzero-dependency
Native CSS 視覺化工具
40基礎關聯
新式原生方案
零依賴視覺化 builder,建立 CSS scroll()/view() timelines,提供 live preview、supports fallback 與 reduced-motion 輸出。 聚焦原生 CSS 動畫,不處理影片世界與 Agent workflow;適合較簡潔、效能導向的 scroll animation。 2026 新作/低知名度
23 flackr/scroll-timeline
polyfillWAAPIScrollTimelineViewTimeline
Web Platform Polyfill
38基礎關聯
標準 API 補強
ScrollTimeline/ViewTimeline polyfill,讓 WAAPI 與 CSS scroll-driven animations 在支援不足的環境中使用。 是標準 API 相容層,不是設計工具、網站生成器或素材管線。 成熟基礎設施

依目標選擇

最相似,不一定最適合你的技術棧。以下用輸出需求反推 repository。

02 / DIRECT LINEAGE

要沿用 scroll-world 技術

auteur 有明確 attribution,並加上 GSAP/WebGL 與可執行 QA gate。

相似度判斷方法

避免只靠 star 數或關鍵字,把「很紅」誤當成「很像」。

1. 輸出形態是否產生 continuous camera-flight、frame scrub、pinned narrative,或只是一個 generic animation API。
2. 素材管線是否包含 AI 圖像/影片、start/end frames、connector clips、ffmpeg 抽幀與手機媒體鏈。
3. Runtime是 video currentTime、canvas frames、WebGL 即時 3D、GSAP timeline,還是 Native CSS ScrollTimeline。
4. Agent 整合是否有 SKILL.md、Claude Code/Codex 工作流、生成指令、設計規則與可執行驗證。
5. 新近性優先查看 2026 年 6–8 月公開或開始活躍的小型 repo,而不是只列多年成熟的熱門庫。
6. 可核實血緣只有 README、license 或 commit 明示來源時,才標記「直接承襲」;外觀相近不等於 fork。
7. 生產可用性檢查 reduced motion、mobile、preload、contrast、解碼、headless screenshot 與 performance gate。
8. 人工評分表中 0–100 是依上述維度的研究性排序,目的在縮短你檢查候選的順序,不是客觀排名。

關鍵證據與來源

主要採 GitHub repository、README 與 Issue;只在確認發布時間與趨勢訊號時使用非中文的次要索引。

ScrollCraft GitHub ↗

確認 eight page grammars、continuous world、headless browser 驗證與安裝方式。

Auteur GitHub ↗

README 明示 scroll-flight engine adapted from scroll-world (MIT),是直接技術承襲的重要證據。

資料快照:2026-09-04(Asia/Taipei)。GitHub stars、forks、README 與專案狀態會持續變動,因此表格刻意以「成熟度/時間訊號」代替大量易過期數字。未經明示 attribution 的相似專案,不在本報告中聲稱為 fork。