Build videos
with React

import { Scene, Video, defineVideoMetadata } from "odori";
import { CodeProof, EndCard, TitleReveal } from "@/components/video";

export const metadata = defineVideoMetadata({
  id: "launch",
  duration: "18s",
});

export default function LaunchVideo() {
  return (
    <Video>
      <Scene duration="4s">
        <TitleReveal title="Ship the story." />
      </Scene>
      <Scene duration="10s">
        <CodeProof code={source} />
      </Scene>
      <Scene duration="4s">
        <EndCard title="Available today." />
      </Scene>
    </Video>
  );
}

import type { ReactNode } from "react";
import { VideoTheme } from "odori";

export default function VideoLayout({ children }: { children: ReactNode }) {
  return <VideoTheme mode="dark">{children}</VideoTheme>;
}

import { z } from "zod";

export const launchInput = z.object({
  headline: z.string(),
  productUrl: z.string().url(),
  accent: z.string().default("#0070f3"),
});

export type LaunchInput = z.infer<typeof launchInput>;

import { animate, useFrame } from "odori";

export function TitleReveal({ title }: { title: string }) {
  const frame = useFrame();
  const entrance = animate(frame, { from: 0, to: 1, duration: 24 });

  return <h1 style={{ opacity: entrance }}>{title}</h1>;
}

import { defineConfig } from "odori";

export default defineConfig({
  videos: "./videos",
  output: "./dist",
  defaults: { fps: 30, width: 1920, height: 1080 },
});