ef-timegroup

The timing container. Every composition is a tree of timegroups.

<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px] bg-black">
  <ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-indigo-900 flex items-center justify-center">
    <ef-text class="text-white text-6xl font-bold">Scene A — 2s</ef-text>
  </ef-timegroup>
  <ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-rose-900 flex items-center justify-center">
    <ef-text class="text-white text-6xl font-bold">Scene B — 2s</ef-text>
  </ef-timegroup>
  <ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-emerald-900 flex items-center justify-center">
    <ef-text class="text-white text-6xl font-bold">Scene C — 2s</ef-text>
  </ef-timegroup>
</ef-timegroup>

Attributes

Attribute	React prop	Type	Default	Description
`duration`	`duration`	`string`	—	Fixed duration when `mode="fixed"` (CSS time, e.g. `"5s"`); ignored in other modes.
`fps`	`fps`	`number`	—	Rendering frame rate.
`loop`	`loop`	`boolean`	`false`	Loop attribute — when this temporal is a self-driving root under a {@link PlaybackController}, the controller wraps back to `0` instead of pausing at `duration`.
`mode`	`mode`	`fixed` \| `sequence` \| `contain` \| `fit`	`"contain"`	Duration calculation mode.
`offset`	`offset`	`number`	—	Start offset (seconds) within a parallel (`fixed`/`contain`/`fit`) parent timegroup.
`overlap`	`overlap`	`number`	`0`	Overlap time between adjacent `sequence`-mode items (e.g. `"1s"`).

Events

Event	Detail	Description
`child-duration-changed`	`{ duration: number }`	Fires on the nearest context-providing ancestor, when a nested media element's duration becomes known or changes.

Methods

Method	Description
`addFrameTask(callback: FrameTaskCallback): () => void`	Registers a per-frame callback function. The method returns an unregister function.
`waitForContentReady(): Promise<void>`	Waits for this timegroup and for the temporal children that matter for the current presentation. In sequence mode, this method waits only on the active scene. A wait on every idle sibling once hung the Showcase export indefinitely, because a later clip's `#load()` method contended for a shared registry input.
`seekForRender(time: number, options?: SeekForRenderOptions): Promise<void>`	When `strictVideoPaint` is `true`, this method also verifies that every active `ef-video` descendant reached `HAVE_CURRENT_DATA`. This means the descendant actually painted a sample for this frame, not just resolved its metadata. The method retries briefly before it throws an error. This check costs a few extra microtask turns, so use it for a final-render capture, not for an interactive preview. See the base {@link TemporalElement.seekForRender} method, for the deterministic sync and content-readiness contract that this method builds on.