Name: Odori
Author: Odori

Odori, Remotion, and HyperFrames let you define videos in code. Their timeline and project conventions differ.

	HyperFrames	Remotion	Odori
Authoring	HTML, CSS, and JavaScript	React	React
Timeline	HTML timing attributes	`Sequence` or `Series`	`Scene` and `Clip`
Timing	Seconds or relative clip references	Frame counts	Seconds or explicit frame strings
Entry point	HTML composition	Registered `Composition`	Discovered `video.tsx`
Shared format	Composition attributes	Composition props and shared code	Inherited `layout.tsx`

HyperFrames defines timing with data-start and data-duration. A start can reference another clip, so later clips move when its duration changes. See its timing attributes and composition format.

Remotion supports explicit placement with Sequence and sequential placement with Series. Its Composition component registers a video's format, duration, and input props.

Odori discovers video.tsx files and inherits format and brand settings from layouts. Use <Scene> for ordered sections and <Clip> for overlays. For example, this video places a watermark over two scenes:

<Video>
  <Scene id="opening" duration="4s">
    <TitleReveal title="Introducing our new editor" />
  </Scene>
  <Scene id="end" duration="3s">
    <EndCard title="Available today" />
  </Scene>
  <Clip from="1s">
    <Watermark />
  </Clip>
</Video>

Odori also includes an editable component registry, preview fixtures, and checks for timing, blank frames, overflow, and text size. See project structure, components, and the CLI reference.

Framework comparison