Desktop App Overview

Features of the standalone desktop application.

Motion.page Desktop is a standalone Electron app that brings the full builder to any website — no WordPress installation required. Point it at any URL, build animations, and publish them to a Convex-backed cloud that serves your site.

What makes it different

The WordPress plugin attaches to a WordPress site. The desktop app is site-agnostic — it loads any URL in a built-in browser window and layers the animation builder on top. You can use it with:

• Static HTML sites and local development servers
• Webflow, Framer, Shopify, or any hosted platform
• Custom React, Next.js, or Nuxt apps
• WordPress sites (as an alternative to the plugin)

Animations are saved to Convex cloud storage and delivered to the site via the CDN. No plugin, no server-side code needed.

Project dashboard

When the desktop app opens, you land on the Project Dashboard. It has five tabs along the left sidebar:

The search bar at the top filters cards in the active tab. Each card shows a live thumbnail captured from the last session.

Projects

A project is the top-level unit. Each project stores:

• A name and website URL — the address loaded in the Frame View
• All timelines you create for that site
• A thumbnail auto-captured from the last session

Open a project to enter the builder. The Frame View loads the project URL and the Left Panel shows the Library for that site. All changes are synced to Convex and published on save.

Click the Motion.page logo in the Left Panel at any time to return to the Project Dashboard.

See Workspace Overview for the full builder interface reference.

Artifacts

Artifacts are self-contained animation components — each is a bundle of HTML, CSS, and JavaScript that runs in isolation. Use them to:

• Prototype animation ideas without a real website
• Build reusable components (loaders, transitions, micro-interactions)
• Share interactive demos with the community

Each artifact renders in a sandboxed iframe with @motion.page/sdk pre-loaded, so you can use Motion(...) calls directly in the JS panel.

Artifacts can be kept private (only visible to you) or made public to appear in the Community tab, where other users can view, fork, and star them.

How it connects to a website

The desktop app loads website URLs using Electron’s <webview> tag with a custom session. This means:

• Any URL works — local (http://localhost:3000), staging, or production
• The builder runtime is injected automatically into the loaded page, the same way the WordPress plugin works
• Element selection works identically — click any element in the Frame View to target it with an animation

For the animations to run on the live site (outside the desktop app), the site must load the Motion.page runtime. See CDN delivery for how to add the CDN snippet to any site.

Cloud sync with Convex

All project data is stored in Convex — a real-time cloud backend. This means:

• Timelines and artifacts are available on any machine when you sign in
• Changes publish instantly to the CDN without manual exports
• The Publish button in the Left Panel footer pushes the current timeline to Convex

Authentication uses email sign-in. Create an account at motion.page before launching the app.

System requirements and platforms

Motion.page Desktop is available for:

Minimum requirements: a modern 64-bit OS with hardware-accelerated graphics for the WebGPU canvas features.

Download and install

Next steps

• Workspace Overview — tour of the builder panels and how they work together
• CDN delivery — add the runtime snippet to any site so published animations load