Editframe Elements
Quick Start
html
<ef-configuration api-host="..." media-engine="local">
<ef-timegroup mode="sequence" workbench>
<!-- elements here -->
</ef-timegroup>
</ef-configuration>
Duration Units
5s (seconds) | 1000ms (milliseconds) | 2m (minutes)
Getting Started
- •references/getting-started.md - Create a new project
Elements
- •references/timegroup.md - Container, sequencing, scenes
- •references/video.md - Video clips, trimming
- •references/audio.md - Audio, volume
- •references/image.md - Static images
- •references/text.md - Animated text
- •references/captions.md - Subtitles with word highlighting
- •references/waveform.md - Audio visualization
- •references/surface.md - Mirror another element
Advanced Features
- •references/transitions.md - Crossfades, slides, zoom transitions
- •references/css-variables.md - Dynamic animations with CSS variables
- •references/scripting.md - JavaScript behavior with initializer and frameTask
Tools
- •references/transcription.md - Generate captions with WhisperX
Programmatic Rendering
- •references/render-api.md - Render via CLI or Playwright with custom data
Scene Structure
html
<ef-timegroup mode="sequence" overlap="1s" workbench>
<!-- Scene 1 -->
<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>
<!-- Scene 2 with transition -->
<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>
Styling
Elements use standard CSS/Tailwind. Position with absolute, size with w-full h-full or size-full.