open-design/prompt-templates/video/hyperframes-saas-product-promo-30s.json
Tom Huang 266daf904f
feat(prompt-templates): add 11 HyperFrames video prompts + media generation README section (#227)
* 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.
2026-05-02 11:01:16 +08:00

18 lines
3.3 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-saas-product-promo-30s",
"surface": "video",
"title": "HyperFrames: 30-Second SaaS Product Promo (Linear-style)",
"summary": "A 30-second HyperFrames composition modelled on Linear/ClickUp-style product films — UI 3D reveals, beat-synced kinetic typography, animated UI screenshots, end-card with logo outro. Built from HF catalog blocks (ui-3d-reveal, app-showcase, logo-outro) plus shader transitions between scenes.",
"category": "Marketing",
"tags": ["hyperframes", "product-promo", "saas", "linear-style", "kinetic-typography"],
"model": "hyperframes-html",
"aspect": "16:9",
"prompt": "Build a 30-second HyperFrames product promo (1920×1080, 30fps) for a fictional SaaS app. Pull these catalog blocks first: `npx hyperframes add ui-3d-reveal`, `npx hyperframes add app-showcase`, `npx hyperframes add logo-outro`, `npx hyperframes add flash-through-white`, `npx hyperframes add chromatic-radial-split`.\n\nVisual identity: cool slate canvas #0e1116, single electric accent #6cf3c0, off-white text #f5f7fa, secondary indigo #7da4ff used only on UI chrome. Display face: \"General Sans\" 120px; body \"Inter\" 24px; mono \"JetBrains Mono\" 18px on UI bits; tabular-nums on numbers.\n\nFour scenes, each ~7s, separated by shader transitions:\n\nScene 1 (07s) HOOK — full-bleed quote-typography. Headline scales in from 0.9 over 0.6s ease expo.out, then a single mono kicker line below appears with a marker-sweep highlight (use the css-patterns marker pattern). Background: subtle grain-overlay block at 8% opacity.\nTransition at 7.0s → flash-through-white, 0.4s.\n\nScene 2 (7.414.4s) PROBLEM — three pull-quotes from \"users\" in stacked Reddit-style cards using the `reddit-post` overlay block, staggered 280ms apart, each entering with x:-60→0 + opacity 0→1 ease power3.out 0.5s. Hold for 2s on the third card. Background still grain-overlay; soft #6cf3c0 radial glow at 6% behind the stack.\nTransition at 14.4s → chromatic-radial-split, 0.5s.\n\nScene 3 (14.922.0s) SOLUTION — the `app-showcase` block (three floating phones / desktop hybrid) renders the product UI. Use ui-3d-reveal to fly in the central UI panel from z=-400 with a 0.7s ease expo.out, then stagger three feature pills (each \"plan / track / ship\") sliding in from the right over 1.6s. Animate one cursor click on the active pill at 19.5s.\nTransition at 22.0s → flash-through-white, 0.3s.\n\nScene 4 (22.330s) END-CARD — `logo-outro` block: piece-by-piece wordmark assembly with bloom glow over 1.4s, then a single CTA line \"try it · 14-day free\" fades in at 25.5s, then hold. Final 1s of grain-overlay continues for texture.\n\nNon-negotiables: all timelines `paused: true` registered to window.__timelines; entrance-only animations (no opacity-to-0 exits — transitions handle the cuts); root data-composition-id, data-width=1920, data-height=1080, data-duration=30; min font-size 60px on every headline; tabular-nums on any digit row. Run `npx hyperframes lint` and `npx hyperframes inspect --samples 10` before render. Output: `saas-product-promo-30s.mp4`.",
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png",
"source": {
"repo": "heygen-com/hyperframes",
"license": "Apache-2.0",
"author": "HeyGen",
"url": "https://x.com/HeyGen/status/2048882211022311614"
}
}