用途:为落地页添加轻量滚动效果。默认从外部仓库 Rheinmir/uiux-asset 的 gallery 复制原始文件;若项目不允许引入外部库或文件,则使用本技能 assets/ 中的 7 个 vanilla 模式。
主要能力:覆盖滚动渐显、文字 stagger、重点高亮、导航收缩、返回顶部、随读目录(scrollspy)、轻量视差。gallery 含 64 个原始效果,可在线预览后整文件复制,保留首行署名注释,仅改内容、图片与颜色。
使用方式:先判断需求是否在范围内(不含重 GPU 模糊、时间轴、GSAP 复杂横向 pin);选择来源后复制或适配文件;按 design.md 替换颜色与间距 token,保留 data-se-* 名称;通过本地 HTTP 运行,用 playwright 验证滚动前后截图、.is-in 出现且无视差导致的横向溢出。需要整套离线可执行 git clone --depth 1 https://github.com/Rheinmir/uiux-asset。
限制:必须遵守 prefers-reduced-motion,开启时关闭全部过渡、平滑滚动与视差;reveal、stagger、highlight、TOC 共用一个 IntersectionObserver;导航、返回顶部、视差共用一个 rAF 节流的 scroll listener;视差速度建议 |v| ≤ 0.3,不用于需精确阅读的小字。超出范围的需求应明确告知用户。
适用场景:文档页、落地页等需要轻量滚动交互且不希望引入外部库的前端项目。