HyperFrames authoring reference for this bridge
This concise reference is authored for the harness. Full product guidance lives in the installed desktop app and official HyperFrames documentation.
Composition
A standalone index.html has a composition root directly in body. Use data-composition-id, data-width, data-height and a finite data-duration. CSS width/height on the root are 100%; canvas dimensions belong in its data attributes. A sub-composition uses a template with its styles/scripts inside.
Give clips class="clip", intentional data-start/data-duration and data-track-index. A track is a Studio lane, not a timing constraint or z-index. The root duration must include the end of all intended clips. Preserve unrelated timing, identifiers and media when editing.
Register one paused GSAP timeline in window.__timelines[compositionId], using the same ID as the root. Animate inner elements; the framework controls clip visibility and media seeking. Do not animate clip display, visibility or autoAlpha. Avoid CSS-transform/GSAP conflicts, clocks, timers, unseeded random and network-dependent animation state.
Use local reproducible media. Every audio element needs a unique ID and intentional timing. Avoid crossorigin on media and nested timed ancestors around a video with data-start. File paths must match the actual project assets.
Workflow
Read relevant files and the app's required guide before editing. Match the scope of the user's request. Do not claim to run unavailable MCP tools or shell commands. The bridge exposes named lint, check, timeline and inspect commands.
Run meaningful named checks, report their actual exit status and findings, and preserve unrelated work. A lint error can prevent runtime/layout/contrast audits from running; zero samples do not establish successful visual validation. Passing lint is not proof of visual quality.
Render only when the user requests an export and app_rules permit it. Poll render_status until a terminal state; never claim an unfinished export succeeded. The desktop app may own export itself, in which case follow its app_rules.
Audio assets
When locally enabled and requested, list_voices returns the user's available voice IDs. create_speech and create_sound_effect return actual project-relative MP3 files. Use a returned path in the composition with a unique audio ID and appropriate timing. If generation fails, report the failure and do not invent an asset or automatically retry it.
Speech and sound effects are product API calls made with the user's own key. Scripts/descriptions are sent to ElevenLabs and generation may consume credits. Chat remains text-only. Music and image/video generation are not exposed in this version.