open-design/prompt-templates/video/hyperframes-flight-map-route.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 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-flight-map-route",
"surface": "video",
"title": "HyperFrames: Apple-Style Flight Map (Origin → Destination)",
"summary": "An 8-second 16:9 cinematic flight-route map — realistic terrain zoom, animated plane gliding from origin to destination along a curved path, labelled cities, kinetic distance counter. Built directly on the HyperFrames `nyc-paris-flight` catalog block, repurposable for any city pair.",
"category": "Travel",
"tags": ["hyperframes", "map", "travel", "route", "cinematic"],
"model": "hyperframes-html",
"aspect": "16:9",
"prompt": "Build an 8-second HyperFrames cinematic flight-map (1920×1080, 30fps) showing a plane traveling between two named cities. Pull `npx hyperframes add nyc-paris-flight` and override the two endpoint coordinates plus city labels with the user's chosen pair (default: New York → Paris, ~5,837 km).\n\nVisual identity: dark map canvas #0a0e1a (Apple Maps dark style), warm route accent #ffb76b, off-white labels #f5f1ea, secondary slate #7da4ff for distance / coordinate text. Display: \"Inter\" 64px for city names; mono \"JetBrains Mono\" 18px for coordinates; tabular-nums forced on the distance counter.\n\nAnimation (8s total):\n• 01.2s — globe / map zooms in from a wide world view to a regional view spanning both cities, ease expo.inOut, with a slight rotation correction. Use the catalog block's built-in zoom hook.\n• 1.01.8s — origin city label fades in at the origin marker, x-axis offset 0, opacity 0→1 + scale 0.92→1 ease power3.out 0.6s. The marker (a 14px ring + 4px dot in #ffb76b) pulses scale 1→1.18→1 over 1.0s ease sine.inOut.\n• 1.86.0s — the route arc draws progressively from origin to destination using stroke-dashoffset on an SVG path, 4.0s ease power2.inOut. The plane icon (small 36px svg) rides the path with motionPath, rotating to match the bearing. A small cluster of \"distance traveled\" text in tabular-nums counts up below the plane: 0 → 5,837 km.\n• 5.56.5s — destination city label fades in at the destination marker on landing, same pattern as origin.\n• 6.58.0s — final hold. The full route + both labels remain on screen. A small footer line \"flight time · 7h 42m\" fades in at 7.0s. No exit animations.\n\nNon-negotiables: tabular-nums on the distance readout; min 16px on coordinate labels; deterministic only (no Math.random for plane jitter — use a seeded mulberry32 if you need any noise); entrance-only; all timelines paused:true; root data-duration=8.\n\nQuality: run `npx hyperframes inspect --at 1.5,3,5.5,7.5` to confirm both labels fit inside the canvas, then dispatch render. Output: `flight-route-{origin}-{destination}.mp4`.",
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png",
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4",
"source": {
"repo": "heygen-com/hyperframes",
"license": "Apache-2.0",
"author": "HeyGen",
"url": "https://hyperframes.heygen.com/catalog/nyc-paris-flight"
}
}