ef-timegroup

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

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`	—	Overlap time between adjacent `sequence`-mode items (e.g. `"1s"`).

<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>

Slots

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.

Public Methods

Method	Description
`addFrameTask(callback: FrameTaskCallback): () => void`	Register a per-frame callback; returns an unregister function.
`waitForContentReady(): Promise<void>`	Waits for this timegroup and the temporal children that matter for the current presentation. Sequence mode only waits on the active scene(s) — waiting on every idle sibling was hanging Showcase export forever while later clips' `#load()` contended on shared registry Inputs.
`seekForRender(time: number, options?: SeekForRenderOptions): Promise<void>`	`strictVideoPaint: true` additionally verifies every active `ef-video` descendant reached `HAVE_CURRENT_DATA` (i.e. actually painted a sample for this frame, not just resolved metadata) — retrying briefly before throwing. Costs a few extra microtask turns; use for final-render capture, not interactive preview. See base {@link TemporalElement.seekForRender} for the deterministic sync + content-readiness contract this builds on.