Quickstart

Create a Odori project, author a JSX timeline, preview it instantly, and export it when the cut is ready.

Give your agent one prompt

Set up Odori video authoring in this folder, then install the Odori agent
skill: npx skills add allenzhou101/video-framework --skill odori-quickstart
--yes. Create a polished first video using real product evidence and
source-owned components. When you're done, start Studio so I can watch the
video while we work.

The skill contains the initialization decision, component starter set, first-cut structure, visual defaults, and verification loop. You do not need a separate studio or an MP4 render while authoring.

Its first question is whether to import a design system. Point it at a repository, a token file, or a brand kit and it maps the colors, type, fonts, logos, and motion into videos/brands/, which every video then inherits. Say skip and it starts from Odori’s defaults rather than inventing a palette.

Create a project manually

pnpm create odori@latest product-stories
cd product-stories
pnpm install

Install the Odori quickstart skill when an agent will author the first cut:

npx skills add allenzhou101/video-framework \
  --skill odori-quickstart \
  --yes

Use the manual commands when you do not want an agent to initialize the project.

Start the development server

Run pnpm odori dev. Odori starts Studio on http://127.0.0.1:4300. Studio discovers every videos/**/video.tsx composition and every *.preview.tsx component fixture.

Create a video

Run pnpm odori new launch. The generator creates a typed React entry under videos/launch/.

Add video components

Browse pnpm odori registry, then run pnpm odori add @odori/title-reveal @odori/code-proof @odori/end-card. Source is copied into videos/components/ and belongs to your repository.

Check the cut

Run pnpm odori test. Odori mounts every video, samples representative frames, and reports blank frames, content that escapes the canvas, and text too small to read.

Export when ready

Run pnpm odori export launch, or start an export from Studio. Preview never requires an MP4 render.

Generated project

videos/
- layout.tsx
- brands/
  - paper.ts
- components/
  - title-reveal/
    - title-reveal.tsx
    - title-reveal.preview.tsx
  - end-card/
    - end-card.tsx
    - end-card.preview.tsx
- launch/
  - video.tsx
public/
- fonts/
odori.config.ts
package.json

In a standalone video project, Odori creates only the video-facing source. In a Next.js project, app/ and videos/ remain siblings: routes are web entry points; videos are render entry points.

Your first video

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: "Hello, odori",
  layout: productLayout,
  duration: "8s",
});

export default function LaunchVideo() {
  return (
    <Video>
      <Scene duration="5s">
        <TitleReveal title="Video projects deserve a framework." />
      </Scene>
      <Scene duration="3s">
        <EndCard title="Built with odori" />
      </Scene>
    </Video>
  );
}

Core commands

Command	Purpose
`odori dev`	Discover project resources and start Studio
`odori init`	Add `videos/` and `odori.config.ts` to an existing project
`odori new <name>`	Generate a `video.tsx` entry
`odori add <components>`	Install editable component source
`odori registry`	List available components and their temporal contracts
`odori list`	Print discovered video IDs and formats
`odori inspect <id>`	Show resolved layout, inputs, scenes, and the frozen manifest
`odori still <id> --frame 120`	Render one deterministic frame
`odori test [id]`	Validate contracts and representative frames
`odori export <id>`	Render, mix audio, and encode a distributable file
`odori jobs`	List export jobs, their attempts, and their output
`odori diff` / `odori update`	Compare and apply upstream component changes

Every command accepts --input '{"headline":"..."}' to supply schema-valid inputs, and still and export accept --output <path>.