# Frame Electric Studio

> Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.

- Skill: `nexu-io/frame-electric-studio` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add nexu-io/frame-electric-studio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/frame-electric-studio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/frame-electric-studio

---


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