ef-timegroup

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

Attribute	Type	Default	Description
`mode`	`fixed` \| `sequence` \| `contain` \| `fit`	`"contain"`	Duration calculation mode.
`overlap`	`CSS time`	—	Overlap time between adjacent sequence items (e.g. "1s").
`duration`	`CSS time`	—	How long this element is active.
`offset`	`CSS time`	`0`	When this element starts within a parent fixed-mode group.
`fps`	`number`	`30`	Rendering frame rate.
`loop`	`boolean`	—	Loop in browser preview (ignored during rendering).

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