FrameScript is a video editing & motion graphics tool built with React + CSS.

日本語.md

FrameScript features

• Build videos with web front-end technologies such as React + CSS
• Fine-grained animation control with the useAnimation API
• Efficient rendering system built in Rust

Build videos with React

import{Clip}from"../src/lib/clip"import{Project,typeProjectSettings}from"../src/lib/project"import{TimeLine}from"../src/lib/timeline"import{Video}from"../src/lib/video/video"// Project settingsexportconstPROJECT_SETTINGS: ProjectSettings={name: "framescript-minimal",width: 1920,height: 1080,fps: 60,}// Project definition// Add elements here to build the videoexportconstPROJECT=()=>{return(<Project><TimeLine>{/* <Clip> is an element displayed on the timeline */}{/* The timeline length reflects the <Video/> length (can be overridden) */}<Cliplabel="Clip Name">{/* <Video/> loads a video */}<Videovideo={{path: "~/Videos/example.mp4"}}/></Clip></TimeLine></Project>)}

Animation API

With useAnimation, you can control animations in detail using async/await.

import{useAnimation,useVariable}from"../src/lib/animation"import{BEZIER_SMOOTH}from"../src/lib/animation/functions"import{FillFrame}from"../src/lib/layout/fill-frame"import{seconds}from"../src/lib/frame"constCircleScene=()=>{// Keep position and opacity as animatable variablesconstposition=useVariable({x: -300,y: 0})constopacity=useVariable(0)useAnimation(async(ctx)=>{// Run motions in parallel by creating handlesconstmove=ctx.move(position).to({x: 240,y: 0},seconds(1.2),BEZIER_SMOOTH)constfade=ctx.move(opacity).to(1,seconds(0.6),BEZIER_SMOOTH)awaitctx.parallel([move,fade])},[])// Get values for the current frameconstpos=position.use()return(<FillFramestyle={{alignItems: "center",justifyContent: "center"}}><divstyle={{width: 120,height: 120,borderRadius: "999px",background: "#38bdf8",opacity: opacity.use(),transform: `translate(${pos.x}px, ${pos.y}px)`,boxShadow: "0 20px 60px rgba(56,189,248,0.35)",}}/></FillFrame>)}

QuickStart

(Requires Node.js)

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

Documentation

• FrameScript Docs