nexu-io/html-video

frame-bold-poster

用于品牌宣言或社论开场的动态海报技能，复刻1970年代欧洲风格。通过红色规则线、巨型倾斜大字及逐行标题动画，营造杂志封面般的视觉冲击力，强调极简排版与单一强调色纪律。

需要制作品牌愿景陈述视频生成具有复古 editorial 风格的社论开场动画设计杂志封面质感的动态海报

templates/frame-bold-poster/SKILL.md

npx skills add nexu-io/html-video --skill frame-bold-poster -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Bold Poster Frame template to open my deck like a magazine cover — a mono kicker with a red rule drawing across, a giant tilted display figure, a three-line headline rising line-by-line (the middle line in red), and an italic serif standfirst. Preserve the template's print-poster signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「大胆海报帧」模板把我的开场做成杂志封面感:mono kicker + 红线划过 + 巨型倾斜大字 + 三行标题逐行升起(中间行番红)+ 衬线斜体副题。保持印刷海报的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-bold-poster",
    "tags": [
        "poster",
        "editorial",
        "bold",
        "serif",
        "red",
        "print",
        "manifesto",
        "frame"
    ],
    "emoji": "🟥",
    "en_name": "Bold Poster Frame",
    "zh_name": "大胆海报帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-bold-poster",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.",
    "recommended": 6,
    "example_desc": "品牌宣言 \/ 社论开场 — 红线划入 + 大字旋转落入 + 三行标题逐行升起",
    "example_name": "大胆海报帧 · Manifesto",
    "en_description": "A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.",
    "example_format": "markdown",
    "zh_description": "大胆海报帧:1970s 欧洲社论海报风 + 番红强调色 + 巨型倾斜 Shrikhand 大字 + 三行标题逐行升起 + 衬线斜体副题, 印刷质感强。",
    "example_tagline": "番红 + 墨黑 + 巨型倾斜大字",
    "example_source_url": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
    "example_source_label": "frontend-slides · Bold Poster (MIT)"
}

【模板: 大胆海报帧 (Bold Poster)】【意图】品牌宣言 / 愿景陈述 / 社论或文化类开场 — 让几个词像杂志封面一样落地。视觉提炼自 frontend-slides 的 Bold Poster 模板 (MIT, © Zara Zhang),其上游灵感为 1970s 欧洲社论海报 / 意大利体育杂志 / 中世纪品牌年报。

【画布】1920×1080, 暖白纸底 #F5F2EF。

【字体】display + 数字 Shrikhand (海报级斜体大字); body Libre Baskerville (衬线, 斜体副题); mono 标签 / chrome Space Grotesk。

【配色纪律】纸白 #F5F2EF / 墨黑 #1C1410 / 唯一强调色番红 #D8000F。红色只用在: 一条 kicker rule、巨型 figure、标题中间行、footer 右侧 metadata。其余皆墨黑。全片只此一个强调色。

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

0.35s 纸底淡入 (印刷感的"落纸"而非"打光")。
0.5s 起 顶部 kicker: 左 mono 标签淡入 → 番红 rule 从左 scaleX 划过 → 右 mono 日期淡入。
0.7s 右上巨型番红 figure (Shrikhand 320px) 带旋转 (-14° → -6°) 从上落入。
1.15s 起 三行标题逐行升起, 每行各自 tilt: 行1 墨黑 -2°、行2 番红 -4°、行3 墨黑 +2°。
1.95s 衬线斜体副题 (Libre Baskerville italic) fadeUp。
2.15s footer 墨黑 rule 划入 + mono metadata 淡入。

【内容纪律】

headline 最多 3 行, 第 2 行自动番红; 必须真实标题, 严禁 lorem ipsum。
版式为"少量大字陈述", 不适合塞段落 — 信息密度高的内容请换模板。
CJK 文本: letter-spacing 归 0、放松行高、不要对 CJK 做 uppercase。
动效用 @keyframes, prefers-reduced-motion 下全部停在终态。
单文件 HTML, 字体走 Google Fonts。

frame-bold-signal

用于创建高冲击力的章节分隔或标题卡。包含暗底渐变、大号章节号入场、橙色焦点卡片滑动及标题上升动画。严格遵循配色与内容纪律，支持无障碍模式，适用于演示文稿中的关键信息展示。

需要醒目的章节或段落分隔符制作具有视觉冲击力的大标题启动画面展示核心主张或重要数据的高亮卡片

templates/frame-bold-signal/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-bold-signal -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Bold Signal Frame template to turn my section into a bold colored-card divider — a big section number, a nav breadcrumb, and a vibrant orange card sliding in from the right with the title rising. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「大胆信号卡帧」模板把我的章节做成一段大胆色卡分隔:大编号 + 导航面包屑 + 鲜橙卡片从右滑入 + 标题升起。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-bold-signal",
    "tags": [
        "bold",
        "card",
        "dark",
        "orange",
        "section",
        "signal",
        "frame"
    ],
    "emoji": "🔶",
    "en_name": "Bold Signal Frame",
    "zh_name": "大胆信号卡帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-bold-signal",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.",
    "recommended": 6,
    "example_desc": "章节分隔 \/ 大胆陈述 — 橙卡从右滑入 + 标题升起",
    "example_name": "大胆信号帧 · 01\/04",
    "en_description": "Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.",
    "example_format": "markdown",
    "zh_description": "大胆信号卡帧:暗渐变底 + 大编号 + 导航面包屑 + 橙色卡片滑入 + 标题升起, 高冲击力",
    "example_tagline": "暗渐变底 + 橙色焦点卡 + 大编号",
    "example_source_url": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
    "example_source_label": "frontend-slides · Bold Signal (MIT)"
}

【模板: 大胆信号卡帧 (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。

frame-build-minimal

生成奢华极简风格的单文件HTML Hero组件。采用暖白底与暖金点缀，强调70%以上留白。实现单词逐字浮现、呼吸动画及优雅排版，适用于高端品牌标题展示，严格限制色彩与内容规范。

需要生成奢华极简风格的品牌Hero页面需要制作单词逐字浮现的优雅标题卡需要符合Build Studio流派的高端视觉设计

templates/frame-build-minimal/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-build-minimal -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/alchaincyf\/huashu-design",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Build Minimal Frame template to turn my brand word into a luxury-minimal whitespace hero — a single word revealing letter by letter in ultra-thin type, a warm-gold hairline, and breathing indicators. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「奢华极简留白帧」模板把我的品牌词做成一段奢华极简留白 hero:超细字重单词逐字浮现 + 暖金细线 + 呼吸感指示器。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-build-minimal",
    "tags": [
        "minimal",
        "luxury",
        "whitespace",
        "hero",
        "gold",
        "build",
        "frame"
    ],
    "emoji": "◇",
    "en_name": "Build Minimal Frame",
    "zh_name": "奢华极简留白帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-build-minimal",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.",
    "recommended": 7,
    "example_desc": "70% 留白 + 角标 + 侧边竖排标签 + 8 条呼吸细线",
    "example_name": "奢华极简帧 · Agent",
    "en_description": "Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.",
    "example_format": "markdown",
    "zh_description": "奢华极简留白帧:单词逐字浮现 + 暖金细线 + 呼吸感细线指示器, 70%+ 留白",
    "example_tagline": "超细 Inter 单词逐字浮现 + 暖金细线",
    "example_source_url": "https:\/\/github.com\/alchaincyf\/huashu-design",
    "example_source_label": "huashu-design · Build (MIT)"
}

【模板: 奢华极简留白帧 (Build Minimal)】【意图】高端品牌 hero / 单词陈述 / 优雅标题卡。视觉提炼自 huashu-design 的 Build Studio 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 暖白底 #FAFAF8; 左上叠暖金径向 wash (rgba(212,165,116,0.07))。70%+ 留白是这套风格的灵魂, 不要填满。

【字体】西文 Inter weight 200/300 (超细); 中文 Noto Sans SC Light。字距收紧 (-4 ~ -7px)。

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

0.2s 四角 corner marks (暖金 0.5px 描边 L 形) + 暖金 wash 淡入。
0.5s eyebrow (uppercase, letter-spacing 9px, #B0ACA4) fadeUp。
0.6s 起 hero 单词逐字符浮现 (每字 .ch span, 错峰 80ms, translateY 30→0, expo-out)。font-size ~220px, weight 200。
1.9s 暖金细线 (#D4A574, 高 1px) 从宽 0 → 88px 居中生长。
2.2s 两行 desc (weight 300, #A8A4A0, line-height 2) fadeUp。
1.8s 侧边竖排小标签 (左右各一, rotate ±90°) 淡入。
2.4s 起 底部 7 条细竖线 (1.5px, 部分暖金) 错峰升起, 随后进入 4s 慢呼吸循环 (opacity 1↔0.45)。

【配色纪律】仅用暖白 #FAFAF8 / 近黑 #1A1A18 / 暖金 #D4A574 / 暖灰 #A8A4A0/#B0ACA4。禁止鲜艳色。暖金是唯一强调, 极克制 (细线 / 角标 / 个别指示器)。

【内容纪律】

hero 是一个词 (≤16 字符), 必须用用户真实品牌词/主题词。
desc 两行短句, 严禁 lorem ipsum。
动效用 @keyframes, prefers-reduced-motion 下全部停在终态。
单文件 HTML。

frame-creative-voltage

创意电压分屏帧，用于品牌活动标题展示。左蓝右暗错位分割，标题逐行升起并高亮关键词，手写体弹入配合SVG描边动画，营造能量感与复古现代风格。

需要展示带有能量感的品牌或活动标题希望呈现带有人文手味的创意揭示效果设计复古现代风格的Hero区域

templates/frame-creative-voltage/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-creative-voltage -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Creative Voltage Frame template to turn my title into an energetic split reveal — electric-blue and dark panels sliding in offset, a display title rising with one outlined electric word, and a handwritten script stroking itself in. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「创意电压分屏帧」模板把我的标题做成一段能量感分屏揭示:电光蓝与暗色面板错位滑入 + 标题升起带一个描边电光词 + 手写体自描入。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-creative-voltage",
    "tags": [
        "split-panel",
        "electric",
        "script",
        "retro-modern",
        "voltage",
        "frame"
    ],
    "emoji": "⚡",
    "en_name": "Creative Voltage Frame",
    "zh_name": "创意电压分屏帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-creative-voltage",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.",
    "recommended": 6,
    "example_desc": "能量感品牌标题 — 描边电光词 + 手写体描入 + 扫入下划线",
    "example_name": "创意电压帧 · make it move",
    "en_description": "Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.",
    "example_format": "markdown",
    "zh_description": "创意电压分屏帧:电光蓝\/暗错位分屏滑入 + 描边电光词 + 手写 script 自描, 复古现代有活力",
    "example_tagline": "电光蓝\/暗错位分屏 + 手写 script 自描",
    "example_source_url": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
    "example_source_label": "frontend-slides · Creative Voltage (MIT)"
}

【模板: 创意电压分屏帧 (Creative Voltage)】【意图】能量感品牌/活动标题 / 带手写人味的创意揭示 / 复古现代 hero。视觉提炼自 frontend-slides 的 Creative Voltage 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 左电光蓝屏 (#2f4bff, 47%) + 右暗屏 (#0d0d14, 53%), 错位分割。

【字体】display Syne 800; mono Space Mono; 手写 Caveat。

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

0.1s 左蓝屏从 translateX(-100%) 滑入; 0.25s 右暗屏从 translateX(100%) 滑入 (错峰, expo-out)。
0.9s 蓝屏左上电光高光 wash 淡入。
1.0s 蓝屏左上 mono meta 行 (// CREATIVE_MODE · ON) 淡入。
1.0s 起 右屏 display 标题逐行升起 (每行 .ln, 错峰 180ms); 一行用 .volt 描边电光词 (-webkit-text-stroke + 蓝色填充)。font-size 132px, 右对齐。
1.4s 蓝屏手写 script (Caveat, rotate -7°) 弹入。
1.9s script 下方手绘 underline (SVG path, stroke-dashoffset 描出)。
2.2s 右下 mono caption 淡入。

【配色纪律】电光蓝 #2f4bff/#6f86ff / 暗 #0d0d14 / 白。蓝是能量主色, 描边词与 script 制造"电压"对比。禁止杂色。

【内容纪律】

display 拆 2-4 行, 选一个词做 .volt 描边强调。
script 是短手写词组 (≤24 字符), 给画面人味。
必须用真实标题, 严禁 lorem ipsum。
动效用 @keyframes + SVG stroke, prefers-reduced-motion 下全部停在终态。
单文件 HTML。

frame-data-chart-nyt

生成《纽约时报》风格的数据图表，支持折线、柱状及范围带。采用手写SVG，严格遵循NYT排版规范（字体、配色、布局），内置错峰揭示动画。适配1920x1080画布，输出单文件HTML，适用于视频片段或社交媒体卡片。

需要制作纽约时报风格数据图表将CSV/JSON数据转化为新闻级可视化生成带有错峰动画效果的数据展示

templates/frame-data-chart-nyt/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-data-chart-nyt -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-anything",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线\/柱\/范围带)」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-data-chart-nyt",
    "tags": [
        "data",
        "chart",
        "nyt",
        "editorial",
        "frame"
    ],
    "emoji": "📈",
    "en_name": "NYT-Style Data Chart Frame",
    "zh_name": "NYT 风数据图表帧",
    "category": "video",
    "featured": 46,
    "scenario": "video",
    "example_id": "sample-frame-data-chart-nyt",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
    "example_desc": "8 年周活跃用户折线 + NYT red accent + 注释 mono",
    "example_name": "NYT 风折线图 · 全球用户量",
    "en_description": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
    "example_format": "markdown",
    "zh_description": "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线\/柱\/范围带)",
    "example_tagline": "编辑级图表 + 错峰揭示",
    "example_source_url": "https:\/\/hyperframes.heygen.com\/catalog",
    "example_source_label": "hyperframes · data-chart"
}

【模板: NYT 风数据图表帧】【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。

【画布】1920×1080, 暖白底 #f7f5ee 或墨黑底 #0e0e0e 二选一; 文字色和背景相反。

【布局】

顶部 kicker (11px uppercase letterspace 0.14em, 颜色 = accent 红 #a91d1d 或 mint #5fb38a): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。
大字标题 (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。结论必须从用户数据中提炼, 不是描述图。
图表区 (占画布 55-65%):
- 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 2024 · 412M 黑色 mono 小字。
- 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。
- 范围带 (range band): 浅灰填充 #e6e2d2 包络 + 中线 ink。
底部 source + footnote (10px mono, opacity 0.6): "Source: 用户数据 · Chart by html-anything"。
错峰揭示动画: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 prefers-reduced-motion 关闭。

【设计细节】

绝不: 使用 chart.js / d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。
字体: 标题 Source Serif Pro 或 Cheltenham (无则用 Playfair Display); body IBM Plex Sans 或 Inter; 数据标签 IBM Plex Mono。
1 个主色 (ink) + 1 个 accent (NYT red #a91d1d / 编辑 mint #5fb38a / 暖橙 #d97757 三选一)。
Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。
严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。
必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 "schematic"); 如果是 CSV/JSON, 直接绘制。
单文件 HTML; 数据点旁注释格式: <text class="annot">2024 · 412M</text>。

frame-data-rollup

原生Remotion数据滚动帧，利用弹簧物理实现柱状图生长与数字同步滚动。支持自定义数据、配色及标题，确保离线渲染确定性，适用于视频中的动态KPI或增长指标展示。

需要在视频中展示动态增长的柱状图需要将静态数据转化为同步滚动的数字动画制作带有实时数据反馈的KPI汇报视频片段

templates/frame-data-rollup/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-data-rollup -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "poster",
            "entry": "preview.png"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-video",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Data Rollup Frame to show my weekly metrics as a bar chart where the bars grow from zero and the numbers count up to their real values. Feed it the actual data; keep it to a handful of bars. This is a Remotion-enhanced data frame — the animation should make the figures feel alive.",
        "example_prompt_i18n": {
            "zh-CN": "用「数据滚动帧」把我的每周指标做成柱状图:柱子从 0 长上去、数字滚动到真实数值。喂真实数据,柱子控制在几根以内。这是 Remotion 增强的数据帧,动画要让数字有'活起来'的感觉。"
        }
    },
    "name": "frame-data-rollup",
    "tags": [
        "data",
        "chart",
        "bar",
        "rollup",
        "count-up",
        "remotion",
        "native",
        "kpi",
        "frame"
    ],
    "emoji": "📊",
    "en_name": "Data Rollup Frame",
    "zh_name": "数据滚动帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-data-rollup",
    "aspect_hint": "1920×1080 (16:9), also 9:16 \/ 1:1",
    "description": "A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.",
    "recommended": 5,
    "example_desc": "数据展示帧 — 柱子按真数据从 0 长出 + 数字 0→目标同步滚动",
    "example_name": "数据滚动帧 · This week on GitHub",
    "en_description": "A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.",
    "example_format": "markdown",
    "zh_description": "数据滚动帧:原生 Remotion 数据动画 — 柱子按真实数据用 spring 从 0 长上去、数字同步从 0 滚到目标值。静态 HTML 图表做不出的'数字活起来'效果。",
    "example_tagline": "柱子生长 + 数字滚动 (原生 Remotion)"
}

【模板: 数据滚动帧 (Data Rollup)】【类型】原生 Remotion 模板 (RFC-08 Phase 2) — 不是 HTML+GSAP,而是 React-tsx 直接吃 Remotion 的帧时钟 (useCurrentFrame + interpolate + spring)。这是让用户主动给数据帧挂上的动效增强:hyperframes 出静态/CSS 图表,本模板让柱子真的按数据长出来、数字真的滚动,一眼可辨。

【意图】数据展示帧 — 每周指标 / 增长柱 / KPI,数值应该动起来而不是干放着。适合塞进一条以 hyperframes 为主的视频里的某一个数据段。

【画布】默认 1920×1080,布局全部基于真实画布尺寸 (useVideoConfig) 计算,9:16 / 1:1 也不会压扁。

【数据契约 (inputProps)】

data.items[] — 每项 {label, value},就是要画的柱子;最多约 7 根,多了会挤。
data.title? — 左上标题。
data.unit? — 数字后缀,如 K / %。
accent? / background? / foreground? — 配色,默认番橙 #FF5A2C / 近黑 #0E0E10 / 纸白 #F5F5F2。

【动效结构】

每根柱子按 spring() 从 0 长到 value/maxValue 高度,逐根错峰 (0.12s 一根) 级联进场。
数字用与柱子同一条 growth 曲线从 0 滚到 value,柱子和数字同时落定。
标题 spring 淡入 + 上移;label 在柱子长到 40% 时淡入。

【内容纪律】

喂真实数据,别用占位数字。
value 必须是数;非数会被当 0(enhanceFrameNative 应在绑定前归一/校验)。
柱子数控制在 7 根内。

【离线确定性】纯系统字体栈、内联样式,无外部字体 / 资源 / 网络 — 保证 headless 渲染确定、不黑屏 (对齐桥接的 neutralizeBlockingResources 教训)。

【原创】原创 React-tsx,标准动画柱状图词汇 (count-up + spring 生长) 从零实现,无特定上游来源 (provenance origin = none)。

frame-electric-studio

生成电光工作室风格分屏动画，白蓝双色面板从中开合，引言逐行浮现并跨屏变色，适配高对比标题与推荐语。

需要制作分屏展示效果生成带动态引言的演示文稿创建品牌使命陈述动画

templates/frame-electric-studio/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-electric-studio -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Electric Studio Frame template to turn my quote into a two-panel split reveal — white top and electric-blue bottom panels opening from center, a black accent bar growing on the seam, and the quote revealing line by line. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「电光工作室分屏帧」模板把我的引言做成一段双屏开合揭示:白色上屏 + 电光蓝下屏从中心开合 + 接缝处黑色强调条生长 + 引言逐行浮现。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-electric-studio",
    "tags": [
        "split-panel",
        "quote",
        "blue",
        "high-contrast",
        "studio",
        "frame"
    ],
    "emoji": "🔷",
    "en_name": "Electric Studio Frame",
    "zh_name": "电光工作室分屏帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-electric-studio",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Two-panel split with quote as hero — white\/blue panels open from center, accent bar grows, quote reveals line by line.",
    "recommended": 6,
    "example_desc": "pull-quote \/ 使命陈述 — 黑色 accent 条 + 跨屏引言",
    "example_name": "电光分屏帧 · 引言",
    "en_description": "Two-panel split with quote as hero — white\/blue panels open from center, accent bar grows, quote reveals line by line.",
    "example_format": "markdown",
    "zh_description": "电光工作室分屏帧:白\/蓝双屏从中心开合 + 强调条生长 + 引言逐行浮现, 高对比专业感",
    "example_tagline": "白\/蓝双屏开合 + 引言逐行浮现",
    "example_source_url": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
    "example_source_label": "frontend-slides · Electric Studio (MIT)"
}

【模板: 电光工作室分屏帧 (Electric Studio)】【意图】pull-quote / 推荐语 / 使命陈述 / 高对比标题。视觉提炼自 frontend-slides 的 Electric Studio 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 白色上屏 (540px) + 电光蓝下屏 (#4361ee, 540px), 中线分割。

【字体】display + body 都用 Manrope 800/700/500/400。

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

0.1s 上屏从 translateY(-100%) 下落、下屏从 translateY(100%) 上升, 同时从中心"开合"到位 (expo-out)。
0.9s 接缝处黑色 accent 条 (高 8px) 从宽 0 → 320px 生长。
1.0s 起 引言逐行浮现 (每行 .ln, 错峰 150ms, translateY 26→0); 跨入蓝屏的行用白色 (.on-blue)。font-size 96px, weight 800。
2.2s 下屏 attribution (name 28px 700 + role uppercase 0.7 opacity, 白色) 淡入。
2.5s 右上品牌 mark (深色) + 右下品牌 mark (白 0.6) 淡入。

【配色纪律】白 / 电光蓝 #4361ee / 近黑 #0a0a0a 三色。accent 条与品牌词用黑/白, 蓝是大色块。禁止第四个主色。

【内容纪律】

quote 拆成 2-4 行, 让 1-2 行落在蓝屏 (改 .on-blue class) 形成跨屏对比。
必须用真实引言/陈述, 严禁 lorem ipsum。
动效用 @keyframes, prefers-reduced-motion 下全部停在终态。
单文件 HTML。

frame-glitch-title

生成赛博朋克风格故障艺术标题帧，支持视频转场或Hero展示。通过RGB偏移、切片动画和噪点模拟数据损坏效果，兼容HTML/CSS实现，确保动态与静态模式切换。

需要赛博朋克风格标题视频转场故障特效数字故障艺术设计

templates/frame-glitch-title/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-glitch-title -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0.14,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-anything",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 \/ 像散偏移 \/ 数据腐败标题, 适合视频转场 \/ cyberpunk hero」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-glitch-title",
    "tags": [
        "glitch",
        "cyberpunk",
        "title",
        "transition",
        "vfx",
        "frame"
    ],
    "emoji": "⚡",
    "en_name": "Glitch Title Frame",
    "zh_name": "故障艺术标题帧",
    "category": "video",
    "featured": 37,
    "scenario": "video",
    "example_id": "sample-frame-glitch-title",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
    "recommended": 6,
    "example_desc": "巨大标题 + 数据腐败伪影 + 角落 ASCII 噪点 chunks",
    "example_name": "故障标题 · SIGNAL_LOST",
    "en_description": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
    "example_format": "markdown",
    "zh_description": "数字故障 \/ 像散偏移 \/ 数据腐败标题, 适合视频转场 \/ cyberpunk hero",
    "example_tagline": "cyan \/ magenta 像散 + CRT 扫描线",
    "example_source_url": "https:\/\/hyperframes.heygen.com\/catalog",
    "example_source_label": "hyperframes · glitch"
}

【模板: 故障艺术标题帧 (Glitch Title)】【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。

【画布】1920×1080, 背景 #070708 近黑或 CRT 暗灰 #0d0e10; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。

【主标题】

居中, 6-9vw, weight 800/900, 字体 Space Grotesk Bold / Inter Tight Black / JetBrains Mono Bold。
颜色: 主层 #f5f5f7; 后面套 2 层伪影:
- cyan #00f0ff translate(-3px, 1px)。
- magenta #ff2bd6 translate(3px, -1px)。
整层加 clip-path 切片 5-8 段, 每段 @keyframes 随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "data corruption" 像散。
每隔 1.5s 触发一次"重故障" — 整个标题被 horizontal smear 1 frame, 用 filter: url(#displacementFilter) 或简单 CSS 平移。

【附加层】

顶部一行 caption (uppercase mono, 11px, opacity 0.6): >> SIGNAL_LOST · CH-04 · 14:32:08。
标题下面 1 行副标 (24-28px, mono, opacity 0.7), 偶发被 ̶▒̶ 字符替换 (假乱码)。
角落随机点缀 █▓▒░ ASCII 噪点 chunks。
底部 timecode (mono, opacity 0.4)。
整画面叠 noise grain 层 background-image: url("data:image/svg+xml,...turbulence..."), opacity 6%, mix-blend-mode overlay。

【SVG 滤镜 (可选)】

定义 <filter id="rgbShift"> 用 feColorMatrix + feOffset + feMerge 把 R/G/B 三通道偏移; 整层 filter: url(#rgbShift) 在故障瞬间应用。

【设计细节】

颜色仅用: 黑 / 白 / cyan / magenta / 一点 amber 警告色; 严禁全彩虹。
字体: 西文 Space Grotesk 或 JetBrains Mono Bold; 中文 Noto Sans Mono CJK SC 或 Noto Sans SC Bold。
严禁 lorem ipsum; 必须用用户的标题 + 副标。
动效用 @keyframes, 可被 prefers-reduced-motion 关闭 (退回静态 chromatic split)。
单文件 HTML。

frame-light-leak-cinema

生成具有胶片漏光、颗粒感和衬线大字的电影开场或章节卡。支持2.39:1画幅，包含暖色调漏光、35mm噪点及入场动效，适用于纪录片或个人短片，严格遵循古典胶片美学规范。

需要制作电影风格开场画面视频章节卡片设计添加复古胶片质感效果

templates/frame-light-leak-cinema/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-light-leak-cinema -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-anything",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 \/ 章节卡」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-light-leak-cinema",
    "tags": [
        "cinema",
        "film",
        "light-leak",
        "grain",
        "letterbox",
        "frame"
    ],
    "emoji": "🎞️",
    "en_name": "Light-Leak Cinematic Frame",
    "zh_name": "胶片漏光电影帧",
    "category": "video",
    "featured": 36,
    "scenario": "video",
    "example_id": "sample-frame-light-leak-cinema",
    "aspect_hint": "2.39:1 letterbox (1920×800) 或 16:9 (1920×1080)",
    "description": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
    "example_desc": "2.39:1 letterbox + 衬线斜体大字 + 胶片齿孔",
    "example_name": "胶片漏光 · REEL 03",
    "en_description": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
    "example_format": "markdown",
    "zh_description": "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 \/ 章节卡",
    "example_tagline": "暖橙漏光 + 35mm 颗粒",
    "example_source_url": "https:\/\/hyperframes.heygen.com\/catalog",
    "example_source_label": "hyperframes · light-leak"
}

【模板: 胶片漏光电影帧】【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。

【画布】

2.39:1 letterbox (推荐): 1920×800, 上下黑边各 140px (#000)。
或 16:9: 1920×1080, 无 letterbox。

【背景】

底层: 深暖色 (深红棕 #1a0d08 / 墨绿 #0a1410 / 蓝紫 #0d0e1a) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。
胶片漏光 (Light Leak): 2-3 个大 radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%) + 1 个底部 linear-gradient(to top, #d97757 0%, transparent 30%); 颜色取暖橙 / 桃 / 玫红 / 暗黄, 不要冷蓝。
35mm Grain: 全屏覆盖 SVG turbulence noise 图层, opacity 14%, mix-blend-mode: overlay; 也可用 background-image: url("data:image/svg+xml,...feTurbulence...")。
可选: 1 道 feDisplacementMap 模拟胶片摆动 (慎用)。

【文字】

中央或左下: 大字衬线 (Source Serif Pro / Playfair Display / EB Garamond) 5-8vw, weight 500 italic; 颜色暖白 #f5e9d6 或 cream。
副标 (24-28px) 一行, opacity 0.7, 同样衬线。
角落 caption (uppercase letterspace 0.18em, 10-11px, mono, opacity 0.5): "REEL 03 · CH I · 1985"。
底部 timecode + 拍摄地 + 日期 (mono, opacity 0.4)。

【可选附加】

"胶片划痕": 几条 1-2px 竖向白线, opacity 0.2, 不规则间距 (用 box-shadow 多重 inset 或多个 <div>)。
"胶片齿孔": letterbox 黑边内, 等距小白方块 (CSS repeating-linear-gradient)。
入场动效: 整画面从 underexposed (brightness 0.3) → normal, 800ms 内; 漏光位置缓慢漂移 12s 一个周期。

【设计细节】

颜色绝不超过 4 个色相 (深背景 + 2 个暖漏光色 + 文字 cream)。
严禁: 蓝紫漏光 (违反胶片质感)、emoji、霓虹色、几何 dashboard 装饰。
中文: Noto Serif SC italic 不存在 → 用 Noto Serif SC regular + 字距加大。
必须用用户提供的标题; 自动估算合理"年份 / 章节 / 地点" 元数据 (但来源用户内容)。
单文件 HTML, 用 prefers-reduced-motion 关动效。

frame-liquid-bg-hero

生成WebGL风格流体背景Hero模板，支持视频片头、着陆页或海报。提供CSS/Canvas/WebGL三种实现，含4种调色板及巨型金句叠加，确保单文件可运行且兼容无障碍设置。

需要流体动画背景制作视频片头或着陆页Hero 生成带文字叠加的视觉底图

templates/frame-liquid-bg-hero/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-liquid-bg-hero -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-anything",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 \/ landing hero \/ 海报」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-liquid-bg-hero",
    "tags": [
        "liquid",
        "fluid",
        "background",
        "hero",
        "html-in-canvas",
        "vfx"
    ],
    "emoji": "🌊",
    "en_name": "Liquid Background Hero",
    "zh_name": "流体背景 Hero 帧",
    "category": "poster",
    "featured": 39,
    "scenario": "video",
    "example_id": "sample-frame-liquid-bg-hero",
    "aspect_hint": "1920×1080 (16:9) 或 1080×1920 (9:16)",
    "description": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
    "example_desc": "多层 radial-gradient 呼吸背景 + difference 文字",
    "example_name": "流体背景 Hero · 金句",
    "en_description": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
    "example_format": "markdown",
    "zh_description": "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 \/ landing hero \/ 海报",
    "example_tagline": "Aurora Violet 流体",
    "example_source_url": "https:\/\/hyperframes.heygen.com\/catalog",
    "example_source_label": "hyperframes · vfx-liquid-background"
}

【模板: 流体背景 Hero】【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。

【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。

【流体背景 — 3 种实现, 按用户偏好选】

CSS 多层 radial-gradient 错位呼吸 (最稳, 默认推荐):
- 3-5 个大椭圆 radial-gradient(...), 颜色取自调色板。
- 每个椭圆套 @keyframes 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 mix-blend-mode: screen 或 overlay。
- 顶层加 1 层 backdrop-filter: blur(80px) 让边缘更糊。
Canvas + simple perlin noise (中阶):
- 80 行 inline JS, 用 requestAnimationFrame 画 metaballs 或 simplex noise field。
- 性能允许时启用, prefers-reduced-motion 时降回静态截图。
WebGL fragment shader (高阶, 慎用):
- 用 jsdelivr CDN 引 regl 或 inline plain WebGL。
- shader 写 domain-warp noise; 单个 quad, 一个 uniform u_time。

【顶层文字层】

居中或左下: 一句巨型金句 (5-7vw, 衬线或粗 sans), 字体: Source Serif Pro / Inter Tight / Manrope Black。
文字色用 paper white #fafaf8 或 ink, 取决于背景明暗; 加 mix-blend-mode: difference 让它在任何流体颜色上都可读。
副标 (小 sans, opacity 0.7) 一行。
底部可选 CTA chip 或 hairline + 元数据 row。

【调色 — 4 选 1, 不要彩虹】

🌅 Solar Peach — #ffb18a + #f78b4c + #d97757, 暖橙桃。
🌊 Ocean Aqua — #5ac8fa + #0a84ff + #1e3a8a, 海蓝。
🌌 Aurora Violet — #a78bfa + #7c5cff + #1e1b4b, 极光紫。
🌿 Forest Mint — #86efac + #34d399 + #065f46, 苔森林。

【设计细节】

严禁: 多色彩虹 (>4 个色相)、PowerPoint 渐变、霓虹荧光叠加。
字体: 中文用 Noto Serif SC (display) / Noto Sans SC (副标)。
严禁外链图片; 全部 CSS + SVG + 可选 canvas。
必须用用户提供的金句 / 标题; 如果用户输入是数据 → 提炼一句 ≤ 18 字的金句。
单文件 HTML, 可被 prefers-reduced-motion 关动效。

frame-logo-outro

生成视频结尾品牌展示帧，包含分块拼装Logo、光晕特效及标语淡入。支持纯CSS/SVG绘制，适配深色背景与四种调色方案，确保单文件静态输出且兼容无障碍模式。

需要制作视频结尾的品牌展示动画生成带有Logo组装和Glow效果的品牌Closing Frame

templates/frame-logo-outro/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-logo-outro -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0.16,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-anything",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 \/ 品牌闭幕」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-logo-outro",
    "tags": [
        "logo",
        "outro",
        "branding",
        "end-card",
        "frame"
    ],
    "emoji": "🎬",
    "en_name": "Logo Outro Frame",
    "zh_name": "品牌 Logo 收尾帧",
    "category": "video",
    "featured": 40,
    "scenario": "video",
    "example_id": "sample-frame-logo-outro",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
    "recommended": 8,
    "example_desc": "Logo 装配 + 品牌名 + tagline + CTA, 视频片尾用",
    "example_name": "品牌 Logo 收尾 · HTML Anything",
    "en_description": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
    "example_format": "markdown",
    "zh_description": "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 \/ 品牌闭幕",
    "example_tagline": "Midnight Indigo + glow bloom",
    "example_source_url": "https:\/\/hyperframes.heygen.com\/catalog",
    "example_source_label": "hyperframes · logo-outro"
}

【模板: Logo 收尾帧 (Logo Outro)】【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。

【画布】1920×1080, 黑色 #08090c 或品牌深色背景; 加微妙 vignette radial-gradient(...) 让中心更亮。

【布局】

中心 Logo: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
- 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
- 入场完成后, 整个 logo 加 glow bloom: filter: drop-shadow(0 0 24px <accent>40); 同时一道 shimmer mask-image 横扫 logo (500ms)。
品牌名: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
Tagline: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
底部 CTA + 元数据: 双行底部 row, 例如 htmlanything.dev · @htmlanything · 2026, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。

【调色 — 4 选 1, 不混用】

🌌 Midnight Indigo — bg #08090c, accent #7c5cff (霓虹紫蓝 glow)。
🌅 Solar Amber — bg #0e0a08, accent #ffb547 (暖琥珀)。
🌿 Forest Mint — bg #0a1410, accent #5fb38a (薄荷绿)。
⚪ Bone & Ink — bg #f1efea, accent #0a0a0b (无 neon, 走 editorial 风, glow 改成阴影)。

【设计细节】

绝不: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。
入场动画用 @keyframes + animation-delay; 可被 prefers-reduced-motion 关闭。
字体: 西文 Inter Tight / SF Pro Display / Manrope; 中文 Noto Sans SC weight 700。
必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。
单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。
顶部可选 5px ribbon (accent 色) 增加品牌识别。

frame-pentagram-stat

瑞士网格风格数据帧动画，用于突出单一关键指标。包含巨型背景数字、红色强调元素及错峰生长的条形图，严格遵循黑白红配色与真实数据规范，支持无障碍静态模式。

需要展示单一核心KPI或基准数据要求极简理性编辑风格的数据可视化需要带有动态入场效果的统计图表

templates/frame-pentagram-stat/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-pentagram-stat -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/alchaincyf\/huashu-design",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Pentagram Stat Frame template to turn my key metric into a Swiss-grid data reveal — a giant number anchor, red accent, growing bar chart, and a black data bar. Preserve the template's visual signature, use real numbers, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「瑞士网格数据帧」模板把我的关键指标做成一段瑞士风数据揭示:巨大数字锚点 + 红色强调 + 生长条形图 + 黑色数据底栏。保持模板的视觉签名,使用真实数字,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-pentagram-stat",
    "tags": [
        "stat",
        "swiss-grid",
        "editorial",
        "data",
        "pentagram",
        "number",
        "frame"
    ],
    "emoji": "📊",
    "en_name": "Pentagram Stat Frame",
    "zh_name": "瑞士网格数据帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-pentagram-stat",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.",
    "recommended": 8,
    "example_desc": "单一关键指标锚点 + 网格线扫入 + 黑色数据底栏滑入",
    "example_name": "瑞士数据帧 · 95.7",
    "en_description": "Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.",
    "example_format": "markdown",
    "zh_description": "瑞士网格数据帧:巨大数字锚点 + 红色强调 + 生长条形图 + 黑色数据底栏, 理性克制的编辑风",
    "example_tagline": "巨大红黑数字 + 瑞士网格 + 生长条形图",
    "example_source_url": "https:\/\/github.com\/alchaincyf\/huashu-design",
    "example_source_label": "huashu-design · Pentagram (MIT)"
}

【画布】1920×1080, 纯白底 #ffffff; 叠瑞士网格 — 水平/垂直细线 (黑, opacity 0.04-0.06), 开场 0.7s 内 scaleX/scaleY 从 0 扫入。

【字体】西文 Archivo (900/700/500) 或 Helvetica Neue; 中文 Noto Sans SC Bold。理性、紧凑、负字距。

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

0.0-0.7s 网格线扫入 (scaleX/scaleY 0→1, cubic-bezier(0.16,1,0.3,1))。
0.5-1.6s 右侧巨大数字锚点 (font-size ~1020px, weight 900, 黑, opacity 0.07) 从下方 8% 升入并淡现, bleed off 右边缘。
0.7s 红色 eyebrow label (uppercase, letter-spacing 6px, #E63946) fadeUp。
0.85s 主数字 headline (~200px, weight 900) fadeUp; 句点/单位用 #E63946 红强调。
1.15s 副标 (24px, #999) fadeUp。
1.3s 红色 center rule (高 5px) 从宽 0 → 400px 生长。
1.35-1.7s 5 根条形图错峰从底部 scaleY 0→1 生长; 中间一根 #E63946 红 + opacity 0.85, 其余黑 opacity 0.12。
1.5s 黑色数据底栏 (高 80px) 从 translateY(100%) 滑入; 内含 3 组 stat (红色大数字 + 灰白小标签) + 右侧 system 标签。

【配色纪律】仅用黑 / 白 / #E63946 红 / 中性灰 #999。严禁其他彩色。红色是唯一强调色, 用在 label / 主数字标点 / center rule / 中间条 / 数据底栏数字。

【内容纪律】

必须用用户的真实指标/数字, 严禁 lorem ipsum 或编造 benchmark。
headline 是一个数字 (≤12 字符); anchor 是它的简写 (≤4 字符) 用作背景巨字。
动效用 @keyframes, prefers-reduced-motion 下全部停在终态 (静态成图)。
单文件 HTML。

frame-takram-organic

生成Takram风格有机帧动画，用于系统架构或温暖叙事。采用米色底、毛玻璃卡与Sage绿/陶土橙配色，展示节点图动态弹出与漂浮效果。严禁高饱和色，强调自然呼吸感与无障碍适配。

需要展示系统架构概念制作温暖的产品叙事动画生成网络或记忆关系的图解

templates/frame-takram-organic/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill frame-takram-organic -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/alchaincyf\/huashu-design",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Takram Organic Frame template to turn my concept into a soft-tech radial node graph — a frosted rounded card with curved links drawing in and nodes popping outward around an evolving core. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「东方柔和有机帧」模板把我的概念做成一段柔和科技感放射节点图:毛玻璃圆角卡 + 曲线连接描入 + 节点围绕进化核心放射弹出。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-takram-organic",
    "tags": [
        "organic",
        "soft-tech",
        "radial",
        "diagram",
        "takram",
        "beige",
        "frame"
    ],
    "emoji": "🌿",
    "en_name": "Takram Organic Frame",
    "zh_name": "东方柔和有机帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-takram-organic",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.",
    "recommended": 7,
    "example_desc": "米色底 + 自然色 (sage\/terracotta) + 八节点放射图作为艺术品",
    "example_name": "柔和有机帧 · 节点图",
    "en_description": "Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.",
    "example_format": "markdown",
    "zh_description": "东方柔和有机帧:毛玻璃圆角卡 + 曲线连接描入 + 放射节点弹出 + 柔和漂浮, 米色自然色调",
    "example_tagline": "毛玻璃圆角卡 + 放射节点弹出 + 柔和漂浮",
    "example_source_url": "https:\/\/github.com\/alchaincyf\/huashu-design",
    "example_source_label": "huashu-design · Takram (MIT)"
}

【画布】1920×1080, 米色底 #EFEAE0; 右侧叠 sage 绿径向 wash (rgba(122,158,127,0.10))。整体柔和、自然、有呼吸感。

【字体】西文 Manrope 700/600/400; 中文 Noto Sans SC。圆润, 不要太硬。

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

0.2s 左侧毛玻璃圆角卡 (rgba(255,253,248,0.66) + blur 8px + border-radius 40px + 柔影) 从下方 26px + scale 0.985 升入。
0.7s 绿色 eyebrow (#7A9E7F, uppercase, letter-spacing 4px) fadeUp。
0.9s 卡标题 (92px, weight 700) fadeUp; 一个 accent 词用陶土橙 #C98A5E。
1.2s caption (22px, #8A867C, line-height 1.8) fadeUp。
1.3s 右侧放射图中心节点 (陶土橙, r=40) 弹出 (overshoot)。
1.4s 起 8 条曲线 link (sage #B8C9BA, stroke-dasharray draw) 从中心错峰描出。
1.9s 起 8 个外围节点 (sage 绿, r=22) 错峰 pop (scale 0→1, overshoot)。
2.0s 起 整个放射图进入 7s 慢漂浮循环 (translateY 微动)。

【配色纪律】米色 #EFEAE0 / 暖白卡 / sage 绿 #7A9E7F·#B8C9BA / 陶土橙 #C98A5E / 暖灰文字。禁止高饱和科技蓝/紫。绿是结构色, 橙是强调色 (核心节点 + 标题 accent 词)。

【内容纪律】

节点图是"艺术品", 节点数 4-8 按内容调 (改 SVG 里 node/link 数量 + 角度)。
必须用真实概念/关系, 严禁 lorem ipsum。
动效用 @keyframes + SVG stroke-dashoffset, prefers-reduced-motion 下全部停在终态。
单文件 HTML。

vfx-text-cursor

用于视频开场逐字揭示金句的VFX文字光标特效。支持彩色像散尾迹、定向光斑及光标闪烁，适配1920x1080画布，确保高性能与无障碍体验。

需要制作视频开场或Hero帧的逐字打字机效果为引用金句添加动态光标、色散轨迹及光晕特效

templates/vfx-text-cursor/SKILL.md

View Skill ›

npx skills add nexu-io/html-video --skill vfx-text-cursor -g -y

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0.15,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/nexu-io\/html-anything",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "vfx-text-cursor",
    "tags": [
        "vfx",
        "text",
        "cursor",
        "chromatic",
        "reveal",
        "frame"
    ],
    "emoji": "✨",
    "en_name": "VFX Text Cursor",
    "zh_name": "VFX 文字光标",
    "category": "video",
    "featured": 38,
    "scenario": "video",
    "example_id": "sample-vfx-text-cursor",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
    "recommended": 7,
    "example_desc": "光标打字 hot pink + cyan 像散, 视频开场用",
    "example_name": "VFX 光标 · 开场金句",
    "en_description": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
    "example_format": "markdown",
    "zh_description": "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句",
    "example_tagline": "逐字揭示 + chromatic 拖光",
    "example_source_url": "https:\/\/hyperframes.heygen.com\/catalog",
    "example_source_label": "hyperframes · vfx-text-cursor"
}

【模板: VFX 文字光标 (Text Cursor)】【意图】视频开场/Hero 帧 —— 光标在画布上"打字", 文字逐字浮现, 后面拖着彩色像散尾迹 + 定向光斑。Inspired by hyperframes vfx-text-cursor。

【画布】1920×1080, 背景 #06070a 暗哑黑或 #0a0d12 (有暖偏蓝); 加微妙 vignette。

【内容】

一句金句 (中英不限), 居中, 字号 6-8vw, weight 700, 字体 Inter Tight / Source Sans 3 / Noto Sans SC。
逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor ▍ (或细 vertical bar)。
已揭示文字默认白色 #f5f5f7, opacity 1; 即将揭示位置加 chromatic ghost: 一份 text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff 在 reveal 瞬间, 200ms 内收敛回正常。
光标本身: 16px 宽矩形, 颜色 = accent (取 1: hot pink #ff3b6f / cyan #00d4ff / amber #ffb547), 闪烁 @keyframes 1.0s 周期; 后面拖一条 60-120px 的 motion blur trail (径向渐变到透明)。

【光斑 / 射线】

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

【字段】

顶部 caption (uppercase letterspace 0.18em, 11px, opacity 0.5): "FRAME 01 · OPENING"。
文字底下副标 (24-28px, opacity 0.6): 来源 / 章节。
右下角 timecode (00:03:21 mono)。

【设计细节】

绝不: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。
字体: 西文 Inter Tight Bold; 中文 Noto Sans SC Bold; 严禁衬线。
动效用 @keyframes + JS 计时器 (setTimeout 逐字), 可被 prefers-reduced-motion 关闭 (直接显示所有字)。
必须用用户提供的金句; 不要捏造。
单文件 HTML, 不要外链字体以外的资源。

nexu-io/html-video