Mobile Showcase

Phone UI, close-up details, and measured perspective changes. Sample: Linear mobile. Reference

0:00 / 0:01

The original Linear mobile reproduction.

Copy the prompt into your coding agent. Choose a complete product example, then adapt its React surfaces, content, brand, and assets while preserving the shared timeline.

Install manually
pnpm create odori@latest my-video
cd my-video
pnpm install

pnpm dlx @odori/cli@latest add template linear-mobile
node videos/linear-mobile/select-variation.mjs linear
pnpm dlx @odori/cli@latest dev

Read ADAPTATION.md in the installed template. Edit selected-input.ts for content and use the schema named in the guide for limits.

Code

videos/linear-mobile/video.tsx
import {layout} from "./layout";
import Composition, {metadata as compositionMetadata} from "./composition";
import {selectedInput} from "./selected-input";
import {inputSchema as inputSchema} from "./schema";

/** The same editable input drives the gallery, Studio, and installed video. */
export const metadata = {...compositionMetadata, layout, schema: inputSchema, defaultProps: selectedInput};
export default function Template(props: Record<string, unknown> = {}) {
  return <Composition {...inputSchema.parse({...selectedInput, ...props})} />;
}

Other templates

Voice LaunchA conversation becomes a voice, with transcription and audio visualization. Sample: ElevenLabs Speech Engine. Reference
Workspace FlowDocuments, conversations, and agents become connected work. Sample: Zaro. Reference
Product PlaygroundSeveral generated apps show the range of a product builder. Sample: Grok Build. Reference