メニュー
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.
A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
| name | frame-data-chart-nyt |
| zh_name | NYT 风数据图表帧 |
| en_name | NYT-Style Data Chart Frame |
| emoji | 📈 |
| description | NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). |
| zh_description | NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带) |
| en_description | NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). |
| category | video |
| scenario | video |
| aspect_hint | 1920×1080 (16:9) |
| featured | 46 |
| tags | ["data","chart","nyt","editorial","frame"] |
| example_id | sample-frame-data-chart-nyt |
| example_name | NYT 风折线图 · 全球用户量 |
| example_format | markdown |
| example_tagline | 编辑级图表 + 错峰揭示 |
| example_desc | 8 年周活跃用户折线 + NYT red accent + 注释 mono |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · data-chart |
| od | {"mode":"video","surface":"video","scenario":"video","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: NYT 风数据图表帧】 【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。
【画布】1920×1080, 暖白底 #f7f5ee 或墨黑底 #0e0e0e 二选一; 文字色和背景相反。
【布局】
#a91d1d 或 mint #5fb38a): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。2024 · 412M 黑色 mono 小字。#e6e2d2 包络 + 中线 ink。prefers-reduced-motion 关闭。【设计细节】
Source Serif Pro 或 Cheltenham (无则用 Playfair Display); body IBM Plex Sans 或 Inter; 数据标签 IBM Plex Mono。#a91d1d / 编辑 mint #5fb38a / 暖橙 #d97757 三选一)。<text class="annot">2024 · 412M</text>。