mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
fix(studio): harden composition timeline reliability (#2615)
* fix(studio): preserve composition playback continuity * feat(studio): drag compositions into the timeline * fix(studio): collapse expanded composition move aliases * fix(studio): make timeline cuts atomic * fix(studio): group inspector gesture history * test(studio): cover masked text selection * fix(studio): harden composition timeline reliability * fix(studio): satisfy CI source gates * fix(studio): harden composition mutation requests
This commit is contained in:
@@ -43,6 +43,8 @@ You can embed one composition inside another in two ways: loading from an extern
|
||||
data-composition-id="intro-anim"
|
||||
data-composition-src="compositions/intro-anim.html"
|
||||
data-start="0"
|
||||
data-duration="4"
|
||||
data-playback-start="0"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
```
|
||||
@@ -68,6 +70,8 @@ You can embed one composition inside another in two ways: loading from an extern
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
`data-playback-start` selects the child timeline time shown when the host begins. It defaults to `0`. A left trim or split advances this source-time offset by the elapsed host time multiplied by `data-playback-rate`, so the nested animation remains continuous instead of restarting.
|
||||
</Tab>
|
||||
<Tab title="Inline">
|
||||
Define a nested composition directly inside the parent. This is simpler for one-off compositions that do not need to be reused.
|
||||
|
||||
@@ -18,6 +18,8 @@ Hyperframes uses HTML data attributes to control timing, media playback, and [co
|
||||
| Attribute | Example | Description |
|
||||
|-----------|---------|-------------|
|
||||
| `data-media-start` | `"2"` | Media playback offset / trim point in seconds. Default: `0` |
|
||||
| `data-playback-start` | `"2"` | Source-time offset in seconds for media wrappers and nested composition hosts. Missing values default to `0`; Studio writes this attribute when a composition is trimmed or split. |
|
||||
| `data-playback-rate` | `"1.5"` | Source playback multiplier, clamped to `0.1`–`5`. Source time advances by timeline elapsed time multiplied by the canonical rate; invalid values default to `1`. |
|
||||
| `data-volume` | `"0.8"` | Audio/video volume, 0 to 1 |
|
||||
| `data-has-audio` | `"true"` | Indicates video has an audio track |
|
||||
|
||||
|
||||
@@ -52,9 +52,11 @@ Common sizes:
|
||||
| `id` | All | Yes | Unique identifier (e.g., `"el-1"`). Used for relative timing references and CSS targeting. |
|
||||
| `class="clip"` | Visible elements | Yes | Enables runtime visibility management. Omit for audio-only clips. |
|
||||
| `data-start` | All | Yes | Start time in seconds (e.g., `"0"`, `"5.5"`), or a clip ID reference for [relative timing](#relative-timing) (e.g., `"intro"`). |
|
||||
| `data-duration` | video, img, audio | See below | Duration in seconds. **Required** for images. Optional for video/audio (defaults to source duration). Not used on compositions. |
|
||||
| `data-duration` | video, img, audio, nested composition hosts | See below | Timeline slot duration in seconds. **Required** for images and nested composition hosts. Optional for video/audio (defaults to source duration). |
|
||||
| `data-track-index` | All | Yes | Timeline track number. Controls z-ordering (higher = in front). Clips on the same track cannot overlap. |
|
||||
| `data-media-start` | video, audio | No | Playback offset / trim point in source file (seconds). Default: `0`. See [Data Attributes](/concepts/data-attributes). |
|
||||
| `data-playback-start` | video, audio, composition | No | Source-time offset in seconds. On a nested composition, this is the child timeline time shown at the host's `data-start`. Default: `0`. |
|
||||
| `data-playback-rate` | video, audio, composition | No | Source playback multiplier clamped to `0.1`–`5`. Invalid values default to `1`. |
|
||||
| `data-volume` | audio, video | No | Volume level from `0` to `1`. Default: `1`. |
|
||||
| `data-composition-id` | div | On compositions | Unique composition ID. Must match the key used in `window.__timelines`. |
|
||||
| `data-composition-src` | div | No | Path to external composition HTML file (for [nested compositions](#composition-clips)). |
|
||||
|
||||
Reference in New Issue
Block a user