html-anything VFX 文字光标（vfx-text-cursor）技能详解：用 CSS 逐字揭示 + chromatic 拖光打造视频开场帧

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成

本篇技术指南以 html-anything 仓库内置的vfx-text-cursor模板技能为对象，完整拆解它的设计规范、CSS 参数、动效实现与仓库内加载链路。读完你可以直接复现一个 1920×1080 的"打字机式金句开场帧"，并理解该技能从SKILL.md规范、example.md示例输入、example.html预渲染预览到前端模板选择器的完整流转方式。

图中的"打字光标 + 彩色像散 + 定向光斑"画面，就是本文将要解析的example.html在 1920×1080 画布上的渲染结果。

一、技能定位：一个给 Agent 看的"视频开场帧"规范

在 html-anything 的模板体系中，每个技能（Skill）是一个独立文件夹，位于 next/src/lib/templates/skills/ 下。vfx-text-cursor的元数据写在同目录的 SKILL.md 的 frontmatter 中：

• name: vfx-text-cursor，中文名"VFX 文字光标"，英文名 "VFX Text Cursor"
• description：光标拖光 + 彩色像散射线 + 定向光斑，适合视频片头逐字揭示金句
• category: video、scenario: video：归属于仓库 scenarios.ts 中定义的 12 个场景之一（marketing / engineering / operations / product / design / finance / sales / hr / personal / education / creator / video），在模板选择器中以 "video" 场景分桶展示
• aspect_hint: "1920×1080 (16:9)"：明确画布比例，选择器按钮上会直接显示该提示
• featured: 38、recommended: 7：参与精选排序。从 loader.ts 的rankFeatured/rankRecommended（数值越小越靠前）以及 template-picker.tsx 的分组逻辑可知，该技能会出现在"推荐 / Featured"分组顶部附近
• tags: ["vfx", "text", "cursor", "chromatic", "reveal", "frame"]：供选择器搜索框做多关键词命中（matchesQuery会拼接 zhName / enName / description / aspectHint / category / scenario / tags 后分词匹配）
• example_source_url指向 hyperframes 的 vfx-text-cursor 目录，标注灵感来源

SKILL.md 正文则是一份写给 AI Agent 的生成指令：它规定画布、内容、字段、动效与设计红线，Agent 读后即可产出对应 HTML。而本指南的主角 example.md 正是这个技能随附的"示例输入内容"——一段可直接喂给 Agent 的素材：

# VFX 光标开场帧 > 逐字揭示 + chromatic 拖光, hot pink + cyan ## 金句 Markdown 是给作者的中间过程, HTML 才是给读者的最终形态。 ## 章节标记 FRAME 01 · OPENING ## Timecode 00 : 03 : 21

这份示例输入与 SKILL.md 规范一一对应：金句（居中大字）、章节标记（顶部 caption）、Timecode（右下角 mono 字段），恰好演示了"给 Agent 的输入长什么样"。

二、画布与背景：暗哑黑 + 微妙 vignette

SKILL.md 规定画布为 1920×1080，背景取#06070a暗哑黑或#0a0d12（暖偏蓝），并叠加微妙 vignette（暗角）。

在 example.html 中，实现拆成三个层：

• body背景#06070a，文字色#f5f5f7，overflow: hidden锁定 16:9 视口
• .vignette用radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 100%)画暗角，z-index: 1
• .grain用内联 SVGfeTurbulence（baseFrequency='0.9' numOctaves='2'）生成噪点纹理，opacity: 0.06+mix-blend-mode: overlay，为纯色背景加一层胶片质感

这三层叠放顺序（文字 → vignette → grain）保证暗角与颗粒只作用于背景氛围，不影响文字可读性。

三、逐字揭示：光标、打字节奏与 motion blur 尾迹

这是该技能的核心动效，规范要求：

1. 金句：中英不限，居中，字号 6-8vw，font-weight: 700，字体Inter Tight/Source Sans 3/Noto Sans SC（西文 + 中文黑体，严禁衬线）。
2. 逐字揭示：每个字符 80ms 间隔，当前字符后跟随一个光标▍（或细 vertical bar）。
3. 已揭示文字：白色#f5f5f7、opacity 1。
4. 即将揭示位置：reveal 瞬间加 chromatic ghost——text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff，200ms 内收敛回正常。
5. 光标本体：16px 宽矩形，颜色取 accent（hot pink#ff3b6f/ cyan#00d4ff/ amber#ffb547三选一），@keyframes闪烁周期 1.0s，身后拖 60-120px 的 motion blur trail（径向渐变到透明）。

example.html给出了可直接使用的 CSS 参考实现：

@keyframes blink { 0%, 50% { opacity:1 } 51%, 100% { opacity:0 } } .cursor { display: inline-block; width: 18px; height: 1.05em; background: #ff3b6f; margin-left: 6px; animation: blink 1s steps(1) infinite; box-shadow: 0 0 24px #ff3b6f, 0 0 8px #ff3b6f, 60px 0 80px rgba(255,59,111,0.6); /* 60px 右侧的径向拖尾 */ }

注意box-shadow的第三个投影60px 0 80px正是"60-120px motion blur trail"的落地方式：阴影向左偏移 60px、模糊 80px，形成光标身后一条淡出的粉红色拖光。steps(1)让闪烁是硬切而非渐变，符合"打字光标"的机械感。

四、chromatic 像散：二元色而不是彩虹

设计规范特别强调一条红线：绝不使用多色彩虹 chromatic，只用 hot pink + cyan 这种二元像散，不要 R/G/B 全色。这是为了保持高级感与品牌一致性。

example.html中的.chroma类展示了具体写法：

.chroma { text-shadow: 3px 0 #00d4ff, /* 青色右偏移像散 */ -3px 0 #ff3b6f, /* 粉色左偏移像散 */ 0 0 40px rgba(255,59,111,0.3); /* 柔光 */ }

该像散只作用于整句金句的标题<h1>，正文与 caption 均不带拖影，形成"标题炫、字段稳"的层次。SKILL.md 还补充了细节：reveal 瞬间的 ghost 应在 200ms 内收敛回正常，即像散是"打字那一瞬"的闪光，而非常驻效果。

五、定向光斑：light leak 与 shimmer sweep

规范要求：

• 打字位置附近随机生成3-5 道定向光斑（light leak）：用linear-gradient(45deg, transparent, accent20, transparent)的细长矩形 +mix-blend-mode: screen，不规则角度。
• 文字打完后，整段文字加0.5s shimmer sweep（光带横扫）。

example.html用三个.ray类实现了 3 道光斑，每道都是"角度旋转 + 透明渐变 + 模糊"的组合：

.ray { position:absolute; mix-blend-mode:screen; pointer-events:none; z-index:1; } .ray-1 { top:30%; left:-10%; width:60%; height:6px; transform:rotate(-12deg); background:linear-gradient(90deg, transparent, rgba(255,59,111,0.6), transparent); filter: blur(8px); } .ray-2 { top:55%; right:-10%; width:50%; height:4px; transform:rotate(15deg); background:linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent); filter: blur(6px); } .ray-3 { top:70%; left:10%; width:40%; height:3px; transform:rotate(-8deg); background:linear-gradient(90deg, transparent, rgba(255,181,71,0.5), transparent); filter: blur(5px); }

三道光斑分别对应 hot pink、cyan、amber 三个 accent 色，角度各异、淡出到画布外，配合mix-blend-mode: screen在暗背景上产生"漏光"质感。

六、信息字段层：caption、副标与 timecode

规范定义了三个信息字段，共同构成视频开场帧的"元数据层"：

1. 顶部 caption：uppercase、letter-spacing: 0.18em、11px、opacity 0.5，内容如FRAME 01 · OPENING。
2. 金句下方副标：24-28px、opacity 0.6，写来源 / 章节。
3. 右下角 timecode：00:03:21，mono 字体。

example.html的 header / footer 实现了这套体系，并用.chip统一样式（font-size:11px; letter-spacing:0.18em; text-transform:uppercase）、.mono指定JetBrains Mono。header 左中右排列"FRAME 01 · OPENING / VFX · TEXT CURSOR / 00:03:21"，footer 则标注"HTML-ANYTHING · VFX-TEXT-CURSOR / HOT PINK × CYAN CHROMATIC / REC ●"——REC 红点进一步强化"录制中"的视频语境。副标在<main>内实现为一行 22px、opacity 0.6 的署名。

七、动效、可访问性与工程约束

SKILL.md 对实现层面提出了可验证的硬性约束：

• 动效用@keyframes+ JS 计时器（setTimeout逐字）实现；本仓库的example.html交付的是"静止首帧"版本（光标常亮闪烁、文字全量显示），逐字揭示逻辑留给 Agent 依据规范在最终生成时补上。
• 必须支持prefers-reduced-motion：用户偏好减少动效时直接显示所有字，关闭逐字动画。
• 必须使用用户提供的金句，不要捏造。
• 单文件 HTML，除字体 CDN 外不引用任何外部资源——这也是整个 html-anything 模板体系的通用要求，保证产物可以独立打开、离线渲染、被预览沙箱安全加载。

八、仓库内的加载链路：从磁盘到选择器

理解了规范本身，再看它如何在仓库里被加载、预览与送入 Agent 生成流程：

1. 注册（零代码）：loader.ts 扫描src/lib/templates/skills/<id>/目录，读取SKILL.md的 frontmatter 得到元数据，读取可选的example.md/example.html。注释明确写道："Adding a template = adding a folder. No TS code change required."，新技能目录无需改任何 TS 代码即自动进入注册表。
2. 列表 API：next/src/app/api/templates/route.ts 返回{ templates }元数据列表（不含 prompt 正文，避免把指令文本下发给浏览器），带Cache-Control: public, max-age=5短缓存。
3. 示例 API：next/src/app/api/templates/[id]/example/route.ts 返回单技能的content（example.md）与html（example.html）打包 JSON，让前端一次请求即可拿到完整示例。
4. 选择器交互：template-picker.tsx 里，行项目 hover 260ms 后懒加载示例并渲染成sandbox="allow-scripts allow-same-origin"的缩放 iframe 缩略图（1280×960 缩放 0.4375、pointer-events: none）；点击"预览"则通过loadSample把 content + html 直接载入编辑器。
5. 生成调用：next/src/app/api/convert/route.ts 的 POST 接口接收agent、templateId、content，调用loadSkill(templateId)取出技能正文，经assemblePrompt拼装后交给invokeAgent流式生成 HTML；若传入editFromHtml/editFromContent，则改走最小化差异编辑（diff-edit）提示，保留原设计、只按内容差异修改文字节点。

也就是说，你看到的"金句 → 开场帧 HTML"链路是：示例内容（example.md）→ Agent 依据 SKILL.md 规范 → 流式生成 → 沙箱预览。

九、动手复现：生成自己的开场帧

要在本地复现或使用这个技能，最直接的方式是启动 next 应用（仓库根目录为 pnpm workspace，next 应用依赖位于next/package.json），在模板选择器的 video 场景分组（或直接搜索 "VFX" / "cursor"）选中 "VFX 文字光标"，点击预览载入示例，然后把 example.md 中的金句替换为你自己的句子，点击转换即可让本地 Agent 依据 SKILL.md 规范逐字揭示渲染。

若你想脱离应用、纯手工实现同款效果，直接把本文第三节到第六节的 CSS 片段（blink 光标、chroma 像散、ray 光斑、vignette + grain 图层）组装进一个单文件 HTML，替换example.html中<h1>的文案即可——这正是该技能产物的完整形态：#06070a背景、hot pink × cyan 二元像散、18px 步进闪烁光标、三条定向光斑、FRAME 01 · OPENING 信息层，一个 16:9 的视频开场金句帧就完成了。

十、延伸阅读

• 技能规范全文：SKILL.md
• 示例输入（金句素材）：example.md
• 预渲染预览实现：example.html
• 技能注册与元数据解析：loader.ts
• 场景词汇与排序：scenarios.ts
• 模板列表 / 示例 / 转换 API：route.ts、example/route.ts、convert/route.ts
• 选择器预览交互：template-picker.tsx
• 同类 video 场景技能可横向对比：video-hyperframes、motion-frames、frame-glitch-title、frame-light-leak-cinema（均位于 next/src/lib/templates/skills/ 下）

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成