| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Pentagram Stat · Swiss Grid Data Anchor</title> |
| 6 | <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&display=swap" rel="stylesheet" /> |
| 7 | <style> |
| 8 | /* |
| 9 | * frame-pentagram-stat — Swiss-grid statistic anchor. |
| 10 | * Visual style distilled from huashu-design "Pentagram" philosophy (MIT, © alchaincyf). |
| 11 | * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes. |
| 12 | * Timeline (4s @ 60fps): grid rules sweep in -> giant number rises -> bars grow -> bottom bar slides up. |
| 13 | */ |
| 14 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 15 | body { |
| 16 | width: 1920px; height: 1080px; overflow: hidden; |
| 17 | background: #ffffff; color: #000; |
| 18 | font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; |
| 19 | position: relative; |
| 20 | } |
| 21 | |
| 22 | /* --- Swiss grid structure (sweeps in) --- */ |
| 23 | .rule-h, .rule-v { position: absolute; background: #000; } |
| 24 | .rule-h { left: 96px; right: 96px; height: 1px; opacity: 0; transform-origin: left center; |
| 25 | animation: ruleH 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } |
| 26 | .rule-v { top: 0; bottom: 0; width: 1px; opacity: 0; transform-origin: top center; |
| 27 | animation: ruleV 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } |
| 28 | @keyframes ruleH { 0%{opacity:0;transform:scaleX(0)} 100%{opacity:0.06;transform:scaleX(1)} } |
| 29 | @keyframes ruleV { 0%{opacity:0;transform:scaleY(0)} 100%{opacity:0.04;transform:scaleY(1)} } |
| 30 | |
| 31 | /* --- Giant typographic anchor (the stat), bleeds off right edge --- */ |
| 32 | .type-anchor { |
| 33 | position: absolute; right: -90px; top: 50%; |
| 34 | font-weight: 900; font-size: 1020px; line-height: 0.82; |
| 35 | color: #000; opacity: 0; z-index: 0; user-select: none; letter-spacing: -30px; |
| 36 | transform: translateY(-46%); |
| 37 | animation: anchorRise 1.1s cubic-bezier(0.16,1,0.3,1) 0.5s forwards; |
| 38 | } |
| 39 | @keyframes anchorRise { |
| 40 | 0% { opacity: 0; transform: translateY(-38%); } |
| 41 | 100% { opacity: 0.07; transform: translateY(-50%); } |
| 42 | } |
| 43 | |
| 44 | /* --- Content block (left, on the grid) --- */ |
| 45 | .content { position: absolute; left: 96px; top: 110px; z-index: 2; } |
| 46 | .label { |
| 47 | font-size: 18px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; |
| 48 | color: #E63946; margin-bottom: 28px; opacity: 0; |
| 49 | animation: fadeUp 0.6s ease-out 0.7s forwards; |
| 50 | } |
| 51 | .headline { |
| 52 | font-weight: 900; font-size: 200px; line-height: 0.9; letter-spacing: -8px; color: #000; |
| 53 | opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.85s forwards; |
| 54 | } |
| 55 | .headline .accent { color: #E63946; } |
| 56 | .subtitle { |
| 57 | font-size: 24px; font-weight: 500; color: #999; letter-spacing: 0.5px; margin-top: 36px; max-width: 720px; |
| 58 | opacity: 0; animation: fadeUp 0.7s ease-out 1.15s forwards; |
| 59 | } |
| 60 | @keyframes fadeUp { 0%{opacity:0;transform:translateY(24px)} 100%{opacity:1;transform:translateY(0)} } |
| 61 | |
| 62 | /* --- Red center rule --- */ |
| 63 | .center-rule { |
| 64 | position: absolute; left: 96px; top: 560px; width: 0; height: 5px; background: #E63946; z-index: 2; |
| 65 | animation: ruleGrow 0.8s cubic-bezier(0.16,1,0.3,1) 1.3s forwards; |
| 66 | } |
| 67 | @keyframes ruleGrow { 0%{width:0} 100%{width:400px} } |
| 68 | |
| 69 | /* --- Bar chart (grows up) --- */ |
| 70 | .bars { position: absolute; left: 96px; bottom: 150px; display: flex; gap: 22px; align-items: flex-end; height: 280px; z-index: 2; } |
| 71 | .bar { width: 64px; background: #000; opacity: 0.12; transform: scaleY(0); transform-origin: bottom; |
| 72 | animation: barGrow 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } |
| 73 | .bar.red { background: #E63946; opacity: 0.85; } |
| 74 | @keyframes barGrow { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} } |
| 75 | |
| 76 | /* --- Black bottom data bar (slides up) --- */ |
| 77 | .bottom-bar { |
| 78 | position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: #000; z-index: 3; |
| 79 | display: flex; align-items: center; justify-content: space-between; padding: 0 96px; |
| 80 | transform: translateY(100%); animation: barUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.5s forwards; |
| 81 | } |
| 82 | @keyframes barUp { 0%{transform:translateY(100%)} 100%{transform:translateY(0)} } |
| 83 | .bottom-left { display: flex; align-items: center; gap: 48px; } |
| 84 | .stat { font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; opacity: 0.6; } |
| 85 | .stat strong { color: #E63946; opacity: 1; font-size: 26px; margin-right: 10px; } |
| 86 | .bottom-right { font-size: 14px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #fff; opacity: 0.4; } |
| 87 | |
| 88 | @media (prefers-reduced-motion: reduce) { |
| 89 | * { animation: none !important; } |
| 90 | .rule-h{opacity:0.06}.rule-v{opacity:0.04}.type-anchor{opacity:0.07} |
| 91 | .label,.headline,.subtitle{opacity:1}.center-rule{width:400px} |
| 92 | .bar{transform:scaleY(1)}.bottom-bar{transform:translateY(0)} |
| 93 | } |
| 94 | </style> |
| 95 | </head> |
| 96 | <body> |
| 97 | <!-- Grid --> |
| 98 | <div class="rule-h" style="top:110px"></div> |
| 99 | <div class="rule-h" style="top:560px;animation-delay:.1s"></div> |
| 100 | <div class="rule-v" style="left:96px"></div> |
| 101 | <div class="rule-v" style="left:960px;animation-delay:.1s"></div> |
| 102 | <div class="rule-v" style="right:96px;animation-delay:.15s"></div> |
| 103 | |
| 104 | <!-- Giant stat anchor (bleeds off right) --> |
| 105 | <div class="type-anchor">95</div> |
| 106 | |
| 107 | <!-- Content --> |
| 108 | <div class="content"> |
| 109 | <div class="label">Benchmark · Coding</div> |
| 110 | <div class="headline">95.7<span class="accent">.</span></div> |
| 111 | <div class="subtitle">AIME score — a new state of the art for open coding models.</div> |
| 112 | </div> |
| 113 | |
| 114 | <div class="center-rule"></div> |
| 115 | |
| 116 | <!-- Bars --> |
| 117 | <div class="bars"> |
| 118 | <div class="bar" style="height:55%;animation-delay:1.35s"></div> |
| 119 | <div class="bar" style="height:70%;animation-delay:1.42s"></div> |
| 120 | <div class="bar red" style="height:100%;animation-delay:1.5s"></div> |
| 121 | <div class="bar" style="height:48%;animation-delay:1.58s"></div> |
| 122 | <div class="bar" style="height:62%;animation-delay:1.66s"></div> |
| 123 | </div> |
| 124 | |
| 125 | <!-- Bottom data bar --> |
| 126 | <div class="bottom-bar"> |
| 127 | <div class="bottom-left"> |
| 128 | <div class="stat"><strong>95.7</strong>AIME</div> |
| 129 | <div class="stat"><strong>73.8</strong>SWE-bench</div> |
| 130 | <div class="stat"><strong>87.4</strong>τ²-Bench</div> |
| 131 | </div> |
| 132 | <div class="bottom-right">Swiss Grid · Pentagram</div> |
| 133 | </div> |
| 134 | </body> |
| 135 | </html> |
| 136 |