Name: Odori
Author: Odori

Run pnpm odori dev to open Studio. Preview videos and components as you edit their source files.

Discovered files

Studio discovers project resources under videos/. The entry filename determines how each module is treated.

videos/**/video.tsx       → complete exportable videos
videos/**/*.preview.tsx   → development-only component previews
videos/**/brands/*.ts     → brand token sets

Directory names carry no discovery semantics. videos/components/ is discoverable through its preview files, while videos/lib/ remains ordinary source because it contains no entry filename.

videos/components/title-reveal/title-reveal.preview.tsx

import {defineComponentPreview} from "odori/preview";
import {TitleReveal} from "./title-reveal";

export default defineComponentPreview({
  title: "Title reveal",
  category: "Typography",
  component: TitleReveal,
  canvas: {width: 1920, height: 1080, duration: "4s"},
  controls: {
    title: {type: "text", defaultValue: "Ship the story.", maxLength: 64},
    align: {type: "select", options: ["left", "center"], defaultValue: "center"},
  },
  examples: [
    {name: "Default", props: {title: "Ship the story."}},
    {name: "Two lines", props: {title: "Build videos\nlike applications."}},
  ],
});

Views

View	Purpose
Videos	Browse every composition, select inputs, play the timeline, inspect scenes, and export.
Components	Browse every `*.preview.tsx` fixture, vary props, switch examples, and stress-test formats and brands.
Brands	Preview any video with any discovered token set, and read the resolved policy.
Assets	Import, generate, compare, and approve media; inspect declared assets, audio, and brand fonts.

Video preview

A discovered video is immediately playable without encoding an MP4. Studio reads its metadata and schema to provide:

a searchable library and a gallery of animated thumbnails
timeline playback, scrubbing, frame stepping, and scene navigation
generated input controls from schema.ts
resolved format, brand, duration, and source file
a safe-area overlay
diagnostics for duration drift, duplicate scene IDs, and unusably short scenes
one explicit export action, defaulting to a distributable MP4

Component preview

A discovered component preview provides:

a gallery grouped by narrative role
generated prop controls from the preview contract
named examples and variants
brand token switching without changing component source
16:9, 9:16, and 1:1 canvases for layout stress tests

Theme and settings

Choose light, dark, or system theme from the top bar. Studio saves your choice per browser. Videos keep their own brand colors.

Set docsUrl to change the documentation link in the status bar:

odori.config.ts

export default defineConfig({docsUrl: "https://docs.internal.example.com/video"});

Create and review media

Open Settings → Integrations to connect Vercel AI Gateway, Quiver, or ElevenLabs. Then open Assets:

Choose an operation, account, model, and prompt. Add a reference image when needed.
Select Review generation to inspect the account, model, and inputs being sent.
Select Generate with my account to submit the job. The provider bills your account.
Preview the result, compare versions, and approve the one you want.
Copy its asset URL or composition code into your scene.

Variation, Edit, and Animate create new assets. Existing scenes retain their current files. Import existing media adds your own files without generation.

Completed assets are saved locally and render without credentials. Jobs continue collecting in a background process while the machine is awake. An uncertain submission requires checking provider history before starting another generation.

Template media recipes prefill the form with a brief, dimensions, and brand notes. Recipes retain a fallback and never generate during playback. See integrations for configuration, model choices, and recovery commands.

Keyboard shortcuts

Key	Action
`space`	Play or pause
`←` `→`	Step one frame, or one second with `shift`
`[` `]`	Jump to the previous or next scene boundary
`home` `end`	Jump to the first or last frame
`s`	Toggle the safe-area overlay
`l`	Toggle looping
`m`	Mute or unmute audio
`g`	Toggle the gallery
`⌘K`	Open the command palette
`⌘1` to `⌘4`	Switch views

Selections are routeable as real paths: /videos/launch and /components/title-reveal open directly, and the browser's back button works. The wordmark opens /, an overview of everything the project contains, where each row opens the view that owns it.

Export from Studio

Choose an output from the export menu:

Choice	Result
MP4 video	Queues a job, reports progress, and writes an MP4 to the export directory
PNG frame	Writes the current frame to the export directory
Frame to clipboard	Copies the current frame as an image, writing no file to the export directory

The menu selection becomes the button's default for the session. Jobs are listed by the file they wrote, with the full path on hover.

Use Size to export at half, full, or double resolution. To change aspect ratio, create a video with a different layout and adjust its scenes. Component previews support 16:9, 9:16, and 1:1 canvases for checking layouts.

Preview files and exports

Preview modules are development-only inputs. They never enter a production video bundle or change an export. The renderer compiles videos/**/video.tsx and its imported runtime dependencies. Studio separately loads *.preview.tsx files to build development controls and fixtures.

Studio

On this page