滚动叙事动效
React动画ScrollStorytellingMotion更新于 2026-08-14
使用场景： 构建长页面滚动叙事体验：产品发布页讲故事、说明性叙事、数据故事与「Apple 风格」滚动页。
安装
npx skills add scroll-driven-storytelling克隆
git clone https://github.com/skillhub-community/scroll-driven-storytelling.git描述
面向叙事滚动体验的框架。核心模式：一串「场景」，每个在滚动区间内固定，内部内容按关键帧 scrub——文字淡出、下一场景推入、图片交叉淡变或视差、进度轨告知读者所处章节。包含 SceneManager 组件，处理固定时序、scrub 映射（0-100% 滚动 ↔ 关键帧进度）与场景间的平滑过渡。
附带三个可运行的叙事：产品功能叙事（hero → 问题 → 方案 → 演示 → CTA）、数据故事（滚动时数字增长、图表绘制）与章节式长文（粘性章节标题+阅读进度条）。提供移动端布局指引（固定场景缩短、触屏上 scrub 变为点击翻页器）与性能要点（只动画 transform/opacity、预载场景图、谨慎用 will-change）。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖1