【免费下载链接】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.
导读
motion-frames（动效英雄帧 / Motion Frames）是 HTML Anything 内置的 75 个技能模板之一，属于 frame 表面下的一款通用动效设计帧：它用一个自带循环 CSS 动效的 HTML 单帧作为视频片头或落地页大图，组合了旋转文字环、抽象地球仪、计时器与浮动视差标签四大视觉元素。读完本文，你将掌握该模板的意图与布局规范、SKILL 元数据驱动的模板注册机制、CLI 关键词匹配的触发方式，并能基于仓库自带的完整 example.html 逐步拆解每一个动效的 CSS 实现原理，最终复制改造出属于自己的循环动效帧。
一、模板定位：一帧能循环的 hero，而非多帧脚本
motion-frames 与同目录下的 video-hyperframes 分工明确：
- video-hyperframes 输出 N 个连续
<section class="frame">，靠<!-- frame:N duration:3000 transition:fade -->隐藏标记和顶部 JS 自动播放脚本串联成一段可交给 Remotion 渲染成.mp4的帧序列； - motion-frames 则只交付单帧，但这单帧内的动效全部由 CSS 驱动、可无限循环，适合作为视频片头（title card）或落地页 hero 大图，本身无需 JS 也能持续运动。
这一点在 SKILL 文档的【意图】中写得很明确：一帧带循环动效的 hero, 可作为视频片头或落地页大图。仓库 README 的模板总表把它归入 "Hyperframes video frames & VFX & device mockups" 分组，并标注为 Generic motion-design frame（通用动效设计帧），README.md。其 frontmatter 中 category: video、scenario: marketing、aspect_hint: "桌面 hero" 三个字段，决定了它在模板选择器中的分类、场景过滤与宽高比提示。
二、SKILL 元数据：模板如何被注册、加载与匹配
2.1 目录即模板：无需写代码即可注册
每个技能就是一个文件夹，loader.ts 注释明确描述了这一约定：
src/lib/templates/skills/<id>/
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
example.md — (optional) sample input content
example.html — (optional) pre-rendered preview, shown inline in the picker
新增模板 = 新增一个文件夹，不需要改动任何 TypeScript 代码。loader.ts 会在服务端扫描 src/lib/templates/skills 目录，解析每个文件夹下 SKILL.md 的 YAML frontmatter 生成 SkillMeta，再通过 GET /api/templates 提供给前端选择器（route.ts）；example.html 的存在与否决定了选择器里能否显示内联预览（skillHasPreview）。
2.2 motion-frames 的 frontmatter 字段解读
SKILL.md 顶部的元数据是整个注册表的"身份证"：
| 字段 | 值 | 作用 |
|---|---|---|
name | motion-frames | 模板唯一 id，也是目录名 |
zh_name | 动效英雄帧 | 界面展示的中文名 |
en_name | Motion Frames | 界面展示的英文名 |
emoji | 🌀 | 选择器中的图标 |
description | 可循环 CSS 动效组合: 旋转环、地球仪、计时器、视差标签 | 一句话能力描述 |
category | video | 归类到视频/动效类别 |
scenario | marketing | 营销场景，供场景过滤使用 |
aspect_hint | 桌面 hero | 建议宽高比与用途 |
featured | 6 | 精选排序权重，数值越小越靠前 |
tags | ["motion", "title card", "loop", "video poster"] | 检索与匹配标签 |
其中 featured 直接参与选择器的精选排序逻辑：template-picker.tsx 中排序函数对带 featured 的模板按数值升序排列、未设置者排最后（template-picker.tsx）。tags 则在 CLI 的模板匹配评分中每个命中 +3 分。
2.3 CLI 如何命中这个模板
motion-frames 在 CLI 技能匹配器中注册了一组强信号关键词：skills-matcher.ts
[["motion", "动效", "循环", "动画", "CSS动画"], "motion-frames"],
当你的输入内容命中其中任意关键词时，strongSignalMatch 会给每个命中词计 2 分并额外加 3 分基础分（confidence = matched.length * 2 + 3），超过阈值 CONFIDENCE_THRESHOLD = 3 即直接命中该模板，无需再走 AI 摘要兜底（skills-matcher.ts）。同时，scenario: marketing 对应的场景信号词表（如 marketing / 推广 / 品牌 / landing page / 落地）在规则评分中每个命中 +1 分（skills-matcher.ts）。
也就是说，写"做一个带循环动效的视频片头 / 落地页 hero"这类需求，本地 CLI 就能自动选中 motion-frames。
三、模板意图与四层布局规范
SKILL.md 的【布局】定义了四个核心组成（SKILL.md）：
- Rotating type ring（旋转文字环）——SVG +
transform实现，环形排列的标签随外圈同步旋转； - Animated globe（动态地球仪 / 抽象几何）——自转的抽象球体；
- Ticking timer（计时器）——等宽字体（mono）呈现，JS 可有可无，即纯静态帧也能成立；
- Parallax labels（视差标签）浮动——独立于旋转环的浮动标注层。
【设计细节】给出两条硬性约束：
- 纯 CSS 动效，流畅可循环：所有运动都必须是可无限循环的 CSS 动画，不能依赖一次性 JS 计时器；
- 电影感调色 + 1 个霓虹 accent：整体用一套低饱和的电影调色板，且全画面只保留一个强调色，避免多色互相抢戏。
这两条规范正是下面 example.html 实现中"一切动画都是 linear infinite"的直接来源。
四、示例实现源码拆解：Charlotte & Vine 全球广播帧
仓库为 motion-frames 提供了完整可运行的 example.html，一个名为 "Reach every country" 的广播风 hero。我们逐层拆解它的实现，这也是 SKILL 文档四要素的落地样板。
4.1 设计令牌：电影感调色板
:root 上定义了五个 CSS 变量（example.html）：
--paper: #f3eee5; /* 米白纸张底色 */
--ink: #1a1816; /* 近黑主文字色 */
--muted: #7a766c; /* 次级灰调 */
--accent: #c0563b; /* 唯一的霓虹/强调色：赭红 */
--serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
--mono: ui-monospace, 'JetBrains Mono', monospace;
整帧只有 --accent 一个强调色（用于中心焦点圆点与标题斜体强调词），完美对应"1 个霓虹 accent"规范；正文用衬线体 --serif，元数据/计时器用等宽体 --mono，对应"Ticking timer (mono 字体)"。
4.2 背景与外围饰条（chrome）
main 的背景由三层径向渐变叠加：中央微弱的暗角径向渐变 + 28px 间距的网点（dot grid）+ 底色，营造纸张质感（example.html）。顶部与底部的 .chrome 饰条用等宽小号字展示 ANTHROPIC LABS — APR 17 · 2026、SIGNAL · LIVE 等元信息，是视频帧常见的"台标/时间码"式点缀。
4.3 旋转文字环（Rotating type ring）：三层同心圆反向自转
核心是 .ring 系列——四个绝对定位的同心圆边框，各自独立旋转：
| 层 | inset | 边框样式 | 动画时长 | 方向 |
|---|---|---|---|---|
.r1 | 0 | 实线 0.45 透明度 | 60s | 顺时针 |
.r2 | 4% | 实线 0.30 透明度 | 90s | reverse（反向） |
.r3 | 10% | 虚线 dashed 0.22 透明度 | 180s | 顺时针 |
.r4 | 18% | 实线 0.12 透明度 | 36s | 顺时针 |
配合 @keyframes spin { to { transform: rotate(360deg); } }（example.html），每层周期不同、方向相反，形成"齿轮式"的错落运动。这是纯 CSS 循环动效最典型的手法：同一 keyframes 复用 + 不同 duration + reverse 方向，即可制造深度感。
文字标签层 .ring-labels 与外圈同速（60s）同步旋转，8 个 <span> 通过 rotate(θ) translate(0, -49vh) 从圆心向 49vh 半径处展开，等分角度依次为 -12° / 34° / 78° / 132° / 178° / 224° / 266° / 312°（example.html）。由于整体用 transform 旋转，文字会随环翻转，因此内部 <i> 用 display: inline-block; transform: rotate(0) 做反旋转兜底（注释说明 counter rotation handled inside）。
4.4 动态地球仪（Animated globe）：SVG 球体 + 反向自转
.globe 占居 composition 的 22% 内区，inset: 22%，复用同一个 spin keyframes，时长 38s 并 reverse（example.html），比外圈更慢地反向旋转，形成天体感。球体本体是内嵌 SVG：
- 一个带
radialGradient（#fffaf0 → #ece6da → #cfc8b9）径向渐变填充的圆，模拟光源自左上（cx=35% cy=32%）； - 六条扁椭圆（rx 20 / 48 / 78 与 ry 92 组合）叠加成经纬网格；
- 六段不规则闭合
path作为抽象大陆块。
纯 SVG + 外层 CSS 旋转，无需任何 JS，完美契合"纯 CSS 动效"约束。
4.5 霓虹焦点与视差层次
.focal-dot 是 7px 的 --accent 色圆点，位于画面正中，用 pulse 动画做呼吸扩散（example.html）：
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(192,86,59,0.45); transform: ... scale(1); }
50% { box-shadow: 0 0 0 18px rgba(192,86,59,0); transform: ... scale(1.25); }
}
这是典型的"涟漪扩散"实现：用 box-shadow 从 0 扩散到 18px 并淡出到透明，叠加轻微放大，制造霓虹呼吸感。
视差与深度则通过旋转速度层级实现：外环 60s、次环 90s、虚线环 180s、内环 36s、球体 38s reverse——不同速度的同心运动天然产生"多层视差"的错觉，而 .meta-tl、.issue 这类静态角标与旋转层相对静止，进一步拉开前景/背景的层次。
4.6 标题入场与响应式
.headline 使用 type-in 动画一次性入场（cubic-bezier(.2,.7,.2,1)，1.4s，both 填充模式），从 opacity: 0; letter-spacing: 0.06em 过渡到正常字距——注意它不是循环动画，循环留给旋转环与球体，入场只发生一次，符合"循环动效 + 一次性入场"的帧设计惯例（example.html）。媒体查询 max-width: 900px 下缩小标题字号并收紧边距，保证在落地页小屏也可用（example.html）。
五、模板的选择器呈现与示例预览机制
motion-frames 目录下只提供了 SKILL.md 与 example.html，没有 example.md。这意味着在 fmToMeta 生成的 SkillExampleMeta 中 hasHtml: true、hasMd: false（loader.ts）：模板选择器会把它当作自带预渲染预览的技能，用户点击 Preview 时通过 GET /api/templates/motion-frames/example 一次性取回 content 与 html 两个字段（example route），直接灌入编辑器与预览 iframe，无需再让 Agent 现场生成。
在 CLI 工作流中，当你用 cli 目录下工具输入触发 motion-frames 的内容时，命中路径为：strongSignalMatch 关键词命中 → loadSkill 读取该 SKILL.md → prompt body（即【模板/意图/布局/设计细节】全文）注入 Agent 提示词 → Agent 依据示例规范输出单帧 HTML。
六、实战：基于示例改造成自己的循环动效帧
6.1 可复用的改造模板
把 example.html 作为骨架，改动三处即可变成你自己的帧：
- 换文案：替换
.headline的标题（Reach every <em>country.</em>）、.ring-labels的标签文本、上下.chrome饰条与.meta-tl/.issue的元数据； - 换强调色：只需改
--accent一个变量，全帧霓虹点缀随之统一变化（focal-dot、headline .accent、pulse阴影色同步联动）； - 换节奏：调整各
.ring的animation-duration与direction——需要更"静"的落地页大图就把外层时长拉到 120s 以上，需要更"活"的视频片头就把内层压到 20s 以内。
6.2 四条可迁移的设计法则
从这帧样板中可以提炼出四条可直接复用的 CSS 动效帧设计法则：
- 一个 keyframes 全家复用：
spin被 5 个元素共享，靠 duration / direction / inset 差异产生层次，避免为每层各写一套动画； - 循环留给背景，入场只给主体：旋转环、球体无限循环；标题用
both填充的一次性type-in，两不干扰； - 等宽体 + 大写 + 大字距 = 计时器质感：
font: 10px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase这组组合直接复刻"ticking timer"的科技感； - 单强调色纪律：全帧只允许
--accent一个饱和色，其余全部走--paper / --ink / --muted灰度，保证电影感。
6.3 适用场景与边界
按 SKILL.md 的定位，这个模板最适合：视频片头 title card、品牌广播式 hero、营销落地页首屏大图。aspect_hint 为"桌面 hero"，即正方形 composition（width: min(78vh, 78vw); aspect-ratio: 1/1）在桌面视口中以 vh/vw 自适应缩放；如果目标是 1920×1080 横版帧序列（如交付给 Remotion 渲染 .mp4），应改用 video-hyperframes 模板，它内置了逐帧隐藏标记与自动播放脚本。这是两个模板最重要的分工边界。
七、相关资源索引
- 模板定义：SKILL.md（frontmatter + 意图/布局/设计细节）
- 完整实现：example.html（可直接运行的循环动效帧）
- 模板注册与加载：loader.ts（frontmatter 解析、
hasHtml/hasMd判定） - 模板 API：route.ts 与 example route
- CLI 关键词匹配：skills-matcher.ts（
motion / 动效 / 循环 / 动画 / CSS动画→motion-frames） - 精选排序：template-picker.tsx（
featured数值升序） - 同族对比：video-hyperframes（多帧序列 + Remotion 交接）
- 全模板总表：README.md（Hyperframes video frames & VFX 分组）
【免费下载链接】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.
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
