[Template: Swiss Grid Data Frame (Pentagram Stat)] [Intent] Single key metric / benchmark reveal / editorial-style data page. Visual distilled from huashu-design's Pentagram school (MIT, © alchaincyf).
[Canvas] 1920×1080, pure white background #ffffff; overlaid Swiss grid — horizontal/vertical thin lines (black, opacity 0.04-0.06), sweeping in via scaleX/scaleY from 0 within the first 0.7s.
[Typography] Western Archivo (900/700/500) or Helvetica Neue; Chinese Noto Sans SC Bold. Rational, compact, negative letter-spacing.
[Main structure (timeline, default 4s)]
- 0.0-0.7s Grid lines sweep in (scaleX/scaleY 0→1, cubic-bezier(0.16,1,0.3,1)).
- 0.5-1.6s Right-side giant number anchor (font-size ~1020px, weight 900, black, opacity 0.07) rises from 8% below and fades in, bleeding off the right edge.
- 0.7s Red eyebrow label (uppercase, letter-spacing 6px,
#E63946) fadeUp。 - 0.85s Main number headline (~200px, weight 900) fadeUp; periods/units in
#E63946red emphasis. - 1.15s Subheading (24px,
#999) fadeUp。 - 1.3s Red center rule (height 5px) grows from width 0 → 400px.
- 1.35-1.7s 5 bar-chart bars grow staggered from bottom scaleY 0→1; the middle one
#E63946red + opacity 0.85, the rest black opacity 0.12. - 1.5s Black data footer bar (height 80px) slides in from translateY(100%); containing 3 sets of stats (red large numbers + gray-white small labels) + system label on the right.
[Color discipline] Use only black / white / #E63946 red / neutral gray #999。Strictly forbiddenother colors. Red is the only accent color, used on label / main number punctuation / center rule / middle bar / data footer numbers.
[Content discipline]
- Must use the user's real metrics/numbers, strictly forbidden to use lorem ipsum or fabricate benchmarks.
- headline is a number (≤12 characters); anchor is its abbreviation (≤4 characters) used as the giant background text.
- Animation uses
@keyframes,prefers-reduced-motionall stop at the final state (static image). - Single-file HTML.