frame-creative-voltage

Agent Skills › nexu-io/html-video › frame-creative-voltage

frame-creative-voltage

GitHub

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

templates/frame-creative-voltage/SKILL.md nexu-io/html-video

Trigger Scenarios

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

Install

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

More Options

Non-standard path

npx skills add https://github.com/nexu-io/html-video/tree/main/templates/frame-creative-voltage -g -y

Use without installing

npx skills use nexu-io/html-video@frame-creative-voltage

指定 Agent (Claude Code)

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

安装 repo 全部 skill

npx skills add nexu-io/html-video --all -g -y

预览 repo 内 skill

npx skills add nexu-io/html-video --list

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 淡入。