| 1 | spec_version: 1 |
| 2 | id: frame-pentagram-stat |
| 3 | name: Pentagram Stat |
| 4 | description: > |
| 5 | Swiss-grid statistic anchor — a giant number bleeds off the edge while grid rules |
| 6 | sweep in, a bar chart grows, and a black data bar slides up. Rational, editorial, |
| 7 | high-contrast. Distilled from the huashu-design "Pentagram" design philosophy. |
| 8 | |
| 9 | engine: hyperframes |
| 10 | engine_version: ^0.4.0 |
| 11 | source_entry: source/index.html |
| 12 | |
| 13 | category: data-viz |
| 14 | subcategory: stat-card |
| 15 | tags: [stat, swiss-grid, editorial, data, pentagram, number, benchmark] |
| 16 | |
| 17 | best_for: |
| 18 | - "Single hero metric / benchmark reveal" |
| 19 | - "Editorial data slide" |
| 20 | - "Rational, high-contrast brand moment" |
| 21 | |
| 22 | output: |
| 23 | formats: [mp4, webm] |
| 24 | default_format: mp4 |
| 25 | resolution: |
| 26 | default: { width: 1920, height: 1080 } |
| 27 | supported_aspects: ["16:9", "1:1"] |
| 28 | fps: |
| 29 | default: 60 |
| 30 | supported: [30, 60] |
| 31 | duration: |
| 32 | type: variable |
| 33 | min_sec: 3 |
| 34 | max_sec: 6 |
| 35 | alpha: false |
| 36 | audio: |
| 37 | supported: true |
| 38 | expected_inputs: [bgm] |
| 39 | |
| 40 | inputs: |
| 41 | schema: |
| 42 | type: object |
| 43 | required: [headline] |
| 44 | properties: |
| 45 | label: |
| 46 | type: "string" |
| 47 | maxLength: 40 |
| 48 | description: "Small red eyebrow label (uppercase)" |
| 49 | headline: |
| 50 | type: "string" |
| 51 | maxLength: 12 |
| 52 | description: "The giant stat / number anchor" |
| 53 | subtitle: |
| 54 | type: "string" |
| 55 | maxLength: 120 |
| 56 | description: "Supporting line under the stat" |
| 57 | anchor: |
| 58 | type: "string" |
| 59 | maxLength: 4 |
| 60 | description: "Faint oversized number that bleeds off the right edge" |
| 61 | duration_sec: |
| 62 | type: "number" |
| 63 | minimum: 3 |
| 64 | maximum: 6 |
| 65 | default: 4 |
| 66 | examples: |
| 67 | - {"label": "Benchmark · Coding", "headline": "95.7", "subtitle": "AIME score — new SOTA for open coding models", "anchor": "95"} |
| 68 | |
| 69 | license: |
| 70 | spdx: Apache-2.0 |
| 71 | attribution_required: true |
| 72 | redistribution_allowed: true |
| 73 | commercial_use: true |
| 74 | |
| 75 | provenance: |
| 76 | # L1 — original design inspiration (real world) |
| 77 | origin: |
| 78 | name: Pentagram (Michael Bierut) |
| 79 | kind: design-studio |
| 80 | reference: "pentagram.com — Swiss-grid editorial typography; Hillary Clinton logo system" |
| 81 | # L2 — the open-source skill we actually transformed from (license governs here) |
| 82 | via_skill: |
| 83 | name: huashu-design |
| 84 | author: "alchaincyf (花叔 · 花生)" |
| 85 | url: https://github.com/alchaincyf/huashu-design |
| 86 | license: MIT |
| 87 | source_file: assets/showcases/ppt/ppt-pentagram.html |
| 88 | # L3 — what this template does |
| 89 | transformation: > |
| 90 | Static PPT showcase → animated hyperframes timeline (Swiss grid sweeps in, giant |
| 91 | typographic anchor bleeds off-edge, bar chart grows, black data bar slides up) built |
| 92 | as original CSS keyframes. Pentagram's signature #E63946 red is retained as the |
| 93 | recognisable brand cue; original sample data. No upstream source code copied verbatim. |
| 94 | |
| 95 | author: |
| 96 | name: nexu-io |
| 97 | url: https://github.com/nexu-io |
| 98 | contact: open-design@nexu.io |
| 99 | |
| 100 | version: 0.1.0 |
| 101 | changelog: |
| 102 | - version: 0.1.0 |
| 103 | date: 2026-06-03 |
| 104 | notes: Distilled from huashu-design Pentagram showcase into an animated html-video template. |
| 105 | |
| 106 | preview: |
| 107 | poster: preview.png |
| 108 | |
| 109 | performance: |
| 110 | reference_render: |
| 111 | duration_sec: 4 |
| 112 | render_wall_clock_sec: 8 |
| 113 | machine: "M2 MacBook Air" |
| 114 |