open-design/prompt-templates/video/hyperframes-money-counter-hype.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.1 KiB
JSON
Raw Permalink 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-money-counter-hype",
"surface": "video",
"title": "HyperFrames: $0 → $10K Money Counter Hype (9:16)",
"summary": "A 6-second vertical 1080×1920 HyperFrames hype clip — Apple-style $0 → $10,000 counter with green flash, money burst particles, cash-stack icon, kicker headline. Built on the HyperFrames `apple-money-count` catalog block.",
"category": "Short Form",
"tags": ["hyperframes", "vertical", "hype", "counter", "money"],
"model": "hyperframes-html",
"aspect": "9:16",
"prompt": "Build a 6-second vertical HyperFrames hype clip (1080×1920, 30fps) — a single dramatic counter from $0 to $10,000 with a money burst on landing. Pull `npx hyperframes add apple-money-count` and `npx hyperframes add grain-overlay`. Optional: `npx hyperframes add flash-through-white` for the moment of impact.\n\nVisual identity: deep emerald canvas #052520, single hot-green accent #00ff95, off-white #f5fff8, secondary gold #f0c14b on the burst particles only. Display: \"Druk Wide\" 280px for the counter (with `font-variant-numeric: tabular-nums slashed-zero`); body \"Inter\" 32px tracked +4% small caps for the kicker.\n\nLayer structure:\n• Track 0: full-bleed background — solid #052520 with a soft 540px radial glow #00ff95 at 10% opacity behind the counter, growing to 18% on the impact frame.\n• Track 1: grain-overlay at 6% opacity, full duration.\n• Track 2: kicker line at y=28% — \"WHAT $10K LOOKS LIKE\" small caps, fades in at 0.2s.\n• Track 3: apple-money-count block centered (use as-is — its seeded confetti/burst is deterministic). Override start=0, end=10000, format=USD.\n• Track 4: bottom caption at y=82% — \"day · one\" small caps, fades in at 4.0s.\n• Track 5 (optional): a single flash-through-white frame at 3.4s, 0.18s long.\n\nAnimation (6s total):\n• 00.3s — grain ramps in, kicker fades in from y=14→0 ease power3.out 0.5s.\n• 0.53.5s — counter ticks $0 → $10,000, 3.0s, ease power2.inOut. Tabular-nums forced. Counter scale: 1.0 the whole way except a +4% pop at $10,000 landing (3.5s) ease back.out.\n• 3.43.6s — flash-through-white snap.\n• 3.54.0s — green flash on the counter color: text-color tweens to #00ff95 over 0.3s ease power2.out, then fades back to off-white over 0.6s.\n• 3.54.5s — money burst block fires its built-in particle system (50 deterministic shards in #f0c14b + #00ff95).\n• 4.56.0s — final hold. No exit animations.\n\nNon-negotiables: tabular-nums + slashed-zero on the counter; no Math.random in particle positions — use the block's seed; no `repeat: -1`; entrance-only; deterministic; all timelines paused:true; root data-duration=6, data-width=1080, data-height=1920.\n\nOutput: `money-counter-6s.mp4`.",
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png",
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4",
"source": {
"repo": "heygen-com/hyperframes",
"license": "Apache-2.0",
"author": "HeyGen",
"url": "https://hyperframes.heygen.com/catalog/apple-money-count"
}
}