AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载本篇技术指南以 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 Cursordescription光标拖光 彩色像散射线 定向光斑适合视频片头逐字揭示金句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 的输入长什么样。二、画布与背景暗哑黑 微妙 vignetteSKILL.md 规定画布为 1920×1080背景取#06070a暗哑黑或#0a0d12暖偏蓝并叠加微妙 vignette暗角。在 example.html 中实现拆成三个层body背景#06070a文字色#f5f5f7overflow: hidden锁定 16:9 视口.vignette用radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 100%)画暗角z-index: 1.grain用内联 SVGfeTurbulencebaseFrequency0.9 numOctaves2生成噪点纹理opacity: 0.06mix-blend-mode: overlay为纯色背景加一层胶片质感这三层叠放顺序文字 → vignette → grain保证暗角与颗粒只作用于背景氛围不影响文字可读性。三、逐字揭示光标、打字节奏与 motion blur 尾迹这是该技能的核心动效规范要求金句中英不限居中字号 6-8vwfont-weight: 700字体Inter Tight/Source Sans 3/Noto Sans SC西文 中文黑体严禁衬线。逐字揭示每个字符 80ms 间隔当前字符后跟随一个光标▍或细 vertical bar。已揭示文字白色#f5f5f7、opacity 1。即将揭示位置reveal 瞬间加 chromatic ghost——text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff200ms 内收敛回正常。光标本体16px 宽矩形颜色取 accenthot 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规范定义了三个信息字段共同构成视频开场帧的元数据层顶部 captionuppercase、letter-spacing: 0.18em、11px、opacity 0.5内容如FRAME 01 · OPENING。金句下方副标24-28px、opacity 0.6写来源 / 章节。右下角 timecode00:03:21mono 字体。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:21footer 则标注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 生成流程注册零代码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 代码即自动进入注册表。列表 APInext/src/app/api/templates/route.ts 返回{ templates }元数据列表不含 prompt 正文避免把指令文本下发给浏览器带Cache-Control: public, max-age5短缓存。示例 APInext/src/app/api/templates/[id]/example/route.ts 返回单技能的contentexample.md与htmlexample.html打包 JSON让前端一次请求即可拿到完整示例。选择器交互template-picker.tsx 里行项目 hover 260ms 后懒加载示例并渲染成sandboxallow-scripts allow-same-origin的缩放 iframe 缩略图1280×960 缩放 0.4375、pointer-events: none点击预览则通过loadSample把 content html 直接载入编辑器。生成调用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 workspacenext 应用依赖位于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模板列表 / 示例 / 转换 APIroute.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 AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐html-anything 模板体系解析用 VFX 文字光标在视频开场帧里逐字揭示金句html anything 模板体系解析用 VFX 文字光标在视频开场帧里逐字揭示金句 导读 本文以 html anything 仓库中 vfx text cAI 应用人工智能AI AgentAI 写作媒体生成纯 CSS 打字机动画实战用 steps() 逐字揭示与光标闪烁实现零 JavaScript 交互效果You-Dont-Need-JavaScript纯 CSS 打字机动画实战用 steps 逐字揭示与光标闪烁实现零 JavaScript 交互效果You Dont Need JavaScript 本篇技前端示例工程HTML Anything motion-frames 动效帧模板实战用纯 CSS 打造可循环的 Hero 视频帧HTML Anything motion frames 动效帧模板实战用纯 CSS 打造可循环的 Hero 视频帧 导读 motion frames 动效英AI 应用人工智能AI AgentAI 写作媒体生成上一篇RPCS3模拟器完整配置教程在PC上畅玩PS3游戏的终极指南下一篇ER存档编辑器你的游戏数据掌控神器告别存档修改烦恼创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
