CINEMATIC FLOW

Story Sequence Template

这版适合需要章节推进感的案例叙事，但视觉语气不再依赖 neon 冲击，而是用连续章节、稳定停驻和受控进度来建立“像短片一样”的阅读感。

Frame 01

Define one business question and one target signal.

Frame 02

Map UX flow and remove unnecessary decision branches.

Frame 03

Build a thin MVP and instrument critical events.

Frame 04

Iterate from analytics + qualitative feedback loop.

MOTION CONTRACTS

Scroll narrative 常见的四种 signal。

Chapter reveal、pinned scrub、frame focus、exit handoff。

Chapter Reveal

When

用户滚动进入叙事区，章节列表开始出现在视口中时。

Then

章节卡按阅读顺序逐步建立焦点，让故事从“总览”进入“当前帧”。

Duration

260ms enter / 70ms stagger

Easing

cubic-bezier(0.22, 1, 0.36, 1)

Reduced Motion

去掉位移，只保留透明度变化。

Pinned Scrub

When

用户在章节区持续滚动时。

Then

右侧固定信息面板平滑更新当前帧和进度，让用户理解故事正在推进，而不是跳切。

Duration

scroll-linked / 1 frame RAF sync

Easing

linear to scroll

Reduced Motion

直接切换当前帧，不做平滑进度过渡。

Frame Focus

When

某一章成为当前最重要的阅读节点时。

Then

这一章提升不透明度并微微上提，建立明确的“当前镜头”感。

Duration

160ms opacity / y

Easing

ease-out

Reduced Motion

仅提升对比度，不做上提位移。

Exit Handoff

When

用户准备从故事模板跳到规则页或下一个模板时。

Then

继续动作被明确强调，帮助叙事自然交接到下一步，而不是突然中断。

Duration

120ms link emphasis

Easing

linear

Reduced Motion

保留颜色变化，不引入任何补充动画。