Frame Bold Poster

Name: Frame Bold Poster
Author: nexu-io

nexu-io/html-video

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

An animated 1970s editorial-poster video frame template with a red rule, giant tilted display figure, and a line-by-line rising three-line headline.

About

An HTML animated video-frame template that opens a deck like a magazine cover with a red rule, a giant tilted figure, and a three-line headline rising line by line. A developer uses it for a brand manifesto or editorial-style opening frame.

Print-poster visual signature derived from the frontend-slides Bold Poster template
Mono kicker, serif italic standfirst, and 16:9 output

Frame Bold Poster 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-poster

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-poster.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-bold-poster)

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

What it does

An animated 1970s editorial-poster video frame template with a red rule, giant tilted display figure, and a line-by-line rising three-line headline.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 大胆海报帧 (Bold Poster)】【意图】品牌宣言 / 愿景陈述 / 社论或文化类开场 — 让几个词像杂志封面一样落地。视觉提炼自 frontend-slides 的 Bold Poster 模板 (MIT, © Zara Zhang),其上游灵感为 1970s 欧洲社论海报 / 意大利体育杂志 / 中世纪品牌年报。

【画布】1920×1080, 暖白纸底 #F5F2EF。

【字体】display + 数字 Shrikhand (海报级斜体大字); body Libre Baskerville (衬线, 斜体副题); mono 标签 / chrome Space Grotesk。

【配色纪律】纸白 #F5F2EF / 墨黑 #1C1410 / 唯一强调色番红 `#D8000F`。红色只用在: 一条 kicker rule、巨型 figure、标题中间行、footer 右侧 metadata。其余皆墨黑。全片只此一个强调色。

【主结构 (时间轴, 默认 5s)】

0.35s 纸底淡入 (印刷感的"落纸"而非"打光")。
0.5s 起 顶部 kicker: 左 mono 标签淡入 → 番红 rule 从左 scaleX 划过 → 右 mono 日期淡入。
0.7s 右上巨型番红 figure (Shrikhand 320px) 带旋转 (-14° → -6°) 从上落入。
1.15s 起 三行标题逐行升起, 每行各自 tilt: 行1 墨黑 -2°、行2 番红 -4°、行3 墨黑 +2°。
1.95s 衬线斜体副题 (Libre Baskerville italic) fadeUp。
2.15s footer 墨黑 rule 划入 + mono metadata 淡入。

【内容纪律】

headline 最多 3 行, 第 2 行自动番红; 必须真实标题, 严禁 lorem ipsum。
版式为"少量大字陈述", 不适合塞段落 — 信息密度高的内容请换模板。
CJK 文本: letter-spacing 归 0、放松行高、不要对 CJK 做 uppercase。
动效用 @keyframes, prefers-reduced-motion 下全部停在终态。
单文件 HTML, 字体走 Google Fonts。

{
  "name": "@html-video/template-frame-bold-poster",
  "version": "0.1.0",
  "description": "html-video template: frame-bold-poster (1970s editorial poster in motion, distilled from frontend-slides Bold Poster, 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 Poster · Editorial Statement Frame</title>
<link href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Libre+Baskerville:ital@0;1&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-bold-poster — 1970s European editorial poster, in motion.
   * Visual vocabulary distilled from the frontend-slides "Bold Poster" template
   * (MIT, © Zara Zhang). Rebuilt as a self-contained CSS @keyframes timeline for
   * html-video / Hyperframes — no upstream source HTML copied.
   *
   * Palette (from upstream design.md): white sheet, brown-black ink #1C1410,
   * one tomato red #D8000F, warm off-white #F5F2EF.
   * Type stack: Shrikhand (display + figures), Libre Baskerville (body),
   * Space Grotesk (mono labels / chrome).
   * Signature move: display Shrikhand is tilted -6deg..+2deg; red is the only accent.
   *
   * Timeline (~4.5s @ 60fps): off-white sheet settles -> top hairline + mono kicker
   * rule across -> giant red figure rotates+drops in -> three-line ink/red headline
   * rises line-by-line (each on its own tilt) -> serif standfirst fades ->
   * footer rule + mono metadata draw in.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #F5F2EF; color: #1C1410;
    font-family: 'Space Grotesk', sans-serif; position: relative;
  }

  /* full-bleed paper, fades up first so the cut feels printed not lit */
  .sheet { position: absolute; inset: 0; background: #F5F2EF;
    opacity: 0; animation: sheetIn 0.5s ease-out forwards; }
  @keyframes sheetIn { to { opacity: 1; } }

  /* top kicker: mono label + a red rule that draws across */
  .kicker { position: absolute; top: 92px; left: 110px; right: 110px;
    display: flex; align-items: center; gap: 28px; }
  .kicker .label { font-size: 22px; font-weight: 700; letter-spacing: 6px;
    text-transform: uppercase; color: #1C1410; white-space: nowrap;
    opacity: 0; animation: fade 0.5s ease-out 0.35s forwards; }
  .kicker .rule { flex: 1; height: 3px; background: #D8000F; transform-origin: left center;
    transform: scaleX(0); animation: ruleX 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s forwards; }
  .kicker .date { font-size: 22px; font-weight: 500; letter-spacing: 3px;
    text-transform: uppercase; color: #1C1410; white-space: nowrap;
    opacity: 0; animation: fade 0.5s ease-out 0.55s forwards; }
  @keyframes ruleX { to { transform: scaleX(1); } }

  /* giant red figure — the poster's loudest move, rotates + drops in */
  .figure { position: absolute; top: 150px; right: 96px; font-family: 'Shrikhand', cursive;
    font-size: 320px; line-height: 0.8; color: #D8000F; letter-spacing: 1px;
    opacity: 0; transform: translateY(-60px) rotate(-14deg);
    animation: figureIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.7s forwards; }
  @keyframes figureIn { to { opacity: 1; transform: translateY(0) rotate(-6deg); } }

  /* three-line headline, each line its own tilt, rising in sequence */
  .head { position: absolute; left: 110px; bottom: 300px; font-family: 'Shrikhand', cursive;
    line-height: 0.86; }
  .head .ln { display: block; font-size: 150px; opacity: 0; transform: translateY(40px); }
  .head .ln1 { color: #1C1410; transform-origin: left bottom; animation: lineUp 0.7s cubic-bezier(0.16,1,0.3,1) 1.15s forwards; }
  .head .ln2 { color: #D8000F; animation: lineUpTilt 0.7s cubic-bezier(0.16,1,0.3,1) 1.35s forwards; }
  .head .ln3 { color: #1C1410; animation: lineUpTilt2 0.7s cubic-bezier(0.16,1,0.3,1) 1.55s forwards; }
  @keyframes lineUp { to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
  @keyframes lineUpTilt { to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
  @keyframes lineUpTilt2 { to { opacity: 1; transform: translateY(0) rotate(2deg); } }

  /* serif standfirst */
  .standfirst { position: absolute; left: 114px; bottom: 200px; max-width: 980px;
    font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 34px;
    line-height: 1.4; color: #1C1410;
    opacity: 0; animation: fadeUp 0.7s ease-out 1.95s forwards; }
  @keyframes fadeUp { 0%{opacity:0;transform:translateY(22px)} 100%{opacity:1;transform:translateY(0)} }

  /* footer: ink rule + mono metadata */
  .footer { position: absolute; left: 110px; right: 110px; bottom: 96px; }
  .footer .rule { height: 2px; background: #1C1410; transform-origin: left center;
    transform: scaleX(0); animation: ruleX 0.7s cubic-bezier(0.16,1,0.3,1) 2.15s forwards; }
  .footer .meta { display: flex; justify-content: space-between; margin-top: 18px;
    font-size: 18px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
    color: #1C1410; opacity: 0; animation: fade 0.6s ease-out 2.4s forwards; }
  .footer .meta .red { color: #D8000F; }

  @keyframes fade { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .sheet { opacity: 1; }
    .kicker .label, .kicker .date { opacity: 1; }
    .kicker .rule, .footer .rule { transform: scaleX(1); }
    .figure { opacity: 1; transform: rotate(-6deg); }
    .head .ln1 { opacity: 1; transform: rotate(-2deg); }
    .head .ln2 { opacity: 1; transform: rotate(-4deg); }
    .head .ln3 { opacity: 1; transform: rotate(2deg); }
    .standfirst, .footer .meta { opacity: 1; transform: none; }
  }
</style>
</head>
<body>
  <div class="sheet"></div>

  <div class="kicker">
    <span class="label">Manifesto</span>
    <span class="rule"></span>
    <span class="date">Vol. 04 · 2026</span>
  </div>

  <div class="figure">03</div>

  <div class="head">
    <span class="ln ln1">Make it</span>
    <span class="ln ln2">loud.</span>
    <span class="ln ln3">Make it last.</span>
  </div>

  <div class="standfirst">Every slide should land like a printed page — set in heavy type, locked to one red accent, ruled in ink.</div>

  <div class="footer">
    <div class="rule"></div>
    <div class="meta">
      <span>Bold Poster</span>
      <span class="red">html-video</span>
    </div>
  </div>
</body>
</html>

spec_version: 1
id: frame-bold-poster
name: Bold Poster
description: >
  A 1970s European editorial poster, in motion. A red rule draws across under a mono
  kicker, a giant Shrikhand figure rotates and drops in, a three-line headline rises
  line-by-line each on its own tilt, an italic serif standfirst fades up, and an ink
  footer rule draws in. Loud, confident, unmistakably print. Distilled from the
  frontend-slides "Bold Poster" template.

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

category: presentation
subcategory: statement-title
tags: [poster, editorial, bold, serif, red, print, manifesto, tilted, high-impact]

best_for:
  - "Brand manifesto / vision statement"
  - "Editorial or cultural pitch opener"
  - "A few words that should feel like a magazine cover"

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: 4
    max_sec: 6
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [headline]
    properties:
      kicker:
        type: "string"
        maxLength: 24
        description: "Small uppercase mono label, top-left (e.g. Manifesto)"
      date:
        type: "string"
        maxLength: 24
        description: "Top-right mono metadata (e.g. Vol. 04 · 2026)"
      figure:
        type: "string"
        maxLength: 4
        description: "Giant red display figure (e.g. a number or 1-2 chars)"
      headline:
        type: "array"
        items: { type: "string" }
        maxItems: 3
        description: "Up to 3 headline lines; line 2 renders in red"
      standfirst:
        type: "string"
        maxLength: 160
        description: "Italic serif sub-line under the headline"
      footer_left:
        type: "string"
        maxLength: 32
        description: "Footer left metadata"
      footer_right:
        type: "string"
        maxLength: 32
        description: "Footer right metadata (renders in red)"
      duration_sec:
        type: "number"
        minimum: 4
        maximum: 6
        default: 5
  examples:
    - {"kicker": "Manifesto", "date": "Vol. 04 · 2026", "figure": "03", "headline": ["Make it", "loud.", "Make it last."], "standfirst": "Every slide should land like a printed page — heavy type, one red accent, ruled in ink.", "footer_left": "Bold Poster", "footer_right": "html-video"}

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

provenance:
  # L1 — original design inspiration (real world)
  origin:
    name: "1970s European editorial / poster tradition"
    kind: movement
    reference: >
      No single studio — the upstream template names vintage Italian sports magazines,
      mid-century European brand annual reports, and wine-merchant catalogues as its
      visual lineage. Recorded as a tradition, not a specific firm.
  # 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: "bold-template-pack/templates/bold-poster/design.md"
  # L3 — what this template does
  transformation: >
    Static slide design spec → animated hyperframes timeline (red kicker rule draws in,
    a giant Shrikhand figure rotates + drops, a three-line headline rises line-by-line
    each tilted, an italic serif standfirst fades, an ink footer rule draws in) built as
    original CSS keyframes. Palette (#FFFFFF / #1C1410 / #D8000F / #F5F2EF) and the
    three-face type stack (Shrikhand / Libre Baskerville / Space Grotesk) follow the
    upstream spec; sample copy is original; no upstream source HTML 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-05
    notes: Distilled from the frontend-slides Bold Poster template into an animated html-video template.

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 5
    render_wall_clock_sec: 10
    machine: "M2 MacBook Air"