blixvip/MotionClone

Rebuild a reference video as an editable HyperFrames project, compare the match against the original, and export an MP4.

MotionClone – Turn a video into editable motion‑graphics code

What it does – MotionClone lets you feed it a short motion‑graphics clip (YouTube, Vimeo, a file, etc.) and, using your own ChatGPT / Codex account, it reconstructs the animation as a HyperFrames project – a collection of HTML, CSS‑like assets, fonts and timing data. The result is fully editable: you can change copy, colours, pacing, or hand the code to another AI‑assistant for further tweaks. The UI shows the original and the rebuilt video side‑by‑side so you can see where they match.

Why it matters – Traditional video editing tools give you a raster screen‑recording; MotionClone gives you the underlying code for the motion graphics, making it easy to repurpose ads, title sequences, or launch videos without manually reverse‑engineering keyframes.

How it works –

  1. Reference import – paste a public video URL or upload a file (up to 120 s, 250 MB). No AI is used yet.
  2. AI‑driven reconstruction – after you connect your ChatGPT/Codex account (via codex login), the app sends selected reference frames to the model, which generates the HyperFrames markup that reproduces the visual elements and animation.
  3. Comparison & export – the studio plays both clips in sync, lets you pick layout styles (Studio, Editorial, etc.) and output formats (landscape, portrait, square, ultrawide, feed). You can download an MP4 or the editable project ZIP.

Running it locally – Windows‑only. Install Git, Python 3.11+, Node 22+, FFmpeg, Chrome and the official Codex CLI. Then:

git clone https://github.com/blixvip/MotionClone.git
cd MotionClone
codex login   # sign in to your OpenAI account
.
start.ps1      # installs locked deps and launches http://127.0.0.1:4319

A shortcut (Start MotionClone.vbs) can be used after the first launch.

Key features –

  • Editable HyperFrames output (HTML‑based animation project).
  • Built‑in side‑by‑side comparison with adjustable layout and wipe reveals.
  • Six visual styles and five aspect‑ratio presets.
  • Export options: MP4, style‑specific video, or full editable ZIP.
  • Agent workflow – the exported ZIP can be fed to a coding‑agent for further automated edits (see docs/AGENT-WORKFLOW.md).

Limitations – Reconstruction is approximate; tiny text, rare fonts, photographs or complex 3D may need manual fixing. The service relies on an online OpenAI account – no offline‑only mode, and usage costs follow your own ChatGPT/Codex plan.

Community & help – Discord server, extensive docs (getting‑started, editor guide, agent workflow, development), and a bug tracker on GitHub.

Who it’s for – Designers, marketers, or developers who want to remix existing motion‑graphics quickly, or anyone interested in AI‑assisted generation of editable animation code.

Related

  • Project
  • Project
  • Project
  • Project
  • Project