composition

name	composition
description	Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.
license	MIT
metadata	{"author":"editframe","version":"2.0"}

Video Composition

Build video scenes with HTML web components (<ef-timegroup>, <ef-video>, etc.) or React (<Timegroup>, <Video>, etc.). Same composition model, same rendering pipeline — pick the syntax that fits your project.

Web component attributes use kebab-case (sourcein, auto-init). React props use camelCase (sourceIn, autoInit). Each element reference documents both.

Quick Start

<ef-configuration api-host="..." media-engine="local">
  <ef-timegroup mode="sequence">
    <ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full">
      <ef-video src="intro.mp4" class="size-full object-cover"></ef-video>
      <ef-text class="absolute top-8 text-white text-3xl">Title</ef-text>
    </ef-timegroup>
    <ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full">
      <ef-video src="main.mp4" sourcein="10s" sourceout="15s" class="size-full"></ef-video>
      <ef-audio src="music.mp3" volume="0.3"></ef-audio>
    </ef-timegroup>
  </ef-timegroup>
</ef-configuration>

import { Timegroup, Video, Text, Audio } from "@editframe/react";

export const MyVideo = () => (
  <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
    <Timegroup mode="fixed" duration="5s" className="absolute w-full h-full">
      <Video src="intro.mp4" className="size-full object-cover" />
      <Text className="absolute top-8 text-white text-3xl">Title</Text>
    </Timegroup>
    <Timegroup mode="fixed" duration="5s" className="absolute w-full h-full">
      <Video src="main.mp4" sourceIn="10s" sourceOut="15s" className="size-full" />
      <Audio src="music.mp3" volume={0.3} />
    </Timegroup>
  </Timegroup>
);

React requires a TimelineRoot wrapper — see references/timeline-root.md.

Duration Units

5s (seconds) | 1000ms (milliseconds) | 2m (minutes)

Getting Started

Create a project: npm create @editframe (see the editframe-create skill)

• references/getting-started.md — Your first composition

Media Elements

• references/video.md — Video clips, trimming, effects
• references/audio.md — Audio, volume
• references/image.md — Static images
• references/text.md — Animated text with splitting
• references/captions.md — Subtitles with word highlighting
• references/waveform.md — Audio visualization

Layout & Timing

• references/timegroup.md — Container, sequencing, scenes
• references/sequencing.md — Sequential scene playback
• references/transitions.md — Crossfades, slides, zoom transitions
• references/surface.md — Mirror another element
• references/css-variables.md — Time-based CSS animations

Rendering

• references/render-to-video.md — Export to MP4 in the browser
• references/render-api.md — Render API and custom render data
• references/scripting.md — JavaScript behavior with initializer and frameTask
• references/transcription.md — Generate captions with WhisperX

See the editframe-cli skill for CLI rendering.

React

• references/timeline-root.md — Required wrapper for React compositions
• references/hooks.md — useTimingInfo, usePanZoomTransform
• references/use-media-info.md — useMediaInfo hook

Advanced

• references/configuration.md — Media engine and API host
• references/r3f.md — React Three Fiber 3D integration
• references/server-rendering.md — SSR with Next.js/Remix
• references/entry-points.md — Package exports
• references/events.md — Custom event catalog
• references/css-parts.md — Shadow DOM styling

Styling

Elements use standard CSS/Tailwind. Position with absolute, size with w-full h-full or size-full.