본문으로 건너뛰기
cccskills
무료GitHub에 공개

frame-electric-studio

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video
설치 방법 보기

포함된 파일(6)

  • SKILL.md3.3 KB
  • example.md257 B
  • package.json366 B
  • preview.png48.9 KB
  • source/index.html3.9 KB
  • template.html-video.yaml3.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

frame-bold-poster

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video4.7천2026년 6월 22일 업데이트

frame-bold-signal

무료

Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video4.7천2026년 6월 22일 업데이트

frame-build-minimal

무료

Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video4.7천2026년 6월 22일 업데이트

frame-creative-voltage

무료

Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video4.7천2026년 6월 22일 업데이트

frame-data-chart-nyt

무료

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video4.7천2026년 6월 22일 업데이트

frame-data-rollup

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

nexu-io/html-video4.7천2026년 6월 22일 업데이트

nexu-io의 스킬 모두 보기

이 스킬의 문제 신고