【模板: NYT 风数据图表帧】 【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。 【画布】1920×1080, 暖白底

f7f5ee

或墨黑底

0e0e0e

二选一; 文字色和背景相反。 【布局】 顶部 kicker (11px uppercase letterspace 0.14em, 颜色 = accent 红

a91d1d

或 mint

5fb38a

): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。 大字标题 (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。 结论必须从用户数据中提炼 , 不是描述图。 图表区 (占画布 55-65%): 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 2024 · 412M 黑色 mono 小字。 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。 范围带 (range band): 浅灰填充

e6e2d2

包络 + 中线 ink。

底部 source + footnote

(10px mono, opacity 0.6): "Source: 用户数据 · Chart by html-anything"。

错峰揭示动画

标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 prefers-reduced-motion 关闭。 Show more