open-design/prompt-templates/video/hyperframes-logo-outro-cinematic.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.9 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-logo-outro-cinematic",
"surface": "video",
"title": "HyperFrames: 4-Second Cinematic Logo Outro",
"summary": "A 4-second 16:9 logo outro — piece-by-piece wordmark assembly with bloom, shimmer sweep across the final lockup, soft grain overlay, single-line CTA. Built on the HyperFrames `logo-outro`, `shimmer-sweep`, and `grain-overlay` blocks.",
"category": "Branding",
"tags": ["hyperframes", "logo", "outro", "endcard", "branding"],
"model": "hyperframes-html",
"aspect": "16:9",
"prompt": "Build a 4-second HyperFrames logo outro (1920×1080, 30fps) for a brand end-card. Pull `npx hyperframes add logo-outro`, `npx hyperframes add shimmer-sweep`, and `npx hyperframes add grain-overlay`.\n\nVisual identity: deep ink #07070a, single jewel accent #f0c14b, off-white #f7f3e8, secondary mauve #b8a3c8 used only on a 1px hairline rule. Display: \"General Sans\" 200px for the wordmark; body \"Inter\" 24px tracked +6% small caps for the CTA line.\n\nLayer structure:\n• Track 0: full-bleed background. Solid #07070a with a centered radial glow #f0c14b at 14% opacity, 720px diameter, sized by the bloom on landing.\n• Track 1: grain-overlay block at 8% opacity, full duration.\n• Track 2: logo-outro block in the center. Override the wordmark text via a slot to the user's brand name (default: \"OPEN DESIGN\").\n• Track 3: shimmer-sweep block running across the wordmark once, starting at 2.0s, lasting 0.8s.\n• Track 4: CTA line (one of: \"open-design.dev\", \"github.com/nexu-io/open-design\") at y=72%, fades in at 2.6s.\n\nAnimation (4s total):\n• 00.3s — empty stage, grain ramps from 0 → 8% opacity.\n• 0.31.7s — logo-outro built-in choreography: each glyph piece flies in from random offsets (use the block's seeded variant — DO NOT rewrite with Math.random) and assembles, ease expo.out, 1.4s.\n• 1.72.0s — radial glow pulses scale 0.96 → 1.04 → 1, 1.2s ease sine.inOut, simulating a bloom hit.\n• 2.02.8s — shimmer-sweep slides across the assembled wordmark using its built-in CSS gradient mask.\n• 2.63.4s — CTA line rises from y=20→0, opacity 0→1 ease power3.out 0.7s.\n• 3.44.0s — final hold, grain continues, no exits.\n\nNon-negotiables: deterministic only — use the block's built-in seed; no `repeat: -1` (calculate explicit cycle count from duration if you keep grain animated); entrance-only; all timelines paused:true; root data-duration=4. Run lint and validate (contrast on the CTA line must clear 4.5:1 against the dark canvas).\n\nOutput: `logo-outro-4s.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://hyperframes.heygen.com/catalog/logo-outro"
}
}