The interface

01What you're looking at

The editor has five regions, and each one answers a different question:

• Top bar — the main menu, your project's name and save state, the scene tools (Audio, Design check, Simulate, ✦ AI), the panel buttons, Preview and Export.
• Left panel — everything that exists in your scene: layers, variables, components, files and icons.
• Canvas — where you draw. The tool strip across the top holds the drawing tools, and its right half fills with options for what you selected (align, boolean, 3D). The small bar at the bottom right controls how you view the scene (zoom, grid, rulers…). When ✦ AI mode is on, a bar under the canvas makes images, video, sound and 3D.
• Right rail — details about what you've selected: Properties and Sentences — and, when ✦ AI mode is on, the ✦ AI tab.
• Timeline — the bottom strip where animation and scroll live.

Your first look: the empty scene

A new scene isn't a blank gray void — the canvas walks you through your first three moves: draw a card (R), add a sentence in Sentences, pick a verb. Draw anything and the hints get out of your way.

02The top bar

The top bar is built like a desktop app: a menu on the left, where you are in the middle, and the tools on the right. Most buttons are icons — hover one and the tooltip gives its name and shortcut.

Left — the menu and your files

Click OmniMotion ▾ for the main menu:

The four icons next to the menu are the everyday ones: Projects, Import file…, Import HTML… and Save. A small dot on the Save icon means there are unsaved changes.

You can also drop an .html file straight onto the canvas — the drop hint reads .html becomes an artboard.

Center — where you are

A breadcrumb: Projects / your project name. Click Projects to go back to the list. The name is editable — click it and type; it becomes the file name when you export a .omni. Next to it, a dot with Unsaved means a change hasn't been written to this project yet; Saved means it has.

Right — scene tools, panels, Preview and Export

Design check and Simulate step aside while an artboard is in Play.

Design check

The Design check button (a check mark) looks over the whole scene the way a careful reviewer would, without AI. A warning-colored number on it counts problems to fix; a plain number, when there is nothing to fix, counts things to consider; no number means nothing measurable is wrong. The tooltip says the same in words.

Click it for the list, grouped by artboard. Each row says Fix or Consider, names the problem and explains it. Show layer selects that layer and brings it into view.

What it looks for:

The list refreshes a moment after you change the scene. It does not run while the timeline plays.

Performance

Performance (a gauge icon) opens a small readout for this scene on this machine:

• Frame — whether the engine is Active or Idle, updates and redraws per second, the Last frame time, and a bar showing how much of a 60 fps frame this scene uses.
• Free-run ceiling — press Measure to run the scene flat out for a moment. The result is the fastest this scene can go here.
• GPU — the graphics card the browser reports. If the browser is drawing without hardware acceleration, a warning says so, and How do I turn it on? gives the steps for your browser, with the settings address to Copy.
• 3D layer — Draw calls, Triangles and Textures, when the scene has a 3D layer.

03Settings

Settings in the main menu (or Ctrl+,, from the Projects screen too) opens Settings: one window for everything you can adjust about the tool. Sections on the left, rows on the right, a search box that finds a row by name.

Every row carries a badge saying where the setting lives: This device (this browser only), Account (follows you), or Scene (saved in the file — those rows point you to the panel that edits them, like Inputs in the top bar).

API keys

AI & Generation has an API keys block: Fal, Claude, Gemini and Stitch (used only when Design source is Google Stitch). Paste a key, press Save (or Enter). The next generation or chat turn uses it — no restart. The field never shows the saved value; a hint reads Saved on this device. Forget removes that key.

Keys live in this browser only. They are not written into the project, autosave, or a .omni. Reset settings leaves them alone. Storage lists every secret name stored here (including keys used as secret:NAME in Data Source headers) with an × to forget one.

If a key is not set, generation falls back to the studio's shared key when that installation has one. On a hosted studio with none, paste yours here.

04The left panel — what's in your scene

Four tabs along the top:

• Layers — the scene tree. The layer in front is at the top of the list, as in other design tools. Every row shows a small glyph for what it is; a text layer that still has its automatic name shows its words instead. Click to select, double-click a name to rename, and use the eye / lock icons that appear on hover to hide or protect a layer. Component masters and instances are drawn in purple; a hidden layer (or one inside a hidden parent) is dimmed.
• Variables — named values you can use in rules and expressions.
• Components — reusable pieces: a main component and its instances. See Components.
• Files — your imported assets (images, video, audio, models, fonts), and a second face, Icons, for placing icons from open icon sets. See Images & video.

Reorganizing layers is a plain drag: drop a layer onto a group or frame to nest it, or near the top or bottom edge of a row to place it before or after. Drag any row of a multi-selection and the whole selection moves, in order, as one undo step. A shape or text can't take children, so you can only drop above or below it. An invalid drop simply does nothing.

With the keyboard, once you click in the tree: ↑ / ↓ move the selection (Shift adds), → opens a group or steps into it, ← closes it or steps to the parent, Enter renames. Arrow keys here never nudge the layer on the canvas. Alt+click a row's arrow to open or close the whole branch; Collapse all sits next to the search field.

When a layer you select sits inside a closed group, the tree opens its parents so you can see it.

Tip: you can also paste an image or an image URL directly onto the canvas — the editor turns it into an image layer.

05The canvas

Drawing tools

The tool strip under the top bar holds the tools. Every tool with a shortcut shows it in its tooltip:

After drawing a shape the editor returns you to Select, so you can immediately adjust what you made. (Bone is the exception — it stays active so you can keep growing the chain.)

The right half of the strip is for the selection: the align, distribute and boolean buttons when layers are selected (Drawing & layers), and the 3D tools when a 3D scene is in focus.

Hover tells you what a click would pick: a thin outline and the layer's name follow the pointer.

Right-click anywhere on the canvas for layer actions. The same menu works on rows in the layer tree. Its first line names what it acts on — the layer, or 3 layers.

Hover a menu item for a one-line explanation. ✦ AI items appear only when they can act on what you clicked.

Right-click empty canvas for a shorter menu: Paste here, Paste in place, Select all, Zoom to fit, Show all, Unlock all, and switches for Layout grids, Rulers and Snap.

The view bar — how you look at the scene

Bottom-right of the canvas:

• Grid (G) — show the pixel grid and snap to it.
• Snap — align to guides and nearby layers while dragging. Hold Ctrl mid-drag to temporarily ignore snapping.
• Rulers — drag out of a ruler to place a guide.
• Artboard edges — a hairline around every artboard, so its bounds read even on a matching background.
• Motion handles — show the pivot point, axis arrows and rotation ring on the selection, for animation work. Off (the default), you get design handles only and can drag anywhere inside a shape to move it. See The transform handles.
• Halo (Tab) — float the selected layer's key parameters right next to it on the canvas, so small tweaks don't require a trip to the Properties panel.
• Physics colliders — outline physics bodies, when your scene uses physics.
• Readout — the cursor position (or a selected 3D object's position).
• Zoom — Ctrl + / Ctrl -, click the percentage to jump back to 100% (Ctrl 0), or Fit everything (Shift+1).

None of these change your design — they only change how you're looking at it. Your view preferences are remembered between sessions. Layout grids has its own switch in the empty-canvas menu and Ctrl+Shift+4.

On-canvas controls

Select a page (an artboard at the top level), a component or an instance, and a small pill appears above it:

• Play — run this artboard live, right on the canvas: interactions respond, scrolling scrolls. Editing chrome gets out of the way while play mode is on.
• Master — mark the artboard as a main component. Once instances use it, the button locks; detach them first to turn it back into a frame. See Components.

A frame inside a page has no pill, so it never covers the design around it.

06The right rail — details of your selection

The right rail is tabbed. Properties shows everything about the selected layer; Sentences lists its interactions in plain language; when ✦ AI mode is on, a ✦ AI tab comes first — ask, act on the selection, and see everything AI made.

Properties	Sentences

A few things worth noticing in Properties (the full story is Properties & styling):

• Design / Motion — Design (the default) keeps the panel to design rows; Motion adds keyframe badges, deform, interactions and physics.
• The search field jumps straight to any property — type "shadow" instead of scrolling.
• Changed shows only the sections that differ from their defaults.
• All · Layout · Shape · Style · Behavior narrow the panel to one kind of section.
• + Add at the bottom is where a layer grows new abilities: effects, layout, repeaters, physics and more.

Sentences reads every interaction as one plain-language row — "when tapped, play a sequence…" — with a detail editor beside it. Hover a row and the two layers it connects are outlined on the canvas, with a line between them.

07The timeline

The bottom strip is where time lives:

From left to right: play / stop, Auto Key, the marker button, the view tabs, ♪ + Audio, the current sequence (a named timeline — a scene can have many), the duration, and a readout of time · frame · zoom. Wheel to scrub the ruler, Alt+wheel to zoom, arrow keys to step one frame (Shift = 10), F to fit.

The view tabs are labeled: Keys (every keyframe on a time strip), Curves (the value over time, for shaping easing), Sequences (order, transitions and the graph of sequences) and Scroll (sections and snap points along an artboard's scroll). With ✦ AI mode on, a ✦ Storyboard tab joins them. Hover a tab for its one-line description. They are covered in Timeline & animation; the Scroll tab in Scroll participation, sections & snaps.

08Making room

The canvas is squeezed from three sides, and sometimes you want the space back. The three panel buttons in the top bar show or hide the layers panel, the timeline and the properties panel — a filled icon means the panel is shown, an outlined one means it is hidden. Hover a button and the tooltip names its shortcut:

The same from the keyboard:

A collapsed panel leaves a thin labeled strip at the edge — click it to reopen. You can never "lose" a panel.

To resize instead of collapse, drag the divider between a panel and the canvas.

The layout remembers you: collapsed panels stay collapsed next session.

09Your work is safe

• Autosave runs every few seconds in the background. If the browser crashes or you accidentally close the tab, the project holds the last autosave.
• Closing with unsaved changes pops a confirmation first.
• Importing a file over unsaved work asks first — and a broken file shows an error instead of a blank screen.
• Deleting shows a toast with an Undo button; Ctrl+Z works too, and a whole multi-layer delete is one step.
• Even if a panel crashes, the rest of the editor keeps working and your scene stays intact — a crashed area offers to save your scene before reloading.
• The tiny dot at the very bottom-right corner of the window is the engine's pulse: it breathes while the engine is working and rests when idle. If it's breathing, the tool is alive. For numbers, open Performance.

10Shortcut reference

Shortcuts never fire while you're typing in a text field — renaming a layer won't accidentally close a panel. The full list, including selection, editing, 3D and the timeline, is Keyboard shortcuts — or press ? in the editor.