Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Frame Electric Studio

  • 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
Installs1
repo stars4.3k
Last updatedJune 21, 2026
Repositorynexu-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。

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.