Composition

ef-surface

Mirrors another element — useful for reflections and compositing.

Interactive example

<ef-timegroup mode="fixed" duration="8s" class="w-[1920px] h-[1080px] bg-black flex flex-col items-center justify-center gap-4">
  <ef-video id="main" src="https://assets.editframe.com/bars-n-tone.mp4" class="w-[1280px] h-[720px]" style="object-fit:cover;"></ef-video>
  <ef-surface target="main" class="w-[1280px] h-[180px]" style="opacity:0.25;transform:scaleY(-1);"></ef-surface>
</ef-timegroup>

Attributes

Filter attributes4 of 4

`duration`

React prop: duration
Type: string
Default: —
Description: How long this element is active (CSS time, e.g. "5s").

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

`offset`

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

`target`

React prop: target
Type: string
Default: ""
Description: ID of the element (bitmap source or arbitrary HTMLElement) to mirror.

CSS Parts

CSS parts
Part	Description
`canvas`	The rendering canvas. This canvas is a light DOM child element, not a shadow DOM element.

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.