Introduction

Odori is an agent-first React video framework with filesystem-based authoring. Define scenes in your project, preview them in Studio, and export from the CLI. Install components, templates, and audio as source files you and your agent can edit.

Why Odori

Odori organizes product video work around these capabilities:

• Filesystem-based authoring: Odori discovers compositions from conventional file paths and reads their metadata without rendering. You and your agent use the same structure to find and edit videos.
• Components installed as source: Add interfaces, animations, sounds, and templates directly to your repository. Customize their implementation and compare changes with upstream.
• Shared brand settings: Define typography, colors, motion, and audio defaults through layouts. Reuse them across compositions, with overrides for individual videos and formats.
• Timing requirements built into components: Components declare how much time their animations need. Odori checks whether each scene gives them enough time.
• Composition checks before export: Catch insufficient duration, off-canvas content, and text below configured size thresholds during authoring.
• MIT licensing: Use and modify the framework under a permissive license, without framework seat fees or per-render licensing charges.

Write a video

A video module exports metadata and a React component. Scenes play in order, each for its declared duration:

import {Scene, Video, defineVideoMetadata} from "odori";
import {EndCard} from "../components/end-card/end-card";
import {TitleReveal} from "../components/title-reveal/title-reveal";
import {productLayout} from "../layout";

export const metadata = defineVideoMetadata({
  title: "Product launch",
  layout: productLayout,
  duration: "7s",
});

export default function ProductLaunch() {
  return (
    <Video>
      <Scene id="opening" duration="4s">
        <TitleReveal title="Introducing our new editor" />
      </Scene>
      <Scene id="end" duration="3s">
        <EndCard title="Available today" />
      </Scene>
    </Video>
  );
}

The quickstart sets up the layout and components used in this example.

Packages