cinematic-motion

cinematic-motion

统一的视觉身份：制片厂印刷品上的片头字幕——滚动条是放映机，纸张是银幕，而电光蓝是唯一的光。

1. 配色（固定）

• 画布：#F7F5E7（温暖的制片厂纸张——绝不用白色或灰色）。卡片：#FCFBF4。细分隔线：rgba(18,18,18,0.14)。
• 墨色：#121212（所有主要文字）。弱化色：rgba(18,18,18,0.55)（标签、次要内容）。深色场景中反转：墨色画布、纸色文字、rgba(247,245,231,0.16) 细分隔线。
• 强调色——仅限一种：#0F4BFD（电光蓝）。用途：强调词、一条细分隔线、数据、一处填充。这就是全部预算。
• **画布翻转构成节奏：**纸色场景与墨色场景交替，并穿插一个全蓝场景。场景切换是标志性特色；每页最多两个墨色场景（索引和路线图使用墨色），一个蓝色区块。
• 禁用渐变（纸张就是纹理——干净、平坦，无颗粒、无混色），禁用第二种强调色，禁用纯黑色（#000），禁用白色区块。

2. 字体排印（固定）

• **展示字体：**紧凑的无衬线字体（Inter Tight），字重 500–700，句首字母大写。禁用衬线字体和斜体——强调词仅凭颜色吸引注意力。
• 标题：clamp(3rem, 9vw, 8rem)，字重 600，行高 0.94，字距 −0.04em。每个标题只用一个蓝色强调词，绝不使用两个。
• 场景 h2：同一字体系列，字重 600，clamp(1.6rem, 3.4vw, 2.6rem)，字距 −0.02em，配搭等宽字体引导标签。
• **标签／元数据：**等宽大写字体（ui-monospace/IBM Plex Mono），letter-spacing: 0.14em，10–11px，弱化色。编号引导标签：01 — THE LEAK、02 — THE INDEX。
• 正文不小于 14.5px；正文使用无衬线字体，字重 400，行高 1.65–1.7，次要内容使用弱化色。
• CTA 使用胶囊样式（此设计方案允许）：墨色胶囊，悬停时蓝色填充向上扫入（::before + transform: translateY 过渡）。除导航外，每个视口最多一个胶囊。

3. 构图（固定）

• **影片结构：**带实时产品界面的主视觉区（纸色）→ 陈述式简介（纸色）→ 固定索引（墨色）→ 跑马灯文字（纸色、描边字）→ 陈述式简介（全蓝）→ 拖动式轮播（纸色）→ 详情手风琴（纸色）→ 固定路线图（墨色）→ 佐证内容（纸色）→ 收尾（蓝色）→ 页脚（墨色）。
• 一个固定索引 + 一个固定路线图 = 总共两个固定区块——预算上限（参见 taste-gsap：仅限桌面端，以 += 结束）。
• 巨大的滚动索引数字（63% 节拍）固定显示，并随滚动进度计数；路线图固定显示，滚动时四个步骤沿轨道向上移动，轨道填充逐步变蓝（步骤依次显现，绝不交叉淡入淡出切换）。
• **无需视频也能营造主视觉存在感：**实时产品界面——用 CSS 构建的仪表板（实时跳动的计数器、漏斗条、播放中的波形、数据单元格），无需任何视频帧也能呈现产品影像感。所有循环动画均使用 CSS 关键帧实现，在减少动态效果模式下禁用；计时由 JS 间隔器驱动，并设置门控。
• 手风琴使用原生 <details>/<summary>——默认打开第一项，+ 徽章旋转，无需 JS 即可正常工作，从设计上确保无 JS 时也完整可用。
• 主视觉氛围：蓝色粒子场（canvas，约 60 个点，向上漂移，透明度 ≤ 0.16）和一个虚线轨道环，缓慢旋转——两者均由 JS 门控，并在减少动态效果模式下禁用。
• 索引数字：超大字号，字重 600，位于场景角落——这正是那些大杂烩工具包通常放置图片的位置。

4. 内容处理

• 编号引导标签保持影片般的节拍结构：01 — THE LEAK → 05 — THE CLOSE。页脚作为尾注：A SKITTIE FILM — PRODUCED IN 60 FPS。
• 文案安静、自信，富有电影感：短句，不用感叹号，不用夸张词。每个标题中的一个蓝色强调词承载情绪。
• 不用表情符号。不用图标——仅使用排版符号（✳）和 CSS 绘制的迷你数据可视化（漏斗条、波形条、群组网格——墨色图形搭配一个蓝色单元格）。
• 每个视口只设置一个主要 CTA；次要操作使用带蓝色下划线的等宽文本链接。

5. 动效（灵魂 — 参见 taste-gsap）

• 页面运行在 gsap.context + matchMedia 外壳中：所有动画都仅在 (prefers-reduced-motion: no-preference) 下运行，复杂动效则仅在 (min-width: 768px) 下运行。
• **标志性时刻，按顺序排列：**预加载动画（百分比计数器 ≤ 2s，随后滑出；仅在 JS 和动效均启用时显示——CSS 中默认隐藏）→ Hero 入场时间轴（expo.out，遮罩文字行向上升起，产品屏幕从右侧滑入，≤ 1.4s）→ 索引区固定：巨大数字通过滚动控制并带有吸附效果，从 0 → 63 计数，线条交错淡出，细进度线填满 → 跑马灯（CSS，描边样式）→ 拖动轮播（Draggable + inertia，bounds 根据 scrollWidth − offsetWidth 计算，无 JS 时回退为带强制吸附的原生滚动，光标变为蓝色「DRAG」徽章）→ 路线图区固定：四个步骤沿轨道升起，同时蓝色填充向上延伸，通过滚动控制 → 进入视口时数字递增。
• **氛围层：**Lenis 平滑滚动（参见 taste-gsap §1）、差值混合自定义光标（使用 quickTo 进行插值，在交互元素上悬停时放大，在轮播区显示 DRAG 标签，在粗指针设备上隐藏）、磁吸式主 CTA（吸附距离 ≤ 5px）、导航栏中的滚动进度细线。Hero 的实时计数器按固定间隔跳动——营造廉价的「鲜活感」；启用减少动效时，它会和其他动效一起停止。
• 动效时长为 0.9–1.6s；缓动使用 power3.out / expo.out；滚动控制平滑度为 0.6–1。所有动效仅作用于 transform/opacity（参见 taste-gsap §3）。结尾标题中的强调词采用镂空描边样式（描边、填充透明）——这是一个完全静止的定格画面。
• 即使关闭 JS 或启用减少动效，页面也必须完整且美观——固定区折叠为上下堆叠的区块，轮播变为原生滚动吸附条，索引显示最终数值。静止画面若显得乏味，就算失败。

6. 检查清单（出现以下情况则页面不合格……）

• 使用任何渐变、任何第二强调色、纯黑或白色区块。
• 强调蓝色既用于整个区块，又用于结尾——全蓝场景只能有一个。
• 深色区块超过两个——索引区和路线图区专属深色。
• 标题没有蓝色强调词，或包含两个蓝色强调词。
• 使用任何衬线或斜体字体——此视觉风格仅使用 grotesk 字体。
• 跑马灯超过一个，或启用减少动效时跑马灯仍在运行。
• 没有编号引导语 / 文案中没有电影隐喻。
• 固定区总数超过两个、任何固定区出现在 768px 以下，或动画未通过 matchMedia 控制。
• 拖动轮播没有原生滚动吸附回退方案（关闭 JS 时），或无法通过键盘操作。
• 手风琴使用原生 <details>/<summary> 以外的实现方式——它必须在关闭 JS 时也能正常工作。
• Hero「视频」（或实时屏幕）在启用减少动效时仍持续播放动画。
• 预加载动画可能在未启用 JS 时显示，或在启用减少动效时运行。
• 自定义光标在触屏设备上可见，或内容依赖光标反馈。
• 使用动画布局属性，或 JS 失败时会永久隐藏内容的揭示动画。
• 页面吸引人的效果依赖动画——静止画面必须足以撑起页面。