mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
e11e86d468
* feat(hyperframes): land HTML-in-Canvas across web + skills Ships HTML-in-Canvas as a first-class HyperFrames video path: - 7 new video prompt templates (liquid glass, iPhone+MacBook, portal, shatter, magnetic, liquid background, text-cursor reveal). - skills/hyperframes/references/html-in-canvas.md, surfaced via SKILL.md description+triggers and the system-prompt pre-flight references list. - ChatPane starter prompts now branch by project kind and video model, so the hyperframes-html surface shows HTML-in-canvas-shaped prompts instead of the generic prototype trio. - NewProjectPanel propagates a picked template's model+aspect onto the project, and defaults videoModel to hyperframes-html when the hyperframes skill resolves for the video tab. Polish bundled in the same branch: - DesignFilesPanel empty state becomes a centered pill with a "New sketch" CTA; designFiles.empty copy simplified across 19 locales. - Topbar project title + meta render on one baseline row separated by a middot. - scripts/seed-test-projects.ts hardens daemon URL discovery against pnpm engine warnings on stdout. * fix(new-project): preserve explicit video model choice across tab revisits Latch a videoModelTouched guard once the user picks a model via the dropdown or via a template that declares one, so the hyperframes-html auto-default no longer silently overwrites the override when the Video tab is re-entered. Generated-By: looper 0.6.1 (runner=fixer, agent=claude-code) * fix(i18n): register hyperframes html-in-canvas templates, category, and tags Adds the seven new prompt-template ids, the "VFX / HTML-in-Canvas" category, and the new tag set to the de/ru/fr i18n bundles so the e2e localized-content coverage test passes. Generated-By: looper 0.6.1 (runner=fixer, agent=claude-code) * fix(daemon): inject html-in-canvas preflight for hyperframes runs The contracts-side derivePreflight() learned about references/html-in-canvas.md when this PR landed, but the daemon copy at apps/daemon/src/prompts/system.ts kept the older five-ref allowlist. server.ts:4138 wires composeSystemPrompt from the daemon copy into live chat runs, so the main HyperFrames flow this PR is meant to improve still wasn't auto-injecting the preflight directive in production. Mirror the html-in-canvas case into the daemon composer and lock it behind a daemon-side test so the two copies cannot drift again on this reference. The broader live-artifact preflight gap (artifact- schema / connector-policy / refresh-contract) is pre-existing drift and is intentionally out of scope here. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(web): restyle designs empty state as centered card on grid backdrop Swap the horizontal pill for a stacked card and add a faint grid backdrop so the empty designs surface reads as an intentional canvas rather than a gap. Title now wraps instead of truncating; container is taller. * fix(new-project): pin skillId to hyperframes when videoModel is hyperframes-html When the Video tab resolves its skill it used to fall back to `list[0]?.id` if no skill declared `default_for: video`. That list is built from an unsorted `readdir()` in apps/daemon/src/skills.ts, so a freshly mounted project could land on `video-shortform` even when the user had explicitly chosen the HyperFrames-HTML model (or one of the new `hyperframes-html-in-canvas-*` templates). The agent then ran without the hyperframes SKILL body or its `references/html-in-canvas.md` preflight — the exact regression PR #866 was meant to land. `skillIdForTab` now pins to `hyperframes` whenever the current video model is `hyperframes-html`, regardless of discovery order. Added a unit test that mounts both `video-shortform` and `hyperframes` (with hyperframes last, simulating the bad readdir order) and asserts the create payload routes through `hyperframes`. --------- Co-authored-by: Cursor <cursoragent@cursor.com>
19 lines
4 KiB
JSON
19 lines
4 KiB
JSON
{
|
||
"id": "hyperframes-html-in-canvas-shatter",
|
||
"surface": "video",
|
||
"title": "HyperFrames HTML-in-Canvas: Glass Shatter Outro",
|
||
"summary": "A 12-second HTML shatter outro — a real product page or pricing card holds for a beat, then explodes into refracting glass fragments with depth blur and chromatic dispersion. Built on the vfx-shatter catalog block. Pairs as an end-card after a longer composition.",
|
||
"category": "VFX / HTML-in-Canvas",
|
||
"tags": ["hyperframes", "html-in-canvas", "shatter", "outro", "destruction"],
|
||
"model": "hyperframes-html",
|
||
"aspect": "16:9",
|
||
"prompt": "Build a 12-second HyperFrames composition (1920×1080, 30fps) titled \"glass-shatter-outro\". Pull the catalog block first: `npx hyperframes add vfx-shatter`.\n\nVisual identity: deep ink canvas #0c0e14, single warm accent #ff5b3a for fragment edges, secondary cool #5cd4ff for chromatic dispersion, off-white type #f5f5f3. Display face: \"PP Telegraf\" Bold 140px on the hero card; body \"PP Telegraf\" 24px. Tabular-nums on the price.\n\nThe composition shatters one piece of UI the user supplies — default: a single pricing card centered on canvas, 760×920px, glass-morphism (rgba(255,255,255,0.06) bg, `backdrop-filter: blur(28px)`, 1px rgba border, 28px radius), with: tier name (\"Pro\"), price (\"$24/mo\" tabular-nums), 4 feature bullets, primary CTA (\"choose Pro\").\n\nSource layer: a `<canvas layoutsubtree width=\"1920\" height=\"1080\">` containing the centered pricing-card DOM on top of a soft #0c0e14 → #14161e radial-gradient backdrop.\n\nTimeline (paused: true, window.__timelines.main, data-duration=12):\n\n0.0–3.5s HOLD — card fully composed, idle state. Subtle ambient drift (translateY ±4px ease sine.inOut, finite period 3.0s, 1 repeat). Capture the source canvas at every frame so any micro-motion in the DOM (e.g., a soft accent shimmer behind the price) makes it through.\n\n3.5–4.0s WIND-UP — card scales 1.0 → 1.04 (ease power2.in 0.5s), chromatic offset on the captured texture grows from 0 → 0.012, faint vibration on the fragment field (precomputed Voronoi seed mulberry32(8743)).\n\n4.0–6.6s SHATTER — fragment spawn at t=4.0s. Each fragment gets a deterministic vector based on its centroid (outward + slight upward bias). Translate over 2.6s ease expo.out to final positions in a 2400×1400px field, rotate 0 → ±240° per fragment (signed by centroid sign), scale 1.0 → 0.92, refraction strength 0 → 0.6 → 0.3. Chromatic dispersion peaks at 4.4s (offset 0.034) then decays. Add depth blur on fragments behind the focal plane (z < -100).\n\n6.6–10.0s DRIFT — fragments slow-tumble in negative space, deterministic per-fragment angular velocity. Camera does a slow dolly z 0 → -80 ease sine.inOut. Reveal the brand wordmark behind the fragment field at 7.4s (`gsap.from('.wordmark', { y: 40, opacity: 0, duration: 0.8, ease: 'power3.out' })`) — wordmark uses 96px display size.\n\n10.0–12.0s SETTLE — fragments tumble out of frame; wordmark and a single CTA line (\"keep building\") stay centered. Final 0.6s of grain-overlay hold. No opacity-to-0 exits on the wordmark — only the fragment field exits.\n\nFeature detection: if `drawElementImage` is unavailable, hold the source DOM card without the shatter, fade to wordmark via a CSS crossfade. Never show a black canvas.\n\nNon-negotiables: deterministic Voronoi seeding, no Math.random / Date.now, all fragment animations finite-repeat, entrance animations on the wordmark, no exit animations except on the fragment field itself. Run `npx hyperframes lint` and `npx hyperframes inspect --samples 14 --at 1,3,4,4.5,5.5,7.5,9.5,11.5` before render. Output: `glass-shatter-outro.mp4`.",
|
||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png",
|
||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4",
|
||
"source": {
|
||
"repo": "heygen-com/hyperframes",
|
||
"license": "Apache-2.0",
|
||
"author": "HeyGen",
|
||
"url": "https://hyperframes.heygen.com/catalog/blocks/vfx-shatter"
|
||
}
|
||
}
|