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,6792026年6月22日 更新
無料GitHub で公開
frame-bold-signal
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
含まれるファイル（6）
- SKILL.md3.3 KB
- example.md237 B
- package.json358 B
- preview.png156.2 KB
- source/index.html4.1 KB
- template.html-video.yaml3.1 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
【模板: 大胆信号卡帧 (Bold Signal)】 【意图】章节/段落分隔 / 大胆 launch 陈述 / 高冲击标题卡。视觉提炼自 frontend-slides 的 Bold Signal 预设 (MIT, © Zara Zhang)。
【画布】1920×1080, 暗底 #1a1a1a + 135° 渐变 (#1a1a1a → #2d2d2d → #1a1a1a)。
【字体】display Archivo Black (900); body Space Grotesk 400/500/700。
【主结构 (时间轴, 默认 4s)】
- 0.2s 左上巨大 section number (
Archivo Black96px, 如01/04, 斜杠后半 opacity 0.3) 从上方 rollIn。 - 0.4s 起 右上 nav breadcrumb 错峰淡入: active 项
#FF5722橙 opacity 1, 其余白 opacity 0.35。 - 0.6s 橙色焦点卡 (
#FF5722, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。 - 1.15s 卡内 label (uppercase, letter-spacing 4px) fadeUp。
- 1.3s 卡内大标题 (
Archivo Black130px, 深色#1a1a1aon 橙) fadeUp。 - 1.6s 左下 footer (橙色 tick 短条 + system 标签) 淡入。
【配色纪律】暗底灰阶 + 唯一强调色 #FF5722 橙 (焦点卡 / active nav / footer tick)。可换成 coral/vibrant accent 但全片只用一个强调色。卡上文字用深色保证对比。
【内容纪律】
- title 1-2 行, 必须用真实标题, 严禁 lorem ipsum。
- nav 面包屑反映真实章节结构, 第一项 active。
- 动效用
@keyframes,prefers-reduced-motion下全部停在终态。 - 单文件 HTML。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6792026年6月22日 更新
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,6792026年6月22日 更新
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6792026年6月22日 更新
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,6792026年6月22日 更新
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
日本語の概要は準備中です。原文の説明を表示しています。
nexu-io/html-video4,6792026年6月22日 更新