open-design/prompt-templates/video/hyperframes-product-reveal-minimal.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
2.7 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-product-reveal-minimal",
"surface": "video",
"title": "HyperFrames: 5-Second Minimal Product Reveal",
"summary": "A 5-second HyperFrames composition for a high-end product reveal — dark canvas, single warm accent, slow push-in title card, kinetic kicker line, restrained motion. The agent renders MP4 from HTML+GSAP via puppeteer; no stock footage needed.",
"category": "Cinematic",
"tags": ["hyperframes", "product", "minimal", "title-card"],
"model": "hyperframes-html",
"aspect": "16:9",
"prompt": "Build a 5-second HyperFrames composition (1920×1080, 30fps) for a minimal product reveal. The brief is restraint: one product, one accent color, no clutter.\n\nVisual identity: dark canvas #0b0b0f, warm rust accent #ffb76b, off-white text #f5f1ea, secondary slate #7da4ff used only on a single hairline rule. Display face: \"Editorial New\" or fallback \"Times Now\" at 140px for the brand wordmark; body in \"Inter\" 22px tracked +2%; tabular-nums on any digits.\n\nScene 1 (02.0s) — empty stage with a single hairline rule entering from the left at 0.2s, easing power3.out, 0.8s duration. At 0.6s a small caps kicker label \"NEW · MAY 2026\" fades in below the rule, x-offset 24px → 0, opacity 0 → 1, ease power2.out, 0.5s.\n\nScene 2 (2.04.2s) — the brand wordmark slides up from y=80 to y=0 with opacity 0→1 over 0.7s ease expo.out, staggered 80ms per character via gsap.from with each glyph wrapped in a span. Behind it a soft 540px radial glow #ffb76b at 12% opacity pulses once (scale 1 → 1.04 → 1, 1.6s ease sine.inOut). At 3.4s a one-line tagline (max 56 chars) rises in from y=24 over 0.5s.\n\nScene 3 (4.25.0s) — final hold. No exit animations on any element — the composition simply ends on the hero frame. The hairline rule extends another 80px on a 0.4s ease power2.out for a final breath.\n\nNon-negotiables (HyperFrames contract): all timelines paused: true, registered to window.__timelines[\"main\"]; deterministic only, no Math.random or Date.now; entrance-only animations (no opacity-to-0 exits); root <div> carries data-composition-id, data-width=\"1920\", data-height=\"1080\", data-duration=\"5\".\n\nDeliverable: index.html plus hyperframes.json + meta.json scaffold from `npx hyperframes init --example blank`. Render via daemon dispatch. Output a single descriptive .mp4 in the project root (e.g. `product-reveal-minimal.mp4`).",
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png",
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4",
"source": {
"repo": "heygen-com/hyperframes",
"license": "Apache-2.0",
"author": "HeyGen",
"url": "https://x.com/HeyGen/status/2044827454460871072"
}
}