mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueenandHanzo Dev
70b41673a3
Forked from HyperFrames (Apache-2.0), full history preserved. Hosts are mapped explicitly and BEFORE the identifier rename, because hyperframes.heygen.com is not decoration: 175 of its occurrences are $schema identifiers that a validator dereferences. A blind rename would have left them naming a host that never serves them. The schema files are in this repo under docs/schema, so the mapped host is one we can actually serve -- that is the condition that makes the rewrite safe, and serving them is a deploy task, not an edit. docs/schema/hyperframes.json is renamed to frames.json to match the identifier it is now published under. api.heygen.com and the CLI auth against heygen.com are left UNRENAMED on purpose. They are a dependency on HeyGen's SaaS, not a name of ours to take, and the right move is to remove that integration rather than rebrand it. LICENSE and CREDITS.md are untouched; NOTICE records the lineage. Co-authored-by: Hanzo Dev <[email protected]>
111 lines
4.3 KiB
Plaintext
111 lines
4.3 KiB
Plaintext
---
|
|
title: Timeline Editing
|
|
description: "What you can edit in the Studio timeline today, how those edits map back to HTML, and the current limitations."
|
|
---
|
|
|
|
The Studio timeline lets you edit the parts of a Frames composition that can be persisted cleanly back into source HTML.
|
|
|
|
It is not a separate project format or hidden binary state. Every supported timeline action updates the same `data-*` attributes and inline styles that your composition already uses.
|
|
|
|
## What the Timeline Can Do
|
|
|
|
- **Move clips in time** — drag a clip horizontally to update `data-start`
|
|
- **Move clips between rows** — drag a clip vertically to update `data-track-index`
|
|
- **Change visual stacking** — top timeline rows render above lower rows, and that ordering is persisted back into inline `z-index`
|
|
- **Trim the end of a clip** — drag the right handle to reduce `data-duration`
|
|
- **Trim the start of media clips** — drag the left handle on clips backed by media offsets to advance the clip start and playback offset together
|
|
|
|
## How Timeline Edits Map To Source
|
|
|
|
The timeline works directly against your HTML:
|
|
|
|
- horizontal move updates `data-start`
|
|
- vertical move updates `data-track-index`
|
|
- right trim updates `data-duration`
|
|
- media left trim updates `data-start` and `data-media-start` or `data-playback-start`
|
|
- changing row order also updates inline `z-index` so the preview matches the timeline
|
|
|
|
This means timeline editing stays inspectable and versionable. If you open the file after a move or trim, you can see the exact attributes that changed.
|
|
|
|
## Current Editing Model By Clip Type
|
|
|
|
### Generic motion / DOM clips
|
|
|
|
Examples:
|
|
- `div`
|
|
- `section`
|
|
- `aside`
|
|
- GSAP-driven cards, overlays, and text blocks
|
|
|
|
Supported:
|
|
- move the clip later or earlier on the timeline
|
|
- move the clip to another row
|
|
- trim the end of the clip
|
|
|
|
Not supported yet:
|
|
- true front trim that removes the beginning of the animation itself
|
|
|
|
### Media clips
|
|
|
|
Examples:
|
|
- `video`
|
|
- `audio`
|
|
- wrappers backed by `data-media-start` / `data-playback-start`
|
|
|
|
Supported:
|
|
- move the clip later or earlier on the timeline
|
|
- move the clip to another row
|
|
- trim the end of the clip
|
|
- trim the start of the media content itself
|
|
|
|
## Why Start Trim Is Media-Only
|
|
|
|
Media clips have a real content-offset model:
|
|
|
|
- `data-media-start`
|
|
- `data-playback-start`
|
|
|
|
Those attributes let the Studio say:
|
|
|
|
> Start this clip later on the timeline, and also start reading the media later inside the source.
|
|
|
|
Generic motion clips do not have an equivalent playback-offset model yet. For a GSAP-driven `section` or `div`, the Studio can:
|
|
|
|
- move the whole clip later by changing `data-start`
|
|
- shorten its visible window by changing `data-duration`
|
|
|
|
But it cannot yet say:
|
|
|
|
> Start this animation halfway through its timeline.
|
|
|
|
That is why generic motion clips do **not** show an interactive left trim handle. The control is hidden instead of implying behavior the runtime cannot currently represent truthfully.
|
|
|
|
<Note>
|
|
A useful mental model is: **move** changes when a clip starts, **right trim** changes when it ends, and **left trim** only appears when the clip can actually skip the beginning of its own content.
|
|
</Note>
|
|
|
|
## Stacking Rule
|
|
|
|
The Studio follows the normal timeline-editor convention:
|
|
|
|
- the visually top row renders on top
|
|
- lower rows render underneath
|
|
|
|
If you want captions, lower-thirds, or overlays to sit above other content, place them on a visually higher timeline row.
|
|
|
|
## Current Limitations
|
|
|
|
- **No true front trim for generic motion clips yet.**
|
|
You can move those clips later in time, but you cannot start their internal animation phase partway through.
|
|
- **Layering is still driven by row order plus persisted inline `z-index`.**
|
|
If a clip already has custom CSS stacking rules outside the Studio flow, keep that in mind when editing manually.
|
|
- **Timeline editing is intentionally scoped.**
|
|
The Studio currently focuses on move and trim behavior. It does not yet expose full split, slip, slide, ripple, or roll editing semantics.
|
|
|
|
## Best Practices
|
|
|
|
- Use **move** when you want an element to start later but still play its full animation.
|
|
- Use **right trim** when you want the element to end sooner.
|
|
- Use **media left trim** when you want to remove the beginning of a video or audio clip.
|
|
- Put overlays and captions on visually higher rows so they render above base footage.
|