Frame Bold Signal

Name: Frame Bold Signal
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

An animated section-divider video frame with a big section number, nav breadcrumb, and an orange card sliding in over a dark gradient.

About

An HTML animated video-frame template that turns a section into a bold colored-card divider with a large number, breadcrumb, and orange card sliding in as the title rises. A developer uses it as a high-impact section break or launch statement frame.

Dark-gradient background with vibrant orange focus card
Derived from the frontend-slides Bold Signal preset, 16:9 output

Frame Bold Signal by the numbers

1 all-time installs (skills.sh)
Ranked #1,200 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill frame-bold-signal

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/frame-bold-signal.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-bold-signal)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

An animated section-divider video frame with a big section number, nav breadcrumb, and an orange card sliding in over a dark gradient.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 大胆信号卡帧 (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 Black 96px, 如 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 Black 130px, 深色 #1a1a1a on 橙) 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。

{
  "name": "@html-video/template-frame-bold-signal",
  "version": "0.1.0",
  "description": "html-video template: frame-bold-signal (bold colored card on dark, distilled from frontend-slides Bold Signal preset, MIT)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bold Signal · Colored Card on Dark</title>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-bold-signal — bold colored card on a dark gradient.
   * Visual style distilled from the frontend-slides "Bold Signal" preset (MIT, © Zara Zhang).
   * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes.
   * Timeline (4s @ 60fps): dark stage -> big section number rolls in -> nav breadcrumb fades
   * -> orange card slides in from right -> title rises -> footer marks fade.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #1a1a1a;
    background-image: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    color: #fff; font-family: 'Space Grotesk', sans-serif; position: relative;
  }

  /* big section number, top-left */
  .section-no { position: absolute; top: 88px; left: 96px; font-family: 'Archivo Black', sans-serif;
    font-size: 96px; line-height: 1; color: #fff; opacity: 0; transform: translateY(-30px);
    animation: rollIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s forwards; }
  .section-no .dim { opacity: 0.3; }
  @keyframes rollIn { to { opacity: 1; transform: translateY(0); } }

  /* nav breadcrumb, top-right */
  .nav { position: absolute; top: 104px; right: 96px; display: flex; gap: 28px;
    font-size: 18px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
  .nav span { opacity: 0; animation: fade 0.5s ease-out forwards; color: #fff; }
  .nav span.dim { opacity: 0; }
  .nav span.active { color: #FF5722; }
  @keyframes fade { to { opacity: 0.35; } }
  @keyframes fadeActive { to { opacity: 1; } }
  .nav span.active { animation: fadeActive 0.5s ease-out forwards; }

  /* the orange focal card */
  .card { position: absolute; right: 0; top: 240px; width: 1180px; height: 600px;
    background: #FF5722; color: #1a1a1a; border-radius: 36px 0 0 36px;
    padding: 96px 110px; display: flex; flex-direction: column; justify-content: flex-end;
    transform: translateX(110%); animation: cardSlide 0.9s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
    box-shadow: -40px 30px 90px rgba(255,87,34,0.18); }
  @keyframes cardSlide { to { transform: translateX(0); } }
  .card-label { font-size: 20px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    opacity: 0; animation: fadeUp 0.6s ease-out 1.15s forwards; }
  .card-title { font-family: 'Archivo Black', sans-serif; font-size: 130px; line-height: 0.94;
    letter-spacing: -2px; margin-top: 28px; opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 1.3s forwards; }
  @keyframes fadeUp { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:translateY(0)} }

  /* footer marks */
  .footer { position: absolute; bottom: 80px; left: 96px; display: flex; gap: 16px; align-items: center;
    font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #fff;
    opacity: 0; animation: fade 0.6s ease-out 1.6s forwards; }
  .footer .tick { width: 40px; height: 3px; background: #FF5722; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .section-no{opacity:1;transform:none}.nav span{opacity:0.35}.nav span.active{opacity:1}
    .card{transform:translateX(0)}.card-label,.card-title{opacity:1;transform:none}.footer{opacity:1}
  }
</style>
</head>
<body>
  <div class="section-no">01<span class="dim">/04</span></div>

  <div class="nav">
    <span class="active" style="animation-delay:.4s">Signal</span>
    <span class="dim" style="animation-delay:.5s">Build</span>
    <span class="dim" style="animation-delay:.6s">Ship</span>
    <span class="dim" style="animation-delay:.7s">Scale</span>
  </div>

  <div class="card">
    <div class="card-label">Launch · 2026</div>
    <div class="card-title">Bring your<br>own agent.</div>
  </div>

  <div class="footer"><span class="tick"></span> html-video · Bold Signal</div>
</body>
</html>

spec_version: 1
id: frame-bold-signal
name: Bold Signal
description: >
  Bold colored card on a dark gradient — a big section number rolls in, a nav breadcrumb
  fades, a vibrant orange card slides in from the right and the title rises. Confident,
  high-impact, modern. Distilled from the frontend-slides "Bold Signal" preset.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: presentation
subcategory: section-title
tags: [bold, card, dark, orange, section, signal, high-impact]

best_for:
  - "Section / chapter divider"
  - "Bold launch statement"
  - "High-impact title card"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 3
    max_sec: 6
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [title]
    properties:
      section:
        type: "string"
        maxLength: 8
        description: "Section number, e.g. 01/04"
      nav:
        type: "array"
        items: { type: "string" }
        description: "Breadcrumb items; first is active"
      card_label:
        type: "string"
        maxLength: 40
        description: "Small uppercase label on the orange card"
      title:
        type: "string"
        maxLength: 48
        description: "Big card title (1-2 lines)"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 6
        default: 4
  examples:
    - {"section": "01/04", "nav": ["Signal", "Build", "Ship", "Scale"], "card_label": "Launch · 2026", "title": "Bring your own agent."}

license:
  spdx: Apache-2.0
  attribution_required: true
  redistribution_allowed: true
  commercial_use: true

provenance:
  # L1 — original design inspiration (real world)
  origin:
    name: none (original preset by the L2 skill author)
    kind: none
    reference: "No specific real-world studio; the 'Bold Signal' look is an original preset composed by the frontend-slides author"
  # L2 — the open-source skill we actually transformed from (license governs here)
  via_skill:
    name: frontend-slides
    author: "Zara Zhang"
    url: https://github.com/zarazhangrui/frontend-slides
    license: MIT
    source_file: STYLE_PRESETS.md (preset "Bold Signal")
  # L3 — what this template does
  transformation: >
    Static slide preset → animated hyperframes timeline (section number rolls in, nav
    breadcrumb fades, #FF5722 focal card slides in from the right, title rises) built as
    original CSS keyframes. Original sample data. No upstream source code copied verbatim.

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-06-03
    notes: Distilled from the frontend-slides Bold Signal preset into an animated html-video template.

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 4
    render_wall_clock_sec: 8
    machine: "M2 MacBook Air"