dsh-creation-mode 3.0.0 → 3.0.1

package/references/copy.md

@@ -0,0 +1,121 @@
+# 文案标准（字幕与标题）
+
+字幕不是文章。观众只有这条字幕停留的那一两秒，读不完也没有耐心读第二遍。
+
+默认要**具体**，不是**抒情**，也不是**口语**——口语只是换一种空话。
+
+---
+
+## 一、三条硬规则（save_storyboard 会直接校验）
+
+1. **单条字幕 ≤ 镜头时长 × 5.5 字。** 2 秒镜头约 11 字，5 秒镜头约 27 字。
+   超了就删内容，不要缩字号、不要压行、不要用「…」拖过去。
+2. **一条字幕只说一件事。** 两件事就拆两场。
+3. **至少一个可核查的具体信息。** 数字、专名、时间、地点、动作、前后对比。
+   一个都没有，说明这条还没想清楚，回去想清楚再写。
+
+---
+
+## 二、写法
+
+### 2.1 动词开头
+
+| 弱 | 强 |
+|---|---|
+| 支持多次修改 | 改到第七版，它还记着第一版 |
+| 提供快速导出 | 点一下，8 秒出片 |
+| 拥有丰富模板 | 193 种风格，挑到你满意 |
+
+### 2.2 句长要有变化
+
+整条都是四字格或六字格，读起来像广告词。长短交错才有呼吸：
+
+> 三秒一版分镜。改到第七版，它还记着第一版。
+
+前句 6 字，后句 12 字。节奏出来了。
+
+### 2.3 保留事实的强度
+
+- 「从 3.2 秒压到 0.8 秒」不许改写成「大幅提速」——那是稀释事实
+- 反过来，「大幅提速」也不许擅自补成具体数字——那是编数据
+
+**改写时只做减法。** 删掉不承载信息的包装语，不换同义词，不把几个词压成一个概括词。
+
+### 2.4 用户没说要「平实」
+
+用户没有明确说「写平实点」，就不要降低原有判断的强度。片名可以留白、可以有态度，
+但同样不许堆形容词。
+
+---
+
+## 三、禁止清单
+
+| 类别 | 例子 |
+|---|---|
+| 抽象名词堆叠 | 赋能、闭环、抓手、生态、颗粒度、维度、链路、矩阵 |
+| 四字格排比 | 化繁为简、由浅入深、层层递进 |
+| 空泛评价 | 极致、震撼、完美、惊艳、颠覆、前所未有 |
+| 连接词开场 | 首先、其次、此外、综上所述、值得一提的是 |
+| 万能句式 | 让我们一起…／这不仅…更是…／从…到… |
+| 语气词 / 网络语 | 啊呢吧啦、绝绝子、yyds、狠狠爱了 |
+
+---
+
+## 四、对照（左边会被打回）
+
+| 打回 | 通过 |
+|---|---|
+| 让我们一起探索这款产品如何赋能创作流程 | 三秒一版分镜。改到第七版，它还记着第一版 |
+| 以极致性能带来前所未有的体验 | 首屏从 3.2 秒压到 0.8 秒 |
+| 化繁为简，让复杂工作变得轻松 | 以前开四个窗口对着抄，现在一屏 |
+| 提供丰富的风格选择，满足不同场景需求 | 193 种风格，水墨到赛博都有 |
+| 通过智能算法大幅提升效率 | 分镜切点自动对齐到毫秒 |
+
+---
+
+## 五、标题
+
+标题可以比字幕更狠，但同样不许堆形容词。
+
+| 类型 | 例子 | 适用 |
+|---|---|---|
+| 数字 + 结果 | 193 种风格，一句话出片 | 信息型 |
+| 反差 | 我没剪过一刀 | 故事型 |
+| 具体场景 | 三分钟，从想法到成片 | 演示型 |
+| 提问 | 如果片子能自己长出来？ | 悬念型 |
+
+标题长度：横屏 ≤ 12 字，竖屏 ≤ 9 字。超过就要换行，换行就要重排字号。
+
+---
+
+## 六、改写流程
+
+拿到一句空话，按顺序做：
+
+1. **找出这句话想说的那件事**（往往只有一个）
+2. **问：有没有数字、时间、对比？** 没有就去素材里找
+3. **删掉所有不承载信息的修饰**
+4. **把动词提到前面**
+5. **读一遍，超过 5.5 字/秒就继续删**
+
+例：
+
+```
+原文：我们致力于通过先进的技术手段，为用户提供高效便捷的创作体验
+↓ 找出那件事：创作很快
+↓ 找数字：一句话，48 秒
+↓ 删修饰：一句话，48 秒出片
+↓ 动词前置：说一句话，48 秒出片
+```
+
+---
+
+## 七、自检清单
+
+- [ ] 每条字幕 ≤ 镜头时长 × 5.5 字？
+- [ ] 一条只说一件事？
+- [ ] 至少有一个可核查的具体信息？
+- [ ] 没有命中禁止清单里的词？
+- [ ] 句长有变化？
+- [ ] 事实强度没有被稀释，也没有被编造？
+- [ ] 标题 ≤ 12 字（竖屏 ≤ 9 字）？

package/references/data-viz.md

@@ -0,0 +1,189 @@
+# 数据可视化
+
+数据镜头是「信息型视频」的主力。做得好是说服力，做不好是 PPT 截图。
+
+这一份讲：柱状、折线、环形、数字滚动、对比，以及怎么让它们动得有道理。
+
+---
+
+## 一、先定比例，再画
+
+所有图表都要先算「数据 → 像素」的映射，不要边画边算。
+
+```js
+const max = Math.max(...values);
+const yOf = (v) => baseY - (v / max) * plotHeight;
+```
+
+**纵轴从 0 开始**。截断纵轴会夸大差异，是数据可视化的头号错误。
+
+---
+
+## 二、柱状
+
+### 2.1 生长
+
+```js
+for (let i = 0; i < values.length; i++) {
+  const u = easeOutCubic(tween(t, start + i * 0.06, 0.5));
+  const h = (values[i] / max) * plotHeight * u;
+  ctx.fillRect(xOf(i), baseY - h, barW, h);
+}
+```
+
+错开 60ms 一根，比同时长起来有节奏。
+
+### 2.2 强调一根
+
+要突出某一根，其余降透明度到 0.35，被强调的保持 1.0 并加高亮色。
+
+### 2.3 圆角与间距
+
+柱宽 : 间距 = 3 : 1。圆角只在顶部（`roundRect` 或手动路径），底部保持直角贴住基线。
+
+---
+
+## 三、折线
+
+### 3.1 描线
+
+用 `setLineDash` + `lineDashOffset` 做「画出来」的效果：
+
+```js
+const len = pathLength;
+ctx.setLineDash([len, len]);
+ctx.lineDashOffset = len * (1 - u);
+ctx.stroke();
+ctx.setLineDash([]);
+```
+
+或者逐段绘制（更可控，能配合点的高亮）。
+
+### 3.2 面积填充
+
+折线下方填充半透明色，alpha 0.15–0.25：
+
+```js
+ctx.beginPath();
+ctx.moveTo(pts[0].x, baseY);
+for (const p of pts) ctx.lineTo(p.x, p.y);
+ctx.lineTo(pts[pts.length - 1].x, baseY);
+ctx.closePath();
+ctx.fillStyle = 'rgba(255,138,61,0.18)';
+ctx.fill();
+```
+
+### 3.3 数据点
+
+点在高亮时放大到 1.5 倍并加光晕。**不要每个点都加光晕**，那样像星空。
+
+---
+
+## 四、环形 / 饼图
+
+### 4.1 扇区
+
+```js
+let a0 = -Math.PI / 2;
+for (const seg of segments) {
+  const a1 = a0 + (seg.value / total) * Math.PI * 2 * u;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy);
+  ctx.arc(cx, cy, r, a0, a1);
+  ctx.closePath();
+  ctx.fill();
+  a0 = a1;
+}
+```
+
+### 4.2 环形进度
+
+中间挖空（`globalCompositeOperation = 'destination-out'` 画一个内圆），
+再在中间放百分比数字。
+
+### 4.3 别用饼图
+
+超过 4 个扇区，人眼分不清角度。改用横向条形图，长度比角度好判断。
+
+---
+
+## 五、数字
+
+### 5.1 滚动到目标
+
+```js
+const u = easeOutQuint(tween(t, start, 0.9));
+const shown = target * u;
+```
+
+末尾必须减速，否则读者看不清最终值。
+
+### 5.2 千分位
+
+```js
+const fmt = (n) => n.toLocaleString('zh-CN', { maximumFractionDigits: 1 });
+```
+
+### 5.3 单位位置
+
+单位（万 / 亿 / % / ms）放在数字右侧，字号是数字的 0.5 倍，基线对齐。
+
+### 5.4 对比
+
+两个数字对比时，**同时**滚动到各自目标值，而不是先后。同时到达才有「比较」的意味。
+
+---
+
+## 六、对比与变化
+
+### 6.1 前后对比
+
+左右并排，中间一条分隔线。两边的动画同步启动、同步结束。
+
+### 6.2 差值高亮
+
+用一段色块标出「变化的部分」，配一个数字标注差值。
+
+### 6.3 上升 / 下降
+
+箭头方向 + 颜色（涨用暖色、跌用冷色），但**颜色不是唯一信号**——色盲用户看不出来，
+所以箭头形状也要区分。
+
+---
+
+## 七、动效纪律
+
+| 该动 | 不该动 |
+|---|---|
+| 柱子的生长 | 坐标轴数字乱跳 |
+| 折线的描绘 | 网格线闪烁 |
+| 数字滚动 | 图例颜色渐变 |
+| 高亮切换 | 整个图表旋转 |
+
+**图表动效的目的是引导阅读顺序**，不是炫技。观众应该先看标题，再看高亮的那一根，
+最后看总数。
+
+---
+
+## 八、常见错误
+
+| 错误 | 后果 |
+|---|---|
+| 纵轴不从 0 开始 | 夸大差异，误导 |
+| 饼图扇区 > 4 | 分不清 |
+| 每个数据点都发光 | 像星空，看不出趋势 |
+| 数字滚动不减速 | 读不出最终值 |
+| 图例用 6 种颜色 | 记不住 |
+| 网格线比数据线还粗 | 喧宾夺主 |
+
+---
+
+## 九、自检清单
+
+- [ ] 纵轴从 0 开始？
+- [ ] 柱子错开生长（60ms）？
+- [ ] 数字末尾减速，单位提前固定？
+- [ ] 对比的两个数字同时到达？
+- [ ] 图表动效 ≤ 2 种？
+- [ ] 高亮只有一处？
+- [ ] 颜色之外还有形状/文字区分？

package/references/effects.md

@@ -0,0 +1,236 @@
+# 视觉特效
+
+特效是调味，不是主菜。一条片子里特效超过三处，观众就只看特效不看内容了。
+
+这一份讲：模糊、发光、故障、拖影、扫描线、噪点，以及它们的性能代价。
+
+---
+
+## 一、模糊
+
+### 1.1 运动模糊（方向模糊）
+
+快速移动的元素，沿运动方向拉出拖影。Canvas 没有内置方向模糊，用多次错位绘制近似：
+
+```js
+function drawMotionBlur(fn, dx, dy, samples = 6, alpha = 0.16) {
+  for (let i = 0; i < samples; i++) {
+    const k = i / (samples - 1 || 1);
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.translate(-dx * k, -dy * k);
+    fn();
+    ctx.restore();
+  }
+}
+// 用：一个向右移动 60px/帧的方块
+drawMotionBlur(() => ctx.fillRect(x, y, 80, 80), 60, 0);
+```
+
+`samples` 越多越顺滑，但绘制成本线性上升。6 个样本 + 0.16 alpha 是最省的做法。
+
+### 1.2 景深模糊
+
+前后景分层，后景模糊。Canvas 用 `ctx.filter = 'blur(Npx)'`：
+
+```js
+ctx.save();
+ctx.filter = 'blur(8px)';
+drawBackground(t);
+ctx.restore();
+```
+
+`ctx.filter` 在部分浏览器上很慢（每帧重新计算卷积）。静态背景可以先渲染到离屏
+canvas，只在需要时重画。
+
+### 1.3 什么时候不要模糊
+
+- 文字：小字模糊后完全读不出来
+- 细线：1px 的线模糊后消失
+- 大面积纯色：模糊了看不出来，白费性能
+
+---
+
+## 二、发光
+
+### 2.1 多层叠加
+
+比 `shadowBlur` 便宜且可控：
+
+```js
+function glowDot(x, y, r, color) {
+  ctx.globalCompositeOperation = 'lighter';
+  for (let i = 3; i >= 1; i--) {
+    const rr = r * (1 + i * 0.9);
+    const g = ctx.createRadialGradient(x, y, 0, x, y, rr);
+    g.addColorStop(0, color.replace('ALPHA', 0.28 / i));
+    g.addColorStop(1, color.replace('ALPHA', 0));
+    ctx.fillStyle = g;
+    ctx.fillRect(x - rr, y - rr, rr * 2, rr * 2);
+  }
+  ctx.globalCompositeOperation = 'source-over';
+}
+// 用：glowDot(400, 300, 20, 'rgba(255,138,61,ALPHA)')
+```
+
+### 2.2 阈值发光（bloom）
+
+真实 bloom 是「亮的地方溢光」。近似做法：把亮部提出来，模糊，再叠加。
+
+```js
+// 1) 画场景
+drawScene(t);
+// 2) 提亮部（简化：直接整屏叠一层模糊后的自身）
+ctx.save();
+ctx.globalCompositeOperation = 'lighter';
+ctx.globalAlpha = 0.25;
+ctx.filter = 'blur(12px)';
+ctx.drawImage(canvas, 0, 0);
+ctx.restore();
+```
+
+整屏 bloom 会让暗部发灰。只在关键帧用。
+
+---
+
+## 三、故障（glitch）
+
+### 3.1 切片错位
+
+```js
+function glitchSlices(t, amount) {
+  const slices = 12;
+  // 按帧号取种子：同一帧永远是同一个错位量，导出才不会抖
+  const rand = mulberry32(Math.floor(t * 30) + 1);
+  for (let i = 0; i < slices; i++) {
+    const y = (H / slices) * i;
+    const off = (rand() - 0.5) * 2 * amount;
+    ctx.drawImage(canvas, 0, y, W, H / slices, off, y, W, H / slices);
+  }
+}
+```
+
+`Math.random()` 在这里是错的：预览时每帧随机，看着像故障；导出时按帧取样，
+同一个 `t` 每次渲染结果不同，视频会出现无法复现的抖动。
+
+### 3.2 RGB 分离
+
+```js
+ctx.globalCompositeOperation = 'lighter';
+ctx.fillStyle = 'rgba(255,0,80,0.6)';  ctx.fillRect(-4, 0, W, H);
+ctx.fillStyle = 'rgba(0,220,255,0.6)'; ctx.fillRect(4, 0, W, H);
+ctx.globalCompositeOperation = 'source-over';
+```
+
+### 3.3 什么时候用
+
+- 科技 / 赛博 / 故障艺术题材
+- 转场（0.1–0.2s，不要持续）
+- **不要**用在文字为主的信息型画面上，读不清
+
+---
+
+## 四、拖影
+
+### 4.1 残影（trail）
+
+不擦除画布，只叠一层半透明底色，上一次的绘制就会留下：
+
+```js
+// 每帧开头
+ctx.fillStyle = 'rgba(11,13,18,0.18)';   // 不是 clearRect
+ctx.fillRect(0, 0, W, H);
+```
+
+这是**有状态**的做法，违反纯函数约束。导出时会因为跳帧而拖影不一致。
+
+替代：按 `t` 计算最近 N 帧的位置，逐个画出来：
+
+```js
+for (let k = 0; k < 6; k++) {
+  const tk = Math.max(0, t - k * (1 / 30));
+  ctx.globalAlpha = 0.5 * Math.pow(0.6, k);
+  drawDotAt(tk);
+}
+ctx.globalAlpha = 1;
+```
+
+### 4.2 速度线
+
+漫画式速度线：从中心向外放射的短线段，透明度随速度变化。
+
+```js
+const lines = 40;
+for (let i = 0; i < lines; i++) {
+  const a = (i / lines) * Math.PI * 2;
+  const r0 = 120 + rand() * 60;
+  const r1 = r0 + 40 + speed * 80;
+  ctx.strokeStyle = `rgba(255,255,255,${0.05 + speed * 0.15})`;
+  ctx.beginPath();
+  ctx.moveTo(cx + Math.cos(a) * r0, cy + Math.sin(a) * r0);
+  ctx.lineTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
+  ctx.stroke();
+}
+```
+
+---
+
+## 五、扫描线 / CRT
+
+```js
+function scanlines(gap = 3, alpha = 0.08) {
+  ctx.fillStyle = `rgba(0,0,0,${alpha})`;
+  for (let y = 0; y < H; y += gap) ctx.fillRect(0, y, W, 1);
+}
+```
+
+配合轻微的垂直滚动，就是 CRT 质感：
+
+```js
+const offset = (t * 30) % gap;
+for (let y = -gap; y < H; y += gap) ctx.fillRect(0, y + offset, W, 1);
+```
+
+`gap` 小于 2 在 1080p 上会摩尔纹，建议 3–4。
+
+---
+
+## 六、粒子光效
+
+见 `get_reference("particles")`。这里只讲一个原则：**粒子用贴图，不要每个都画路径**。
+
+---
+
+## 七、性能对照
+
+| 特效 | 1080p 单帧成本 | 建议 |
+|---|---|---|
+| `fillRect` 叠色 | <0.1ms | 随便用 |
+| 径向渐变光斑 | 0.5–2ms | 预渲染成贴图 |
+| `shadowBlur` 20px | 2–5ms | 少用 |
+| `ctx.filter = blur(8px)` | 4–10ms | 只在关键帧 |
+| 逐像素 `getImageData` | 15–50ms | 禁止 |
+| 切片错位 12 片 | 1–3ms | 可接受 |
+| 6 样本运动模糊 | ×6 绘制成本 | 只给快速元素 |
+
+**一帧 33ms 的预算（30fps），特效超过 10ms 就会掉帧。**
+
+---
+
+## 八、纪律
+
+1. **一条片子最多三种特效**。多了像滤镜堆叠。
+2. **特效服务于叙事**：故障是为了表达「系统崩了」，不是为了好看。
+3. **不要用特效掩盖内容空洞**。画面没内容时加特效，只会显得更空。
+4. **导出前逐帧看**，特效在静态截图里往往比动态播放时好看。
+
+---
+
+## 九、自检清单
+
+- [ ] 全片特效种类 ≤ 3？
+- [ ] 每个特效都有叙事理由？
+- [ ] 所有随机都用了固定种子？
+- [ ] 模糊没有用在文字和细线上？
+- [ ] 一帧的特效总成本 < 10ms？
+- [ ] 拖影是按 `t` 重算的，不是靠画布残留？