create-odori 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Allen Zhou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/bin/create-odori.mjs

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import {register} from "tsx/esm/api";
+
+register();
+const {createProject} = await import("../src/index.ts");
+const target = process.argv[2];
+if (!target) {
+  console.error("Usage: create-odori <directory>");
+  process.exit(1);
+}
+const root = await createProject(target);
+console.log(`Created ${root}`);
+console.log("Next: pnpm install, then pnpm odori dev");

package/package.json

@@ -1,9 +1,30 @@
 {
   "name": "create-odori",
-  "version": "0.0.1",
-  "description": "Scaffold a odori project. Reserved — work in progress.",
-  "license": "MIT",
-  "bin": { "create-odori": "index.js" },
-  "keywords": ["video", "motion", "framework", "create"],
-  "files": ["index.js", "README.md"]
-}
+  "version": "0.0.3",
+  "type": "module",
+  "description": "Scaffold a odori video project.",
+  "license": "Apache-2.0",
+  "bin": {
+    "create-odori": "./bin/create-odori.mjs"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "bin",
+    "src",
+    "template"
+  ],
+  "dependencies": {
+    "tsx": "4.20.5"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.0",
+    "typescript": "5.9.3",
+    "@odori/registry": "0.0.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "starters": "tsx scripts/starters.ts"
+  }
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+import {cp, mkdir, readFile, readdir, writeFile} from "node:fs/promises";
+import {existsSync} from "node:fs";
+import {dirname, join, resolve} from "node:path";
+import {fileURLToPath} from "node:url";
+
+const templateRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..", "template");
+
+export const createProject = async (target: string, options: {name?: string} = {}) => {
+  const root = resolve(process.cwd(), target);
+  if (existsSync(root) && (await readdir(root)).length > 0) {
+    throw new Error(`${root} already exists and is not empty.`);
+  }
+  await mkdir(root, {recursive: true});
+  await cp(templateRoot, root, {recursive: true});
+
+  const packageFile = join(root, "package.json");
+  const contents = (await readFile(packageFile, "utf8")).replace(
+    "PROJECT_NAME",
+    options.name ?? target.split("/").pop() ?? "odori-videos",
+  );
+  await writeFile(packageFile, contents, "utf8");
+
+
+  return root;
+};

package/template/odori.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from "@odori/cli";
+
+export default defineConfig({
+  videosDir: "videos",
+  exportDir: "out",
+  port: 4300,
+});

package/template/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "PROJECT_NAME",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "odori dev",
+    "list": "odori list",
+    "test": "odori test",
+    "export": "odori export launch"
+  },
+  "dependencies": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "odori": "^0.0.3"
+  },
+  "devDependencies": {
+    "@odori/cli": "^0.0.3",
+    "@types/react": "19.2.7",
+    "typescript": "5.9.3"
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["videos", "odori.config.ts"]
+}

package/template/videos/components/end-card/end-card.preview.tsx

@@ -0,0 +1,19 @@
+import {defineComponentPreview} from "odori/preview";
+import {EndCard} from "./end-card";
+
+export default defineComponentPreview({
+  title: "End card",
+  category: "Brand",
+  description: "The closing frame: title, supporting line, and a call to action.",
+  component: EndCard,
+  canvas: {width: 1920, height: 1080, duration: "3s"},
+  controls: {
+    title: {type: "text", defaultValue: "Author. Preview. Ship.", maxLength: 48},
+    detail: {type: "text", defaultValue: "An independent React video framework."},
+    callToAction: {type: "text", defaultValue: "npm i odori"},
+  },
+  examples: [
+    {name: "Default", props: {title: "Author. Preview. Ship.", callToAction: "npm i odori"}},
+    {name: "Title only", props: {title: "Available today.", detail: undefined, callToAction: undefined}},
+  ],
+});

package/template/videos/components/end-card/end-card.tsx

@@ -0,0 +1,83 @@
+import {Fill, Easing, interpolate, spring, useBrand, useFrame, useDesignScale, useVideo} from "odori";
+
+export type EndCardProps = {
+  title: string;
+  detail?: string;
+  callToAction?: string;
+};
+
+/** The closing lockup: the statement, and one command to run. */
+export const EndCard = ({title, detail, callToAction}: EndCardProps) => {
+  const frame = useFrame();
+  const brand = useBrand();
+  const {fps} = useVideo();
+  const scale = useDesignScale();
+  const rise = spring({frame, fps, from: 0.96, to: 1, damping: 20});
+  const line = interpolate(frame, [8, 34], [0, 1], {easing: Easing.standard});
+
+  return (
+    <Fill style={{alignItems: "center", gap: 30 * scale, justifyContent: "center", padding: 110 * scale}}>
+      <div
+        style={{
+          fontSize: 108 * scale,
+          fontWeight: 560,
+          letterSpacing: "-0.05em",
+          lineHeight: 1.02,
+          maxWidth: 1400 * scale,
+          opacity: interpolate(frame, [0, 18], [0, 1], {easing: Easing.standard}),
+          textAlign: "center",
+          transform: `scale(${rise})`,
+          whiteSpace: "pre-line",
+        }}
+      >
+        {title}
+      </div>
+
+      <div
+        style={{
+          background: `linear-gradient(90deg, transparent, ${brand.colors.border}, transparent)`,
+          height: 1,
+          opacity: line,
+          width: `${line * 46}%`,
+        }}
+      />
+
+      {detail ? (
+        <div
+          style={{
+            color: brand.colors.muted,
+            fontSize: 34 * scale,
+            letterSpacing: "-0.015em",
+            opacity: interpolate(frame, [14, 30], [0, 1], {easing: Easing.standard}),
+            textAlign: "center",
+          }}
+        >
+          {detail}
+        </div>
+      ) : null}
+
+      {callToAction ? (
+        <div
+          style={{
+            alignItems: "center",
+            background: "rgba(255,255,255,0.04)",
+            border: `1px solid ${brand.colors.border}`,
+            borderRadius: 10 * scale,
+            color: brand.colors.foreground,
+            display: "flex",
+            fontFamily: brand.typography.mono,
+            fontSize: 28 * scale,
+            gap: 14 * scale,
+            marginTop: 8 * scale,
+            opacity: interpolate(frame, [22, 38], [0, 1], {easing: Easing.standard}),
+            padding: `${16 * scale}px ${28 * scale}px`,
+            transform: `translateY(${interpolate(frame, [22, 38], [12 * scale, 0], {easing: Easing.standard})}px)`,
+          }}
+        >
+          <span style={{color: brand.colors.muted}}>{"$"}</span>
+          {callToAction}
+        </div>
+      ) : null}
+    </Fill>
+  );
+};

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

@@ -0,0 +1,20 @@
+import {defineComponentPreview} from "odori/preview";
+import {TitleReveal} from "./title-reveal";
+
+export default defineComponentPreview({
+  title: "Title reveal",
+  category: "Typography",
+  description: "A staggered, word-masked headline.",
+  component: TitleReveal,
+  canvas: {width: 1920, height: 1080, duration: "4s"},
+  controls: {
+    title: {type: "text", defaultValue: "Ship the story.", maxLength: 64},
+    detail: {type: "text", defaultValue: "An independent React video framework."},
+    align: {type: "select", defaultValue: "center", options: ["left", "center"]},
+  },
+  examples: [
+    {name: "Default", props: {title: "Ship the story."}},
+    {name: "Two lines", props: {title: "Build videos\nlike applications.", detail: "Author. Preview. Ship."}},
+    {name: "Long copy", props: {title: "Build videos like applications, not like exports.", align: "left"}},
+  ],
+});

package/template/videos/components/title-reveal/title-reveal.tsx

@@ -0,0 +1,84 @@
+import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";
+
+export type TitleRevealProps = {
+  title: string;
+  detail?: string;
+  align?: "left" | "center";
+};
+
+/**
+ * A masked, word-staggered headline. Each word rises out of a clipped line
+ * box, so the reveal reads as typography rather than a fade.
+ */
+export const TitleReveal = ({title, detail, align = "center"}: TitleRevealProps) => {
+  const frame = useFrame();
+  const brand = useBrand();
+  const scale = useDesignScale();
+  const lines = title.split("\n");
+  let wordIndex = 0;
+
+  return (
+    <Fill
+      style={{
+        alignItems: align === "center" ? "center" : "flex-start",
+        gap: 34 * scale,
+        justifyContent: "center",
+        padding: `${120 * scale}px ${140 * scale}px`,
+        textAlign: align,
+      }}
+    >
+      <div style={{display: "grid", gap: 6 * scale, maxWidth: 1560 * scale}}>
+        {lines.map((line, lineNumber) => (
+          <div
+            key={`${line}-${lineNumber}`}
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: `0 ${26 * scale}px`,
+              justifyContent: align === "center" ? "center" : "flex-start",
+              overflow: "hidden",
+              paddingBottom: 12 * scale,
+            }}
+          >
+            {line.split(/\s+/).map((word) => {
+              const delay = 4 + wordIndex * brand.motion.staggerFrames;
+              wordIndex += 1;
+              const progress = interpolate(frame, [delay, delay + 24], [0, 1], {easing: Easing.standard});
+              return (
+                <span
+                  key={`${word}-${wordIndex}`}
+                  style={{
+                    display: "inline-block",
+                    fontSize: 116 * scale,
+                    fontWeight: 560,
+                    letterSpacing: "-0.045em",
+                    lineHeight: 1.04,
+                    opacity: progress,
+                    transform: `translateY(${(1 - progress) * 78 * scale}px)`,
+                  }}
+                >
+                  {word}
+                </span>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+
+      {detail ? (
+        <div
+          style={{
+            color: brand.colors.muted,
+            fontSize: 36 * scale,
+            letterSpacing: "-0.015em",
+            maxWidth: 1100 * scale,
+            opacity: interpolate(frame, [16, 34], [0, 1], {easing: Easing.standard}),
+            transform: `translateY(${interpolate(frame, [16, 34], [14 * scale, 0], {easing: Easing.standard})}px)`,
+          }}
+        >
+          {detail}
+        </div>
+      ) : null}
+    </Fill>
+  );
+};

package/template/videos/launch/video.tsx

@@ -0,0 +1,24 @@
+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({
+  id: "launch",
+  title: "Hello, odori",
+  layout: productLayout,
+  duration: "8s",
+});
+
+export default function LaunchVideo() {
+  return (
+    <Video>
+      <Scene id="opening" duration="5s">
+        <TitleReveal title="Video projects deserve a framework." />
+      </Scene>
+      <Scene id="end" duration="3s">
+        <EndCard title="Built with odori" callToAction="pnpm odori dev" />
+      </Scene>
+    </Video>
+  );
+}

package/template/videos/layout.tsx

@@ -0,0 +1,26 @@
+import {defineBrand, defineVideoLayout} from "odori";
+
+export const productBrand = defineBrand({
+  name: "product",
+  colors: {
+    background: "#08090b",
+    surface: "#111318",
+    foreground: "#f7f8fa",
+    muted: "#9297a1",
+    accent: "#7c8cff",
+    border: "#292d36",
+  },
+  /**
+   * Sounds are named here, not in a composition, so re-scoring every video is
+   * one edit. The block starts empty on purpose: `odori add @odori/bed-pulse`
+   * writes into it, and without somewhere to write it can only print the two
+   * lines and ask you to paste them.
+   */
+  audio: {cues: {}, targetLufs: -14},
+});
+
+export const productLayout = defineVideoLayout({
+  format: {width: 1920, height: 1080, fps: 30},
+  brand: productBrand,
+  safeArea: {x: 96, y: 72},
+});

package/README.md

@@ -1,7 +0,0 @@
-# create-odori
-
-Scaffolding CLI for odori, an in-development code-first video framework.
-
-    npm create odori@latest
-
-Not yet functional — name reserved.

package/index.js

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-console.log("odori — coming soon.");