Reverse engineering for any video

Agents · Use cases & remakes · Why OpenMotion · Setup & architecture · Community

OpenMotion is the first full-stack agentic video generator. Upload a reference video or paste a social video link to recreate it with your own brand kit (logo, colors and fonts) and copy.

• 🎬 Full-stack video recreation. Code video with HTML. Your agent breaks down the reference, rebuilds its shots and transitions, and generates missing assets. Edit the timing in Studio and render an MP4 from the same project.
• 🔑 BYOA — Bring Your Own Agent. BYOK — Bring Your Own Keys. OpenMotion is free and open source. Recreate videos in your local agent and use your own API keys at every layer.
• 🧩 OpenMotion introduces Motion.md, a Markdown format for shot order, timing and transitions. Use it to share how a brand film works, shot by shot.
• 🎛️ Images, video, music and voice. Generate artwork with Nano Banana 2, add a shot with Seedance 2.0, score it with Suno v4 and narrate it with Kokoro. Explore all seven built-in models.

22 local agents · Choose your agent

Edit around the speaker’s voice, with captions and screen inserts that follow the explanation.

🎓 Teach & explain
6 essential skills to transform your career Numbered points + kinetic keywords Reference · @careerwithriya	What's the best AI tool right now? Presenter + floating tool cards Reference · Dan Martell	10 Days of AI Basics, Day 1 A personal lesson + readable captions Reference · @harpercarrollai
🖥️ Show the workflow
5 tools I use every day Desk-side story + workflow inserts Reference · Ali Abdaal	Tool demo with callouts Presenter + screens + callouts Reference · @john.tagudin	Top 5 plugins to install in Claude A spoken list + supporting screenshots Reference · @aiwithsachi
🎬 Tell a story, show a product
The Founder Experiments, Ep. 1 Founder diary + everyday B-roll Reference · @khris.sheer	AI creator with product Product story + proof + picture-in-picture Reference · @ugc.rachelll	Stop Paying for 5 AI Tools Product tutorial + live demonstration Reference · Kevin Stratvert
Original → external adaptation
Career advice → video-production explainer Numbered ideas and proof cards follow the new presenter’s explanation. Motion.md · Skill · Original · Full adaptation	Everyday tools → a design-workspace story Screen inserts follow the speaker through a different workflow. Motion.md · Skill · Original · Full adaptation	Tool demo → video-editor walkthrough Picture-in-picture and callouts turn a tool demo into an editing walkthrough. Motion.md · Skill · Original · Full adaptation

Give a folder of clips and photos a beginning, a turning point and an ending.

100 days in photos Stickers and photo cards mark time in a personal video diary. Original

Build a reveal around the moment your product comes into view.

In the five-second comparisons, the original is on the left and the OpenMotion remake on the right (top and bottom on mobile).

Stripe · Card flip → film frame The remake keeps Stripe’s flip and reveals an illustrated film frame. Full size · Portrait MP4 · Original 00:21.50–00:26.50 · HTML · Motion.md
Original films
Kimi · K3 teaser Your next release, distilled into a short, memorable teaser. Reference · @Kimi_Moonshot	ElevenLabs · Reception Introduce a new product with a focused launch story. Reference · @ElevenLabs
A real product, a tactile story Study close-ups, hand movement and the reveal; film your own product. Live footage · product unboxing	Characters meet the interface Combine a character-led hook with UI motion and screen footage. AI characters + code + screen recording

Keep the timing of a reference clip and change what happens on screen.

OpenAI · Wireframe → edit timeline Five colored clips collapse into an edit point. The cut and wordmark resolve on the original beat. Full size · Portrait MP4 · Original 00:26.50–00:31.50 · HTML
DeepSeek Harness · Terminal → film slate The cursor types on a film slate. A warm flash carries the last keystroke into the end card. Full size · Portrait MP4 · Original 01:31.50–01:36.50 · HTML
Editable studies · original and adaptation from the same project
Wireframe portal · BREAKTHROUGH → OPENMOTION Keep: Portal timing, dimensional lettering and camera push. Replace: Title, subtitle and the 3D phrase. Motion.md · Skill · Content preset · MP4	Canopy typography · Understory → OpenMotion Keep: Leaf sweeps, depth, occlusion and reading holds. Replace: Two brand headlines. Motion.md · Skill · Content preset · MP4
Interface reveal · Product tour → AI editing story Keep: Tilted canvas, depth hierarchy and continuous camera. Replace: Hero headline, document and community copy. Motion.md · Skill · Content preset · MP4	Dimensional code · loadConfig() → cutVideo() Keep: Extruded slab, syntax colors and the camera move. Replace: Function, variables and displayed calls. Motion.md · Skill · Content preset · MP4
Particle assembly · parse / optimize / emit → select / trim / render Keep: Seeded particle motion and assembly rhythm. Replace: Pipeline name and steps. Motion.md · Skill · Content preset · MP4	Glass information cards · Device widgets → creator workspace Keep: Glass treatment, card hierarchy, stagger and meters. Replace: Labels, units and feature story. Motion.md · Skill · Content preset · MP4

Guide the viewer through a task with a close-up, a highlight and a clear next step.

Claude · Settings → color palette The remake uses the same switch and drawn circle to reveal a color palette. Full size · Portrait MP4 · Original 00:00–00:05 · HTML

Animate a comparison so the viewer can follow how the values change.

Animated comparison bars The values stay visible as the bars change height. Original

Give a track a visual motif that returns on the beat.

Kimi · Magnetic field → vinyl grooves The rotating field becomes a vinyl record; the title lands on its sleeve. Full size · Portrait MP4 · Original 00:30.75–00:35.75 · HTML

Get agent prompts for all seven use cases

Code video with HTML. OpenMotion uses HTML, CSS and JavaScript to describe scenes, typography, layout, transitions and timing. Recorded footage, generated clips, images, music and voice-over become media inside the composition. The same project opens in Studio and renders to MP4.

Write it. Watch it. Change it. Render it. Ask your agent to replace the product, tighten the hook, add a presenter, change the captions or try another ending. It edits the project source; you review the result in the visual editor. Local MCP clients use the project tools, while agents with shell access can follow the Skills and pinned CLI workflow. Agent setup · Native composition guide · Example HTML project

If historical media are unavailable, an Agent restore is refused before changing the project. The editor shows a dismissible error with the affected file paths and confirms that the current project is unchanged.

“Keep the reveal we approved. Replace the middle scene with this screen recording, tighten the opening using these timecodes, and hold our final CTA for two more seconds.”

Projects and versions

1. Break down the reference. Pick a sequence. Record its shot order, transitions and sound cues in Motion.md, and mark what you want to replace.
2. Rebuild the shots. Your agent rebuilds the HTML scenes using your brand kit, copy and visuals, then arranges them on an editable timeline in Studio.
3. Compare the cuts. Watch the same moment in the original and the remake. Adjust the timing, movement and sound, then play the sequence through.
4. Export and share. Render the MP4 and keep the HTML source and media. To share a project others can adapt, include its Motion.md, a preview and assets you can redistribute. Project contribution checklist

Choose your agent. WorkBuddy, Codex, Claude Code and DeepSeek Harness have installation instructions. Other buttons open the shared MCP and CLI setup.

The OpenMotion creation pipeline is open source: Skills, project tools, model integrations, Studio and rendering. Run it locally, inspect the implementation and extend the parts you need. OpenMotion charges no software subscription or per-render fee for this local workflow. You can also work with your own footage, images and audio without invoking media-generation APIs.

Provider credentials stay in your workspace, separate from the video project. Your agent and media providers bill any subscriptions or usage to your own accounts. Agent setup and compatibility

OpenMotion introduces Motion.md. The first open-source collection breaks down brand films shot by shot, recording timing, transitions and the assets you can replace. In the Stripe example, the flip stays on the same beat while a payment card becomes a film frame.

The Brand Kit section holds the logo, palette, type, voice and approved product facts. Story, motion, sound and review notes describe what should survive a change of brand. Give the file to your agent alongside your assets when starting a new cut.

Explore 42 full-length reference films and 393 motion clips for shot timing and transitions. When you’re ready to build a scene in HTML, the Studio library also includes 210 blocks, 238 components and 8 code examples.

OpenMotion also ships three editable projects. In Studio, choose one under Templates → Ready to edit to create your own copy.

Product Promo · 20s	NYT Graph · 15s	Decision Tree · 10s
Swap in your product screenshots, headline and end card.	Replace the figures, units and annotations.	Change the question, branches and reveal order.

For a presenter-led video with screen demonstrations, the Presenter Tech template package includes its own local runner.

Select a preview to watch the clip. Entries marked “View component” also link to their HTML source.

Reusable motion components
App Showcase Component · View component	Glass Shard Title Component · View component	NYC Paris Flight Component · View component
Product and brand films
Pond: a new Linux OS Reference · @bflycomputer	Cyera brand video Reference · Cyera	Glyph: GPU typography for the web Reference · @pmndrs
Light and loops
Iskra Light Reference · @world_is_web	Linear Loops Reference · @linear	Aurora Component · View component

Browse all 18 library picks · Media sources and reuse

Six editable studies · Motion.md format

BYOK makes your multimodal accounts part of the video workflow. Add your supported provider keys in Model Settings, choose your models, and generate images, video, music and speech through the Studio's Model Gateway. Preview candidates and adopt the results into the same project your agent and Studio edit. The supported local image path can reuse your existing agent login.

“Use the Brand Kit section of our Motion.md and our approved script. Generate artwork for the opening, a video insert, background music and TTS narration. Add the selected results to the recreated project, align the sound and visuals, then show me the full cut.”

Model catalog · Provider setup and endpoints

For any successful Agent-led installation, follow the installation reply rules and examples in the current conversation; setup provides real template summaries. Invite before creation and preserve the accepted template.

For a packaged install, give your agent the test installation guide. It pins the package version and walks through isolated setup. To run from source, follow the steps below.

If MCP tools are missing or fail to connect, use the installed connection diagnosis and recovery guide to inspect the actual host configuration and verify the original workspace before continuing.

Use Git, npm and Node.js 26.11.1. Source-based preview and export also need Chrome/Chromium and FFmpeg/FFprobe. Runtime setup

git clone --branch feature/motion https://github.com/nexu-io/html-anything.git openmotion
cd openmotion
npm ci
npm run build:studio
npm start

Open http://localhost:4173. Choose Templates → Ready to edit, open Product Promo, and use Connect Agent for your preferred client. Keep projects and credentials outside the checkout; MOTION_DATA_DIR selects the workspace.

For Codex with plugin support, run from the checkout:

bash scripts/install-motion.command

WorkBuddy · Import the OpenMotion connector in WorkBuddy or add its mcp.json as a custom MCP server. Ask WorkBuddy to list the available video templates. WorkBuddy setup

Claude Code · Select --host claude in the local installer, then run /mcp in Claude Code to check the connection. Local installation guide

DeepSeek · Work with the editable HTML project from the terminal in DeepSeek TUI. For DeepSeek Harness, connect the OpenMotion MCP tools with the Cordis configuration. DeepSeek Harness setup

The installer uses locally built packages. Windows test packages

Try the included template first:

Use OpenMotion to open a fresh copy of the 20-second Product Promo in Studio and export an MP4. Keep the editable project.

Then make it yours:

Keep the structure and animation. Replace the logo, screenshots, headline and end card with my supplied brand materials. Show the new cut, then hold the final title two seconds longer.

To start from a video instead, supply your reference and use the recreation brief. If your host cannot open Studio beside the conversation, use the returned local project link.

New test npm builds embed DEV template defaults; stable packages embed prod. Existing published versions keep their original defaults. The environment is stored in the package, so Studio and MCP agree without setup-only environment variables. Use isolated test host, application and data directories. See test installation and template configuration and the test publication manual.

From the checkout, discover and install the five core workflows with the Skills CLI:

npx skills add ./skills --list
npx skills add ./skills --skill motion-director motion-production motion-template-to-video motion-recreate motion-video-to-template

This copies instructions; it does not install the runtime or register MCP. Keep the shared documentation available and connect the app separately, or use the integrated local installer above.

Connect a local agent · Open Connect Agent in Studio to copy the launch command for your workspace. Use the configuration below in clients with local stdio MCP support. In a shell-based agent, open the project directory and use the local engine CLI to preview and render the HTML scenes.

{
  "mcpServers": {
    "openmotion": {
      "command": "/absolute/path/to/node",
      "args": ["--experimental-strip-types", "/absolute/openmotion/mcp.ts"],
      "env": { "MOTION_DATA_DIR": "/absolute/openmotion-data" }
    }
  }
}

The eleven public MCP tools cover template discovery and details, project creation and reading, editing, preview, media import, export, version restoration and cancellation. Shared workflow and engine guides are available through MCP resources. Tool contract

Find a template with motion_list_templates, inspect it with motion_get_template, then create an editable copy with motion_create_project. Template catalog

Use npm start for the app and npm run mcp for stdio. Shell-capable agents can inspect and render with the pinned engine CLI returned by the runtime; managed edits retain project revision checks. Native authoring

Supply the clip and timecodes if your agent cannot open the social link. Start from the reference with the recreation workflow, or use the template workflow when you already have editable source.

Use OpenMotion to reverse-engineer the attached reference for our brand.

Study: the opening hook, shot order, typography, transitions and sound cues.
Keep: the product reveal and camera rhythm in the selected segment.
Replace: the logo, UI, claims, copy and end card with our supplied materials.
Generate: missing images, video, background music and TTS narration using
our configured models, following our brand and approved script.

Build an editable project. Open it in Studio and compare matching moments
with the reference. Explain any remaining differences. After review,
export an MP4 and retain the source for the next edit.

Browse references, open a template or bring in your recordings. Choose Connect Agent, follow the workspace-specific instructions and give the agent your brief. Review its edits on the same timeline and make hands-on adjustments whenever you want.

Preview → copy the instruction → paste into your agent with your brand assets. A bundled template opens as an editable copy; an external reference starts a reconstruction task. Full product tour

Both entry paths use the same local application and project. The agent runs in its own client; Studio stores the brief and editable work. How the connection works

Editing the timeline in Studio and asking your agent to change a shot both update the same HTML project. The local TypeScript service manages media and revisions. A browser-based rendering engine exports the selected version to MP4.

Edits made through the project tools include a revision check so an outdated request cannot overwrite newer work. Generated media enters the project when you select it. Each export uses the version saved when the job starts. The exporter checks the file specifications, and you can play the cut to review the picture, sound and timing.

CREATIVE INPUT
Reference video + footage + script + brand assets
                            |
                            v
COMMUNITY KNOWLEDGE
Motion.md + BRANDKIT.md + Skills + templates + components
                            |
              +-------------+------------------+
              v                                v
BYOA: YOUR LOCAL AGENT                OPENMOTION STUDIO
DeepSeek Harness / Codex /            React 19 + TypeScript + Vite
Claude Code / other local hosts       Tailwind CSS + Zustand
Skills + host analysis tools         CodeMirror + Dockview
              |                      media / preview / timeline
              | stdio MCP                      | local HTTP
              | 9 public project tools         |
              +------------------+-------------+
                                 v
LOCAL APPLICATION                 Node.js + TypeScript + node:http
Sessions / project files / assets / revisions / export jobs
              |                                  |
              v                                  v
BYOK: MODEL GATEWAY                   VIDEO AS CODE
Your keys / accounts / model routing  HTML scenes + media + Studio data
Discovery / generation jobs           HTML + CSS + JavaScript + GSAP
              |                                  ^
              v                                  |
MODEL ADAPTERS                                   |
Codex Image / Atlas Cloud / fal.ai               |
Images / Video / Music / TTS                     |
              |                                  |
              v                                  |
Generated candidates -> preview / select -> adopt into the project
                                                 |
                                                 v
RENDER AND VERIFY
Selected project version -> HTML render engine + Chromium -> FFmpeg / FFprobe
                                                 |
                                                 v
DELIVERY TODAY
MP4 + editable source + media + version and export evidence
                                                 |
                          .----------------------'
                          v
COMING: PUBLISH TO EVERY PLATFORM
Platform connectors -> release review -> scheduling -> performance feedback
                          |
                          v
COMING: KNOWLEDGE FEEDBACK
Version-linked outcomes -> team memory / RAG -> evaluated Skill improvements

BYOA keeps the agent in your existing client; BYOK connects your supported model accounts. Studio and the local service manage the editable work, while provider credentials remain outside project files. The public phase-one MCP surface contains eleven tools: nine project tools and two template catalog tools. Model generation is available through Studio and the local Gateway service; the diagram does not add generation or publishing tools to that public MCP contract.

Dependency pins live in package.json, package-lock.json and the runtime lock. Models and third-party libraries retain their own terms; the application is Apache-2.0.

Start with the local setup, choose one layer, and follow CONTRIBUTING.md and AGENTS.md. Keep user projects and credentials outside the checkout and preserve dependency pins and upstream licenses.

Product architecture · Studio development · Model Gateway · Contribution guide

Make a separate composition for each aspect ratio, review the cut in Studio and export an MP4 for manual upload.

Channel connections, scheduled publishing and performance feedback are planned.

Concept preview of planned collaboration. No release date announced. Studio vision · Knowledge and feedback

Share a remake, a reusable template or a Motion.md that captures the rhythm of a film. Include the reference and your editable project so another creator can try the same cut with their own footage.

Library entry checklist · Contribute · Report an issue · Contributors · Media kit

The dedicated OpenMotion site is coming to open-design.ai/openmotion.

Motion showcase · OpenDesign Go · Discord · X @OpenDesignDevs · X @OpenDesignHQ · YouTube

Star OpenMotion on GitHub

Original brand-film excerpts are credited in the comparisons. Agent and model marks

OpenMotion is licensed under Apache-2.0. Third-party code, templates, media and fonts retain their own licenses and attribution.

Asset sources · Additional showcase sources · Font notices · Studio license

The former HTML Anything application is preserved on the legacy branch. See the repository migration guide for the active branch and distribution boundaries.