Quiet tools, so the motion gets the attention.

Voice

Plain, brief and calm. The interface talks to you like a good editor sitting next to you: it names the action, says what happens, and gets out of the way.

• Sentence case everywhere

  Buttons, menus, headings and tabs. Only names keep their capitals: Claude, Mootionblue, MP4.

• Lead with the verb

  A button says what it does: “Export video”, “Upload a recording”, “Create connection command”.

• No exclamation marks

  Success is shown, not shouted. A toast says what changed and how to undo it.

• Talk to “you”

  Never “the user”. Avoid “we” in errors; say what happened and what to do.

• Errors say how to fix it

  Start with “Unable to …”, then the next step: “Check your connection and try again.”

• Empty states point forward

  Say what goes here and how to add it, right where it would appear.

• “No projects yet. Start one above, or drop a .mootion file anywhere.”Home, empty
• “No effects yet. Add one with ✦ in the toolbar.”Timeline, empty lane
• “Exports the whole video. To export part of it, set marks with I and O.”Export
• “Unable to save folders and pins. Check your connection and try again.”Error
• “Choose a file smaller than 100 MB.”Upload error
• “The story, audience and feel. Claude reads the brief before every edit.”Project brief hint

Motion

The product makes motion, so the interface moves less than the work. Every animation explains a change; none of them decorate.

• Spring for things that appear

  Menus, cards, toasts and pressed keys use --spring: a small overshoot that makes them feel physical.

• Ease for things that move

  Tabs, sliders, fills and colour changes use --ease: quick out, soft landing, no bounce.

• Short and close

  0.15–0.42s. Entrances travel 6–8px and scale from 96–98.5%, so nothing flies across the screen.

• Never block the edit

  Animations can be interrupted; a second press wins. The playhead and drags follow the pointer with no easing at all.

• Respect reduced motion

  With prefers-reduced-motion, travel and scale go; short fades stay so state changes are still visible.

• Stagger lightly

  Inspector cards enter 35ms apart. More than that and the panel feels slow to open.

See the curves and durations in Foundations

Density

Calm by default, dense where the work is. The stage gets the space; controls sit close to it at a compact, readable size.

• 13px base, 36px rows

  Inspector rows are 36px with 72px labels; keys are 40px, small keys 32px. That fits a full Style panel without a wall of controls.

• One 400px inspector

  Everything about the selection lives in one column with tabs, so your eye only moves between the stage and one panel.

• Fold what you rarely need

  Cards fold. Advanced controls stay one click away instead of always on screen.

• Go dense on the timeline

  Tracks, ruler and clips can pack tight; they are scanned, not read. Text panels and Home stay roomy.

• Steady numbers

  Times and values use tabular figures and fixed widths, so nothing jumps while you scrub.

• One accent at a time

  Blue marks selection and the primary action; orange is kept for Claude and the brand. Colour on the timeline belongs to the content.

Accessibility

A motion editor has to work with a keyboard, a screen reader and reduced motion, not only a mouse.

• Visible focus

  A 2px --accent ring, 2px out, on every focusable control via :focus-visible. Fields swap it for a 2px inner ring.

• 4.5:1 for text

  Readable text meets 4.5:1; --ink-3 is only for units, placeholders and icons beside a label. Check the pairs.

• Keyboard for everything

  Every command is in the palette (⌘K) and the shortcuts sheet (⌘/), where any key can be rebound.

• Labels, not placeholders

  Every field has a visible label; placeholders show an example, like “e.g. Meet the faster way to make motion.”

• Hit areas of 28px and up

  Dense tool rows keep 28px targets at least; tools in the timeline bar are 40px. Icon-only buttons carry an aria-label and a title with the shortcut.

• Motion is optional

  Reduced motion removes travel and loops; previews still play only when you press play.

References by proposal

What inspired each direction on the Proposals page. These are links with notes; nothing from these products is shown on this site.

Research

Screens and flows studied on Mobbin, and sites browsed, with the one thing each taught us.

Mobbin

• Descript, editorA script and the timeline as two views of one edit; the AI co-editor docked on the right.
• Jitter, motion editorA light canvas with a slim layer list and a playhead pill; presets shown as animated tiles.
• Synthesia, scene editorScenes in a left strip and animation set per element in a right inspector.
• VEED, editorColour-coded tracks by media type and a big, friendly icon rail.
• Framer, agent panelA floating bottom toolbar on a bare canvas, with the agent as a tab beside style.
• Framer, projectsA quiet sidebar of folders and a large thumbnail grid; folder creation inline.
• FLORA, projectsAn all-black gallery where the work is the only colour on screen.
• Lovable, log inForm on the left, a live product moment on the right instead of stock art.
• Frame.io, sign inOne email field and one button; the brand carried by a single light streak.
• Magnific, command paletteRecents first, then actions with key caps, and a footer that teaches the keys.
• Descript, export flowExport as a popover from the top bar, with progress reported in place.

Sites browsed

• jitter.videoMotion design pitched in one line, with the product doing the talking.
• rive.appA dark, technical stage for interactive motion; mono labels and a confident grid.
• linear.appDense information that still feels calm: tight type, hairlines and restrained colour.
• raycast.comCommand-first: one input that reaches every action, with key caps as first-class UI.
• capcut.comThe consumer editor baseline; its effect and transition catalogue shaped our libraries.
• runwayml.comGenerative video framed cinematically: full-bleed media, minimal chrome.
• Dribbble: video editor UIConcept editors with floating glass bars and timeline-first layouts.
• Dribbble: motion design tool UIPlayful, colourful takes on keyframes and clips, useful for the bolder directions.
• Pinterest: video editor UI, darkPro editors on graphite: dense multi-pane layouts and coloured track lanes.