用途
本技能用于维护既有的竖屏短视频教学作品(May Shorts 示例),保留其旧版的四层脚手架、face-mode 走位与卡拉OK字幕模式。资料明确指出:仅在这些示例的维护工作或用户明确要求使用该旧脚手架时使用;新制作的 reels、Shorts 或短视频广告应使用 short-form-edit,而非本技能。
前置条件
必须先调用 /hyperframes。本技能建立在其之上,不替代框架规则(data-* 属性、window.__timelines、composition 结构),这些规则不受视频格式影响,不可协商。
视频格式定义
short-form 指 1080x1920 竖屏、10–30 秒、口播人物脸 + 动态图形场景叠加 + 卡拉OK字幕。资料称其内容提炼自 May Shorts 19 的 v1 到 v4 迭代复盘,并为这些示例的维护而保留。
主要能力与使用方式
资料给出了一套高层 playbook:
- 以音频为准:先剪辑音频(剪掉重拍、停顿),保存为
<name>-edit.mp4,用ffprobe测量精确时长作为 composition 的data-duration。 - 转录剪辑后的音频:使用根目录的
scripts/transcribe-elevenlabs.mjs(ElevenLabs Scribe)辅助脚本,或按docs/TOOLS-AND-API-KEYS.md规范化的学生自选替代方案;若对既有构建做 retime 且字幕中已有shift()函数,则保留字幕只移动场景起点。 - 在 edited-time 中定义场景边界,禁止在同一文件中混用 original-time 与 edited-time 锚点。
- 构建 composition 脚手架(4 层:ambient-bg、seam-treatment、captions、face)。
- 场景内部偏移相对于各场景
data-start使用 LOCAL 偏移,每个场景是compositions/scene<N>-<label>.html下的子 composition。 - 执行 lint → 草稿渲染 → 逐词精确帧验证 → 最终渲染,其中第 3 步帧验证不可跳过。
四层脚手架
每个竖屏短视频在 compositions/ 下有四个子 composition,加载于共享轨道:ambient-bg(track-index=3)、face-wrapper + video(track-index=0)、seam-treatment(track-index=5,仅下半屏场景)、各 scene 叠加(track-index=1,背靠背无间隙)、captions(track-index=2)。data-duration 在 root、ambient-bg、seam-treatment、face-video、face-audio、captions 中一致,仅场景叠加随时间变化。face 的 <audio> 是独立元素,不使用 video 自带音轨。class="clip" 加在定时 div 上,绝不加在 <video> 或 <audio> 上。
face-mode 走位
face 放在按源原生 1920x1080 尺寸的 wrapper div 中,GSAP 动画作用于 wrapper(绝不作用于 video 元素,动画 video 尺寸会冻结帧)。两种模式:BOTTOM 与 FULLSCREEN,MODE_DUR = 0.32。模式转换在新场景内容落地前 0.15s 发生,使用 ease: "expo.inOut"。face 调色为 contrast(1.08) saturate(1.08) brightness(0.97),加 1.00 → 1.025 的 Ken Burns 缩放(ease: "none")与侧边暗角伪元素。下半屏场景需要 y=960 处的缝线处理(navy→transparent 渐变带 60–100px 加 2px 强调扫描线带柔光)。
音频同步协议
所有时间均以 edited-time 为准,绝不混用。资料给出验证流程:用 ffprobe 测量两个音频文件时长,差值即总剪掉时间;若 captions.html 使用 shift() 函数映射转录词,则以该映射为准,并同样应用于每个场景 data-start;场景内部偏移是相对于场景 data-start 的 LOCAL 偏移,除非场景跨越剪切点,否则内部偏移无需修改;face-mode 转换数组时间必须使用 edited-time,不会自动偏移。retime 时需按指定表格结构列出 Plan。
场景编排要点
资料列出节奏规则:无死帧(每 100ms 至少一个动画元素,首个入场偏移 0.1–0.3s);payoff 至少保持 1s,理想 1.5s,按揭示时间而非总时长预算;运动贯穿整个时长;每场景至少 3 种不同 ease;每 5 秒运行时长一个“让人惊叹”的效果。
字幕
Montserrat 900,46–58px(1080 宽度),纯白基底,活动词 scale-1.08 弹出并变强调色(AIS 为 #37bdf8,按品牌调整);描边用分层 text-shadow,绝不使用 -webkit-text-stroke;去掉 rgba 背景药丸。
背景、音频响应与转场
背景最低可行栈:径向渐变基底、8–12% 不透明度的动态噪点/颗粒、4–8 个漂移粒子点或网格轨迹、细微暗角。音频响应:标题脉冲 3–6%,背景 10–30%;使用带种子的离线分析器保证渲染确定性,禁止在渲染路径使用 AnalyserNode。转场需轮换风格,连续两个不得相同。
验证门
资料强调 lint 通过不等于设计可用,必须提取逐词精确时间戳的帧并逐张读取 PNG 确认,之后才能报告完成;失败则修复并重新验证。最终渲染后抽样 3–4 帧确认标准质量编码未改变内容。
适用场景与限制
适用场景:维护既有 May Shorts 教学示例、明确要求其旧版四层脚手架的工作。限制与禁止项:不要动画 <video> 元素尺寸;不要在任何 timeline 上使用 repeat: -1;不要使用 Math.random() 或 Date.now();不要在字幕中使用 <br>;不要跳过帧验证门;音频被剪辑时不要在 original-time 中编写;不要留下 background: #07121c 纯色;不要硬切场景;不要温和地做字幕;不要让人脸静止。资料还给出 may-shorts-18 的具体经验:stamp 时间应满足 stamp_t ≥ target-text-visible_t + 0.10–0.25s;BOTTOM 模式建议改用 BOTTOM = { x: -180, y: 1110, scale: 0.75 } 而非默认值,并针对实际源视频预览一帧后再确定常量。
项目结构
资料给出标准目录:video-projects/<slug>/ 下含 hyperframes.json、meta.json(1080x1920、fps 30)、index.html、compositions/(ambient-bg、seam-treatment、captions、各 scene)、assets/(原录、剪辑版、transcript.json、品牌资产)、renders/。
暂未提供的信息
资料未提供该技能的价格、收费标准、平台支持范围、许可协议或作者信息。