mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +07:00
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.
This commit is contained in:
Tom Huang
GitHub
parent
99d443c512
commit
9d176ef12e
27 changed files with 118 additions and 2 deletions
|
|
@ -4,9 +4,26 @@ import {
|
|||
localizePromptTemplateCategory,
|
||||
localizePromptTemplateSummary,
|
||||
} from '../i18n/content';
|
||||
import type { PromptTemplateSummary } from '../types';
|
||||
import type { PromptTemplateSource, PromptTemplateSummary } from '../types';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
// Stable, human-readable provider name used by the source filter and the
|
||||
// thumbnail badge. Anchored on `source.repo` (a small enumerated set) rather
|
||||
// than `source.author` (dozens of curators). Known upstream repos get a
|
||||
// brand-aware label; everything else falls back to the repo's last segment.
|
||||
const PROVIDER_LABELS: Record<string, string> = {
|
||||
'heygen-com/hyperframes': 'HyperFrames',
|
||||
'YouMind-OpenLab/awesome-seedance-2-prompts': 'Seedance 2',
|
||||
'YouMind-OpenLab/awesome-gpt-image-2': 'GPT Image 2',
|
||||
'nexu-io/open-design': 'Open Design',
|
||||
};
|
||||
function providerLabel(source: PromptTemplateSource): string {
|
||||
const known = PROVIDER_LABELS[source.repo];
|
||||
if (known) return known;
|
||||
const repo = source.repo.split('/').pop() ?? source.repo;
|
||||
return repo;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
surface: 'image' | 'video';
|
||||
templates: PromptTemplateSummary[];
|
||||
|
|
@ -22,6 +39,7 @@ export function PromptTemplatesTab({ surface, templates, onPreview }: Props) {
|
|||
const { locale, t } = useI18n();
|
||||
const [filter, setFilter] = useState('');
|
||||
const [category, setCategory] = useState<string>('All');
|
||||
const [source, setSource] = useState<string>('All');
|
||||
|
||||
const surfaceScoped = useMemo(
|
||||
() => templates.filter((tpl) => tpl.surface === surface),
|
||||
|
|
@ -34,12 +52,24 @@ export function PromptTemplatesTab({ surface, templates, onPreview }: Props) {
|
|||
return ['All', ...Array.from(set).sort()];
|
||||
}, [surfaceScoped]);
|
||||
|
||||
const sources = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
for (const tpl of surfaceScoped) {
|
||||
const label = providerLabel(tpl.source);
|
||||
if (label) set.add(label);
|
||||
}
|
||||
return ['All', ...Array.from(set).sort()];
|
||||
}, [surfaceScoped]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = filter.trim().toLowerCase();
|
||||
return surfaceScoped.filter((tpl) => {
|
||||
if (category !== 'All' && (tpl.category || 'General') !== category) {
|
||||
return false;
|
||||
}
|
||||
if (source !== 'All' && providerLabel(tpl.source) !== source) {
|
||||
return false;
|
||||
}
|
||||
if (!q) return true;
|
||||
const localized = localizePromptTemplateSummary(locale, tpl);
|
||||
return (
|
||||
|
|
@ -50,9 +80,10 @@ export function PromptTemplatesTab({ surface, templates, onPreview }: Props) {
|
|||
|| localized.summary.toLowerCase().includes(q)
|
||||
|| localized.category.toLowerCase().includes(q)
|
||||
|| (localized.tags ?? []).some((tag) => tag.toLowerCase().includes(q))
|
||||
|| providerLabel(tpl.source).toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}, [surfaceScoped, filter, category, locale]);
|
||||
}, [surfaceScoped, filter, category, source, locale]);
|
||||
|
||||
if (surfaceScoped.length === 0) {
|
||||
return (
|
||||
|
|
@ -79,6 +110,19 @@ export function PromptTemplatesTab({ surface, templates, onPreview }: Props) {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
{sources.length > 2 ? (
|
||||
<select
|
||||
value={source}
|
||||
onChange={(e) => setSource(e.target.value)}
|
||||
aria-label={t('promptTemplates.sourceFilterAria')}
|
||||
>
|
||||
{sources.map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{s === 'All' ? t('promptTemplates.allSources') : s}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : null}
|
||||
<span className="prompt-templates-count">
|
||||
{t('promptTemplates.countLabel', { n: filtered.length })}
|
||||
</span>
|
||||
|
|
@ -114,6 +158,8 @@ function PromptTemplateCard({
|
|||
onPreview: () => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const provider = providerLabel(tpl.source);
|
||||
const isHyperFrames = tpl.source.repo === 'heygen-com/hyperframes';
|
||||
const sourceLabel = tpl.source.author
|
||||
? `${tpl.source.author} · ${tpl.source.repo.split('/').pop()}`
|
||||
: tpl.source.repo.split('/').pop();
|
||||
|
|
@ -136,6 +182,15 @@ function PromptTemplateCard({
|
|||
<Icon name="image" size={28} />
|
||||
</span>
|
||||
)}
|
||||
{provider ? (
|
||||
<span
|
||||
className={
|
||||
`prompt-template-thumb-provider${isHyperFrames ? ' is-hyperframes' : ''}`
|
||||
}
|
||||
>
|
||||
{provider}
|
||||
</span>
|
||||
) : null}
|
||||
{tpl.surface === 'video' && tpl.previewVideoUrl ? (
|
||||
<span className="prompt-template-thumb-play" aria-hidden>
|
||||
▶
|
||||
|
|
|
|||
|
|
@ -162,6 +162,8 @@ export const de: Dict = {
|
|||
'promptTemplates.openSource': 'Original anzeigen',
|
||||
'promptTemplates.openFullscreen': 'Vollbildvorschau öffnen',
|
||||
'promptTemplates.closeFullscreen': 'Vollbildvorschau schließen',
|
||||
'promptTemplates.allSources': 'Alle Quellen',
|
||||
'promptTemplates.sourceFilterAria': 'Nach Quelle filtern',
|
||||
'promptTemplates.retry': 'Erneut versuchen',
|
||||
|
||||
'newproj.tabPrototype': 'Prototyp',
|
||||
|
|
|
|||
|
|
@ -161,6 +161,8 @@ export const en: Dict = {
|
|||
'promptTemplates.openSource': 'View original',
|
||||
'promptTemplates.openFullscreen': 'Open fullscreen preview',
|
||||
'promptTemplates.closeFullscreen': 'Close fullscreen preview',
|
||||
'promptTemplates.allSources': 'All sources',
|
||||
'promptTemplates.sourceFilterAria': 'Filter by source',
|
||||
'promptTemplates.retry': 'Retry',
|
||||
|
||||
'connectors.title': 'Connectors',
|
||||
|
|
|
|||
|
|
@ -163,6 +163,8 @@ export const esES: Dict = {
|
|||
'promptTemplates.openSource': 'Ver original',
|
||||
'promptTemplates.openFullscreen': 'Abrir vista previa en pantalla completa',
|
||||
'promptTemplates.closeFullscreen': 'Cerrar vista previa en pantalla completa',
|
||||
'promptTemplates.allSources': 'Todas las fuentes',
|
||||
'promptTemplates.sourceFilterAria': 'Filtrar por fuente',
|
||||
'promptTemplates.retry': 'Reintentar',
|
||||
|
||||
'newproj.tabPrototype': 'Prototipo',
|
||||
|
|
|
|||
|
|
@ -162,6 +162,8 @@ export const fa: Dict = {
|
|||
'promptTemplates.openSource': 'دیدن منبع اصلی',
|
||||
'promptTemplates.openFullscreen': 'باز کردن پیشنمایش تمامصفحه',
|
||||
'promptTemplates.closeFullscreen': 'بستن پیشنمایش تمامصفحه',
|
||||
'promptTemplates.allSources': 'همهٔ منابع',
|
||||
'promptTemplates.sourceFilterAria': 'فیلتر بر اساس منبع',
|
||||
'promptTemplates.retry': 'تلاش دوباره',
|
||||
|
||||
'connectors.title': 'اتصالدهندهها',
|
||||
|
|
|
|||
|
|
@ -163,6 +163,8 @@ export const hu: Dict = {
|
|||
'promptTemplates.openSource': 'Eredeti megnyitása',
|
||||
'promptTemplates.openFullscreen': 'Teljes képernyős előnézet',
|
||||
'promptTemplates.closeFullscreen': 'Teljes képernyős előnézet bezárása',
|
||||
'promptTemplates.allSources': 'Minden forrás',
|
||||
'promptTemplates.sourceFilterAria': 'Szűrés forrás szerint',
|
||||
'promptTemplates.retry': 'Újra',
|
||||
|
||||
'connectors.title': 'Kapcsolók',
|
||||
|
|
|
|||
|
|
@ -162,6 +162,8 @@ export const ja: Dict = {
|
|||
'promptTemplates.openSource': 'オリジナルを表示',
|
||||
'promptTemplates.openFullscreen': 'フルスクリーンプレビューを開く',
|
||||
'promptTemplates.closeFullscreen': 'フルスクリーンプレビューを閉じる',
|
||||
'promptTemplates.allSources': 'すべてのソース',
|
||||
'promptTemplates.sourceFilterAria': 'ソースで絞り込む',
|
||||
'promptTemplates.retry': '再試行',
|
||||
|
||||
'newproj.tabPrototype': 'プロトタイプ',
|
||||
|
|
|
|||
|
|
@ -163,6 +163,8 @@ export const ko: Dict = {
|
|||
'promptTemplates.openSource': '원본 보기',
|
||||
'promptTemplates.openFullscreen': '전체 화면 미리보기 열기',
|
||||
'promptTemplates.closeFullscreen': '전체 화면 미리보기 닫기',
|
||||
'promptTemplates.allSources': '모든 출처',
|
||||
'promptTemplates.sourceFilterAria': '출처별 필터',
|
||||
'promptTemplates.retry': '다시 시도',
|
||||
|
||||
'connectors.title': '커넥터',
|
||||
|
|
|
|||
|
|
@ -163,6 +163,8 @@ export const pl: Dict = {
|
|||
'promptTemplates.openSource': 'Zobacz oryginał',
|
||||
'promptTemplates.openFullscreen': 'Podgląd pełnoekranowy',
|
||||
'promptTemplates.closeFullscreen': 'Zamknij podgląd pełnoekranowy',
|
||||
'promptTemplates.allSources': 'Wszystkie źródła',
|
||||
'promptTemplates.sourceFilterAria': 'Filtruj według źródła',
|
||||
'promptTemplates.retry': 'Ponów',
|
||||
|
||||
'connectors.title': 'Konektory',
|
||||
|
|
|
|||
|
|
@ -160,6 +160,8 @@ export const ptBR: Dict = {
|
|||
'promptTemplates.openSource': 'Ver original',
|
||||
'promptTemplates.openFullscreen': 'Abrir prévia em tela cheia',
|
||||
'promptTemplates.closeFullscreen': 'Fechar prévia em tela cheia',
|
||||
'promptTemplates.allSources': 'Todas as fontes',
|
||||
'promptTemplates.sourceFilterAria': 'Filtrar por fonte',
|
||||
'promptTemplates.retry': 'Tentar novamente',
|
||||
|
||||
'connectors.title': 'Conectores',
|
||||
|
|
|
|||
|
|
@ -160,6 +160,8 @@ export const ru: Dict = {
|
|||
'promptTemplates.openSource': 'Открыть оригинал',
|
||||
'promptTemplates.openFullscreen': 'Открыть полноэкранный предпросмотр',
|
||||
'promptTemplates.closeFullscreen': 'Закрыть полноэкранный предпросмотр',
|
||||
'promptTemplates.allSources': 'Все источники',
|
||||
'promptTemplates.sourceFilterAria': 'Фильтр по источнику',
|
||||
'promptTemplates.retry': 'Повторить',
|
||||
|
||||
'connectors.title': 'Коннекторы',
|
||||
|
|
|
|||
|
|
@ -158,6 +158,8 @@ export const tr: Dict = {
|
|||
'promptTemplates.openSource': 'Orijinali görüntüle',
|
||||
'promptTemplates.openFullscreen': 'Tam ekran ön izlemeyi aç',
|
||||
'promptTemplates.closeFullscreen': 'Tam ekran ön izlemeyi kapat',
|
||||
'promptTemplates.allSources': 'Tüm kaynaklar',
|
||||
'promptTemplates.sourceFilterAria': 'Kaynağa göre filtrele',
|
||||
'promptTemplates.retry': 'Yeniden dene',
|
||||
|
||||
'connectors.title': 'Bağlayıcılar',
|
||||
|
|
|
|||
|
|
@ -159,6 +159,8 @@ export const zhCN: Dict = {
|
|||
'promptTemplates.openSource': '查看原始来源',
|
||||
'promptTemplates.openFullscreen': '打开全屏预览',
|
||||
'promptTemplates.closeFullscreen': '关闭全屏预览',
|
||||
'promptTemplates.allSources': '所有来源',
|
||||
'promptTemplates.sourceFilterAria': '按来源筛选',
|
||||
'promptTemplates.retry': '重试',
|
||||
|
||||
'connectors.title': '连接器',
|
||||
|
|
|
|||
|
|
@ -159,6 +159,8 @@ export const zhTW: Dict = {
|
|||
'promptTemplates.openSource': '查看原始來源',
|
||||
'promptTemplates.openFullscreen': '開啟全螢幕預覽',
|
||||
'promptTemplates.closeFullscreen': '關閉全螢幕預覽',
|
||||
'promptTemplates.allSources': '所有來源',
|
||||
'promptTemplates.sourceFilterAria': '依來源篩選',
|
||||
'promptTemplates.retry': '重試',
|
||||
|
||||
'connectors.title': '連接器',
|
||||
|
|
|
|||
|
|
@ -349,6 +349,8 @@ export interface Dict {
|
|||
'promptTemplates.openSource': string;
|
||||
'promptTemplates.openFullscreen': string;
|
||||
'promptTemplates.closeFullscreen': string;
|
||||
'promptTemplates.allSources': string;
|
||||
'promptTemplates.sourceFilterAria': string;
|
||||
'promptTemplates.retry': string;
|
||||
|
||||
// Designs tab
|
||||
|
|
|
|||
|
|
@ -8557,6 +8557,28 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
|
|||
justify-content: center;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.prompt-template-thumb-provider {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
background: rgba(0, 0, 0, 0.62);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.02em;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
max-width: calc(100% - 16px);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.prompt-template-thumb-provider.is-hyperframes {
|
||||
background: linear-gradient(135deg, #ff5e3a 0%, #f0c14b 100%);
|
||||
color: #1a1410;
|
||||
}
|
||||
.prompt-template-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"aspect": "16:9",
|
||||
"prompt": "Build a 12-second HyperFrames app-showcase composition (1920×1080, 30fps) with three floating iPhone screens, each highlighting a feature of a fictional fitness app. Pull `npx hyperframes add app-showcase`, `npx hyperframes add ui-3d-reveal`, `npx hyperframes add shimmer-sweep`, and `npx hyperframes add logo-outro`.\n\nVisual identity: warm canvas #fff5e8, ink text #1a1410, single hot accent #ff5e3a, secondary teal #2bbab2 used only on the active feature pill. Display: \"General Sans\" 88px for the headline; body \"Inter\" 24px; mono on the in-app data labels.\n\nThe three phones (left, center, right) carry these screens — render each as a sub-composition under `screens/`:\n1. Left phone — workout summary card (3 rings, distance / pace / heart-rate).\n2. Center phone — live activity timer (large MM:SS counter, tabular-nums), pause / resume buttons.\n3. Right phone — weekly streak grid (7 cells × 4 rows, the active week glowing).\n\nAnimation (12s total):\n• 0–1.0s — headline \"YOUR WEEK, IN MOTION\" rises from y=50 → 0 over 0.7s ease expo.out at the top of the canvas. A hairline rule wipes in below it.\n• 0.6–2.0s — the three phones fly in via ui-3d-reveal: left from x=-260 + rotateY=-20°, right from x=+260 + rotateY=+20°, center from z=-300, all easing expo.out 1.4s, staggered 180ms.\n• 2.0–4.0s — left phone front-facing: rotateY tweens to 0°, scale to 1.04 over 0.6s, then a label callout \"workout summary\" types in to its left over 0.4s. Hold 1s. Then phone returns to its idle 3D pose.\n• 4.0–6.0s — center phone takes over with the same beat (label callout \"live activity\").\n• 6.0–8.0s — right phone takes over (label callout \"streaks\").\n• 8.0–10.0s — all three phones reset to idle, gently bobbing on a sin wave (deterministic, finite repeats — calculate cycles from the 2.0s window).\n• 10.0–12.0s — logo-outro fires in the bottom-right corner with a final shimmer-sweep across the headline.\n\nNon-negotiables: deterministic only; entrance-only animations; phones use a non-timed wrapper `<div>` if you nest video screens — never put video directly inside a timed clip; no `repeat: -1` (compute exact cycle count); min 24px on label callouts; all timelines paused:true; root data-duration=12. Run `npx hyperframes inspect --samples 12` to catch label overlap with phones.\n\nOutput: `app-showcase-12s.mp4`.",
|
||||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png",
|
||||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4",
|
||||
"source": {
|
||||
"repo": "heygen-com/hyperframes",
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"aspect": "16:9",
|
||||
"prompt": "Build a 30-second HyperFrames sizzle reel (1920×1080, 30fps) — five scenes hammered to a tempo, beat-synced display words, restrained color, one logo outro. The audio is a 90 BPM bed track (`bed.mp3`) — every scene cut and major pop lands on a beat (every 666ms). Use the audio-reactive reference for amplitude-driven scale, and pull `npx hyperframes add flash-through-white`, `npx hyperframes add cinematic-zoom`, `npx hyperframes add chromatic-radial-split`, `npx hyperframes add logo-outro`.\n\nVisual identity: ink canvas #0a0a0a, single jewel accent #f0c14b, off-white #f7f3e8. Display: \"Druk Wide\" 220px (or \"Anton\") for one-word scenes; body \"Inter\" 28px; tabular-nums on any number scene.\n\nScene 1 (0–6s) WHO — full-bleed display word \"BUILD\" centered, scales 0.92→1 ease expo.out 0.5s on the first beat (beat 1, t=0.0s), then audio-amplitude reacts on every beat with a +2% scale pop (use audio-reactive: map 0–80Hz amplitude → scale, dampened). At 4s the kicker line \"a film about shipping\" fades in below at 36px. Transition at 6.0s → flash-through-white, 0.4s.\n\nScene 2 (6.4–12s) WHAT — three quick cuts inside the scene of static product photography (img clips), each 1.8s, with x-axis whip-pan transitions between them (`whip-pan` shader, 0.25s each). Caption mode: a single mono line at the bottom changes per cut.\nTransition at 12.0s → chromatic-radial-split, 0.5s.\n\nScene 3 (12.5–18.5s) STATS — three numbers, each in a dedicated 2s slot, animated with apple-money-count-style counters (use the catalog block as reference). 0 → 12k, 0 → 4.2×, 0 → $1.4M. Tabular-nums forced.\nTransition at 18.5s → cinematic-zoom, 0.5s.\n\nScene 4 (19.0–25.0s) PEOPLE — three back-to-back testimonial pull-quotes typeset like NYT, each 2s, with a left hairline rule extending in from y=0 over 0.4s before the quote types in via a clip-path reveal.\nTransition at 25.0s → flash-through-white, 0.3s.\n\nScene 5 (25.3–30s) END-CARD — logo-outro block: wordmark piece-by-piece assembly over 1.4s with #f0c14b bloom; one-line CTA fades in at 28.5s; hold to 30s.\n\nNon-negotiables: every cut on a beat, no orphan motion; min 60px headlines; entrance-only (transitions handle exits); deterministic; all timelines paused:true; root data-duration=30. Run lint/validate/inspect. Output: `brand-sizzle-30s.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",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"aspect": "16:9",
|
||||
"prompt": "Build a 12-second HyperFrames data composition (1920×1080, 30fps) showing a 6-bar animated bar-chart race with a NYT-style headline. Pull the catalog block first: `npx hyperframes add data-chart`. Use it as the render surface and override the data via a small JSON inline.\n\nDataset (provide inline; choose the topic from the user's brief or default to AI labs market share):\n• Anthropic — 28%\n• OpenAI — 31%\n• Google — 18%\n• xAI — 9%\n• Meta — 8%\n• Other — 6%\n\nVisual identity: cream canvas #f5efe4, ink text #161312, single rust accent #b14a2c on the active/leading bar only, hairline rules in #b3a692. Display headline: \"Editorial New\" or \"Tiempos Headline\" 84px; deck face \"Inter\" 22px tracked +1%; mono \"JetBrains Mono\" 16px for value labels with `font-variant-numeric: tabular-nums`.\n\nLayout:\n• Top 18% of canvas — headline (one line, max 64 chars) + a 16px-high deck line below, separated by a hairline rule.\n• Middle 64% — the data-chart block, padded 120px left / 80px right.\n• Bottom 18% — source line (small caps, tracked +6%) like \"source · sec filings · may 2026\" and a kinetic ticking timestamp counter (0 → \"may 1 2026\" using apple-money-count-style logic on a date string is wrong — instead do a clean fade-in at 11.0s).\n\nAnimation (12s total):\n• 0–0.4s — page hairline rule wipes in from left, ease power3.out.\n• 0.3–1.2s — headline rises from y=40 → 0 over 0.7s ease expo.out, then deck line fades in at 0.9s over 0.4s.\n• 1.2–9.0s — data-chart block runs its built-in stagger: each bar grows from width 0 → final value over 1.4s, ease power2.out, staggered 180ms per bar; value labels count up tabular-nums at the same easing; the leading bar (`#b14a2c`) gets a 4% scale pulse on landing.\n• 9.5–11.5s — annotation callout pointing at the leader: a 360px box with a one-line analysis (\"Anthropic narrowed the gap to 3 points\") fades + slides in from x=40 over 0.5s.\n• 11.5–12s — final hold. Source line fades in. No exit animations (this is the only scene).\n\nNon-negotiables: tabular-nums on every digit; min 16px on data labels; deterministic; entrance-only; all timelines paused:true; root data-duration=12. Run `npx hyperframes inspect --at 1.5,5,9,11.5` to catch any value-label overflow.\n\nOutput: `data-chart-race-12s.mp4`.",
|
||||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png",
|
||||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4",
|
||||
"source": {
|
||||
"repo": "heygen-com/hyperframes",
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"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• 0–1.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.0–1.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.8–6.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.5–6.5s — destination city label fades in at the destination marker on landing, same pattern as origin.\n• 6.5–8.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",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"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• 0–0.3s — empty stage, grain ramps from 0 → 8% opacity.\n• 0.3–1.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.7–2.0s — radial glow pulses scale 0.96 → 1.04 → 1, 1.2s ease sine.inOut, simulating a bloom hit.\n• 2.0–2.8s — shimmer-sweep slides across the assembled wordmark using its built-in CSS gradient mask.\n• 2.6–3.4s — CTA line rises from y=20→0, opacity 0→1 ease power3.out 0.7s.\n• 3.4–4.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",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"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• 0–0.3s — grain ramps in, kicker fades in from y=14→0 ease power3.out 0.5s.\n• 0.5–3.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.4–3.6s — flash-through-white snap.\n• 3.5–4.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.5–4.5s — money burst block fires its built-in particle system (50 deterministic shards in #f0c14b + #00ff95).\n• 4.5–6.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",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"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 (0–2.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.0–4.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.2–5.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",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"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 (0–7s) 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.4–14.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.9–22.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.3–30s) 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",
|
||||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4",
|
||||
"source": {
|
||||
"repo": "heygen-com/hyperframes",
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"aspect": "9:16",
|
||||
"prompt": "Build a 15-second vertical HyperFrames composition (1080×1920, 30fps) that lays four animated social cards in sequence over a muted face-cam loop. Pull all four catalog blocks first: `npx hyperframes add x-post`, `npx hyperframes add reddit-post`, `npx hyperframes add spotify-card`, `npx hyperframes add instagram-follow`.\n\nVisual identity: warm canvas #1a1410, off-white #fff8f1 for chrome, single hot accent #ff5e3a on glow rings around incoming cards. Display: \"Inter\" 26px tracked normal, the social cards keep their authentic in-platform typefaces (x-post → system, reddit-post → IBM Plex Sans / equivalent, spotify-card → Circular fallback, instagram-follow → SF Pro fallback).\n\nLayer structure:\n• Track 0: <video> face-cam.mp4 (muted playsinline) full-bleed background, slightly desaturated via CSS filter.\n• Track 1: solid #1a1410 at 38% opacity scrim across the bottom 32% of canvas, full duration, to keep cards readable.\n• Track 2: x-post card, data-start=0.4, data-duration=3.2, slides in from x=-340 → 0 ease expo.out 0.6s, holds 2.2s, no exit (transitions handle).\n• Track 3: reddit-post card, data-start=3.6, data-duration=3.4, slides in from y=80 → 0 ease power3.out 0.5s, holds.\n• Track 4: spotify-card, data-start=7.0, data-duration=4.0, slides in from x=+340 → 0 ease expo.out 0.6s, with the album-art rotating gently inside its built-in pose.\n• Track 5: instagram-follow card, data-start=11.0, data-duration=4.0, scales 0.9 → 1 + opacity 0 → 1 ease back.out(1.4) 0.7s, holds to 15s end with the follow button pulsing once at 13.5s.\n\nBetween consecutive cards (3.6s, 7.0s, 11.0s) drop a 0.18s flash-through-white shader (`npx hyperframes add flash-through-white`) for a snappy beat. Each card's landing frame should align with a beat (assume 90 BPM = 666ms grid).\n\nNon-negotiables: each social card's text content should be specific to the user's brief — feed real example handles / posts (or the user's own brand) into the slot data on each block. No animating video element dimensions — wrap face-cam in a non-timed div if you need to scale. All timelines paused:true. Deterministic only. Root data-duration=15, data-width=1080, data-height=1920. Run `npx hyperframes inspect --samples 15` and confirm no card spills off the 1080-wide canvas.\n\nOutput: `social-overlay-stack-15s.mp4`.",
|
||||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png",
|
||||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4",
|
||||
"source": {
|
||||
"repo": "heygen-com/hyperframes",
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"aspect": "9:16",
|
||||
"prompt": "Build a 25-second HyperFrames vertical short (1080×1920, 30fps) for a TikTok-style talking-head clip with karaoke captions. Generate the narration with `npx hyperframes tts` first, then transcribe word-level timings with `npx hyperframes transcribe`. Pull `npx hyperframes add tiktok-follow` and `npx hyperframes add yt-lower-third` (we'll use the lower-third as a name plate, mid-clip). Use the css-patterns reference for word highlighting (marker / clip-path / scatter).\n\nVisual identity: warm canvas #1a1410, single hot accent #ff5e3a, off-white #fff8f1 for text. Display: \"Druk Wide\" 84px (or \"Anton\") for caption words; body \"Inter\" 26px for the lower-third name plate. Captions should be tone-adaptive — emphasis words pop with the marker-sweep pattern; numbers use clip-path slam.\n\nLayer structure (root composition):\n• Track 0: <video> face-cam.mp4 (muted, playsinline) full-bleed, slightly cropped, with a 8px inset border in #ff5e3a at 30% opacity.\n• Track 1: <audio> narration.mp3 (data-volume=1) generated by `hyperframes tts`.\n• Track 2: caption stack (sub-composition `captions.html` loaded via data-composition-src). Captions group by 2–3 words per chunk, max 28 chars per line, sit at y=78% of screen. Each word entry: y=24→0 + opacity 0→1 ease power3.out 0.18s, with the active word color-flipping to #ff5e3a on its own start frame (use tl.set(...) inside the timeline at the word's data-start, not at construction time). Exit by clip-path inset wipe over 0.12s right before the next chunk enters.\n• Track 3: lower-third (`yt-lower-third` block, repurposed) entering at 5.0s from x=-360→0 ease expo.out 0.7s, holding 4s, exiting via the transition at 9.5s.\n• Track 4: tiktok-follow overlay enters at 22.0s, holds to 25s end, no exit.\n\nNon-negotiables: captions never overlap or run off-frame — use `window.__hyperframes.fitTextFontSize(...)` for any chunk longer than 22 chars; min font 60px on captions for legibility on mobile; deterministic only; all timelines paused:true; root data-duration=25.\n\nQuality: run `npx hyperframes lint`, then `npx hyperframes validate` (WCAG contrast must clear 4.5:1 against the face-cam frame at 5 sample timestamps), then `npx hyperframes inspect --samples 12`. Fix any overflow, then dispatch render. Output: `tiktok-karaoke-25s.mp4`.",
|
||||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png",
|
||||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4",
|
||||
"source": {
|
||||
"repo": "heygen-com/hyperframes",
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"aspect": "16:9",
|
||||
"prompt": "Build a 15-second HyperFrames marketing cut (1920×1080, 30fps) that turns a real website into a video. The pipeline: capture the site headlessly at three viewport sizes, drop the captures into the composition, animate between them. Pull `npx hyperframes add chromatic-radial-split`, `npx hyperframes add flash-through-white`, `npx hyperframes add logo-outro`. Use the website-to-video guide from the HF docs to capture the source frames into `assets/site-{desktop,tablet,mobile}.png` before authoring the timeline.\n\nVisual identity: cool canvas #0a0c12, off-white #f5f7fa, single accent #6cf3c0 on UI ring frames. Display: \"General Sans\" 96px for the kicker title, body \"Inter\" 22px for captions, mono \"JetBrains Mono\" 18px for url overlays. Tabular-nums on any digit row.\n\nThree scenes, 5s each, separated by transitions:\n\nScene 1 (0–5s) DESKTOP — captured screenshot (1440×900) inside a stylized browser chrome (use the OD `assets/frames/browser-chrome.html` look as inspiration if available). The screenshot scales 1.04 → 1.0 over 0.7s ease expo.out, then a 1.5s slow Ken-Burns pan across its hero section. A monospace url chip in the top-left fades in at 1.0s. At 4.5s a kicker line types in below the frame.\nTransition at 5.0s → flash-through-white, 0.3s.\n\nScene 2 (5.3–10s) TABLET — captured screenshot (1024×768) tilted slightly in 3D (rotateY=-8°) over the canvas, with the previous chrome floating off via the transition. Same Ken-Burns + url chip pattern. A second kicker line at 8.5s.\nTransition at 10.0s → chromatic-radial-split, 0.5s.\n\nScene 3 (10.5–15s) MOBILE — captured screenshot (390×844) inside an iPhone-15-pro-like chrome, vertical, rotateY=+8°. Animated hand cursor taps once at 12.0s on the primary CTA region, with a small ripple ring expanding over 0.8s. At 13.5s the logo-outro block fires in the lower-right.\n\nNon-negotiables: never animate the dimensions of an <img> directly — wrap each screenshot in a non-timed div and animate the wrapper; entrance-only motion; transitions handle scene exits; deterministic; all timelines paused:true; root data-duration=15. Run `npx hyperframes lint` and `npx hyperframes inspect --samples 15`.\n\nOutput: `website-to-video-15s.mp4`.",
|
||||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png",
|
||||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4",
|
||||
"source": {
|
||||
"repo": "heygen-com/hyperframes",
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue