Menu
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.
| name | frame-electric-studio |
| zh_name | 电光工作室分屏帧 |
| en_name | Electric Studio Frame |
| emoji | 🔷 |
| description | Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line. |
| zh_description | 电光工作室分屏帧:白/蓝双屏从中心开合 + 强调条生长 + 引言逐行浮现, 高对比专业感 |
| en_description | Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line. |
| category | video |
| scenario | video |
| aspect_hint | 1920×1080 (16:9) |
| featured | 0 |
| recommended | 6 |
| tags | ["split-panel","quote","blue","high-contrast","studio","frame"] |
| example_id | sample-frame-electric-studio |
| example_name | 电光分屏帧 · 引言 |
| example_format | markdown |
| example_tagline | 白/蓝双屏开合 + 引言逐行浮现 |
| example_desc | pull-quote / 使命陈述 — 黑色 accent 条 + 跨屏引言 |
| example_source_url | https://github.com/zarazhangrui/frontend-slides |
| example_source_label | frontend-slides · Electric Studio (MIT) |
| od | {"mode":"video","surface":"video","scenario":"video","featured":0,"upstream":"https://github.com/zarazhangrui/frontend-slides","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"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 和占位图片。"}} |
【模板: 电光工作室分屏帧 (Electric Studio)】 【意图】pull-quote / 推荐语 / 使命陈述 / 高对比标题。视觉提炼自 frontend-slides 的 Electric Studio 预设 (MIT, © Zara Zhang)。
【画布】1920×1080, 白色上屏 (540px) + 电光蓝下屏 (#4361ee, 540px), 中线分割。
【字体】display + body 都用 Manrope 800/700/500/400。
【主结构 (时间轴, 默认 4s)】
.on-blue)。font-size 96px, weight 800。【配色纪律】白 / 电光蓝 #4361ee / 近黑 #0a0a0a 三色。accent 条与品牌词用黑/白, 蓝是大色块。禁止第四个主色。
【内容纪律】
.on-blue class) 形成跨屏对比。@keyframes, prefers-reduced-motion 下全部停在终态。