Docs

Odori is the application framework for React video, with conventions, components, preview, and production rendering around a first-class videos folder.

Build videos like applications

Odori is an independent React video framework. It owns the deterministic frame runtime, timeline compiler, browser player, and export pipeline, plus the conventions a production project otherwise has to invent:

• a first-class videos/ source root
• layouts, schemas, prepared data, and inherited brand policy
• beautiful source-owned components installed like shadcn
• instant live preview without encoding an MP4
• deterministic export jobs that render the exact previewed inputs

The mental model

Odori uses React as its authoring model, but does not depend on another video framework. It provides project structure, deterministic frame state, timeline compilation, data boundaries, component distribution, preview discovery, validation, caching, and render operations.

React components + Odori frame state
                 ↓
     Odori timeline runtime
                 ↓
Studio · embedded Player · stills · MP4 exports

The packages

A complete video entry

import {Scene, Video, defineVideoMetadata} from "odori";
import {CodeProof} from "../components/code-proof/code-proof";
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: "Introducing Odori",
  layout: productLayout,
  duration: "12s",
});

export default function ProductLaunch() {
  return (
    <Video>
      <Scene id="opening" duration="4s">
        <TitleReveal title="Build videos like applications." />
      </Scene>
      <Scene id="proof" duration="5s">
        <CodeProof code={'pnpm odori dev'} language="shell" />
      </Scene>
      <Scene id="end" duration="3s">
        <EndCard title="Author. Preview. Ship." />
      </Scene>
    </Video>
  );
}

The module exports static metadata for discovery and a normal React component for the timeline. JSX is the default authoring surface; source files under scenes/ are an organizational choice, not a framework requirement.

What Odori owns