Skip to main content

​
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.

​
.motion Source

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