Frame Pentagram Stat

Name: Frame Pentagram Stat
Author: nexu-io

nexu-io/html-video

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

A Swiss-grid statistic video frame anchored by a giant number with a red accent, growing bars, and a black data bar.

About

An HTML animated video-frame template that turns a key metric into a Swiss-grid data reveal with a giant number anchor, red accent, and growing bar chart. A developer uses it for a single benchmark or editorial-style stat frame.

Rational editorial Swiss-grid layout with black data footer bar
Derived from the huashu-design Pentagram style, 16:9 output

Frame Pentagram Stat 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-pentagram-stat

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

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

What it does

A Swiss-grid statistic video frame anchored by a giant number with a red accent, growing bars, and a black data bar.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 瑞士网格数据帧 (Pentagram Stat)】【意图】单一关键指标 / benchmark 揭示 / 编辑风数据页。视觉提炼自 huashu-design 的 Pentagram 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 纯白底 #ffffff; 叠瑞士网格 — 水平/垂直细线 (黑, opacity 0.04-0.06), 开场 0.7s 内 scaleX/scaleY 从 0 扫入。

【字体】西文 Archivo (900/700/500) 或 Helvetica Neue; 中文 Noto Sans SC Bold。理性、紧凑、负字距。

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

0.0-0.7s 网格线扫入 (scaleX/scaleY 0→1, cubic-bezier(0.16,1,0.3,1))。
0.5-1.6s 右侧巨大数字锚点 (font-size ~1020px, weight 900, 黑, opacity 0.07) 从下方 8% 升入并淡现, bleed off 右边缘。
0.7s 红色 eyebrow label (uppercase, letter-spacing 6px, #E63946) fadeUp。
0.85s 主数字 headline (~200px, weight 900) fadeUp; 句点/单位用 #E63946 红强调。
1.15s 副标 (24px, #999) fadeUp。
1.3s 红色 center rule (高 5px) 从宽 0 → 400px 生长。
1.35-1.7s 5 根条形图错峰从底部 scaleY 0→1 生长; 中间一根 #E63946 红 + opacity 0.85, 其余黑 opacity 0.12。
1.5s 黑色数据底栏 (高 80px) 从 translateY(100%) 滑入; 内含 3 组 stat (红色大数字 + 灰白小标签) + 右侧 system 标签。

【配色纪律】仅用黑 / 白 / #E63946 红 / 中性灰 #999。严禁其他彩色。红色是唯一强调色, 用在 label / 主数字标点 / center rule / 中间条 / 数据底栏数字。

【内容纪律】

必须用用户的真实指标/数字, 严禁 lorem ipsum 或编造 benchmark。
headline 是一个数字 (≤12 字符); anchor 是它的简写 (≤4 字符) 用作背景巨字。
动效用 @keyframes, prefers-reduced-motion 下全部停在终态 (静态成图)。
单文件 HTML。

{
  "name": "@html-video/template-frame-pentagram-stat",
  "version": "0.1.0",
  "description": "html-video template: frame-pentagram-stat (Swiss-grid stat anchor, distilled from huashu-design Pentagram philosophy, 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>Pentagram Stat · Swiss Grid Data Anchor</title>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-pentagram-stat — Swiss-grid statistic anchor.
   * Visual style distilled from huashu-design "Pentagram" philosophy (MIT, © alchaincyf).
   * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes.
   * Timeline (4s @ 60fps): grid rules sweep in -> giant number rises -> bars grow -> bottom bar slides up.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #ffffff; color: #000;
    font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    position: relative;
  }

  /* --- Swiss grid structure (sweeps in) --- */
  .rule-h, .rule-v { position: absolute; background: #000; }
  .rule-h { left: 96px; right: 96px; height: 1px; opacity: 0; transform-origin: left center;
            animation: ruleH 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  .rule-v { top: 0; bottom: 0; width: 1px; opacity: 0; transform-origin: top center;
            animation: ruleV 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes ruleH { 0%{opacity:0;transform:scaleX(0)} 100%{opacity:0.06;transform:scaleX(1)} }
  @keyframes ruleV { 0%{opacity:0;transform:scaleY(0)} 100%{opacity:0.04;transform:scaleY(1)} }

  /* --- Giant typographic anchor (the stat), bleeds off right edge --- */
  .type-anchor {
    position: absolute; right: -90px; top: 50%;
    font-weight: 900; font-size: 1020px; line-height: 0.82;
    color: #000; opacity: 0; z-index: 0; user-select: none; letter-spacing: -30px;
    transform: translateY(-46%);
    animation: anchorRise 1.1s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;
  }
  @keyframes anchorRise {
    0%   { opacity: 0; transform: translateY(-38%); }
    100% { opacity: 0.07; transform: translateY(-50%); }
  }

  /* --- Content block (left, on the grid) --- */
  .content { position: absolute; left: 96px; top: 110px; z-index: 2; }
  .label {
    font-size: 18px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase;
    color: #E63946; margin-bottom: 28px; opacity: 0;
    animation: fadeUp 0.6s ease-out 0.7s forwards;
  }
  .headline {
    font-weight: 900; font-size: 200px; line-height: 0.9; letter-spacing: -8px; color: #000;
    opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.85s forwards;
  }
  .headline .accent { color: #E63946; }
  .subtitle {
    font-size: 24px; font-weight: 500; color: #999; letter-spacing: 0.5px; margin-top: 36px; max-width: 720px;
    opacity: 0; animation: fadeUp 0.7s ease-out 1.15s forwards;
  }
  @keyframes fadeUp { 0%{opacity:0;transform:translateY(24px)} 100%{opacity:1;transform:translateY(0)} }

  /* --- Red center rule --- */
  .center-rule {
    position: absolute; left: 96px; top: 560px; width: 0; height: 5px; background: #E63946; z-index: 2;
    animation: ruleGrow 0.8s cubic-bezier(0.16,1,0.3,1) 1.3s forwards;
  }
  @keyframes ruleGrow { 0%{width:0} 100%{width:400px} }

  /* --- Bar chart (grows up) --- */
  .bars { position: absolute; left: 96px; bottom: 150px; display: flex; gap: 22px; align-items: flex-end; height: 280px; z-index: 2; }
  .bar { width: 64px; background: #000; opacity: 0.12; transform: scaleY(0); transform-origin: bottom;
         animation: barGrow 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  .bar.red { background: #E63946; opacity: 0.85; }
  @keyframes barGrow { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }

  /* --- Black bottom data bar (slides up) --- */
  .bottom-bar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: #000; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; padding: 0 96px;
    transform: translateY(100%); animation: barUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.5s forwards;
  }
  @keyframes barUp { 0%{transform:translateY(100%)} 100%{transform:translateY(0)} }
  .bottom-left { display: flex; align-items: center; gap: 48px; }
  .stat { font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; opacity: 0.6; }
  .stat strong { color: #E63946; opacity: 1; font-size: 26px; margin-right: 10px; }
  .bottom-right { font-size: 14px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #fff; opacity: 0.4; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .rule-h{opacity:0.06}.rule-v{opacity:0.04}.type-anchor{opacity:0.07}
    .label,.headline,.subtitle{opacity:1}.center-rule{width:400px}
    .bar{transform:scaleY(1)}.bottom-bar{transform:translateY(0)}
  }
</style>
</head>
<body>
  <!-- Grid -->
  <div class="rule-h" style="top:110px"></div>
  <div class="rule-h" style="top:560px;animation-delay:.1s"></div>
  <div class="rule-v" style="left:96px"></div>
  <div class="rule-v" style="left:960px;animation-delay:.1s"></div>
  <div class="rule-v" style="right:96px;animation-delay:.15s"></div>

  <!-- Giant stat anchor (bleeds off right) -->
  <div class="type-anchor">95</div>

  <!-- Content -->
  <div class="content">
    <div class="label">Benchmark · Coding</div>
    <div class="headline">95.7<span class="accent">.</span></div>
    <div class="subtitle">AIME score — a new state of the art for open coding models.</div>
  </div>

  <div class="center-rule"></div>

  <!-- Bars -->
  <div class="bars">
    <div class="bar"      style="height:55%;animation-delay:1.35s"></div>
    <div class="bar"      style="height:70%;animation-delay:1.42s"></div>
    <div class="bar red"  style="height:100%;animation-delay:1.5s"></div>
    <div class="bar"      style="height:48%;animation-delay:1.58s"></div>
    <div class="bar"      style="height:62%;animation-delay:1.66s"></div>
  </div>

  <!-- Bottom data bar -->
  <div class="bottom-bar">
    <div class="bottom-left">
      <div class="stat"><strong>95.7</strong>AIME</div>
      <div class="stat"><strong>73.8</strong>SWE-bench</div>
      <div class="stat"><strong>87.4</strong>τ²-Bench</div>
    </div>
    <div class="bottom-right">Swiss Grid · Pentagram</div>
  </div>
</body>
</html>

spec_version: 1
id: frame-pentagram-stat
name: Pentagram Stat
description: >
  Swiss-grid statistic anchor — a giant number bleeds off the edge while grid rules
  sweep in, a bar chart grows, and a black data bar slides up. Rational, editorial,
  high-contrast. Distilled from the huashu-design "Pentagram" design philosophy.

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

category: data-viz
subcategory: stat-card
tags: [stat, swiss-grid, editorial, data, pentagram, number, benchmark]

best_for:
  - "Single hero metric / benchmark reveal"
  - "Editorial data slide"
  - "Rational, high-contrast brand moment"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "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: [headline]
    properties:
      label:
        type: "string"
        maxLength: 40
        description: "Small red eyebrow label (uppercase)"
      headline:
        type: "string"
        maxLength: 12
        description: "The giant stat / number anchor"
      subtitle:
        type: "string"
        maxLength: 120
        description: "Supporting line under the stat"
      anchor:
        type: "string"
        maxLength: 4
        description: "Faint oversized number that bleeds off the right edge"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 6
        default: 4
  examples:
    - {"label": "Benchmark · Coding", "headline": "95.7", "subtitle": "AIME score — new SOTA for open coding models", "anchor": "95"}

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

provenance:
  # L1 — original design inspiration (real world)
  origin:
    name: Pentagram (Michael Bierut)
    kind: design-studio
    reference: "pentagram.com — Swiss-grid editorial typography; Hillary Clinton logo system"
  # L2 — the open-source skill we actually transformed from (license governs here)
  via_skill:
    name: huashu-design
    author: "alchaincyf (花叔 · 花生)"
    url: https://github.com/alchaincyf/huashu-design
    license: MIT
    source_file: assets/showcases/ppt/ppt-pentagram.html
  # L3 — what this template does
  transformation: >
    Static PPT showcase → animated hyperframes timeline (Swiss grid sweeps in, giant
    typographic anchor bleeds off-edge, bar chart grows, black data bar slides up) built
    as original CSS keyframes. Pentagram's signature #E63946 red is retained as the
    recognisable brand cue; 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 huashu-design Pentagram showcase 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"