mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +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.1 KiB
JSON
19 lines
4.1 KiB
JSON
{
|
||
"id": "hyperframes-html-in-canvas-liquid-background",
|
||
"surface": "video",
|
||
"title": "HyperFrames HTML-in-Canvas: Liquid Background Hero",
|
||
"summary": "A 12-second hero with HTML content floating above an organic liquid surface — vertex-displaced subdivided plane, real-time wave dynamics, captured DOM rides on top crisp and readable. Built on the vfx-liquid-background catalog block.",
|
||
"category": "VFX / HTML-in-Canvas",
|
||
"tags": ["hyperframes", "html-in-canvas", "liquid", "displacement", "hero"],
|
||
"model": "hyperframes-html",
|
||
"aspect": "16:9",
|
||
"prompt": "Build a 12-second HyperFrames composition (1920×1080, 30fps) titled \"liquid-background-hero\". Pull the catalog block first: `npx hyperframes add vfx-liquid-background`.\n\nVisual identity: oceanic canvas — base #0a1f2c flowing into accent #1cd6c4 and secondary #4a7dff for the liquid surface, off-white type #f6fbff for the floating HTML. Display face: \"PP Right Grotesk\" Compact Bold 156px; body \"PP Right Grotesk\" Regular 26px; numerals tabular. The liquid is the painting; the type is the subtitle.\n\nLayer A — `liquid` (background): the vfx-liquid-background WebGL canvas with the block's default subdivided plane, vertex displacement amplitude 0.18, wave speed 0.42, two superposed wave functions (period 1.6s and 4.2s) for organic motion. Color gradient flows base → accent → secondary across the surface, deterministic phase from `seed = mulberry32(2046)`.\n\nLayer B — `hero-content`: a `<canvas layoutsubtree width=\"1920\" height=\"1080\">` containing centered DOM — a single hero headline (\"every drop, accounted for\"), a one-line subhead (\"realtime water analytics across 412 sensors\"), a small numeric ticker (\"412\" tabular-nums) that increments slightly over the composition. Captured every frame and composited above the liquid layer with mix-blend-mode normal at z-index 2.\n\nTimeline (paused: true, window.__timelines.main, data-duration=12):\n\n0.0–2.0s ENTRY — liquid plane starts flat (displacement amplitude 0 → 0.18 over 1.8s ease expo.out), color flow ramps from monochrome → full gradient over 1.6s. Hero content fades in at 0.6s (`gsap.from('.headline', { y: 50, opacity: 0, duration: 0.8, ease: 'power3.out' })`, subhead at 1.0s with y:30, ticker at 1.4s scale 0.9 → 1.0).\n\n2.0–9.5s FLOAT — full motion. Liquid waves continue indefinitely-but-finitely (calculate exact repeat count from data-duration / cycle so the timeline never uses `repeat: -1`). Ticker counts 412 → 437 over 7.5s ease none, tabular-nums on every digit. At 5.0s, a gentle highlight sweep crosses the hero headline (use `references/css-patterns.md` marker sweep). At 7.0s, a soft caustic flicker on the liquid layer (deterministic seeded brightness pulse).\n\n9.5–12.0s SETTLE — wave amplitude tapers 0.18 → 0.10, color flow slows. Hero content holds. Final 0.6s holds the hero frame; no opacity-to-0 exits except optionally a 0.3s liquid-only opacity fade if the user is chaining it before another scene.\n\nFeature detection: if `drawElementImage` is unavailable, layer the hero DOM directly on a static gradient backdrop (#0a1f2c → #1cd6c4 radial-gradient) without the liquid shader. Never show a black canvas.\n\nNon-negotiables: deterministic seeds, no `repeat: -1` (use Math.ceil-based finite repeats), no async timeline construction, min font 60px on headline, 24px on subhead, tabular-nums on the ticker. The liquid timeline and the hero-content timeline both register on `window.__timelines.main` — do not split into sub-compositions unless the user asks for it. Run `npx hyperframes lint` and `npx hyperframes inspect --samples 10 --at 0.5,2,4,6,8,11` before render. Output: `liquid-background-hero.mp4`.",
|
||
"previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png",
|
||
"previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4",
|
||
"source": {
|
||
"repo": "heygen-com/hyperframes",
|
||
"license": "Apache-2.0",
|
||
"author": "HeyGen",
|
||
"url": "https://hyperframes.heygen.com/catalog/blocks/vfx-liquid-background"
|
||
}
|
||
}
|