Composition

ef-timegroup

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

Interactive example

<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

Filter attributes6 of 6

`duration`

React prop: duration
Type: string
Default: —
Description: Fixed duration when mode="fixed" (CSS time, e.g. "5s"); ignored in other modes.

`fps`

React prop: fps
Type: number
Default: —
Description: Rendering frame rate.

`loop`

React prop: loop
Type: boolean
Default: false
Description: Loop attribute — when this temporal is a self-driving root under a PlaybackController, the controller wraps back to 0 instead of pausing at duration.

`mode`

React prop: mode
Type: fixed | sequence | contain | fit
Default: "contain"
Description: Duration calculation mode.

`offset`

React prop: offset
Type: number
Default: —
Description: Start offset (seconds) within a parallel (fixed/contain/fit) parent timegroup.

`overlap`

React prop: overlap
Type: number
Default: 0
Description: Overlap time between adjacent sequence-mode items (e.g. "1s").

Events

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

Filter methods3 of 3

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 `TemporalElement.seekForRender` method, for the deterministic sync and content-readiness contract that this method builds on.