QuickMotion

Code-driven SVG animations on a React video timeline (Remotion), rendered to clean .mp4 assets on any background color. The loops below are the real compositions, running live in your browser from the same frame-based math.

Quick start

pnpm install
pnpm studio        # timeline editor at localhost:3000
pnpm render        # every asset → out/<id>.mp4, 1080×1080 @ 30fps

How it works

Each asset is one file in src/assets/ — a pure SVG component driven by useCurrentFrame(). A registry entry gives it a default background and accent color, and it appears as a track in Remotion Studio, where both colors are editable live. pnpm render bundles the project and exports every composition to mp4 (or webm / ProRes with an alpha channel for compositing over footage).