Skip to content
Odori
Esc
↑↓navigate↵open⌘Jpreview

Components

Install polished, frame-driven React components as source. Every card below plays the component you install, on the same runtime that renders the export. Open one for its timing contract, props, and source.

Typography

Open title-reveal
Shipthestory.
An independent React video framework.

title-reveal

A staggered, word-masked headline.

Developer proof

Open code-proof
videos/launch/video.tsxtsx
1export const metadata = defineVideoMetadata({
2  id: "launch",
3  title: "Product launch",
4  duration: "12s",
5});
Static metadata, ordinary JSX.

code-proof

A framed source excerpt that reveals line by line.

Open terminal
zsh
$pnpm create odori@latest product-stories
Created videos/launch/video.tsx
$pnpm

terminal

A typed command session with deterministic output reveals.

Open code-walkthrough
videos/launch/video.tsx
1export const metadata = defineVideoMetadata({
2 id: "launch",
3 duration: "8s",
4});
5
6export default function LaunchVideo() {
7 return (
8 <Video>
9 <Scene duration="5s">
10 <TitleReveal title="Ship the story." />
11 </Scene>
12 </Video>
13 );
14}
Scenes are ordered, not numbered.

code-walkthrough

Progressive code reveal with authored focal regions.

Open file-tree
videos/
layout.tsx
components/
title-reveal/
launch/
video.tsx
schema.ts

file-tree

Progressive repository navigation with active file state.

Open diff-proof
videos/launch/video.tsx
<Video>
- <Scene duration="4s">
+ <Scene duration="5s">
<TitleReveal title={headline} />
</Scene>
</Video>

diff-proof

Before and after source changes with semantic emphasis.

Open log-stream
odori export launch
INFOresolved manifest launch@2f9c
INFOsampling 12 representative frames
WARNscene proof runs 18f under its contract
INFOrendering 360 frames
INFOmixing audio to -14 LUFS
DONEwrote out/launch.mp4

log-stream

Paced runtime logs with levels and bounded scrolling.

Product UI

Data

Open bar-chart
Time to first preview
Manual edit
42s
Template tool
18s
Odori
4s

bar-chart

Ranked bars with labels, values, and staged growth.

Open line-chart
Videos shipped per week
The week the registry landed.

line-chart

Time-series path draw with optional focal annotation.

Open area-chart
Frames rendered
Cumulative, across every format.

area-chart

Filled trend reveal for volume and cumulative change.

Open heatmap
Renders per day
week 1
week 2
week 3

heatmap

Grid intensity reveal for activity and distribution.

Open data-table
Export jobs
VideoFormatDurationState
launch1920x108012squeued
launch1080x192012srendering
announcement1080x10808sdone

data-table

Sortable rows with an authored selection story.

Narrative

Open comparison
Two ways to ship a launch video
Manual edit
Re-cut for every format
Copy changes by hand
Export to see the change
Odorithis one
One layout per format
Typed inputs per variant
Preview needs no encode

comparison

Two options contrasted through matched structure.

Open timeline
From idea to launch
Ideaone sentence
Draftscenes in place
Reviewcontract tests
Launchone export

timeline

Milestones revealed along a measured temporal axis.

Open logo-orbit
odorione ecosystem
Next.js
React
Studio
FFmpeg
CI
Slack

logo-orbit

Product identity surrounded by connected integrations.

Foundation

Open brand-provider
Brand tokens
background#000000
surface#0a0a0a
foreground#ededed
muted#a1a1a1
accent#ffffff
border#1f1f1f
Sans, for statementsMono, for evidence
standard [0.16, 1, 0.3, 1] · stagger 4f

brand-provider

Typed color, type, spacing, radius, and motion tokens.

Open safe-area
Everything readable sits inside
safe area · 96 x 72

safe-area

Format-aware title and action safety boundaries.

Brand

Open stage

stage

The shared backdrop: hairline grid, soft glow, and vignette.

Open end-card
Author. Preview. Ship.
An independent React video framework.
$npm i odori

end-card

The closing frame: title, supporting line, and a call to action.

Sound

Open ui-key
ui.key · 6 frames

ui-key

A typed key: filtered noise with a short tone under it.