クイックスタート

新規プロジェクトを作って Studio を立ち上げ、project/project.tsx を編集して動画を作る、 という最短ルートをまとめる。

0. 必要なもの

• Node.js（必須）。macOS なら brew install node。
• エディタ（VSCode / Cursor / なんでも）。
• レンダリングは内部で headless Chromium を起動するので、初回は時間がかかる。

1. プロジェクトを作る

任意のディレクトリで対話形式の作成コマンドを実行する。

npm init @frame-script/latest
cd <project-path>
npm run start

npm run start で Vite (Studio UI) + Vite (renderer) + Electron + 内部バックエンドが 並行起動する。Studio が立ち上がれば成功。

2. 動画コードの中心は project/project.tsx

作品の構成はここに書く。src/ 配下は FrameScript 本体なので 原則さわらない（コントリビュート時を除く）。

import { Clip } from "../src/lib/clip"
import { Project, type ProjectSettings } from "../src/lib/project"
import { TimeLine } from "../src/lib/timeline"
import { Video } from "../src/lib/video/video"

export const PROJECT_SETTINGS: ProjectSettings = {
  name: "framescript-minimal",
  width: 1920,
  height: 1080,
  fps: 60,
}

export const PROJECT = () => (
  <Project>
    <TimeLine>
      <Clip label="Intro">
        <Video video={{ path: "~/Videos/example.mp4" }} />
      </Clip>
    </TimeLine>
  </Project>
)

2 つの export が必須:

• PROJECT_SETTINGS — 解像度・FPS・名前。seconds() はここの fps を使う。
• PROJECT — 動画ツリーのルート。<Project><TimeLine>...</TimeLine></Project> の中にクリップを並べる。

3. 編集ループ

1. project/project.tsx を保存すると Studio がホットリロードする。
2. Studio のタイムラインでシークしながら見た目を確認する。
3. 細かい動きを足したくなったら useAnimation を使うシーンコンポーネントを project/ 内に作って <Clip> に挟む。

4. 書き出し

Studio の Render ダイアログから書き出す。レンダラはタイムスクラブ式で、 各フレームでシーンを目的のフレームに「進めて」、Chromium にスクリーンショットを撮らせている。

書き出し中の不具合（チラつき・欠け）はだいたい backdrop-filter のような 合成が複雑な CSS が原因。注意点・既知問題 を参照。

5. ビルド系コマンド