Frame Creative Voltage

Name: Frame Creative Voltage
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

An electric split-panel video frame where offset panels slide in and a display title rises with an outlined word and a self-drawing handwritten script.

About

An HTML animated video-frame template that builds an energetic split reveal with electric-blue offset panels, an outlined display word, and a handwritten script stroking itself in. A developer uses it for an energetic brand or event title frame.

Retro-modern split panels with self-drawing script strokes
Derived from the frontend-slides Creative Voltage preset, 16:9 output

Frame Creative Voltage by the numbers

1 all-time installs (skills.sh)
Ranked #1,200 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill frame-creative-voltage

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/frame-creative-voltage.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-creative-voltage)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

An electric split-panel video frame where offset panels slide in and a display title rises with an outlined word and a self-drawing handwritten script.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 创意电压分屏帧 (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。

{
  "name": "@html-video/template-frame-creative-voltage",
  "version": "0.1.0",
  "description": "html-video template: frame-creative-voltage (electric split + script accent, distilled from frontend-slides Creative Voltage preset, MIT)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Creative Voltage · Electric Split + Script</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:wght@400;700&family=Caveat:wght@600&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-creative-voltage — electric-blue / dark split with a hand-drawn script accent.
   * Visual style distilled from the frontend-slides "Creative Voltage" preset (MIT, © Zara Zhang).
   * Rebuilt as a self-contained CSS/SVG @keyframes timeline for html-video / Hyperframes.
   * Timeline (4.5s @ 60fps): blue + dark panels slide in offset -> display title rises ->
   * handwritten script strokes itself in -> mono meta ticks fade -> underline dash sweeps.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #0d0d14; color: #fff;
    font-family: 'Syne', sans-serif; position: relative;
  }

  /* offset split panels */
  .panel-l { position: absolute; left: 0; top: 0; bottom: 0; width: 47%; background: #2f4bff;
    transform: translateX(-100%); animation: slideL 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; }
  .panel-r { position: absolute; right: 0; top: 0; bottom: 0; width: 53%; background: #0d0d14;
    transform: translateX(100%); animation: slideR 0.85s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; }
  @keyframes slideL { to { transform: translateX(0); } }
  @keyframes slideR { to { transform: translateX(0); } }

  /* electric noise glow on blue panel */
  .glow { position: absolute; left: 0; top: 0; bottom: 0; width: 47%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.16) 0%, transparent 55%); opacity: 0;
    animation: fade 1.2s ease-out 0.9s forwards; }
  @keyframes fade { to { opacity: 1; } }

  /* display title (right, dark) */
  .display { position: absolute; right: 110px; top: 300px; width: 760px; text-align: right; z-index: 4;
    font-weight: 800; font-size: 132px; line-height: 0.96; letter-spacing: -3px; }
  .display .ln { display: block; opacity: 0; transform: translateY(34px);
    animation: up 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  .display .volt { color: #2f4bff; -webkit-text-stroke: 2px #6f86ff; }
  @keyframes up { to { opacity: 1; transform: translateY(0); } }

  /* handwritten script accent (blue panel) */
  .script { position: absolute; left: 90px; top: 420px; z-index: 4; font-family: 'Caveat', cursive;
    font-size: 120px; color: #fff; opacity: 0; transform: rotate(-7deg);
    animation: scriptIn 0.8s ease-out 1.4s forwards; }
  @keyframes scriptIn { 0%{opacity:0;transform:rotate(-7deg) translateY(20px) scale(0.9)}
                        100%{opacity:1;transform:rotate(-7deg) translateY(0) scale(1)} }
  .script-underline { position: absolute; left: 90px; top: 560px; z-index: 4; }
  .script-underline path { stroke: #fff; stroke-width: 5; fill: none; stroke-linecap: round;
    stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 0.9s ease-out 1.9s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* mono meta line (top-left, on blue) */
  .meta { position: absolute; left: 90px; top: 96px; z-index: 4; font-family: 'Space Mono', monospace;
    font-size: 18px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.85);
    opacity: 0; animation: fade 0.6s ease-out 1.0s forwards; }

  /* mono caption bottom-right (on dark) */
  .caption { position: absolute; right: 110px; bottom: 96px; z-index: 4; font-family: 'Space Mono', monospace;
    font-size: 18px; font-weight: 400; letter-spacing: 2px; color: rgba(255,255,255,0.55);
    opacity: 0; animation: fade 0.6s ease-out 2.2s forwards; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .panel-l,.panel-r{transform:translateX(0)}.glow,.meta,.caption{opacity:1}
    .display .ln{opacity:1;transform:none}
    .script{opacity:1;transform:rotate(-7deg)}.script-underline path{stroke-dashoffset:0}
  }
</style>
</head>
<body>
  <div class="panel-l"></div>
  <div class="panel-r"></div>
  <div class="glow"></div>

  <div class="meta">// CREATIVE_MODE · ON</div>

  <div class="display">
    <span class="ln" style="animation-delay:1.0s">Render</span>
    <span class="ln volt" style="animation-delay:1.18s">any</span>
    <span class="ln" style="animation-delay:1.36s">video.</span>
  </div>

  <div class="script">make it move</div>
  <svg class="script-underline" width="520" height="60" viewBox="0 0 520 60" fill="none">
    <path d="M8 40 C 140 12, 360 12, 512 34"/>
  </svg>

  <div class="caption">html-video · creative voltage</div>
</body>
</html>

spec_version: 1
id: frame-creative-voltage
name: Creative Voltage
description: >
  Electric-blue / dark offset split with a hand-drawn script accent — panels slide in
  offset, a display title rises with one electric outlined word, and a handwritten script
  strokes itself in over a swept underline. Energetic, retro-modern, playful. Distilled
  from the frontend-slides "Creative Voltage" preset.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: presentation
subcategory: title-card
tags: [split-panel, electric, script, retro-modern, voltage, energetic]

best_for:
  - "Energetic brand / campaign title"
  - "Creative reveal with a human, hand-drawn accent"
  - "Retro-modern hero"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 3
    max_sec: 6
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [display_lines]
    properties:
      meta:
        type: "string"
        maxLength: 40
        description: "Mono meta line on the blue panel (e.g. // CREATIVE_MODE · ON)"
      display_lines:
        type: "array"
        items: { type: "string" }
        maxItems: 4
        description: "Display title lines (right); mark one line as the electric outlined accent"
      script:
        type: "string"
        maxLength: 24
        description: "Handwritten script accent on the blue panel"
      caption:
        type: "string"
        maxLength: 60
        description: "Mono caption, bottom-right"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 6
        default: 4
  examples:
    - {"meta": "// CREATIVE_MODE · ON", "display_lines": ["Render", "any", "video."], "script": "make it move", "caption": "html-video · creative voltage"}

license:
  spdx: Apache-2.0
  attribution_required: true
  redistribution_allowed: true
  commercial_use: true

provenance:
  # L1 — original design inspiration (real world)
  origin:
    name: none (original preset by the L2 skill author)
    kind: none
    reference: "No specific real-world studio; the 'Creative Voltage' look is an original preset composed by the frontend-slides author"
  # L2 — the open-source skill we actually transformed from (license governs here)
  via_skill:
    name: frontend-slides
    author: "Zara Zhang"
    url: https://github.com/zarazhangrui/frontend-slides
    license: MIT
    source_file: STYLE_PRESETS.md (preset "Creative Voltage")
  # L3 — what this template does
  transformation: >
    Static slide preset → animated hyperframes timeline (offset panels slide in, display
    title rises with one electric outlined word, handwritten script strokes itself in over
    a swept underline) built as original CSS/SVG keyframes. Original sample data.
    No upstream source code copied verbatim.

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-06-03
    notes: Distilled from the frontend-slides Creative Voltage preset into an animated html-video template.

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 4
    render_wall_clock_sec: 8
    machine: "M2 MacBook Air"