Getting started
Quick start
An exported clip in five steps. A new project opens empty on purpose — nothing from the catalogue is in it until you choose something.
1. Run it
npm install
npm run dev # → http://localhost:3000That is the whole setup. Export runs in the browser, so there is no ffmpeg to install and no key to configure.
2. Pick a motion
Open Templates in the left bar and choose a family, or go through the preset cards on The Library page and click a card — it opens the editor with that preset already applied. Picking a preset resets its controls to the values it was authored with, and some families also pin the clip length and the canvas shape, because their motion was measured at a specific cadence and only reads right there.
3. Bring your own images
Drop files into Media. Images and video both work — a video card becomes a live texture, not a still. Drag to reorder, set a crop focus per card, and pick a card shape (or leave it on auto, which defers to whatever proportion the preset was built for).
4. Set the frame
Canvas holds the aspect — six presets from 3:4 to 16:9, plus an exact pixel size — the safe-area guides, a logo slot, and the background, which can be a colour, a gradient, an image, or the featured card reflected and blurred behind itself.
Adjust is where the preset’s own controls live, alongside the easing curve. Every family ships with a default curve; the 28 presets cover the standard families plus physics curves, and you can drag your own bezier.
5. Export
Export can write MP4, WebM or GIF at 720p up to 4K when the browser and hardware expose the required encoder and enough memory. It captures from the same scene clock the preview uses. See Export for format support, encoders and the loop rule.
Two things worth knowing early
- Undo covers gestures, not keystrokes. A whole drag, a typed number or a template pick is one step back.
- Projects autosave. Each one is its own storage key, written within half a second of an edit. The Mockup studio saves the same way.
The keys worth knowing
| Key | Does |
|---|---|
Ctrl/Cmd + K | Open the docs search palette. A bare / does the same. |
Ctrl/Cmd + Z | Undo — one whole gesture at a time, not one pixel of a drag. |
Ctrl/Cmd + Shift + Z, or Y | Redo. |
Shift while dragging a slider | Fine adjustment — a grid ten times finer than the step. |
| Arrow keys on a focused slider | Nudge by a step; with Shift, by a tenth. |
Enter on a focused slider | Open the typed field. Escape leaves without writing. |
| Double-click a slider | Back to the control’s declared default. |
Shift while dragging an XY pad | Hold the line the drag is already on. |
Undo and redo are ignored while you are typing in a field, so the shortcut never steals a keystroke from a number you are entering.