Getting Started

Scaffold a project, build your first composition, and render to MP4.

Scaffold a project

npm create @editframe@latest

The CLI prompts for a project name and template. Choose html for plain web components or react for TypeScript + React.

Start the preview

cd my-video
npm start

Opens http://localhost:4321 with hot reload and a scrubber to inspect any frame.

Setting the stage

An editframe composition format is HTML with custom elements.

Depending on the context you're working in, you'll need some extra elements to get started.

For these examples, we'll assume we want to use the Editframe preview tools. This means we can play, pause, and scrub through the composition without rendering to a video file.

We won't show these components in every example. They'll be described once here.

<ef-preview> - A container that must wrap the composition, and the control elements. This lets the controls find the composition and control it.

The controls we'll be using are:

<ef-scrubber> - A scrubber to scrub through the composition
<ef-time-display> - A time display to display the current time
<ef-toggle-play> - A toggle play button to play and pause the composition

All together, they'd look something like this:

<ef-preview>
  <ef-timegroup id="hello-world" duration="5s"></ef-timegroup>
  <ef-scrubber></ef-scrubber>
  <ef-time-display></ef-time-display>
  <ef-toggle-play></ef-toggle-play>
</ef-preview>

Each of these elements are fully styleable as if they were regular HTML elements. So you can add classes, styles, and more layout wrappers as needed.

Your first composition

A composition is an HTML page. The root ef-timegroup defines the canvas size and total duration.

To make a 1080p video, set the canvas size to 1920px x 1080px.

<ef-timegroup
  mode="fixed"
  duration="5s"
>
  <p>Hello, world</p>
</ef-timegroup>

<style>
  ef-timegroup {
    width: 1920px;
    height: 1080px;
    background-color: #888888;
    display: grid;
    place-items: center;
  }

  p {
    color: white;
    font-size: 200px;
    font-weight: bold;
  }
</style>

The root timegroup also controls frame rate via fps. Drag the slider to see the difference between a choppy 4 fps and smooth 30 fps:

<ef-timegroup id="root" mode="contain">

  <!-- The FPS for this timegroup is controlled by the slider -->
  <ef-timegroup mode="fixed" duration="6s"  fps="4">
    <p>FPS: 4</p>
  </ef-timegroup>

  <!-- The FPS for this timegroup is fixed at 30 -->
  <ef-timegroup mode="fixed" duration="6s"  fps="30">
    <p>FPS: 30</p>
  </ef-timegroup>

  <!--
    Each timegroup can have it's own FPS value.
    The output FPS will be the FPS of the ROOT timegroup.
    This allows you to have different apparent FPS for different
    parts of the composition.
  -->

</ef-timegroup>

<style>
  #root {
    width: 1920px;
    height: 1080px;
    background-color: #888888;
    display: flex;
    flex-direction: column;

    > ef-timegroup {
      height: 50%;
      position: static;
      display: grid;
      place-items: center;
    }
  }
  /*
   * In order to demonstrate the FPS, we need to apply an animation.
   * In Editframe, CSS animations are automatically syncronized to
   * the composition's timeline. This means that at 4 fps, the animation
   * will update every 250ms, and at 30 fps, it will update every ~33ms.
   */
  @keyframes slide {
    0% { transform: translateX(-25%); }
    50% { transform: translateX(25%); }
    100% { transform: translateX(-25%); }
  }
  p {
    animation: slide calc(var(--ef-duration) / 2) linear infinite;
    font-size: 200px;
    font-weight: bold;
    color: white;
  }
</style>

Add Video Footage

To add video footage to your composition, use the ef-video element.

The parent timegroup is set to mode="contain", which means it's duration will be the duration of the video within it. If you have a video that is 10 seconds long, the parent timegroup will also be 10 seconds long.

<ef-timegroup mode="contain">
  <ef-video
    src="https://assets.editframe.com/clouds-blue-sky.mp4"
  >
  </ef-video>
</ef-timegroup>

Create a sequence of video clips

To create a sequence of video clips, use the ef-timegroup element with mode="sequence".

<ef-timegroup mode="sequence">
  <!--
    Each video will play one after another, and the total duration of the
    timegroup will be the sum of all videos durations
  -->
  <ef-video
    src="https://assets.editframe.com/departure-prep.mp4"
    sourceout="4s"
  >
  </ef-video>

  <ef-video
    src="https://assets.editframe.com/window-seat.mp4"
    sourceout="4s"
  >
  </ef-video>

  <!--
    This video will play from 8s to 12s in the source clip.
    So it's duration will be 4 seconds.
  -->
  <ef-video
    src="https://assets.editframe.com/landing.mp4"
    sourcein="8s"
    sourceout="12s"
  >
  </ef-video>
</ef-timegroup>

Use nested timegroups to contain other content

<ef-timegroup id="root" mode="sequence">
  <!--
    Here, we wrap each video in a timegroup. This allows us to add
    other content that is syncronized to the video, such as titles.

    By default, timegroups are mode="contain", so the duration
    of each timegroup will be the duration of the video within it.
    The total duration of the root timegroup will be the sum of
    all child timegroups.
  -->
  <ef-timegroup>
    <ef-video
      src="https://assets.editframe.com/departure-prep.mp4"
      sourceout="4s"
      class="absolute inset-0"
    >
    </ef-video>
    <div class="lower-third">
      <h1>Departure Prep</h1>
    </div>
  </ef-timegroup>

  <ef-timegroup>
    <ef-video
      src="https://assets.editframe.com/window-seat.mp4"
      sourceout="4s"
    >
    </ef-video>
    <div class="lower-third">
      <h1>A view from the clouds</h1>
    </div>
  </ef-timegroup>

  <ef-timegroup>
    <ef-video
      src="https://assets.editframe.com/landing.mp4"
      sourcein="8s"
      sourceout="12s"
    >
    </ef-video>
    <div class="lower-third">
      <h1>Landing</h1>
    </div>
  </ef-timegroup>
</ef-timegroup>

<style>
  #root {
    width: 1920px;
    height: 1080px;
  }

  .lower-third {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    padding: 2rem;
    font-size: 6rem;
    color: #ccccee;
  }
</style>

Render to MP4

npx editframe render -o output.mp4

Next Steps

Explore our other built-in elements.
Learn about our CSS features, like variables and animation.
Check out how to write custom scripts and integrate 3rd party libraries.