Log inGet Started

Connecting to Your Site

Enter a URL, connect to any website, and start building animations.

The desktop app works with any website. Give it a URL — live site, staging environment, or local dev server — and it opens that site in a built-in browser ready for animation.

Project Dashboard — Sites tab with project cards

Creating a site

Every connection starts with a site (called a project internally). Create one from the Project Dashboard.

  1. Open the Project Dashboard

    Click the Motion.page logo in the top-left of the Left Panel, or launch the app — the dashboard is the default home screen.

  2. Click New Site

    The button is in the top-right of the Sites tab. A modal opens with two fields.

  3. Enter a project name and URL

    • Project Name — a label for your own reference. It appears on the card and in the tab bar.
    • Website URL — the full address of the site. Include the protocol (https://example.com). For localhost, the protocol is optional (see Development servers).

  4. Click Create Project

    The site opens immediately in a new tab. The builder loads alongside it.

Built-in browser

Once a site is open, it renders inside an Electron webview — a full Chromium browser embedded in the app. The site behaves exactly as it would in a regular browser: JavaScript runs, cookies persist, and logged-in sessions are maintained.

The webview fills the Frame View in the center of the workspace. You build animations directly on top of the live page.

Note: The webview and the builder share the same Electron session. If you log into a site inside the app, that session persists across app restarts — just like a regular browser profile.

The built-in browser functions like any browser tab. Click links, fill forms, and navigate freely — the page updates inside the Frame View.

Animation context follows the page. When you navigate to a new URL within the same project, the builder stays active. Timelines scoped to that page appear in the Library panel automatically.

To navigate to a specific page without clicking links on the site, use the address bar in the tab strip at the top of the app. Type a path and press Enter.

Tip: To build animations on an interior page, open the site and navigate to that page first. Then configure your animation — the page selector in the Left Panel will reflect the current URL.

Development servers

Local development servers work out of the box. The desktop app is not a remote SaaS tool — it runs on your machine and can reach anything your browser can reach.

Supported formats:

FormatExample
Full URL with protocolhttp://localhost:3000
Localhost without protocollocalhost:3000
IP address with port127.0.0.1:8080
Named local domainshttp://mysite.local

When you enter a localhost URL without http://, the app prepends it automatically.

Tip: If your dev server uses HTTPS with a self-signed certificate, the webview may show a security warning. Accept the certificate once and the site will load normally on subsequent visits.

Password-protected sites

Sites behind HTTP Basic Auth or a login form work normally. The webview handles authentication the same way a browser does.

HTTP Basic Auth — the browser prompts for credentials when the URL is first loaded. Enter them once; the session is maintained.

Login forms — navigate to the login page, sign in, and then navigate to the page you want to animate. The session cookie persists for the duration of the app session.

Staging environments — connect using the staging URL directly. If the staging site is behind a VPN, ensure the VPN is active before opening the project.

Note: Credentials entered inside the webview are not stored by the builder. They are held in the Electron session for the current app session only.

Refreshing and reconnecting

Use the Refresh button in the Top Panel toolbar (the circular arrow icon) to reload the current page inside the Frame View. This is equivalent to pressing F5 in a browser.

Refresh when:

  • Your dev server has restarted and the page is stale.
  • You have made code changes and want to see the updated DOM.
  • A CSS or JS error is preventing the page from loading correctly.

Reconnecting after a URL change — if your site’s URL changes (for example, a new staging URL), edit the project to update it. See Rename and edit a site below.

Managing your sites

All your sites are listed in the Sites tab of the Project Dashboard. Cards are sorted by last-opened date — most recent first.

Use the Search sites input in the top-right to filter by name or URL. The grid updates as you type.

Rename and edit a site

Hover over a project card to reveal the action buttons. Click the cog icon (Edit Project) to open the edit modal. You can change both the project name and the URL.

Changing the URL reconnects the project to the new address. Existing animations saved to this project are not affected.

Delete a site

Hover over a project card and click the delete icon. A confirmation prompt appears — confirm to permanently remove the project.

Caution: Deleting a site removes it from the dashboard and disconnects it from its saved animations. The animations themselves remain in your library but will no longer have an associated project.

Thumbnails

The app automatically captures a thumbnail screenshot of each site when you open it. Thumbnails update at most once every 24 hours. They appear on the project card and in the tab bar.

If a thumbnail has not been captured yet, the card shows a “No preview available” placeholder until the next time the site is opened.

Multiple sites open at once

The desktop app supports multiple open tabs. Each tab runs its own independent builder session with isolated state.

Open a second site by clicking New Site from the dashboard, or return to the dashboard (click the logo) and open another project card. Tabs appear in the tab bar at the top of the app. Click any tab to switch between sites.

Next steps