mcpField
F
frame-bold-signal

frame-bold-signal

github.com/nexu-io创意与媒体4.8k69 次安装18 周前更新
代码仓库

关于 frame-bold-signal

frame-bold-signal 是用于章节分隔、发布陈述和高冲击标题卡的 HTML 动效模板，适合制作演示或视频画面。它将暗色渐变底、橙色焦点卡与章节导航组合在一起。

主要功能

  1. 011920×1080 暗色渐变画布
  2. 02橙色焦点卡滑入
  3. 03章节编号滚入动画
  4. 04章节导航错峰淡入
  5. 05支持减少动态效果
  6. 06单文件 HTML

适用场景

  1. 01制作章节或段落分隔帧
  2. 02呈现发布主题陈述
  3. 03制作高冲击标题卡

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nexu-io/html-video --skill frame-bold-signal

安装后在 Claude Code 中输入/frame-bold-signal确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

example.md
package.json
template.html-video.yaml
source/
index.html

README 原文English

来自项目 README

README 暂无中文译文，以下为英文原文；中文介绍见上方。

【模板: 大胆信号卡帧 (Bold Signal)】 【意图】章节/段落分隔 / 大胆 launch 陈述 / 高冲击标题卡。视觉提炼自 frontend-slides 的 Bold Signal 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 暗底 #1a1a1a + 135° 渐变 (#1a1a1a → #2d2d2d → #1a1a1a)。

【字体】display Archivo Black (900); body Space Grotesk 400/500/700。

【主结构 (时间轴, 默认 4s)】

  • 0.2s 左上巨大 section number (Archivo Black 96px, 如 01/04, 斜杠后半 opacity 0.3) 从上方 rollIn。
  • 0.4s 起 右上 nav breadcrumb 错峰淡入: active 项 #FF5722 橙 opacity 1, 其余白 opacity 0.35。
  • 0.6s 橙色焦点卡 (#FF5722, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。
  • 1.15s 卡内 label (uppercase, letter-spacing 4px) fadeUp。
  • 1.3s 卡内大标题 (Archivo Black 130px, 深色 #1a1a1a on 橙) fadeUp。
  • 1.6s 左下 footer (橙色 tick 短条 + system 标签) 淡入。

【配色纪律】暗底灰阶 + 唯一强调色 #FF5722 橙 (焦点卡 / active nav / footer tick)。可换成 coral/vibrant accent 但全片只用一个强调色。卡上文字用深色保证对比。

【内容纪律】

  • title 1-2 行, 必须用真实标题, 严禁 lorem ipsum。
  • nav 面包屑反映真实章节结构, 第一项 active。
  • 动效用 @keyframes, prefers-reduced-motion 下全部停在终态。
  • 单文件 HTML。

评论

支持 Markdown