hyperframes-studio
This Skill defines timeline-organization conventions for video projects: every scene becomes its own sub-composition, all captions live on a single track, each element kind gets its own track, and content respects action-safe and title-safe zones. The result is a short, readable timeline where creators can trim, mute and drag each clip as a unit instead of facing a wall of opaque rows, and a lint pass confirms the structure before delivery.
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-studioBefore / After Comparison
1 组Developers nest every structure directly inside the root composition, give each caption group its own row, and mix graphics with video on one track. Opening the editor shows a screen of unlabeled rows that cannot be trimmed or muted individually, forcing slow, error-prone hand-splitting.
This Skill organizes projects by scene, caption track, element kind and safe zones, so the timeline opens as a base row, one row per scene, a single caption row and audio rows. Creators can adjust each part directly, and a lint pass confirms the structure before delivery.
HyperFrames Studio conventions
Studio draws one timeline row per top-level element. A project that follows the
rules below opens as a short, readable timeline; one that does not opens as a wall
of unlabeled rows the user cannot edit. These are conventions for what to build.
For how to change a clip, follow /hyperframes-core references/creator-editing-recipes.md
and never invent a different form of the same edit.
1. Every scene is a sub-composition
The root composition holds only timed hosts, media and audio. Any scene with nested
structure (a div containing children, a title with a subtitle, a chart) is its own
file loaded with data-composition-src, wiring in
references/sub-compositions.md.
Nested markup left inside the root does not become a row of its own. It hides inside one opaque row that cannot be trimmed or moved part by part.
Author as if a structure lint rejects any violation.
2. One caption track
- All captions live on one track: a single sub-composition host (one
data-track-index) markeddata-track-kind="captions"that carries every caption group in order. - Never one row per caption group, and never captions mixed onto a track with another kind.
- Word-timing rules are unchanged: see
/embedded-captionsand thecaption_*lint rules.
3. One element kind per track
Group by kind so each row is one thing the user can select, mute or drag as a set.
| Kind | data-track-kind |
|---|---|
| Base video / A-roll | video (from the tag) |
| Scenes, overlays, graphics | graphics |
| Captions | captions |
| Audio (voiceover, music, sound effects) | audio (from the tag) |
Put data-track-kind on sub-composition hosts. Video and audio kinds come from the tag, so
<video> and <audio> need no attribute. Give each kind its own data-track-index; the number
is display only; it never changes what renders on top. Use CSS for
layering.
4. Safe zones
Any ruler or safe-box overlay lives in the preview pane, never inside the composition, so
do not add guide elements to the HTML.
Both framings (wide and vertical) use the same two safe boxes, Premiere's defaults. The preview
toggle draws them with a tick at the midpoint of every edge. Source:
ACTION_SAFE_PERCENT and TITLE_SAFE_PERCENT in packages/studio/src/utils/previewSafeMargins.ts.
| Box | Share of the frame | Inset on every edge |
|---|---|---|
| Action-safe | 90% | 5% |
| Title-safe | 80% | 10% |
- Safe margins: everything visible stays inside the action-safe box (90%), and captions and key content stay inside the title-safe box (80%).
- Two-up and 50/50 layouts keep each half's content inside the title-safe box.
Checking your work
Run hyperframes lint and fix every finding. Then open the project in Studio and
check that the timeline shows a base row, one row per scene host, one caption row and the audio rows.
User Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill