Frame Electric Studio

Name: Frame Electric Studio
Author: nexu-io

nexu-io/html-video

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

A two-panel split video frame where white and blue panels open from center, an accent bar grows, and a quote reveals line by line.

About

An HTML animated video-frame template that presents a quote as a two-panel split reveal with panels opening from center and the quote appearing line by line. A developer uses it for a pull-quote, testimonial, or mission-statement frame.

High-contrast white/blue split with growing black accent bar
Derived from the frontend-slides Electric Studio preset, 16:9 output

Frame Electric Studio 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-electric-studio

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-electric-studio.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-electric-studio)

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

What it does

A two-panel split video frame where white and blue panels open from center, an accent bar grows, and a quote reveals line by line.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 电光工作室分屏帧 (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。

{
  "name": "@html-video/template-frame-electric-studio",
  "version": "0.1.0",
  "description": "html-video template: frame-electric-studio (two-panel split quote, distilled from frontend-slides Electric Studio 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>Electric Studio · Split Panel Quote</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-electric-studio — two-panel vertical split, quote as hero.
   * Visual style distilled from the frontend-slides "Electric Studio" preset (MIT, © Zara Zhang).
   * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes.
   * Timeline (4.5s @ 60fps): panels split open (white down, blue up) -> accent bar grows
   * -> quote reveals line by line -> attribution fades -> corner brand marks fade.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #ffffff; color: #0a0a0a;
    font-family: 'Manrope', sans-serif; position: relative;
  }

  /* white top panel, blue bottom panel — split open from center */
  .panel-top { position: absolute; left: 0; right: 0; top: 0; height: 540px; background: #ffffff;
    transform: translateY(-100%); animation: openTop 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; }
  .panel-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 540px; background: #4361ee;
    transform: translateY(100%); animation: openBot 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; }
  @keyframes openTop { to { transform: translateY(0); } }
  @keyframes openBot { to { transform: translateY(0); } }

  /* accent bar on the seam */
  .seam { position: absolute; left: 96px; top: 540px; width: 0; height: 8px; background: #0a0a0a;
    z-index: 5; transform: translateY(-50%); animation: seamGrow 0.8s cubic-bezier(0.16,1,0.3,1) 0.9s forwards; }
  @keyframes seamGrow { to { width: 320px; } }

  /* quote hero, straddling the seam (last line(s) land on the blue panel, >540px) */
  .quote { position: absolute; left: 96px; top: 318px; right: 200px; z-index: 6;
    font-weight: 800; font-size: 104px; line-height: 1.12; letter-spacing: -2px; color: #0a0a0a; }
  .quote .ln { display: block; opacity: 0; transform: translateY(26px);
    animation: lnUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  .quote .ln.on-blue { color: #ffffff; }
  @keyframes lnUp { to { opacity: 1; transform: translateY(0); } }

  /* attribution, bottom panel */
  .attr { position: absolute; left: 96px; bottom: 110px; z-index: 6; color: #fff; opacity: 0;
    animation: fade 0.7s ease-out 2.2s forwards; }
  .attr .name { font-weight: 700; font-size: 28px; letter-spacing: 0.5px; }
  .attr .role { font-weight: 500; font-size: 18px; letter-spacing: 2px; text-transform: uppercase;
    opacity: 0.7; margin-top: 8px; }
  @keyframes fade { to { opacity: 1; } }

  /* corner brand marks */
  .brand { position: absolute; font-weight: 800; font-size: 20px; letter-spacing: 3px;
    text-transform: uppercase; z-index: 6; opacity: 0; animation: fade 0.6s ease-out 2.5s forwards; }
  .brand-tr { top: 64px; right: 96px; color: #0a0a0a; }
  .brand-br { bottom: 64px; right: 96px; color: #fff; opacity: 0; }
  .brand-br { animation: fadeDim 0.6s ease-out 2.6s forwards; }
  @keyframes fadeDim { to { opacity: 0.6; } }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .panel-top,.panel-bot{transform:translateY(0)}.seam{width:320px}
    .quote .ln{opacity:1;transform:none}.attr,.brand-tr{opacity:1}.brand-br{opacity:0.6}
  }
</style>
</head>
<body>
  <div class="panel-top"></div>
  <div class="panel-bot"></div>
  <div class="seam"></div>

  <div class="quote">
    <span class="ln" style="animation-delay:1.0s">One agent.</span>
    <span class="ln" style="animation-delay:1.15s">Every HTML</span>
    <span class="ln on-blue" style="animation-delay:1.3s">video engine.</span>
  </div>

  <div class="attr">
    <div class="name">html-video</div>
    <div class="role">Meta-layer for coding agents</div>
  </div>

  <div class="brand brand-tr">nexu.io</div>
  <div class="brand brand-br">Electric Studio</div>
</body>
</html>

spec_version: 1
id: frame-electric-studio
name: Electric Studio
description: >
  Two-panel vertical split with a quote as the hero — white top and electric-blue bottom
  panels open from the center, a black accent bar grows on the seam, and the quote reveals
  line by line across the divide. Clean, professional, high contrast. Distilled from the
  frontend-slides "Electric Studio" preset.

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

category: presentation
subcategory: quote-card
tags: [split-panel, quote, blue, high-contrast, studio, editorial]

best_for:
  - "Pull-quote / testimonial reveal"
  - "Mission statement card"
  - "Clean high-contrast title"

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: [quote_lines]
    properties:
      quote_lines:
        type: "array"
        items: { type: "string" }
        maxItems: 4
        description: "Quote split into lines; lines crossing into the blue panel render white"
      name:
        type: "string"
        maxLength: 40
        description: "Attribution name (on blue panel)"
      role:
        type: "string"
        maxLength: 60
        description: "Attribution role/subtitle (uppercase)"
      brand:
        type: "string"
        maxLength: 24
        description: "Corner brand mark"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 6
        default: 4
  examples:
    - {"quote_lines": ["One agent.", "Every HTML", "video engine."], "name": "html-video", "role": "Meta-layer for coding agents", "brand": "nexu.io"}

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 'Electric Studio' 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 "Electric Studio")
  # L3 — what this template does
  transformation: >
    Static slide preset → animated hyperframes timeline (white/blue panels open from the
    center, a black accent bar grows on the seam, the quote reveals line by line across
    the divide) built as original CSS 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 Electric Studio 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"