القائمة
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.
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.
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
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 下全部停在终态。