scroll-cinema

用途

Scroll Cinema 用于生成以滚动为叙事引擎的高级滚动叙事（scrollytelling）网站。它并非通用动画技能、3D 产品查看器或滚动劫持模式，而是产出读者“穿行于章节之间”的页面：每个章节的入场都经过编排，配色在章节间流动，内容背后有一块随光标与滚动进度呼吸的环境着色器画布。

主要能力

三种库协同工作：Lenis 提供平滑滚动，GSAP ScrollTrigger 编排电影感章节揭示与流体色彩过渡，Three.js 渲染随光标位置和滚动进度反应的绘画质感背景。

四种输出模式：

模式	输出	使用库
chapter-reveal	多章节叙事页，含电影感入场与流体色彩过渡	Lenis + GSAP ScrollTrigger + OKLCH 色彩系统
painted-backdrop	响应光标与滚动的 Three.js 着色器画布，可独立或嵌入	Three.js + GLSL + 滚动驱动的 uniforms
full-cinema	完整电影感滚动叙事站点，整合全部系统	Lenis + GSAP + Three.js + 色彩系统
catalog	三种着色器预设并排渲染，共用一个 WebGL 上下文	Lenis + GSAP + Three.js（scissor test）

三种着色器预设：painted-dots（点阵网格，鼠标涟漪，滚动驱动密度，最轻量，编辑感、干净）、watercolor（NPR Kuwahara 风格边缘保留滤镜加程序化噪声，中等开销，有机、绘画感、温暖）、domain-warp（渐进式正弦域扭曲，最轻量，流动、抽象，高迭代时呈迷幻感）。

色彩系统：章节间使用 OKLCH 插值实现滚动驱动的色彩过渡，避免 sRGB 插值在色相过渡时产生浑浊的棕色中间色。每个章节通过 data 属性定义调色板，GSAP ScrollTrigger 对经 @property 注册的 CSS 自定义属性做补间以实现 GPU 加速动画，在不支持 OKLCH 时回退到 HSL 插值。

四条电影感缓动曲线：cinematicSilk（0.45,0.05,0.55,0.95，奢华慢入慢出，适合主视觉揭示与标题入场）、cinematicSmooth（0.25,0.1,0.25,1，自然减速，适合章节淡入与内容块）、cinematicFlow（0.33,0,0.2,1，类 Apple 动量，适合视差层与镜头移动）、cinematicLinear（0.4,0,0.6,1，细微缓动，适合色彩变化与背景不透明度）。

使用方式

通过生成脚本创建页面。完整电影感叙事站点：

python3 ~/.claude/skills/scroll-cinema/scripts/scroll_cinema_generator.py \
  --mode full-cinema \
  --shader painted-dots \
  --chapters 5 \
  --pacing medium \
  --output story.html

仅章节揭示与色彩过渡（不含 Three.js）：

python3 ~/.claude/skills/scroll-cinema/scripts/scroll_cinema_generator.py \
  --mode chapter-reveal \
  --chapters 4 \
  --output chapters.html

独立响应式着色器背景：

python3 ~/.claude/skills/scroll-cinema/scripts/scroll_cinema_generator.py \
  --mode painted-backdrop \
  --shader watercolor \
  --output backdrop.html

三种着色器预设并排展示：

python3 ~/.claude/skills/scroll-cinema/scripts/scroll_cinema_generator.py \
  --mode catalog \
  --output catalog.html

也可以直接描述概念，让 Claude 基于模板与参考文件生成，例如：/scroll-cinema a story about the Mediterranean told in five chapters — from dawn on the Aegean to dusk on the Strait of Sicily。

核心初始化顺序（该技能最关键的模式）：先注册 GSAP 插件，再以 autoRaf: false 初始化 Lenis 并由 GSAP 驱动循环，将 Lenis 接入 GSAP ticker 共享单一动画帧，最后用 lenis.on('scroll', ScrollTrigger.update) 同步滚动位置。

// 1. Register GSAP plugins FIRST
gsap.registerPlugin(ScrollTrigger);

// 2. Init Lenis with autoRaf OFF — GSAP drives the loop
const lenis = new Lenis({ autoRaf: false });

// 3. Connect Lenis to GSAP ticker (single animation frame)
gsap.ticker.add((time) => {
  lenis.raf(time * 1000); // GSAP=seconds, Lenis=ms
});
gsap.ticker.lagSmoothing(0);

// 4. Sync ScrollTrigger with Lenis scroll position
lenis.on('scroll', ScrollTrigger.update);

着色器 uniforms 由编排层提供：uTime、uMouse（归一化光标位置，lerp 0.08）、uScroll（Lenis 平滑滚动进度 0.0–1.0，lerp 0.05）、uVelocity（滚动速度幅度，钳制 ±3 后归一化，lerp 0.10）、uChapter（平滑章节索引浮点，lerp 0.03）、uMobile（视口 ≤768px 时为 1.0）、uResolution、uChapterHue / uChapterLightness（章节色彩同步，lerp 0.03）。

章节结构：每个章节是一个带粘性内容的 <section> 元素，最小高度随 pacing 缩放，入场动画在章节滚动距离的前 30% 内完成。

CDN 版本（固定以保证稳定）：Lenis 1.2.3、GSAP 3.12（含 ScrollTrigger、CustomEase）、Three.js r170。

校验命令：

python3 ~/.claude/skills/scroll-cinema/scripts/validate_scroll_cinema.py output.html

校验项包括 Lenis/GSAP/Three.js CDN、autoRaf: false、gsap.ticker.add 中的 lenis.raf、滚动回调中的 ScrollTrigger.update、prefers-reduced-motion 媒体查询、画布 aria-hidden、无 setInterval 动画、viewport meta、无 transition: all、语义化 section、--sc-* 自定义属性、无独立 requestAnimationFrame、uniforms 中无原始滚动值、无直接 backgroundColor 动画、SRI 完整性哈希、清理函数、带 toggleActions 的滚动驱动入场动画、入场动画的 reduced-motion 门控等。

适用场景

适合需要以滚动推进叙事、强调章节化阅读体验与电影感视觉的页面，例如品牌故事、长篇图文叙事、概念展示页。若滚动驱动叙事，用 scroll-cinema；若画布本身就是体验，则用 threejs-particle-canvas。它可与 conductor-motion（行为模拟）、rocaille-shader（域扭曲 GLSL 上游）、grainient（CSS 表面效果）、shape / design-md（上游设计上下文）等技能协作。

限制

仅支持原生 HTML + CSS + JS，不使用 React、Vue、Svelte；输出为单文件 HTML，仅通过 CDN 引入依赖。必须使用单一动画循环（GSAP ticker 驱动 Lenis、ScrollTrigger 与 Three.js 渲染），不得使用独立 rAF。必须支持 prefers-reduced-motion：所有动画效果立即显示最终状态，着色器动画冻结，Lenis 回退到原生滚动。Three.js 画布必须作为滚动内容包裹层的兄弟节点而非子节点，且为 aria-hidden="true"，文本内容以 HTML 覆盖层呈现，确保无 WebGL 时内容仍可访问。设备像素比桌面端上限 2.0、移动端 1.5。SPA 场景需在卸载时对 Lenis、ScrollTrigger、Three.js 显式调用 .destroy()，并通过 window.__scCleanup 暴露清理函数。

技能介绍

用途

主要能力

使用方式

适用场景

限制