From d5996f78d2005206e7d2f149bb2e222e7f5bf4a5 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sun, 17 May 2026 15:22:55 +0900 Subject: [PATCH 01/11] feat: add Vue SFC project support --- README.ja.md | 134 +- README.md | 126 +- docs/docs/basic.md | 45 +- docs/docs/index.md | 6 +- docs/docs/vue-sfc.md | 79 + .../current/basic.md | 45 +- .../current/index.md | 6 +- .../current/vue-sfc.md | 80 + package-lock.json | 203 ++- package.json | 4 +- project/project.tsx | 48 +- project/project.vue | 165 ++ src/lib/timeline.tsx | 6 + src/lib/video/canvas-frame-registry.ts | 26 + src/lib/video/video-render.tsx | 25 +- src/lib/vue.tsx | 1354 +++++++++++++++++ src/vite-env.d.ts | 6 + vite.render.config.ts | 3 +- vite.studio.config.ts | 3 +- 19 files changed, 2092 insertions(+), 272 deletions(-) create mode 100644 docs/docs/vue-sfc.md create mode 100644 docs/i18n/ja/docusaurus-plugin-content-docs/current/vue-sfc.md create mode 100644 project/project.vue create mode 100644 src/lib/video/canvas-frame-registry.ts create mode 100644 src/lib/vue.tsx diff --git a/README.ja.md b/README.ja.md index d727120..7a2f505 100644 --- a/README.ja.md +++ b/README.ja.md @@ -1,101 +1,89 @@ ![](./frame-script.gif) -FrameScriptはReact + CSSで描画・編集する動画編集 & モーショングラフィックスソフトです。 +FrameScript.vue は Vue SFC + CSS で動画を記述できる FrameScript の fork です。 Discord -## FrameScriptの特徴 +## FrameScript の特徴 -- React+CSSに代表されるWebのフロントエンド技術を用いて動画を構築 -- `useAnimation`のAPIを用いた細かなアニメーション制御 -- Rustによって構築された効率的なレンダリングシステム +- Vue SFC + CSS に代表される Web のフロントエンド技術を用いて動画を構築 +- フレーム値を使った Vue の `computed` による細かなアニメーション制御 +- Rust によって構築された効率的なレンダリングシステム -## Reactで動画を構成 +## Vue SFC で動画を構成 -```tsx -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" +`project/project.vue` を編集します。 -// プロジェクトの設定 -export const PROJECT_SETTINGS: ProjectSettings = { - name: "framescript-minimal", - width: 1920, - height: 1080, - fps: 60, -} +```vue + -// プロジェクトの定義 -// ここに要素を付け足していくことで動画を構築する -export const PROJECT = () => { - return ( - - - {/* はタイムラインに表示される要素 */} - {/* タイムライン上の長さは - - ) -} + ``` -## アニメーションAPI +## アニメーション API -`useAnimation`を使うと`async/await`を用いてアニメーションの細かな操作を実現できます +Vue SFC ではフレーム値を reactive に読み、`computed` と scoped CSS でアニメーションを書けます。 -```tsx -import { useAnimation, useVariable } from "../src/lib/animation" +```vue + + + + + ``` circle_move ## QuickStart -(実行にはNode.jsが必要です) +(実行には Node.js が必要です) ```bash npm init @frame-script/latest diff --git a/README.md b/README.md index 24ece91..9374ff8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ ![](./frame-script.gif) -FrameScript is a video editing & motion graphics tool built with React + CSS. +FrameScript.vue is a fork of FrameScript for authoring video projects with Vue SFC + CSS. Discord @@ -10,87 +10,75 @@ FrameScript is a video editing & motion graphics tool built with React + CSS. ## FrameScript features -- Build videos with web front-end technologies such as React + CSS -- Fine-grained animation control with the `useAnimation` API +- Build videos with web front-end technologies such as Vue SFC + CSS +- Fine-grained animation control with reactive frame composables - Efficient rendering system built in Rust -## Build videos with React +## Build videos with Vue SFC -```tsx -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" +Edit `project/project.vue`. -// Project settings -export const PROJECT_SETTINGS: ProjectSettings = { - name: "framescript-minimal", - width: 1920, - height: 1080, - fps: 60, -} +```vue + -// Project definition -// Add elements here to build the video -export const PROJECT = () => { - return ( - - - {/* is an element displayed on the timeline */} - {/* The timeline length reflects the - - ) -} + ``` ## Animation API -With `useAnimation`, you can control animations in detail using `async/await`. +In Vue SFCs, use reactive frame values and scoped CSS. -```tsx -import { useAnimation, useVariable } from "../src/lib/animation" +```vue + + + + + ``` circle_move diff --git a/docs/docs/basic.md b/docs/docs/basic.md index a6e6970..101f958 100644 --- a/docs/docs/basic.md +++ b/docs/docs/basic.md @@ -5,37 +5,42 @@ sidebar_position: 2 ## Basic structure -Your project lives in `project/project.tsx`. -You build the video by adding elements here. +Write your video in `project/project.vue`. +`project/project.tsx` is only a compatibility wrapper that mounts the SFC into FrameScript Studio and the renderer. + +```vue + + + +``` + +Project settings still live in `project/project.tsx` because FrameScript core modules read them at build time. ```tsx -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" +import { VueProjectRoot } from "../src/lib/vue" +import type { ProjectSettings } from "../src/lib/project" +import ProjectVue from "./project.vue" -// Project settings export const PROJECT_SETTINGS: ProjectSettings = { - name: "framescript-minimal", + name: "framescript-vue-template", width: 1920, height: 1080, fps: 60, } -// Project definition -// Add elements here to build the video export const PROJECT = () => { return ( - - - {/* is a timeline segment */} - {/* Timeline length follows - + ) } ``` diff --git a/docs/docs/index.md b/docs/docs/index.md index 2e139f9..e5ae965 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -3,8 +3,8 @@ title: FrameScript Docs sidebar_position: 1 --- -FrameScript is a code-first motion graphics and video editing toolkit built with React and CSS. -You author scenes as React components, preview them in Studio, and render video through headless Chromium. +FrameScript.vue is a code-first motion graphics and video editing toolkit built for Vue SFC and CSS. +You author scenes in `.vue` files, preview them in Studio, and render video through headless Chromium. ## Quick start @@ -40,4 +40,4 @@ FrameScript Studio should launch. ### Edit the project -Your project lives in `project/project.tsx`. +Your main editable project lives in `project/project.vue`. diff --git a/docs/docs/vue-sfc.md b/docs/docs/vue-sfc.md new file mode 100644 index 0000000..65b1557 --- /dev/null +++ b/docs/docs/vue-sfc.md @@ -0,0 +1,79 @@ +--- +title: Vue SFC +sidebar_position: 3 +--- + +FrameScript.vue follows the shape of [`ubugeeei/style-guide.vue`](https://github.com/ubugeeei/style-guide.vue): use SFC, TypeScript, explicit imports, ` +``` + +- `` creates the project root. +- `` groups clips. +- `` registers a timeline segment. Pass `duration` when the clip has no media that can report duration. +- `