open-design/prompt-templates/video/hyperframes-data-bar-chart-race.json
Tom Huang 9d176ef12e
feat(prompt-templates): HyperFrames video previews + provider badge + source filter (#293)
* feat(prompt-templates): add 11 HyperFrames video prompts and surface media generation in README

Adds eleven `hyperframes-*` prompt templates under `prompt-templates/video/`,
each one a concrete brief with scene-by-scene timing, GSAP eases, palette,
and the HyperFrames non-negotiables (deterministic, paused timelines,
entrance-only motion, lint/inspect commands). Archetypes covered:

- minimal product reveal (5s, 16:9)
- SaaS product promo (30s, 16:9, Linear/ClickUp-style)
- TikTok karaoke talking-head (9:16, TTS + word-synced captions)
- brand sizzle reel (30s, beat-synced kinetic typography)
- animated bar-chart race (NYT-style data infographic)
- Apple-style flight map route (origin → destination)
- 4s cinematic logo outro
- $0 → $10K money counter hype (9:16)
- 3-phone app showcase
- 9:16 social overlay stack (X · Reddit · Spotify · Instagram)
- 15s website-to-video pipeline

Each template uses `model: "hyperframes-html"`, real catalog-block thumbnails
from HeyGen's CDN as previewImageUrl, and source attribution to
`heygen-com/hyperframes` (Apache-2.0).

README also gets a new **Media generation** section between *Visual directions*
and *Beyond chat*, plus a new row in the *At a glance* table. The section
documents the three model families currently surfaced as templates
(gpt-image-2, Seedance 2.0, HyperFrames) with example galleries — gpt-image-2
thumbnails, Seedance MP4-linked thumbnails, and the 11 HyperFrames tiles —
and notes the wider model coverage (Kling, Veo, Sora, MiniMax, Suno, Udio,
Lyria, TTS) already wired in `VIDEO_MODELS` / `AUDIO_MODELS_BY_KIND` and
open for community templates.

* i18n(de): register new HyperFrames templates, categories, tags

Adds German titles/summaries for the 11 new hyperframes-* video templates
plus the Product/Marketing/Data/Travel/Branding/Short Form categories and
hyperframes/title-card/sizzle/etc. tags they introduce, so the German sync
guarantees enforced by apps/web/src/i18n/content.test.ts hold.

* docs(readme): sync Media generation section to de / ja / ko / zh-CN; bump counts to 93 (43 + 39 + 11)

Mirrors the English Media generation row + section into the four locale READMEs
(README.de.md, README.ja-JP.md, README.ko.md, README.zh-CN.md), translating
prose / table headers / captions while keeping the gpt-image-2, Seedance MP4,
and HyperFrames catalog-block thumbnails identical across all five locales so
the galleries render the same images.

Counts updated to reflect current main (after rebase): 43 gpt-image-2 + 39
Seedance + 11 HyperFrames = 93 prompts total. The English README's At-a-glance
row, intro paragraph, and gallery sub-headers now read "sample of 43" /
"sample of 39" / "11 ready-to-replicate templates" — locales follow.

Resolves the Codex review's German-i18n flag end-to-end: README copy is in
sync, and the German content map (DE_PROMPT_TEMPLATE_*) was already extended
in the prior commit on this branch.

* feat(prompt-templates): video previews + provider badge + source filter for HyperFrames

- Add `previewVideoUrl` to all 11 HyperFrames video templates so the preview
  modal plays the real catalog clip instead of falling back to a static image.
- Add a per-card provider badge (top-left thumbnail chip) keyed off
  `source.repo`. HyperFrames cards get a HeyGen-accent gradient so they are
  identifiable at a glance; other repos get a neutral pill.
- Add a Source filter dropdown next to Category in PromptTemplatesTab,
  populated from the small enumerated repo set (HyperFrames, Seedance 2,
  GPT Image 2, Open Design). Auto-hides when only one source is present.
  The text search now also matches the provider name.
- Wire i18n keys `promptTemplates.allSources` and
  `promptTemplates.sourceFilterAria` across all 9 locales.
2026-05-06 18:09:30 +08:00

19 lines
3.2 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"id": "hyperframes-data-bar-chart-race",
"surface": "video",
"title": "HyperFrames: Animated Bar-Chart Race (NYT-style)",
"summary": "A 12-second 16:9 data infographic — animated bar + line chart with staggered category reveal, NYT-style serif headline, footnote source, kinetic value labels. Built directly on the HyperFrames `data-chart` catalog block.",
"category": "Data",
"tags": ["hyperframes", "data-viz", "chart", "infographic", "editorial"],
"model": "hyperframes-html",
"aspect": "16:9",
"prompt": "Build a 12-second HyperFrames data composition (1920×1080, 30fps) showing a 6-bar animated bar-chart race with a NYT-style headline. Pull the catalog block first: `npx hyperframes add data-chart`. Use it as the render surface and override the data via a small JSON inline.\n\nDataset (provide inline; choose the topic from the user's brief or default to AI labs market share):\n• Anthropic — 28%\n• OpenAI — 31%\n• Google — 18%\n• xAI — 9%\n• Meta — 8%\n• Other — 6%\n\nVisual identity: cream canvas #f5efe4, ink text #161312, single rust accent #b14a2c on the active/leading bar only, hairline rules in #b3a692. Display headline: \"Editorial New\" or \"Tiempos Headline\" 84px; deck face \"Inter\" 22px tracked +1%; mono \"JetBrains Mono\" 16px for value labels with `font-variant-numeric: tabular-nums`.\n\nLayout:\n• Top 18% of canvas — headline (one line, max 64 chars) + a 16px-high deck line below, separated by a hairline rule.\n• Middle 64% — the data-chart block, padded 120px left / 80px right.\n• Bottom 18% — source line (small caps, tracked +6%) like \"source · sec filings · may 2026\" and a kinetic ticking timestamp counter (0 → \"may 1 2026\" using apple-money-count-style logic on a date string is wrong — instead do a clean fade-in at 11.0s).\n\nAnimation (12s total):\n• 00.4s — page hairline rule wipes in from left, ease power3.out.\n• 0.31.2s — headline rises from y=40 → 0 over 0.7s ease expo.out, then deck line fades in at 0.9s over 0.4s.\n• 1.29.0s — data-chart block runs its built-in stagger: each bar grows from width 0 → final value over 1.4s, ease power2.out, staggered 180ms per bar; value labels count up tabular-nums at the same easing; the leading bar (`#b14a2c`) gets a 4% scale pulse on landing.\n• 9.511.5s — annotation callout pointing at the leader: a 360px box with a one-line analysis (\"Anthropic narrowed the gap to 3 points\") fades + slides in from x=40 over 0.5s.\n• 11.512s — final hold. Source line fades in. No exit animations (this is the only scene).\n\nNon-negotiables: tabular-nums on every digit; min 16px on data labels; deterministic; entrance-only; all timelines paused:true; root data-duration=12. Run `npx hyperframes inspect --at 1.5,5,9,11.5` to catch any value-label overflow.\n\nOutput: `data-chart-race-12s.mp4`.",
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png",
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4",
"source": {
"repo": "heygen-com/hyperframes",
"license": "Apache-2.0",
"author": "HeyGen",
"url": "https://hyperframes.heygen.com/catalog/data-chart"
}
}