Getting Started

Build your first video composition with Editframe Elements.

Composition Structure

Every composition starts with an ef-timegroup root:

<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px] bg-black">
  <!-- scenes go here -->
</ef-timegroup>

The mode controls how child elements are timed.

Step 1: Start with Motion

The first thing a viewer sees should move. Add an animated title — every word slides up in sequence using split="word" and --ef-word-index:

split="word" breaks the text into individual word elements. Each gets a --ef-word-index CSS variable so you can stagger delays. The animation runs relative to the scene timeline — it's fully scrubbable.

Step 2: Add a Video Background

Place the title inside a contain timegroup with a video beneath it. The timegroup holds both layers simultaneously:

Step 3: Chain Scenes with a Transition

Use mode="sequence" with overlap to crossfade between scenes. Each scene fades out while the next fades in:

--ef-transition-out-start is a CSS variable Editframe sets automatically — it's the point in time when the overlap begins, so the fade-out starts exactly at the transition point.

Assets

Place media files in src/assets/ and reference with /assets/filename:

<ef-video src="/assets/video.mp4"></ef-video>
<ef-audio src="/assets/music.mp3"></ef-audio>
<ef-image src="/assets/logo.png"></ef-image>

Render to Video

npx editframe render -o output.mp4

See the editframe-cli skill for full render options.