> ## Documentation Index
> Fetch the complete documentation index at: https://motionly.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# UI guide

> Tour the Motionly editor's toolbar, panels, and timeline, including magnetic tracks, split, trim, zoom, and undo controls.

# Motionly UI Guide

Motionly uses one focused editor screen.

## Top Toolbar

* Open a `.motion` project
* Save the current project
* Load preset animations with confirmation dialog
* Export MP4 with progress feedback
* Open and star the GitHub repository

## Left Navigation Rail

Icon-based tabs for quick access to tools and content:

* **Media** - Assets panel with organized folders (Images & Graphics)
* **Audio** - Audio assets panel
* **Text** - Text tools
* **Effects** - Animation presets library (text, object, transition, camera)
* **Scenes** - Scene backgrounds and overlays
* **AI Config** - Enabled skills and AI context preview
* **Settings** - Brand profile editor

## Assets Panel

Browse and manage project assets:

* Click thumbnails for full-screen preview (temporary, no timeline disruption)
* Import PNG/JPEG, static or animated SVG, GIF, MP4, WebM, MOV/M4V, and Lottie files
* See explicit browser/renderer warnings when an animated format cannot be frame-seeked or decoded
* Organized folder structure showing audio and visual assets
* Drag assets directly onto timeline to create clips
* Green drop indicator shows where clips will be placed

The Media panel has two tabs: **Assets** and **Presets**.

## AI Config

The **AI Config** rail item (AI/Bot icon) manages the knowledge the in-app assistant uses. It has two sections:

* **Skills** — Lists the built-in skills (`write-motionly`, `motion-graphics`, `svg-motion`, `animated-assets`, `motionly-rules`), shows their descriptions, and lets you enable/disable each and read its instructions. Enabled skills load their instructions into the assistant context, which replaces the need for a per-project AGENTS.md.
* **Context** — Previews exactly what the assistant currently knows: how many skills are enabled, whether a brand profile is loaded, how many assets are available, and the current project resolution, FPS, duration, and element count.

## Settings

The **Settings** rail item (gear icon) holds the **Brand Profile** — a visual editor for `BRAND.md`: brand name, logo (chosen from imported assets), brand colors (color picker), typography, visual style, motion style, and things to avoid. The editor generates `BRAND.md` automatically and shows a live preview. An optional **Edit Markdown** mode lets advanced users hand-edit the file.

Enabled skills and the brand profile are stored in the browser (like your API key) and automatically added to the assistant's context when you generate `.motion`.

## Timeline Editing

Clips and element layers can be dragged directly on the timeline:

* Drag the middle of a clip to move it in time; a dashed ghost previews where it will land (position and track) and only commits on release. Short clips keep a grabbable center while their edges expose trim handles.
* Drag a clip or layer up or down onto any visual track. There are no content compatibility or overlap restrictions.
* Optional edge/playhead snapping is off by default. Horizontal movement stays on the current layer; the layer changes only when the pointer crosses another row.
* Mouse and touch drag are both supported. Changes write straight into the `.motion` project so they persist on save.

## Timeline Keyframes

When an element with animation is selected, its keyframes appear as amber diamonds on that element's timeline row (animations authored with `from`/`to` show implicit start and end keyframes):

* Drag a keyframe diamond horizontally to change its timing. Dragging the clip body still moves the whole clip — keyframes never interfere with the move/retrack behavior.
* Select a keyframe to open its easing control in the Properties panel and set the easing for the transition into that keyframe (Linear, Ease In/Out/In-Out, Smooth, Back, Elastic — the GSAP eases Motionly supports).
* Add a keyframe with the green “+” affordance at the playhead on the selected row (or “Add at playhead” in Properties), and delete one by right-clicking its diamond.
* Keyframe timing and easing edits update the animation immediately and persist into the `.motion` file, so reopening the project preserves them.

## Presets

Browse animation templates:

* Animated GIF preview thumbnails
* Load preset with confirmation dialog (red warning button)
* Presets load as fully editable projects

## Preview

The center panel renders the scene at the project's aspect ratio.

* Click an object to select it
* Drag a selected object to move it. Hold `Shift` while dragging to constrain movement to the dominant axis (horizontal or vertical).
* Drag any of the four corner handles to scale the object proportionally from its center
* Smart snap guides appear as you drag, aligning to canvas edges, canvas center, and the edges and centers of other layers. Hold `Alt` while dragging to bypass snapping for a single move. To disable snapping globally, toggle the magnet button in the timeline toolbar.
* Click empty space to deselect
* Use Fit, zoom, and fullscreen to inspect the canvas

## Properties

The right panel edits the selected layer without requiring source changes.

* Custom polished sliders for smooth value control
* Styled inputs for precise values
* Visual preset cards for animation selection
* Position, scale, width, rotation, transform origin, skew, and opacity
* **Align to canvas** buttons snap the selected layer to the left, horizontal center, right, top, vertical center, or bottom of the canvas in one click
* **Rotation dial** — drag the dial to rotate the selected layer. The dial snaps to the nearest 45° when the pointer is within a few degrees, and the flip button rotates the layer by 180°. With the dial focused, arrow keys nudge rotation by 1°, `Shift` + arrow nudges by 45°, and `Home` resets rotation to 0°.
* SVG fill and stroke overrides for simple path artwork
* Text content, font size, and color
* Scene background color
* Animation preset, duration, delay, and easing

## Timeline

The lower panel contains playback and layer-based clip editing.

* Every visual track behaves as a simple layer. Existing role/content metadata remains compatible but does not change drag behavior.
* Overlaps are allowed and remain visible for the user to arrange.
* Audio stays on the bottom track and drags horizontally to change its persisted start time. Imported audio clips render a normalized waveform preview so you can align beats and dialogue visually.
* Scrubbable ruler and frame-accurate playhead anchor Split and trim operations.
* Drag clips horizontally to change time and vertically to move between visual layers.
* Trim handles work for media, text, images, overlays, and effects.
* Magnet toggles smart snapping for both timeline clips (clip edges and the playhead) and the canvas (layer alignment guides). Trim, delete, and move never ripple other clips.
* Undo/Redo buttons and standard keyboard shortcuts restore serialized `.motion` snapshots.
* Timeline `−`/`+` controls and `Ctrl/Cmd` + wheel/pinch zoom around the pointer.
* Eye and speaker controls persist track visibility and mute state.
* Dragging Assets creates thumbnail clips and writes track/timing metadata automatically.
* The panel divider remains vertically resizable.

## Keyboard Shortcuts

The editor listens for these shortcuts whenever the canvas or timeline has focus. The editor ignores them while you are typing in text inputs.

| Shortcut                   | Action                                  |
| -------------------------- | --------------------------------------- |
| `Space`                    | Toggle playback                         |
| `Home`                     | Reset playhead to the start             |
| `S`                        | Split the selected clip at the playhead |
| `Delete` / `Backspace`     | Delete the current selection            |
| `Arrow keys`               | Nudge the selected layer by one unit    |
| `Escape`                   | Clear selection                         |
| `Ctrl/Cmd` + `S`           | Save the current `.motion` project      |
| `Ctrl/Cmd` + `Z`           | Undo                                    |
| `Ctrl/Cmd` + `Shift` + `Z` | Redo                                    |

## `.motion` Source

The `.motion` button opens the generated source for inspection. Visual editing remains the primary workflow.