---
title: UI guide
description: 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
- Drag corner handles to scale it
- 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
- 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 optional clip-edge/playhead snapping only; 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.