From a6ec6c980a3bfc57eca65e9281f0cccc4f02717b Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 12 Aug 2026 12:58:51 +0200
Subject: [PATCH] fix: audit src/js and add a frame-accurate export path

Two halves of one pass; TODO-FIXES.md lists every finding.

The audit fixed, among ~90 items: MP4 export dead-ending and locking the UI
behind a stuck "Downloading..." button; height keyframes storing the width;
shadow defaults and keyframes storing undefined because fabric's get() is not
a path getter; every letter animation writing to the last letter; keyframe
times drifting on each drag because data-time was layer-relative on expanded
rows; O(n^2 log n) playback, now indexed once per frame; and a save() that
rebuilt the record canvas on every edit, now debounced.

Exports also lost audio-layer sound outright: MediaRecorder records only the
first audio track, so every source now mixes through one AudioContext into one
destination.

The new half is src/js/render.js, an offline renderer. Real-time capture was
the root cause of dropped frames on heavy scenes and smeared video layers: a
bare currentTime assignment is async, so drawing straight after it captures the
previous frame. Each frame is now seeked, awaited on 'seeked', drawn, and
pushed through a VideoEncoder; audio is mixed in one OfflineAudioContext pass
and encoded to Opus. webm-writer2.js gained a second Opus track and lost three
bugs, including a MAX_CLUSTER_DURATION_MSEC of ~58 days that overflowed the
signed 16-bit block timecode past ~32s.

Real-time capture remains the fallback: the hand-rolled muxer's output is
decoded in a <video> element before being handed over, and any failure returns
null so record() falls back transparently.

test/webm-muxer.test.js parses the muxer output with an EBML reader in plain
Node. It caught the fixed-256-byte header overflow that inspection missed.

Not verified in a browser: node --check passes on every script and the muxer
test passes, but a running Chrome held the Playwright profile lock, so the
manual pass listed at the end of TODO-FIXES.md is still outstanding.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 TODO-FIXES.md           |  273 ++++++
 src/index.html          |   46 +-
 src/js/align.js         |   29 +-
 src/js/converter.js     |  114 ++-
 src/js/database.js      |  148 ++-
 src/js/events.js        |  269 +++---
 src/js/functions.js     | 1958 +++++++++++++++------------------------
 src/js/init.js          |  110 ++-
 src/js/lottie.js        |    2 +-
 src/js/recorder.js      |  540 +++++------
 src/js/render.js        |  515 ++++++++++
 src/js/text.js          |   48 +-
 src/js/ui.js            |  265 ++++--
 src/js/webm-writer2.js  |  143 ++-
 src/styles.css          |   98 +-
 test/webm-muxer.test.js |  286 ++++++
 16 files changed, 2934 insertions(+), 1910 deletions(-)
 create mode 100644 TODO-FIXES.md
 create mode 100644 src/js/render.js
 create mode 100644 test/webm-muxer.test.js

diff --git a/TODO-FIXES.md b/TODO-FIXES.md
new file mode 100644
index 0000000..6aa3a8e
--- /dev/null
+++ b/TODO-FIXES.md
@@ -0,0 +1,273 @@
+# Bugs & Issues — audit + fixes
+
+Audit of `src/js`, then all findings fixed. Every file below passes `node --check`.
+No live browser smoke test was run (a Chrome instance held the Playwright profile
+lock), so the changes are verified statically only — see **Not verified** at the end.
+
+Legend: `[x]` fixed · P0 = feature broken · P1 = wrong data written · P2 = crash on edge path · P3 = silently wrong UI · P4 = perf/leak · P5 = cleanup
+
+---
+
+## P0 — Broken features
+
+- [x] **MP4 export dead-ended and locked the UI** — `src/js/functions.js`
+  The mp4 branch of `downloadRecording` was `type = 'video/mp4'`, an implicit global
+  assignment that did nothing: no download, `recording` stuck at `true`, the button
+  stuck on "Downloading...", and `downloadModal()` refusing to reopen until reload.
+  mp4 now goes through `convertStreams(blob, 'mp4')` like gif, and a new shared
+  `resetRecordingUI()` unlocks the editor on every exit path (success, unknown
+  format, worker error, FileReader error, `MediaRecorder` error).
+
+- [x] **Copying keyframes threw** — `src/js/events.js`
+  `canvas.getActiveObject().isEditing` ran on `null`, because selecting keyframes
+  clears the canvas selection — the normal path. The active object is now resolved
+  once and guarded, and empty `$.grep` results are no longer pushed to the clipboard.
+
+- [x] **`canvas.getItemByid` typo** — `src/js/functions.js`
+  Lowercase `i`; TypeError when pasting text/`charSpacing` keyframes.
+
+- [x] **Ctrl+Z crashed on an empty stack; Ctrl+Shift+Z was a no-op** — `src/js/events.js`
+  Merged into one guarded handler: shift picks redo, and each branch checks its own
+  stack length. Previously Ctrl+Shift+Z matched both `if` blocks (redo then undo).
+
+- [x] **Blur slider threw with nothing selected** — `src/js/events.js`
+  `obj.applyFilters()` was outside the `if (canvas.getActiveObject())` guard. Also
+  renamed the shadowed `x` in the blur/noise/chroma `find()` callbacks.
+
+## P1 — Wrong values written
+
+- [x] **`height` keyframes stored the width** — `src/js/functions.js` (3 sites: twice in `keyframeChanges`, once in `crop`)
+- [x] **`var scaleX = obj, scaleX;`** — `src/js/text.js`; the fabric object was being assigned as a scale factor.
+- [x] **NaN letter delay + shadowed global `duration`** — `src/js/text.js`
+  `delay = i * duration` read the hoisted local before its own initialiser. Renamed
+  to `step`, computed before use, and `!(delay > 0)` now catches NaN.
+- [x] **Every letter animation wrote to the last letter** — `src/js/text.js`
+  `index`, `animation`, `start` and `instance` are `let` per iteration instead of `var`.
+- [x] **Shadow defaults/keyframes stored `undefined`** — `src/js/functions.js`
+  fabric's `get()` is not a path getter. Added `getPropValue()` (handles `shadow.*`)
+  and `setDefaultValue()` / `getDefaultValue()`, and routed ~26 direct
+  `.defaults.find(...).value = …` writes through them — which also creates the entry
+  when a project predates a property instead of throwing.
+- [x] **WebGL filter backend clobbered with `undefined`** — `src/js/init.js`, `src/js/database.js`
+  Both assignments are now conditional on the backend having constructed.
+
+## P2 — Crashes on edge paths
+
+- [x] **`RangeError: Invalid array length`** — `src/js/functions.js`
+  `temparr.length = findIndex(...)` went negative for a stale keyframe reference.
+  `lastKeyframe` / `nextKeyframe` are now index lookups that return `false`.
+- [x] **`animate()` had no null guards** — `src/js/functions.js`
+  Object and `p_keyframes` lookups are resolved once and guarded in every per-frame
+  loop (`animate`, `recordAnimate`, the playback update loop, `playVideos`,
+  `playAudio`), which also removed dozens of repeated `.find()` calls.
+- [x] **`getAssets()` recursed synchronously forever** — `src/js/database.js`
+  Retries on a 250 ms timer, capped at 20 attempts, and rebuilds the asset arrays
+  instead of appending duplicates on re-entry after an import.
+- [x] **`deleteObject` threw and leaked `files`** — `src/js/functions.js`
+  The entry was compared to a string so it never matched; now filtered by `name`.
+  Video elements are also paused and unloaded on delete.
+- [x] **Unguarded `keyarr[0]` / `.defaults.find(...)`** — `copyKeyframes`, `updateKeyframe`,
+  `applyEasing`, `keyframeProperties`, `removeKeyframe`, `checkAnyKeyframe`.
+  The four repetitive counterpart blocks were replaced by one
+  `KEYFRAME_COUNTERPARTS` map, so a missing counterpart is skipped, not fatal.
+- [x] **Other unguarded lookups** — `deleteAsset`, `reGroup`, `renderLayer`,
+  `renderProp`, `setDuration`, `setTimelineZoom`, `saveLayerName`, `updateInputs`,
+  `updatePanel`, `updateStrokeValues`, `animateText`, `scrollIntoView` (3 sites),
+  `object:modified` / `object:rotating` / `mouse:out` / `mouse:up` handlers.
+  `importProject` validates the payload before touching `data.project[0]`, and
+  `line_h`/`line_v` go through a new `hideGuides()` helper.
+
+## P3 — Silently wrong behaviour
+
+- [x] **`document.onmousedown` permanently disabled** — `src/js/functions.js`
+  `dragTimeline` installed a `return false` handler and never removed it. It now
+  only overrides `onselectstart`, and restores it on mouseup.
+- [x] **Keyframe time drifted on every drag** — `src/js/functions.js`
+  `data-time` is now always the absolute timeline time (the value every lookup keys
+  off), with the visual offset applied as CSS only. This also fixes keyframes on an
+  *expanded* row, whose `data-time` used to be layer-relative so no lookup matched.
+  `updateKeyframe`'s unused third argument is gone.
+- [x] **Shift-deselect never removed a keyframe** — `this` inside a `$.grep` callback is not the element.
+- [x] **`e.shiftDown`** → `e.shiftKey`.
+- [x] **Snap guide never hid** — the row-local index was compared against the global `.keyframe` count.
+- [x] **Comparison / typo bugs**
+  `canvas.getActiveObjects.length` → `getActiveObjects().length` ·
+  `strokeDashArray == [10, 5]` → element comparison ·
+  chroma `setValue(distance)` → `distance * 100` · `'#FFFFF'` → `'#FFFFFF'` ·
+  `videoPlayer.videoheight` → `videoHeight` (and both thumbnail helpers no longer
+  draw the canvas onto itself) · `if (start && play && !paused)` in `playAudio`
+  (`play` is the global function, always truthy) · `#redo` gated on `redo.length` ·
+  `:last-child()` → `:last-child`.
+- [x] **Paste loop closure** — `var imgObj` → `let`, so each thumbnail saves its own file.
+- [x] **Layers added mid-timeline were shortened** — `end: duration - currenttime` → `duration`
+  (media layers clamp to `min(start + assetDuration, duration)`).
+- [x] **Malformed HTML** — 5 unterminated `<img …'` strings and a stray `</div>` in `src/js/ui.js`.
+- [x] **Duplicate DOM ids** — `id="easing"` on both wrapper and `<select>` (the select
+  is now `easing-select`; `#easing select` still matches), `id="filters-title"` ×4 and
+  `id='item-text'` ×6 became classes, with `src/styles.css` updated to match.
+  Added the missing `<meta charset>`.
+
+## P4 — Performance, leaks, export gaps
+
+- [x] **`save()` rebuilt the record canvas on every edit** — `src/js/functions.js`
+  `updateRecordCanvas()` + `autoSave()` now run through a 400 ms debounce
+  (`schedulePersist`). `record()` still awaits `updateRecordCanvas()` directly, so an
+  export always captures current state. `updateObjectValues` no longer calls
+  `autoSave()` on every keystroke.
+- [x] **`async forEach` raced the snapshot** — `src/js/functions.js`, `src/js/database.js`
+  Both filter-stripping loops are sequential `for…of` in `async` functions, so
+  `toJSON` / `toDatalessJSON` can no longer run mid-strip.
+- [x] **O(n²·log n) playback** — `src/js/functions.js`
+  `buildKeyframeIndex()` groups keyframes by `id|name` once per rendered frame;
+  `lastKeyframe`, `nextKeyframe` and `checkAnyKeyframe` use it instead of sorting a
+  copy of the entire keyframe list per keyframe per frame. The two duplicated inner
+  `nextKeyframe` copies are gone.
+- [x] **Exports lost audio-layer sound** — `src/js/recorder.js`
+  Audio layers were never routed into the capture stream. All sources (video
+  elements, audio layers, background audio) now mix through **one** AudioContext
+  into **one** destination track — necessary because `MediaRecorder` only records
+  the first audio track. Audio layers start/stop on their `p_keyframes` boundaries.
+- [x] **Export timing** — `src/js/recorder.js`
+  The render clock starts after `recorder.start()` (it used to run before, losing the
+  first frames), stops when the animation clock covers `duration` rather than on a
+  wall-clock `setTimeout`, and has a `duration + 5s` safety stop.
+- [x] **Leaks** — AudioContexts are closed and stream tracks stopped on export end;
+  object URLs are revoked (`downloadRecording`, `PostBlob`, `exportProject`,
+  `importProject`); the browser scroll handler is unbound before rebinding; `sortable`
+  is initialised once instead of per rendered layer; deleted videos are paused and
+  unloaded; category/audio grids are cleared before repopulating.
+
+## P5 — Dead code, config, cleanup
+
+- [x] **Unreachable code calling an undefined `waitForEvent`** — `src/js/recorder.js`
+  `initRecorder` / `recordFrame` / `exportRecording` and ~180 lines of commented-out
+  abandoned experiments were removed; the file is now just the live export path.
+- [x] **Placeholder API keys** — `src/js/init.js`
+  `HAS_FONTS_KEY` / `HAS_PIXABAY_KEY` gate the requests. Without a fonts key the
+  pickers fall back to the bundled families instead of staying empty; without a
+  Pixabay key search shows an explanatory message instead of 401-ing.
+- [x] **`var timeout` collided with `recorder.js`'s `timeout()`** — removed (it was unused).
+- [x] **Implicit globals** — `srcfreeze`, `osc`, `type`, `newcolorkeyframe` (deleted, never read).
+- [x] **Duplicate / unreachable branches** — the second `shadow.blur` arm in all three
+  `setValue` copies, the duplicated `objectCaching` key, the three copies of the
+  keyframe sort comparator (now `sortKeyframes()`), and the two identical crop blocks
+  in `events.js` (now `updateCropBounds()`).
+- [x] **Converter was unfinished** — `src/js/converter.js`
+  The `workerReady` handshake never fired (`buffersReady` was never set); worker
+  readiness is now tracked across calls, since the worker is created once and reused.
+  Added `onerror` handling, an empty-result guard, and a user-visible failure path.
+- [x] **Misc** — `overlay()` no longer reuses the artboard's `overlay` id ·
+  `getItemById` recurses so nested groups are found and stops at the first hit ·
+  `fabric.Lottie` guards `this.canvas` before the object is added ·
+  `newLottieAnimation` no longer multiplies an ms duration by 1000 ·
+  lottie layers get a colour · `calculateTextWidth` honours the requested font ·
+  `changeFont` / `loadImage` / `loadVideo` / `handleLottieUpload` have failure paths ·
+  `checkFilter` no longer tests for a non-existent `video` fabric type ·
+  `AnimatedText.assignTo` applies `text`/`props` · `animate(currenttime, false)` →
+  `animate(false, currenttime)` (3 sites — text animation changes never refreshed) ·
+  `exportProject` uses a Blob instead of a `data:` URL · `clearProject` reloads after
+  the deletes resolve · `readTextFile` handles blob-URL status 0 and errors ·
+  `.catch` added to the Localbase promises · opacity inputs clamp the input, not the
+  wrapper · arrow-key nudge calls `setCoords()` and is suppressed while typing ·
+  layer reorder shortcuts accept Ctrl as well as Cmd · alignment guides ignore hidden
+  objects · `alignObject` saves and dropped its `console.log`.
+
+---
+
+---
+
+# Frame-accurate export (new)
+
+The real-time capture path was the root cause of "heavy scenes drop frames" and
+"video layers are sampled at the wrong moment". It is now the *fallback*, not the
+default.
+
+## `src/js/render.js` — offline renderer
+
+No clock is attached to the render. For each of `duration × 30` frames:
+
+1. every video layer is seeked to the exact frame time and the code **awaits
+   `seeked`** before drawing (a bare `currentTime =` is async — drawing straight
+   after captures the *previous* frame, which is why real-time exports smeared
+   video layers);
+2. lottie layers are advanced to the same time;
+3. `recordAnimate(time)` lays out the frame, `canvasrecord.renderAll()` draws it;
+4. a `VideoFrame` is built from the canvas with an explicit timestamp and pushed
+   through a `VideoEncoder` (VP9, falling back to VP8), with the encoder queue
+   held at ≤ 8 frames so memory stays bounded.
+
+Audio is mixed in one `OfflineAudioContext` pass — every audio layer, every video
+layer's soundtrack and the background track, each placed at its own
+`start`/`trimstart`/`end` with its own gain — then encoded to Opus with
+`AudioEncoder`. Sample-accurate, and unlike the live path it does not depend on
+playback keeping up.
+
+Both tracks are sorted by timestamp and muxed into one WebM.
+
+`recordAnimate()` skips `playVideos()` while `offlinerender` is set, so real-time
+playback cannot fight the explicit seeking.
+
+## `src/js/webm-writer2.js` — extended
+
+Was single-track video only, and unreferenced by `index.html`. Now loaded, and:
+
+- optional second **Opus** track (`A_OPUS` + 19-byte `OpusHead` CodecPrivate,
+  `CodecDelay`, `SeekPreRoll`, `Audio` element with sample rate/channels);
+- `addFrame(chunk, trackNumber)` accepts `EncodedAudioChunk` as well as
+  `EncodedVideoChunk`; `addFrameToCluster` no longer hardcodes track 1.
+
+Three bugs fixed in the vendored library along the way:
+
+- **`MAX_CLUSTER_DURATION_MSEC` was `5000000`** (~58 days), so every frame went
+  into a single cluster and block timecodes — a signed 16-bit offset — overflowed
+  past ~32 s. Now 5000 ms, and clusters close on a video keyframe.
+- **The header buffer was a fixed 256 bytes**, which a second `TrackEntry`
+  overflows (`ArrayBufferDataStream's pos lies beyond end of buffer`). Now 1024.
+- **`instanceof Uint8Array`** for byte payloads fails across a realm boundary;
+  `ArrayBuffer.isView` is now accepted too.
+
+## Safety net
+
+The muxer is hand-rolled, so `renderFrameAccurate()` loads the finished blob into
+a `<video>` element and checks it decodes before handing it over. Any failure —
+no WebCodecs, unsupported codec, encoder error, failed verification — returns
+`null` and `record()` transparently falls back to the real-time encoder.
+
+## Tests — `test/webm-muxer.test.js`
+
+Runs in plain Node (no deps): `node test/webm-muxer.test.js`
+
+Loads the muxer in a VM context, feeds fake encoded chunks, then parses the
+resulting bytes with a small EBML reader and asserts the EBML header, Segment,
+one or two `TrackEntry` with the right `CodecID`/`TrackType`, a 19-byte
+`OpusHead`, multiple clusters, every block present on the right track, block
+timecodes inside signed 16-bit range, ascending cluster timecodes, and that
+`cluster timecode + block timecode` reconstructs the input timestamps to within
+1 ms. Covers video-only and video+audio at 75 s (13 clusters, 3000 blocks).
+
+Both cases pass. The 256-byte header bug above was caught by this test, not by
+inspection.
+
+---
+
+## Left in place deliberately
+
+- **`src/js/encode-worker.js`** is still unreferenced. It was the old
+  File-System-Access-API sketch; `render.js` supersedes it and buffers to memory
+  instead of requiring a save-file picker. Deleting it is a product decision.
+- **MP4 and GIF** still go through the ancient asm.js ffmpeg worker
+  (`converter.js`, loaded from archive.org). The frame-accurate renderer feeds it
+  a better WebM, but that dependency is unchanged and may be offline.
+
+## Not verified
+
+`node --check` passes on every script; the muxer is covered by the Node test
+above. The app itself was **not** loaded in a browser (a running Chrome instance
+held the Playwright profile lock), so the following still needs a manual pass:
+
+1. `cd src && python -m http.server 8765`, open `http://localhost:8765`
+2. Add a shape, keyframe it, drag the keyframe, scrub, undo/redo
+3. Export as WEBM with a video layer and an audio layer present — confirm the
+   console shows `Rendering n%` (frame-accurate path) and not
+   `Falling back to the real-time encoder`
+4. Play the result: check audio is in sync and the video layer is not smeared
diff --git a/src/index.html b/src/index.html
index 7c28ffa..c180706 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+        <meta charset="utf-8">
+        <!-- Third-party assets live in vendor/ so the app works offline. -->
+        <!-- Run `npm run vendor` to populate that directory. -->
+        <link rel="stylesheet" href="vendor/inter.css">
         <link rel="stylesheet" href="nice-select.css">
         <link ref="stylesheet" href="range-slider.min.css">
         <link rel="stylesheet" href="magic-check.min.css">
         <link rel="stylesheet" href="styles.css">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
+        <link rel="stylesheet" href="vendor/pickr-nano.min.css"/>
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-        <link rel="icon" type="image/x-icon" href="/favicon.ico">
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
 				<!-- Primary Meta Tags -->
 <title>Motionity - The web-based motion graphics editor for everyone</title>
 <meta name="title" content="Motionity - The web-based motion graphics editor for everyone">
@@ -79,6 +81,18 @@
 							<input class="magic-radio" type="radio" name="radio" value="image" id="image-format">
               <label for="image-format">Image</label>
             </div>
+            <div id="framerate-row">
+              <p class="subheader">Frame rate</p>
+              <select id="framerate">
+                <option value="12">12 fps</option>
+                <option value="15">15 fps</option>
+                <option value="24">24 fps</option>
+                <option value="25">25 fps</option>
+                <option value="30" selected>30 fps</option>
+                <option value="50">50 fps</option>
+                <option value="60">60 fps</option>
+              </select>
+            </div>
             <div id="download-real">Download</div>
         </div>
 				<div id="import-export-modal">
@@ -168,7 +182,7 @@
 						<div id="filters">
 							<div id="filters-container">
 							<div id="filters-header">
-								<div id="filters-title">Filters</div>
+								<div class="filters-title">Filters</div>
 								<img src="assets/close.svg" id="filters-close">
 							</div>
 							<select id="filters-list">
@@ -183,7 +197,7 @@
 								<option value="Polaroid">Polaroid</option>
 							</select>
 							<hr>
-							<div id="filters-title">Adjustments</div>
+							<div class="filters-title">Adjustments</div>
 							<div id="reset-filters"><img src="assets/repeat.svg"> Reset</div>
 							<div class="filter-row">
 								<th class="name-col">Brightness</th>
@@ -216,7 +230,7 @@
 								</th>
 							</div>
 							<hr>
-							<div id="filters-title">Chroma key</div>
+							<div class="filters-title">Chroma key</div>
 							<div class="filter-row">
 								<th class="name-col">Status</th>
 								<th class="value-col">
@@ -242,7 +256,7 @@
 								</th>
 							</div>
 							<hr>
-							<div id="filters-title">Stylize</div>
+							<div class="filters-title">Stylize</div>
 							<div class="filter-row">
 								<th class="name-col">Noise</th>
 								<th class="value-col">
@@ -289,7 +303,7 @@
             <div id="keyframe-properties">
                 <div id="easing">
                     <p class="property-title">Keyframe easing</p>
-                    <select id="easing">
+                    <select id="easing-select">
                         <option value="linear">Linear</option>
                         <option value="easeInQuad">Ease in</option>
                         <option value="easeOutQuad">Ease out</option>
@@ -366,16 +380,16 @@
         <video id="test-video"></video>
         <input id="emptyInput" value=" " style="opacity:0">
 				<script src="js/libraries/localbase.js"></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@simonwep/selection-js/lib/selection.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+				<script src="vendor/lottie.min.js"></script>
+        <script src="vendor/selection.min.js"></script>
+        <script src="vendor/jquery.min.js"></script>
         <script src="js/libraries/sortable.min.js"></script>
         <script src="js/libraries/range-slider.min.js"></script>
         <script src="js/libraries/jquery.nice-select.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script>
+        <script src="vendor/pickr.min.js"></script>
+        <script src="vendor/fabric.min.js"></script>
         <script src="js/libraries/anime.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+        <script src="vendor/webfont.js"></script>
         <script src="js/init.js"></script>
         <script src="js/ui.js"></script>
         <script src="js/align.js"></script>
@@ -383,6 +397,8 @@
 				<script src="js/database.js"></script>
 				<script src="js/lottie.js"></script>
 				<script src="js/text.js"></script>
+				<script src="js/webm-writer2.js"></script>
+				<script src="js/render.js"></script>
 				<script src="js/recorder.js"></script>
         <script src="js/functions.js"></script>
         <script src="js/events.js"></script>
diff --git a/src/js/align.js b/src/js/align.js
index c59eaa6..c078f8e 100644
--- a/src/js/align.js
+++ b/src/js/align.js
@@ -78,6 +78,20 @@ function initLines() {
   canvas.add(line_v);
 }
 
+// Hide the alignment guides after a canvas reload.
+// They can be missing entirely in projects saved before they existed, so
+// never dereference them directly.
+function hideGuides(inst) {
+  const h = inst.getItemById('line_h');
+  const v = inst.getItemById('line_v');
+  if (h) {
+    h.set({ opacity: 0 });
+  }
+  if (v) {
+    v.set({ opacity: 0 });
+  }
+}
+
 function alignControls(object, type) {
   if (type == 'align-top') {
     object.set(
@@ -122,8 +136,10 @@ function alignControls(object, type) {
 function alignObject() {
   const type = $(this).attr('id');
   const object = canvas.getActiveObject();
-  console.log(canvas.getActiveObject().type);
-  if (canvas.getActiveObject().type == 'activeSelection') {
+  if (!object) {
+    return;
+  }
+  if (object.type == 'activeSelection') {
     const tempselection = canvas.getActiveObject();
     canvas.discardActiveObject();
     tempselection._objects.forEach(function (object) {
@@ -157,6 +173,8 @@ function alignObject() {
     );
     newKeyframe('top', object, currenttime, object.get('top'), true);
   }
+  canvas.renderAll();
+  save();
 }
 $(document).on('click', '.align', alignObject);
 
@@ -240,7 +258,12 @@ function centerLines(e) {
           canvas.renderAll();
         }
       }
-      if (obj != e.target && obj != line_h && obj != line_v) {
+      if (
+        obj != e.target &&
+        obj != line_h &&
+        obj != line_v &&
+        obj.visible !== false
+      ) {
         if (
           obj.get('id') == 'center_h' ||
           obj.get('id') == 'center_v'
diff --git a/src/js/converter.js b/src/js/converter.js
index 83e2668..928555c 100644
--- a/src/js/converter.js
+++ b/src/js/converter.js
@@ -1,7 +1,30 @@
-var workerPath =
-  'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
+// MP4/GIF export transcodes the captured WebM with an asm.js build of ffmpeg.
+// Packaged builds ship it locally (npm run vendor); a plain checkout falls back
+// to the public mirror, which needs network access.
+var FFMPEG_ASM_LOCAL = 'vendor/ffmpeg_asm.js';
+var FFMPEG_ASM_REMOTE = 'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
+var ffmpegAsmUrlPromise = null;
 
-function processInWebWorker() {
+// The worker is built from a blob, so importScripts() needs an absolute URL.
+function resolveFfmpegAsmUrl() {
+  if (!ffmpegAsmUrlPromise) {
+    ffmpegAsmUrlPromise = fetch(FFMPEG_ASM_LOCAL, { method: 'HEAD' })
+      .then(function (res) {
+        // A catch-all/SPA route answers 200 with HTML; that is not the script.
+        var type = res.headers.get('content-type') || '';
+        var local = res.ok && type.indexOf('text/html') === -1;
+        return local
+          ? new URL(FFMPEG_ASM_LOCAL, location.href).href
+          : FFMPEG_ASM_REMOTE;
+      })
+      .catch(function () {
+        return FFMPEG_ASM_REMOTE;
+      });
+  }
+  return ffmpegAsmUrlPromise;
+}
+
+function processInWebWorker(workerPath) {
   var blob = URL.createObjectURL(
     new Blob(
       [
@@ -21,37 +44,62 @@ function processInWebWorker() {
 }
 
 var worker;
+// The worker is created once and reused, so its "ready" handshake only ever
+// arrives for the first conversion. Remember it across calls.
+var workerIsReady = false;
 
-function convertStreams(videoBlob, setting) {
+async function convertStreams(videoBlob, setting) {
   var aab;
-  var buffersReady;
-  var workerReady;
-  var posted;
+  var buffersReady = false;
+  var posted = false;
+
+  function convertFailed(reason) {
+    console.error('Conversion failed: ' + reason);
+    alert(
+      'Sorry, the ' +
+        setting.toUpperCase() +
+        ' conversion failed. The WEBM format is always available.'
+    );
+    resetRecordingUI();
+  }
 
   var fileReader = new FileReader();
   fileReader.onload = function () {
     aab = this.result;
-    postMessage();
+    buffersReady = true;
+    if (workerIsReady) postMessage();
+  };
+  fileReader.onerror = function () {
+    convertFailed('could not read the recorded video');
   };
   fileReader.readAsArrayBuffer(videoBlob);
 
   if (!worker) {
-    worker = processInWebWorker();
+    // Safe to await here: workerIsReady is still false, so the FileReader
+    // callback cannot post a command before the worker exists.
+    worker = processInWebWorker(await resolveFfmpegAsmUrl());
   }
+  worker.onerror = function (e) {
+    convertFailed(e.message || 'worker error');
+  };
   worker.onmessage = function (event) {
     var message = event.data;
     if (message.type == 'ready') {
-      workerReady = true;
+      workerIsReady = true;
       if (buffersReady) postMessage();
     } else if (message.type == 'done') {
-      var result = message.data[0];
+      var result = message.data && message.data[0];
+      if (!result || !result.data) {
+        convertFailed('the encoder returned no data');
+        return;
+      }
       if (setting == 'gif') {
-        var blob = new File([result.data], 'test.gif', {
+        var blob = new File([result.data], 'video.gif', {
           type: 'image/gif',
         });
         PostBlob(blob);
       } else if (setting == 'mp4') {
-        var blob = new File([result.data], 'test.mp4', {
+        var blob = new File([result.data], 'video.mp4', {
           type: 'video/mp4',
         });
         PostBlob(blob);
@@ -59,11 +107,17 @@ function convertStreams(videoBlob, setting) {
     }
   };
   var postMessage = function () {
+    if (posted) return;
     posted = true;
+    // The recording was made at this rate, so the transcode has to keep it:
+    // a fixed -r would duplicate or drop frames and drift the timing.
+    const fps = getExportFramerate();
     if (setting == 'gif') {
       worker.postMessage({
         type: 'command',
-        arguments: '-i video.webm -r 24 output-10.gif'.split(' '),
+        arguments: ('-i video.webm -r ' + fps + ' output-10.gif').split(
+          ' '
+        ),
         files: [
           {
             data: new Uint8Array(aab),
@@ -74,10 +128,11 @@ function convertStreams(videoBlob, setting) {
     } else if (setting == 'mp4') {
       worker.postMessage({
         type: 'command',
-        arguments:
-          '-i video.webm -c:v mpeg4 -b:v 6400k -strict experimental output.mp4'.split(
-            ' '
-          ),
+        arguments: (
+          '-i video.webm -c:v mpeg4 -b:v 6400k -r ' +
+          fps +
+          ' -strict experimental output.mp4'
+        ).split(' '),
         files: [
           {
             data: new Uint8Array(aab),
@@ -97,22 +152,9 @@ function PostBlob(blob) {
   a.download = blob.name || 'video';
   document.body.appendChild(a);
   a.click();
-  recording = false;
-  currenttime = 0;
-  animate(false, 0);
-  $('#seekbar').offset({
-    left:
-      offset_left +
-      $('#inner-timeline').offset().left +
-      currenttime / timelinetime,
-  });
-  canvas.renderAll();
-  resizeCanvas();
-  if (background_audio != false) {
-    background_audio.pause();
-    background_audio = new Audio(background_audio.src);
-  }
-  $('#download-real').html('Download');
-  $('#download-real').removeClass('downloading');
-  updateRecordCanvas();
+  document.body.removeChild(a);
+  window.setTimeout(function () {
+    URL.revokeObjectURL(url);
+  }, 60000);
+  resetRecordingUI();
 }
diff --git a/src/js/database.js b/src/js/database.js
index c36ac33..a52c770 100644
--- a/src/js/database.js
+++ b/src/js/database.js
@@ -88,15 +88,24 @@ function checkDB() {
       } else {
         loadProject();
       }
+    })
+    .catch(function (e) {
+      console.error('Could not open the local project database', e);
     });
 }
 
 // Automatically save project (locally)
-function autoSave() {
+async function autoSave() {
   if (checkstatus) {
     canvas.clipPath = null;
-    objects.forEach(async function (object) {
+    // Sequential, not forEach(async): toDatalessJSON below must not run
+    // while filters are still being stripped off the objects.
+    for (const object of objects) {
       var obj = canvas.getItemById(object.id);
+      if (!obj) {
+        object.filters = [];
+        continue;
+      }
       if (obj.filters) {
         if (obj.filters.length > 0) {
           object.filters = [];
@@ -174,7 +183,7 @@ function autoSave() {
       } else {
         object.filters = [];
       }
-    });
+    }
     const inst = canvas.toDatalessJSON([
       'volume',
       'audioSrc',
@@ -250,6 +259,9 @@ function autoSave() {
         activepreset: activepreset,
         width: artboard.width,
         height: artboard.height,
+      })
+      .catch(function (e) {
+        console.error('Autosave failed', e);
       });
     objects.forEach(function (object) {
       replaceSource(canvas.getItemById(object.id), canvas);
@@ -289,17 +301,24 @@ function loadProject() {
       currenttime = 0;
       canvas.clipPath = null;
       canvas.clear();
-      fabric.filterBackend = webglBackend;
+      if (webglBackend) {
+        fabric.filterBackend = webglBackend;
+      }
       f = fabric.Image.filters;
       canvas.loadFromJSON(JSON.parse(project.canvas), function () {
         canvas.clipPath = artboard;
-        canvas.getItemById('line_h').set({ opacity: 0 });
-        canvas.getItemById('line_v').set({ opacity: 0 });
+        hideGuides(canvas);
         canvas.renderAll();
         $('.object-props').remove();
         $('.layer').remove();
         objects.forEach(function (object) {
           var animatethis = false;
+          if (!object.animate) {
+            object.animate = [];
+          }
+          if (!canvas.getItemById(object.id)) {
+            return;
+          }
           if (object.animate.length > 5) {
             if (isSameSet(object.animate, props)) {
               animatethis = true;
@@ -331,6 +350,9 @@ function loadProject() {
           }
         });
         keyframes.forEach(function (keyframe) {
+          if (!canvas.getItemById(keyframe.id)) {
+            return;
+          }
           if (
             keyframe.name != 'top' &&
             keyframe.name != 'scaleY' &&
@@ -510,12 +532,18 @@ function deleteAsset(key) {
     .doc({ key: key })
     .get()
     .then((asset) => {
+      if (!asset) {
+        return;
+      }
       var temp = files.filter((x) => x.file == asset.src);
       if (temp.length > 0) {
         temp.forEach(function (file) {
-          deleteObject(canvas.getItemById(file.name));
+          const object = canvas.getItemById(file.name);
+          if (object) {
+            deleteObject(object);
+          }
           files = $.grep(files, function (a) {
-            return a != file;
+            return a !== file;
           });
         });
       }
@@ -534,14 +562,26 @@ function deleteAsset(key) {
     });
 }
 
-function getAssets() {
+function getAssets(attempt) {
+  attempt = attempt || 0;
   db.collection('assets')
     .get()
     .then((assets) => {
-      // Sometimes the assets aren't ready when importing, really annoying
+      // Sometimes the assets aren't ready when importing, really annoying.
+      // Retry on a timer with a hard cap - a bare synchronous re-call spins
+      // the CPU forever when the collection never resolves.
       if (assets === undefined) {
-        getAssets();
+        if (attempt < 20) {
+          window.setTimeout(function () {
+            getAssets(attempt + 1);
+          }, 250);
+        } else {
+          console.error('Could not read assets from the local database');
+        }
       } else if (assets.length > 0) {
+        // Rebuild rather than append: getAssets() runs again after an import
+        uploaded_images = [];
+        uploaded_videos = [];
         assets.forEach(function (asset) {
           if (asset.type == 'image') {
             uploaded_images.push({
@@ -562,6 +602,9 @@ function getAssets() {
           }
         });
       }
+    })
+    .catch(function (e) {
+      console.error('Could not read assets', e);
     });
 }
 
@@ -570,10 +613,20 @@ function readTextFile(file, callback) {
   rawFile.overrideMimeType('application/json');
   rawFile.open('GET', file, true);
   rawFile.onreadystatechange = function () {
-    if (rawFile.readyState === 4 && rawFile.status == '200') {
-      callback(rawFile.responseText);
+    if (rawFile.readyState === 4) {
+      // A blob: URL resolves with status 0
+      if (rawFile.status == 200 || rawFile.status === 0) {
+        callback(rawFile.responseText);
+      } else {
+        alert('Could not read the file');
+        $('#import-project span').html('Import');
+      }
     }
   };
+  rawFile.onerror = function () {
+    alert('Could not read the file');
+    $('#import-project span').html('Import');
+  };
   rawFile.send(null);
 }
 
@@ -582,10 +635,20 @@ async function importProject(e) {
   var file = e.target.files[0];
   var path = (window.URL || window.webkitURL).createObjectURL(file);
   readTextFile(path, function (text) {
-    var data = JSON.parse(text);
+    var data;
+    try {
+      data = JSON.parse(text);
+    } catch (e) {
+      data = null;
+    }
+    if (!data || !Array.isArray(data.project) || data.project.length == 0) {
+      alert('Wrong file type');
+      $('#import-project span').html('Import');
+      return;
+    }
     delete data.project[0].id;
-    if (data.project.length > 0) {
-      if (data.assets.length > 0) {
+    {
+      if (Array.isArray(data.assets) && data.assets.length > 0) {
         data.assets.forEach(function (asset) {
           delete asset.id;
           db.collection('assets').add(asset);
@@ -598,10 +661,14 @@ async function importProject(e) {
           $('#import-project span').html('Import');
           hideModals();
           loadProject();
+        })
+        .catch(function (e) {
+          console.error('Import failed', e);
+          alert('Import failed');
+          $('#import-project span').html('Import');
         });
-    } else {
-      alert('Wrong file type');
     }
+    window.URL.revokeObjectURL(path);
   });
 }
 
@@ -619,18 +686,24 @@ function exportProject() {
           .get()
           .then((assets) => {
             var exportarr = { project: project, assets: assets };
-            $('<a />', {
-              download: 'data.json',
-              href:
-                'data:application/json,' +
-                encodeURIComponent(JSON.stringify(exportarr)),
-            })
-              .appendTo('body')
-              .click(function () {
-                $(this).remove();
-                $('#export-project span').html('Export');
-              })[0]
-              .click();
+            // Blob, not a data: URL - projects with media blow past the
+            // maximum URL length.
+            const url = URL.createObjectURL(
+              new Blob([JSON.stringify(exportarr)], {
+                type: 'application/json',
+              })
+            );
+            const a = document.createElement('a');
+            a.style.display = 'none';
+            a.href = url;
+            a.download = 'data.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            window.setTimeout(function () {
+              URL.revokeObjectURL(url);
+            }, 60000);
+            $('#export-project span').html('Export');
           });
       } else {
         alert('Empty project');
@@ -649,11 +722,16 @@ function clearProject() {
       'Are you sure you want to clear this project? This action cannot be undone.'
     )
   ) {
-    db.collection('projects').delete();
-    db.collection('assets').delete();
-    window.setTimeout(function () {
-      location.reload();
-    }, 1000);
+    Promise.all([
+      db.collection('projects').delete(),
+      db.collection('assets').delete(),
+    ])
+      .catch(function (e) {
+        console.error('Could not clear the project', e);
+      })
+      .then(function () {
+        location.reload();
+      });
   }
   hideMore();
 }
diff --git a/src/js/events.js b/src/js/events.js
index 8dbed56..0036fab 100644
--- a/src/js/events.js
+++ b/src/js/events.js
@@ -1,17 +1,79 @@
+// Remember the last valid crop rectangle so it can be restored if the user
+// drags it outside the image.
+function updateCropBounds() {
+  const cropUI = canvas.getItemById('crop');
+  if (!cropUI || !cropobj) {
+    return;
+  }
+  if (cropUI.isContainedWithinObject(cropobj)) {
+    cropleft = cropUI.get('left');
+    croptop = cropUI.get('top');
+    cropscalex = cropUI.get('scaleX');
+    cropscaley = cropUI.get('scaleY');
+  }
+}
+
+// Drag-to-reorder for the layer list. html5sortable only wires up the
+// children present when it runs, so this is re-run every time a layer is
+// added. The sortstop handler is bound only once.
+let layerSortBound = false;
+function initLayerSortable() {
+  const list = document.getElementById('layer-inner-list');
+  if (!list) {
+    return;
+  }
+  const sortableList = sortable(list, {
+    handle: '.layer-handle',
+    customDragImage: (draggedElement, elementOffset, event) => {
+      return {
+        element: document.getElementById('nothing'),
+        posX: event.pageX - elementOffset.left,
+        posY: event.pageY - elementOffset.top,
+      };
+    },
+  })[0];
+
+  // Re-initializing marks every handle draggable again, so locked layers
+  // have to be opted back out.
+  $('#layer-inner-list .layer').each(function () {
+    if ($(this).find('.lock').hasClass('locked')) {
+      $(this).find('.layer-handle').attr('draggable', false);
+    }
+  });
+
+  if (layerSortBound) {
+    return;
+  }
+  layerSortBound = true;
+  sortableList.addEventListener('sortupdate', function () {
+    syncTimelineOrder();
+    orderLayers();
+  });
+}
+
+// Re-order the timeline rows to match the layer list
+function syncTimelineOrder() {
+  const timeline = document.getElementById('inner-timeline');
+  if (!timeline) {
+    return;
+  }
+  $('#layer-inner-list .layer').each(function () {
+    const row = document.getElementById(
+      $(this).attr('data-object')
+    );
+    if (row) {
+      timeline.appendChild(row);
+    }
+  });
+}
+
 $(document).ready(function () {
   // An object is being moved in the canvas
   canvas.on('object:moving', function (e) {
     e.target.hasControls = false;
     centerLines(e);
     if (cropping) {
-      if (
-        canvas.getItemById('crop').isContainedWithinObject(cropobj)
-      ) {
-        cropleft = canvas.getItemById('crop').get('left');
-        croptop = canvas.getItemById('crop').get('top');
-        cropscalex = canvas.getItemById('crop').get('scaleX');
-        cropscaley = canvas.getItemById('crop').get('scaleY');
-      }
+      updateCropBounds();
       crop(canvas.getItemById('cropped'));
     } else if (
       lockmovement &&
@@ -39,14 +101,7 @@ $(document).ready(function () {
     e.target.hasControls = false;
     centerLines(e);
     if (cropping) {
-      if (
-        canvas.getItemById('crop').isContainedWithinObject(cropobj)
-      ) {
-        cropleft = canvas.getItemById('crop').get('left');
-        croptop = canvas.getItemById('crop').get('top');
-        cropscalex = canvas.getItemById('crop').get('scaleX');
-        cropscaley = canvas.getItemById('crop').get('scaleY');
-      }
+      updateCropBounds();
       crop(canvas.getItemById('cropped'));
     }
   });
@@ -56,24 +111,15 @@ $(document).ready(function () {
     e.target.hasControls = false;
     centerLines(e);
     if (cropping) {
-      if (
-        canvas.getItemById('crop').isContainedWithinObject(cropobj)
-      ) {
-        cropleft = canvas.getItemById('crop').get('left');
-        croptop = canvas.getItemById('crop').get('top');
-        cropscalex = canvas.getItemById('crop').get('scaleX');
-        cropscaley = canvas.getItemById('crop').get('scaleY');
-      }
+      updateCropBounds();
       crop(canvas.getItemById('cropped'));
     }
   });
 
   // An object is being rotated in the canvas
   canvas.on('object:rotating', function (e) {
-    if (e.e.shiftKey) {
-      canvas.getActiveObject().snapAngle = 15;
-    } else {
-      canvas.getActiveObject().snapAngle = 0;
+    if (canvas.getActiveObject()) {
+      canvas.getActiveObject().snapAngle = e.e.shiftKey ? 15 : 0;
     }
     e.target.hasControls = false;
   });
@@ -82,8 +128,10 @@ $(document).ready(function () {
   canvas.on('object:modified', function (e) {
     e.target.hasControls = true;
     if (!editinggroup && !cropping) {
-      canvas.getActiveObject().lockMovementX = false;
-      canvas.getActiveObject().lockMovementY = false;
+      if (canvas.getActiveObject()) {
+        canvas.getActiveObject().lockMovementX = false;
+        canvas.getActiveObject().lockMovementY = false;
+      }
       canvas.renderAll();
       if (e.target.type == 'activeSelection') {
         const tempselection = canvas.getActiveObject();
@@ -193,8 +241,12 @@ $(document).ready(function () {
     this.setViewportTransform(this.viewportTransform);
     this.isDragging = false;
     this.selection = true;
-    line_h.opacity = 0;
-    line_v.opacity = 0;
+    if (line_h) {
+      line_h.opacity = 0;
+    }
+    if (line_v) {
+      line_v.opacity = 0;
+    }
   });
 
   // Detect mouse over canvas (for dragging objects from the library)
@@ -214,7 +266,9 @@ $(document).ready(function () {
   canvas.on('mouse:out', function (e) {
     overCanvas = false;
     if (wip) {
-      e.target.hasControls = true;
+      if (e.target) {
+        e.target.hasControls = true;
+      }
       canvas.discardActiveObject();
       wip = false;
       canvas.renderAll();
@@ -320,13 +374,16 @@ $(document).ready(function () {
           }
         }, 1000);
       }
-      // Redo
-      if (e.which === 90 && (e.ctrlKey || e.metaKey) && e.shiftKey) {
-        undoRedo(redo, undo, redoarr, undoarr);
-      }
-      // Undo
+      // Redo / undo (shift decides which; never both in one keypress)
       if (e.which === 90 && (e.ctrlKey || e.metaKey)) {
-        undoRedo(undo, redo, undoarr, redoarr);
+        e.preventDefault();
+        if (e.shiftKey) {
+          if (redo.length >= 1) {
+            undoRedo(redo, undo, redoarr, undoarr);
+          }
+        } else if (undo.length >= 1) {
+          undoRedo(undo, redo, undoarr, redoarr);
+        }
       }
       // Duplicate object
       if (e.which === 68 && (e.ctrlKey || e.metaKey)) {
@@ -353,51 +410,30 @@ $(document).ready(function () {
       if (e.keyCode === 13 && editingproject) {
         saveProjectName();
       }
-      // Left arrow key (move object to the left)
-      if (e.keyCode === 37 && canvas.getActiveObject()) {
-        var obj = canvas.getActiveObject();
-        var step = 2;
+      // Arrow keys nudge the selection
+      if (
+        e.keyCode >= 37 &&
+        e.keyCode <= 40 &&
+        canvas.getActiveObject() &&
+        !canvas.getActiveObject().isEditing &&
+        !focus &&
+        !editinglayer &&
+        !editingproject
+      ) {
+        const obj = canvas.getActiveObject();
         // Bigger step if shift is down
-        if (e.shiftKey) {
-          step = 7;
+        const step = e.shiftKey ? 7 : 2;
+        if (e.keyCode === 37) {
+          obj.left = obj.left - step;
+        } else if (e.keyCode === 38) {
+          obj.top = obj.top - step;
+        } else if (e.keyCode === 39) {
+          obj.left = obj.left + step;
+        } else {
+          obj.top = obj.top + step;
         }
-        obj.left = obj.left - step;
-        canvas.renderAll();
-        autoKeyframe(obj, { action: 'drag' }, false);
-      }
-      // Up arrow key (move object up)
-      if (e.keyCode === 38 && canvas.getActiveObject()) {
-        var obj = canvas.getActiveObject();
-        var step = 2;
-        // Bigger step if shift is down
-        if (e.shiftKey) {
-          step = 7;
-        }
-        obj.top = obj.top - step;
-        canvas.renderAll();
-        autoKeyframe(obj, { action: 'drag' }, false);
-      }
-      // Right arrow key  (move object to the right)
-      if (e.keyCode === 39 && canvas.getActiveObject()) {
-        var obj = canvas.getActiveObject();
-        var step = 2;
-        // Bigger step if shift is down
-        if (e.shiftKey) {
-          step = 7;
-        }
-        obj.left = obj.left + step;
-        canvas.renderAll();
-        autoKeyframe(obj, { action: 'drag' }, false);
-      }
-      // Down arrow key   (move object down)
-      if (e.keyCode === 40 && canvas.getActiveObject()) {
-        var obj = canvas.getActiveObject();
-        var step = 2;
-        // Bigger step if shift is down
-        if (e.shiftKey) {
-          step = 7;
-        }
-        obj.top = obj.top + step;
+        // Without this the selection box stays where the object used to be
+        obj.setCoords();
         canvas.renderAll();
         autoKeyframe(obj, { action: 'drag' }, false);
       }
@@ -406,7 +442,7 @@ $(document).ready(function () {
       if (
         e.keyCode === 221 &&
         canvas.getActiveObjects() &&
-        e.metaKey
+        (e.metaKey || e.ctrlKey)
       ) {
         if (canvas.getActiveObjects().length == 1) {
           var obj = canvas.getActiveObject();
@@ -434,7 +470,7 @@ $(document).ready(function () {
       if (
         e.keyCode === 219 &&
         canvas.getActiveObjects() &&
-        e.metaKey
+        (e.metaKey || e.ctrlKey)
       ) {
         if (canvas.getActiveObjects().length == 1) {
           var obj = canvas.getActiveObject();
@@ -545,25 +581,24 @@ $(document).ready(function () {
 
   // Copy event
   window.addEventListener('copy', function (e) {
+    // Selecting keyframes clears the canvas selection, so there is often no
+    // active object at all here - never dereference it unguarded.
+    const activeObject = canvas.getActiveObject();
+    if (activeObject && activeObject.isEditing) {
+      return;
+    }
     // Copy selected object
-    if (
-      canvas.getActiveObject() &&
-      shiftkeys.length == 0 &&
-      !canvas.getActiveObject().isEditing
-    ) {
+    if (activeObject && shiftkeys.length == 0) {
       var emptyInp = document.getElementById('emptyInput');
       emptyInp.select();
       emptyInp.focus();
       setTimeout(function () {
         document.execCommand('copy');
       }, 0);
-      clipboard = canvas.getActiveObject();
+      clipboard = activeObject;
       cliptype = 'object';
       // Copy selected keyframe(s)
-    } else if (
-      shiftkeys.length > 0 &&
-      !canvas.getActiveObject().isEditing
-    ) {
+    } else if (shiftkeys.length > 0) {
       var emptyInp = document.getElementById('emptyInput');
       emptyInp.select();
       emptyInp.focus();
@@ -580,7 +615,9 @@ $(document).ready(function () {
             e.name == drag.attr('data-property')
           );
         });
-        clipboard.push(keyarr[0]);
+        if (keyarr.length > 0) {
+          clipboard.push(keyarr[0]);
+        }
       });
       cliptype = 'keyframe';
     }
@@ -598,7 +635,9 @@ $(document).ready(function () {
     } else {
       for (var i = 0; i < imgs.length; i++) {
         if (imgs[i].type.indexOf('image') == -1) continue;
-        var imgObj = imgs[i].getAsFile();
+        // `let` so each async thumbnail callback keeps its own file
+        let imgObj = imgs[i].getAsFile();
+        if (!imgObj) continue;
         if (imgObj.size / 1024 / 1024 <= 10) {
           createThumbnail(imgObj, 250).then(function (data) {
             saveFile(
@@ -803,27 +842,7 @@ $(document).ready(function () {
   syncScrollHoz($('#timeline'), $('#seekarea'));
 
   // Initialize layer sorting
-  sortable('#layer-inner-list', {
-    customDragImage: (draggedElement, elementOffset, event) => {
-      return {
-        element: document.getElementById('nothing'),
-        posX: event.pageX - elementOffset.left,
-        posY: event.pageY - elementOffset.top,
-      };
-    },
-  })[0].addEventListener('sortstop', function (e) {
-    const id = $(e.detail.item).attr('data-object');
-    const previd = $(e.detail.item).prev().attr('data-object');
-    if ($('.sortable-dragging').length == 1) {
-      $('.sortable-dragging').remove();
-      if (previd == undefined) {
-        $('#inner-timeline').prepend($('#' + id));
-      } else {
-        $('#' + id).insertAfter($('#' + previd));
-      }
-      orderLayers();
-    }
-  });
+  initLayerSortable();
 
   // Initialize dropdown for keyframe easing
   $('#easing select').niceSelect();
@@ -936,8 +955,8 @@ $(document).ready(function () {
     onmove: function (x) {
       if (canvas.getActiveObject()) {
         var obj = canvas.getActiveObject();
-        if (obj.filters.find((x) => x.type == 'RemoveColor')) {
-          obj.filters.find((x) => x.type == 'RemoveColor').distance =
+        if (obj.filters.find((i) => i.type == 'RemoveColor')) {
+          obj.filters.find((i) => i.type == 'RemoveColor').distance =
             x / 100;
         }
         obj.applyFilters();
@@ -964,8 +983,8 @@ $(document).ready(function () {
     onmove: function (x) {
       if (canvas.getActiveObject()) {
         var obj = canvas.getActiveObject();
-        if (obj.filters.find((x) => x.type == 'Noise')) {
-          obj.filters.find((x) => x.type == 'Noise').noise = x;
+        if (obj.filters.find((i) => i.type == 'Noise')) {
+          obj.filters.find((i) => i.type == 'Noise').noise = x;
         } else {
           obj.filters.push(
             new f.Noise({
@@ -997,8 +1016,8 @@ $(document).ready(function () {
     onmove: function (x) {
       if (canvas.getActiveObject()) {
         var obj = canvas.getActiveObject();
-        if (obj.filters.find((x) => x.type == 'Blur')) {
-          obj.filters.find((x) => x.type == 'Blur').blur = x / 100;
+        if (obj.filters.find((i) => i.type == 'Blur')) {
+          obj.filters.find((i) => i.type == 'Blur').blur = x / 100;
         } else {
           obj.filters.push(
             new f.Blur({
@@ -1006,9 +1025,9 @@ $(document).ready(function () {
             })
           );
         }
+        obj.applyFilters();
+        canvas.renderAll();
       }
-      obj.applyFilters();
-      canvas.renderAll();
     },
     onfinish: function (x) {
       save();
diff --git a/src/js/functions.js b/src/js/functions.js
index b221d2d..b0596fb 100644
--- a/src/js/functions.js
+++ b/src/js/functions.js
@@ -26,7 +26,7 @@ function updateSelection(e) {
         $(".layer[data-object='" + object.get('id') + "']").addClass(
           'layer-selected'
         );
-        if (e.e != undefined) {
+        if (e.e != undefined && $('.layer-selected').length > 0) {
           document
             .getElementsByClassName('layer-selected')[0]
             .scrollIntoView();
@@ -42,7 +42,7 @@ function updateSelection(e) {
       $(".layer[data-object='" + e.target.get('id') + "']").addClass(
         'layer-selected'
       );
-      if (e.e != undefined) {
+      if (e.e != undefined && $('.layer-selected').length > 0) {
         document
           .getElementsByClassName('layer-selected')[0]
           .scrollIntoView();
@@ -244,7 +244,6 @@ function group() {
     absolutePositioned: true,
     inGroup: false,
     strokeDashArray: false,
-    objectCaching: true,
     shadow: {
       color: 'black',
       offsetX: 0,
@@ -257,18 +256,7 @@ function group() {
   canvas.renderAll();
   newLayer(newgroup);
   canvas.setActiveObject(newgroup);
-  keyframes.sort(function (a, b) {
-    if (a.id.indexOf('Group') >= 0 && b.id.indexOf('Group') == -1) {
-      return 1;
-    } else if (
-      b.id.indexOf('Group') >= 0 &&
-      a.id.indexOf('Group') == -1
-    ) {
-      return -1;
-    } else {
-      return 0;
-    }
-  });
+  sortKeyframes();
   save();
 }
 $(document).on('click', '#group-objects', group);
@@ -348,11 +336,19 @@ $(document).on('click', '#ungroup-objects', function () {
 function reGroup(id) {
   var group = [];
   var objects = [];
-  groups
-    .find((x) => x.id == id)
-    .objects.forEach(function (object) {
-      objects.push(canvas.getItemById(object));
-    });
+  const entry = groups.find((x) => x.id == id);
+  if (!entry) {
+    return;
+  }
+  entry.objects.forEach(function (object) {
+    const item = canvas.getItemById(object);
+    if (item) {
+      objects.push(item);
+    }
+  });
+  if (objects.length == 0) {
+    return;
+  }
   var activeselection = new fabric.ActiveSelection(objects);
   var newgroup = activeselection.toGroup();
   newgroup.set({
@@ -364,14 +360,20 @@ function reGroup(id) {
 }
 
 // Keep record canvas up to date
-function updateRecordCanvas() {
+async function updateRecordCanvas() {
   canvasrecord.setWidth(artboard.width);
   canvasrecord.setHeight(artboard.height);
   canvasrecord.width = artboard.width;
   canvasrecord.height = artboard.height;
   canvas.clipPath = null;
-  objects.forEach(async function (object) {
+  // Sequential, not forEach(async): the snapshot below must not be taken
+  // while filters are still being stripped off the objects.
+  for (const object of objects) {
     var obj = canvas.getItemById(object.id);
+    if (!obj) {
+      object.filters = [];
+      continue;
+    }
     if (obj.filters) {
       if (obj.filters.length > 0) {
         object.filters = [];
@@ -449,7 +451,7 @@ function updateRecordCanvas() {
     } else {
       object.filters = [];
     }
-  });
+  }
   const canvassave = canvas.toJSON([
     'volume',
     'audioSrc',
@@ -536,10 +538,75 @@ function updateRecordCanvas() {
   });
 }
 
+// Frame rate the user picked in the download modal, used by every export path
+const EXPORT_FPS_DEFAULT = 30;
+
+function getExportFramerate() {
+  const fps = parseInt($('#framerate').val(), 10);
+  if (!(fps > 0)) {
+    return EXPORT_FPS_DEFAULT;
+  }
+  return Math.min(120, fps);
+}
+
+// A still image has no frame rate
+$('input[name=radio]').on('change', function () {
+  $('#framerate-row').toggle(
+    $('input[name=radio]:checked').val() != 'image'
+  );
+});
+
+// Put the editor back into a usable state once a render has finished (or failed)
+function resetRecordingUI() {
+  recording = false;
+  currenttime = 0;
+  animate(false, 0);
+  $('#seekbar').offset({
+    left:
+      offset_left +
+      $('#inner-timeline').offset().left +
+      currenttime / timelinetime,
+  });
+  canvas.renderAll();
+  resizeCanvas();
+  if (background_audio != false) {
+    background_audio.pause();
+    background_audio = new Audio(background_audio.src);
+  }
+  $('#download-real').html('Download');
+  $('#download-real').removeClass('downloading');
+  updateRecordCanvas();
+}
+
+// Hand a finished WebM recording to the user, converting it first if the
+// chosen format is not webm.
+function deliverRecording(blob) {
+  $('#download-real').html('Downloading...');
+  const format = $('input[name=radio]:checked').val();
+  if (format == 'mp4' || format == 'gif') {
+    convertStreams(blob, format);
+    return;
+  }
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.style.display = 'none';
+  a.href = url;
+  a.download = 'video.webm';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  // Give the browser a tick to start the download before releasing the blob
+  window.setTimeout(function () {
+    URL.revokeObjectURL(url);
+  }, 60000);
+  resetRecordingUI();
+}
+
 // Download recording
 function downloadRecording(chunks) {
   $('#download-real').html('Downloading...');
-  if ($('input[name=radio]:checked').val() == 'webm') {
+  const format = $('input[name=radio]:checked').val();
+  if (format == 'webm') {
     var url = URL.createObjectURL(
       new Blob(chunks, {
         type: 'video/webm',
@@ -551,24 +618,21 @@ function downloadRecording(chunks) {
     a.download = 'video.webm';
     document.body.appendChild(a);
     a.click();
-    recording = false;
-    currenttime = 0;
-    animate(false, 0);
-    $('#seekbar').offset({
-      left:
-        offset_left +
-        $('#inner-timeline').offset().left +
-        currenttime / timelinetime,
-    });
-    canvas.renderAll();
-    resizeCanvas();
-    $('#download-real').html('Download');
-    $('#download-real').removeClass('downloading');
-    updateRecordCanvas();
-  } else if ($('input[name=radio]:checked').val() == 'mp4') {
-    type = 'video/mp4';
+    document.body.removeChild(a);
+    // Give the browser a tick to start the download before releasing the blob
+    window.setTimeout(function () {
+      URL.revokeObjectURL(url);
+    }, 60000);
+    resetRecordingUI();
+  } else if (format == 'mp4' || format == 'gif') {
+    // Both are transcoded from the captured webm by the ffmpeg worker
+    convertStreams(
+      new Blob(chunks, { type: 'video/webm' }),
+      format
+    );
   } else {
-    convertStreams(new Blob(chunks, { type: 'video/webm' }), 'gif');
+    console.warn('Unknown download format: ' + format);
+    resetRecordingUI();
   }
 }
 
@@ -653,8 +717,19 @@ function save() {
     $('#redo').removeClass('history-active');
   }
 
-  updateRecordCanvas();
-  autoSave();
+  schedulePersist();
+}
+
+// Rebuilding the record canvas and writing to IndexedDB are both expensive
+// and used to run on every single edit (including every keystroke). Coalesce
+// them; record() awaits updateRecordCanvas() directly when it needs it fresh.
+var persistTimer;
+function schedulePersist() {
+  window.clearTimeout(persistTimer);
+  persistTimer = window.setTimeout(function () {
+    updateRecordCanvas();
+    autoSave();
+  }, 400);
 }
 
 // Duplicate object
@@ -664,6 +739,8 @@ function copyObject() {
       if (clipboard.type == 'activeSelection') {
         clipboard._objects.forEach(function (clone) {
           clone.clone(function (cloned) {
+            // layer_count only advances inside newLayer, so read it after
+            // the clone resolves or every copy shares one id.
             cloned.set({
               id: 'Shape' + layer_count,
             });
@@ -899,12 +976,14 @@ function undoRedo(newState, saveState, newArrState, saveArrState) {
   canvas.clipPath = null;
   canvas.loadFromJSON(state, function () {
     canvas.clipPath = artboard;
-    canvas.getItemById('line_h').set({ opacity: 0 });
-    canvas.getItemById('line_v').set({ opacity: 0 });
+    hideGuides(canvas);
     canvas.renderAll();
     $('.object-props').remove();
     $('.layer').remove();
     objects.forEach(function (object) {
+      if (!canvas.getItemById(object.id)) {
+        return;
+      }
       replaceSource(canvas.getItemById(object.id), canvas);
       renderLayer(canvas.getItemById(object.id));
       props.forEach(function (prop) {
@@ -924,6 +1003,9 @@ function undoRedo(newState, saveState, newArrState, saveArrState) {
       });
     });
     keyframes.forEach(function (keyframe) {
+      if (!canvas.getItemById(keyframe.id)) {
+        return;
+      }
       if (
         keyframe.name != 'top' &&
         keyframe.name != 'scaleY' &&
@@ -963,7 +1045,7 @@ $(document).on('click', '#undo', function () {
   }
 });
 $(document).on('click', '#redo', function () {
-  if (undo.length >= 1) {
+  if (redo.length >= 1) {
     undoRedo(redo, undo, redoarr, undoarr);
   }
 });
@@ -1048,7 +1130,7 @@ function keyframeChanges(object, type, id, selection) {
         'height',
         object,
         currenttime,
-        object.get('width'),
+        object.get('height'),
         true
       );
       if (selection) {
@@ -1193,6 +1275,43 @@ function pause() {
   $('#play-button').attr('src', 'assets/play-button.svg');
 }
 
+// Write an object's stored default for a property, creating the entry if the
+// object was serialized before that property existed.
+function setDefaultValue(object, prop, value) {
+  const entry = objects.find((x) => x.id == object.get('id'));
+  if (!entry) {
+    return;
+  }
+  if (!entry.defaults) {
+    entry.defaults = [];
+  }
+  const def = entry.defaults.find((x) => x.name == prop);
+  if (def) {
+    def.value = value;
+  } else {
+    entry.defaults.push({ name: prop, value: value });
+  }
+}
+
+// Read an object's stored default for a property (undefined when absent)
+function getDefaultValue(id, prop) {
+  const entry = objects.find((x) => x.id == id);
+  if (!entry || !entry.defaults) {
+    return undefined;
+  }
+  const def = entry.defaults.find((x) => x.name == prop);
+  return def ? def.value : undefined;
+}
+
+// Read a property that may be a "shadow.*" path.
+// fabric's get() is flat, so object.get("shadow.blur") is always undefined.
+function getPropValue(object, prop) {
+  if (typeof prop === 'string' && prop.indexOf('shadow.') === 0) {
+    return object.shadow ? object.shadow[prop.slice(7)] : undefined;
+  }
+  return object.get(prop);
+}
+
 // Set object value (while animating)
 function setObjectValue(prop, object, value, inst) {
   if (object.get('type') != 'group') {
@@ -1221,8 +1340,6 @@ function setObjectValue(prop, object, value, inst) {
     object.shadow.offsetX = value;
   } else if (prop == 'shadow.offsetY') {
     object.shadow.offsetY = value;
-  } else if (prop == 'shadow.blur') {
-    object.shadow.blur = value;
   } else if (object.get('type') != 'group') {
     object.set(prop, value);
   } else if (prop != 'width') {
@@ -1232,34 +1349,68 @@ function setObjectValue(prop, object, value, inst) {
   inst.renderAll();
 }
 
-// Find last keyframe in time from same object & property
-function lastKeyframe(keyframe, index) {
-  var temparr = keyframes.slice();
-  temparr.sort(function (a, b) {
-    return a.t - b.t;
-  });
-  temparr.length = temparr.findIndex((x) => x === keyframe);
-  temparr.reverse();
-  if (temparr.length == 0) {
-    return false;
-  } else {
-    for (var i = 0; i < temparr.length; i++) {
-      if (
-        temparr[i].id == keyframe.id &&
-        temparr[i].name == keyframe.name
-      ) {
-        return temparr[i];
-        break;
-      } else if (i == temparr.length - 1) {
-        return false;
-      }
+// Group keyframes by "id|name", each group sorted by time.
+// Built once per rendered frame: without it every keyframe lookup sorted a
+// copy of the whole keyframe list, making playback O(n^2 log n).
+function buildKeyframeIndex() {
+  const idx = new Map();
+  keyframes.forEach(function (keyframe) {
+    const key = keyframe.id + '|' + keyframe.name;
+    let arr = idx.get(key);
+    if (!arr) {
+      arr = [];
+      idx.set(key, arr);
     }
+    arr.push(keyframe);
+  });
+  idx.forEach(function (arr) {
+    arr.sort(function (a, b) {
+      return a.t - b.t;
+    });
+  });
+  return idx;
+}
+
+// All keyframes of one object/property, sorted by time
+function keyframeSiblings(keyframe, idx) {
+  if (idx) {
+    return idx.get(keyframe.id + '|' + keyframe.name) || [];
   }
+  return keyframes
+    .filter(function (e) {
+      return e.id == keyframe.id && e.name == keyframe.name;
+    })
+    .sort(function (a, b) {
+      return a.t - b.t;
+    });
+}
+
+// Find last keyframe in time from same object & property
+function lastKeyframe(keyframe, idx) {
+  const arr = keyframeSiblings(keyframe, idx);
+  const pos = arr.indexOf(keyframe);
+  if (pos <= 0) {
+    return false;
+  }
+  return arr[pos - 1];
+}
+
+// Find next keyframe in time from same object & property
+function nextKeyframe(keyframe, idx) {
+  const arr = keyframeSiblings(keyframe, idx);
+  const pos = arr.indexOf(keyframe);
+  if (pos == -1 || pos == arr.length - 1) {
+    return false;
+  }
+  return arr[pos + 1];
 }
 
 // Check whether any keyframe exists for a certain property
-function checkAnyKeyframe(id, prop, inst) {
+function checkAnyKeyframe(id, prop, inst, idx) {
   const object = inst.getItemById(id);
+  if (!object) {
+    return false;
+  }
   if (object.get('assetType') == 'audio') {
     return false;
   }
@@ -1279,13 +1430,14 @@ function checkAnyKeyframe(id, prop, inst) {
   ) {
     return false;
   }
-  const keyarr2 = $.grep(keyframes, function (e) {
-    return e.id == id && e.name == prop;
-  });
-  if (keyarr2.length == 0) {
-    const value = objects
-      .find((x) => x.id == id)
-      .defaults.find((x) => x.name == prop).value;
+  const hasKeyframe = idx
+    ? idx.has(id + '|' + prop)
+    : keyframes.some((e) => e.id == id && e.name == prop);
+  if (!hasKeyframe) {
+    const value = getDefaultValue(id, prop);
+    if (value === undefined) {
+      return false;
+    }
     setObjectValue(prop, object, value, inst);
   }
 }
@@ -1299,23 +1451,18 @@ function isDomElem(el) {
 
 // Play videos when seeking/playing
 async function playVideos(time) {
-  objects.forEach(async function (object) {
-    var object = canvas.getItemById(object.id);
-    if (object == null) {
+  objects.forEach(async function (entry) {
+    var inst = recording ? canvasrecord : canvas;
+    var object = inst.getItemById(entry.id);
+    var p_keyframe = p_keyframes.find((x) => x.id == entry.id);
+    if (object == null || !p_keyframe) {
       return false;
     }
-    var inst = canvas;
     var start = false;
-    if (recording) {
-      object = canvasrecord.getItemById(object.id);
-      inst = canvasrecord;
-    }
     if (
       object.get('id').indexOf('Video') >= 0 &&
-      p_keyframes.find((x) => x.id == object.id).trimstart +
-        p_keyframes.find((x) => x.id == object.id).start <=
-        time &&
-      p_keyframes.find((x) => x.id == object.id).end >= time
+      p_keyframe.trimstart + p_keyframe.start <= time &&
+      p_keyframe.end >= time
     ) {
       var tempfilters = object.filters;
       if (object.filters.length > 0) {
@@ -1334,9 +1481,7 @@ async function playVideos(time) {
       if ($(object.getElement())[0].paused == true) {
         $(object.getElement())[0].currentTime = parseFloat(
           (
-            (time -
-              p_keyframes.find((x) => x.id == object.id).start +
-              p_keyframes.find((x) => x.id == object.id).trimstart) /
+            (time - p_keyframe.start + p_keyframe.trimstart) /
             1000
           ).toFixed(2)
         );
@@ -1394,10 +1539,7 @@ async function playVideos(time) {
         if (paused) {
           $(object.getElement())[0].currentTime = parseFloat(
             (
-              (time -
-                p_keyframes.find((x) => x.id == object.id).start +
-                p_keyframes.find((x) => x.id == object.id)
-                  .trimstart) /
+              (time - p_keyframe.start + p_keyframe.trimstart) /
               1000
             ).toFixed(2)
           );
@@ -1424,10 +1566,11 @@ async function playVideos(time) {
 
 // Play background audio
 function playAudio(time) {
-  objects.forEach(async function (object) {
+  objects.forEach(function (object) {
     var start = false;
     var obj = canvas.getItemById(object.id);
-    if (obj.get('assetType') == 'audio') {
+    var p_keyframe = p_keyframes.find((x) => x.id == object.id);
+    if (obj && p_keyframe && obj.get('assetType') == 'audio') {
       var flag = false;
       var animation = {
         value: 0,
@@ -1439,20 +1582,20 @@ function playAudio(time) {
         duration: duration,
         easing: 'linear',
         autoplay: true,
-        update: async function () {
-          if (start && play && !paused) {
+        update: function () {
+          // `paused` is the only playback flag here; `play` used to be read
+          // as a variable but resolves to the global play() function, so the
+          // condition was always true.
+          if (start && !paused) {
             if (
               !flag &&
-              p_keyframes.find((x) => x.id == object.id).start <=
-                currenttime &&
-              p_keyframes.find((x) => x.id == object.id).end >=
-                currenttime
+              p_keyframe.start <= currenttime &&
+              p_keyframe.end >= currenttime
             ) {
               if (obj.get('src')) {
                 obj.get('src').currentTime =
-                  (p_keyframes.find((x) => x.id == object.id)
-                    .trimstart -
-                    p_keyframes.find((x) => x.id == object.id).start +
+                  (p_keyframe.trimstart -
+                    p_keyframe.start +
                     currenttime) /
                   1000;
                 obj.get('src').volume = obj.get('volume');
@@ -1464,19 +1607,16 @@ function playAudio(time) {
                 audio.volume = obj.get('volume');
                 audio.crossOrigin = 'anonymous';
                 audio.currentTime =
-                  (p_keyframes.find((x) => x.id == object.id)
-                    .trimstart -
-                    p_keyframes.find((x) => x.id == object.id).start +
+                  (p_keyframe.trimstart -
+                    p_keyframe.start +
                     currenttime) /
                   1000;
                 audio.play();
                 flag = true;
               }
             } else if (
-              p_keyframes.find((x) => x.id == object.id).start >=
-                currenttime ||
-              p_keyframes.find((x) => x.id == object.id).end <=
-                currenttime
+              p_keyframe.start >= currenttime ||
+              p_keyframe.end <= currenttime
             ) {
               if (obj.get('src')) {
                 obj.get('src').pause();
@@ -1502,6 +1642,7 @@ async function recordAnimate(time) {
   anime.speed = 1;
   //return new Promise(function(resolve){
   var inst = canvasrecord;
+  const idx = buildKeyframeIndex();
   if (animatedtext.length > 0) {
     animatedtext.forEach(function (text) {
       text.seek(time, inst);
@@ -1515,33 +1656,23 @@ async function recordAnimate(time) {
         reGroup(keyframe.id);
       }
       const object = inst.getItemById(keyframe.id);
-      if (!object) {
+      const p_keyframe = p_keyframes.find((x) => x.id == keyframe.id);
+      if (!object || !p_keyframe) {
         return;
       }
-      if (
-        time <
-        p_keyframes.find((x) => x.id == keyframe.id).trimstart +
-          p_keyframes.find((x) => x.id == keyframe.id).start
-      ) {
+      if (time < p_keyframe.trimstart + p_keyframe.start) {
         object.set('visible', false);
         inst.renderAll();
-      } else if (
-        time > p_keyframes.find((x) => x.id == keyframe.id).end ||
-        time > duration
-      ) {
+      } else if (time > p_keyframe.end || time > duration) {
         object.set('visible', false);
         inst.renderAll();
       } else {
         object.set('visible', true);
         inst.renderAll();
       }
-      if (
-        time >=
-        p_keyframes.find((x) => x.id == keyframe.id).trimstart +
-          p_keyframes.find((x) => x.id == keyframe.id).start
-      ) {
+      if (time >= p_keyframe.trimstart + p_keyframe.start) {
         props.forEach(function (prop) {
-          checkAnyKeyframe(keyframe.id, prop, inst);
+          checkAnyKeyframe(keyframe.id, prop, inst, idx);
         });
       }
     }
@@ -1574,8 +1705,6 @@ async function recordAnimate(time) {
         object.shadow.offsetX = value;
       } else if (prop == 'shadow.offsetY') {
         object.shadow.offsetY = value;
-      } else if (prop == 'shadow.blur') {
-        object.shadow.blur = value;
       } else if (object.get('type') != 'group') {
         object.set(prop, value);
       } else if (prop != 'width') {
@@ -1585,30 +1714,6 @@ async function recordAnimate(time) {
       inst.renderAll();
     }
 
-    // Find next keyframe in time from same object & property
-    function nextKeyframe(keyframe, index) {
-      var temparr = keyframes.slice();
-      temparr.sort(function (a, b) {
-        return a.t - b.t;
-      });
-      temparr.splice(0, temparr.findIndex((x) => x === keyframe) + 1);
-      if (temparr.length == 0) {
-        return false;
-      } else {
-        for (var i = 0; i < temparr.length; i++) {
-          if (
-            temparr[i].id == keyframe.id &&
-            temparr[i].name == keyframe.name
-          ) {
-            return temparr[i];
-            break;
-          } else if (i == temparr.length - 1) {
-            return false;
-          }
-        }
-      }
-    }
-
     var object = canvasrecord.getItemById(keyframe.id);
     if (!object) {
       return;
@@ -1623,12 +1728,13 @@ async function recordAnimate(time) {
       var start = false;
       var lasttime, lastprop;
       // Find last keyframe in time from same object & property
-      var lastkey = lastKeyframe(keyframe, index);
+      var lastkey = lastKeyframe(keyframe, idx);
       if (!lastkey) {
         lasttime = 0;
-        lastprop = objects
-          .find((x) => x.id == keyframe.id)
-          .defaults.find((x) => x.name == keyframe.name).value;
+        lastprop = getDefaultValue(keyframe.id, keyframe.name);
+        if (lastprop === undefined) {
+          return;
+        }
       } else {
         lasttime = lastkey.t;
         lastprop = lastkey.value;
@@ -1674,7 +1780,7 @@ async function recordAnimate(time) {
       ) {
         setValue(keyframe.name, object, animation.value, inst);
       }
-    } else if (keyframe.t < time && !nextKeyframe(keyframe, index)) {
+    } else if (keyframe.t < time && !nextKeyframe(keyframe, idx)) {
       var prop = keyframe.name;
       if (prop == 'shadow.blur') {
         if (object.shadow.blur != keyframe.value) {
@@ -1705,37 +1811,31 @@ async function recordAnimate(time) {
       // Visibility has to be applied to the object on the recording canvas,
       // at the time of the frame being rendered (not the editor playhead).
       const object2 = inst.getItemById(object.id);
-      if (!object2) {
+      const p_keyframe = p_keyframes.find((x) => x.id == object.id);
+      if (!object2 || !p_keyframe) {
         return;
       }
-      if (
-        time <
-        p_keyframes.find((x) => x.id == object.id).trimstart +
-          p_keyframes.find((x) => x.id == object.id).start
-      ) {
+      if (time < p_keyframe.trimstart + p_keyframe.start) {
         object2.set('visible', false);
-      } else if (
-        time > p_keyframes.find((x) => x.id == object.id).end ||
-        time > duration
-      ) {
+      } else if (time > p_keyframe.end || time > duration) {
         object2.set('visible', false);
       } else {
         object2.set('visible', true);
       }
-      if (
-        time >=
-        p_keyframes.find((x) => x.id == object.id).trimstart +
-          p_keyframes.find((x) => x.id == object.id).start
-      ) {
+      if (time >= p_keyframe.trimstart + p_keyframe.start) {
         props.forEach(function (prop) {
-          checkAnyKeyframe(object.id, prop, inst);
+          checkAnyKeyframe(object.id, prop, inst, idx);
         });
       }
     }
   });
   inst.renderAll();
 
-  playVideos(time);
+  // The offline renderer seeks each video layer to the exact frame time
+  // itself; playVideos() would fight it by starting real-time playback.
+  if (!offlinerender) {
+    playVideos(time);
+  }
   //});
 }
 
@@ -1743,52 +1843,27 @@ async function recordAnimate(time) {
 async function animate(play, time) {
   anime.speed = speed;
   if (!draggingPanel) {
-    var starttime = new Date();
     var offset = time;
     var inst = canvas;
+    const idx = buildKeyframeIndex();
     keyframes.forEach(function (keyframe, index) {
-      // Find next keyframe in time from same object & property
-      function nextKeyframe(keyframe, index) {
-        var temparr = keyframes.slice();
-        temparr.sort(function (a, b) {
-          return a.t - b.t;
-        });
-        temparr.splice(
-          0,
-          temparr.findIndex((x) => x === keyframe) + 1
-        );
-        if (temparr.length == 0) {
-          return false;
-        } else {
-          for (var i = 0; i < temparr.length; i++) {
-            if (
-              temparr[i].id == keyframe.id &&
-              temparr[i].name == keyframe.name
-            ) {
-              return temparr[i];
-              break;
-            } else if (i == temparr.length - 1) {
-              return false;
-            }
-          }
-        }
-      }
       // Regroup if needed (groups break to animate their children, then regroup after children have animated)
       if (groups.find((x) => x.id == keyframe.id)) {
         if (!canvas.getItemById(keyframe.id)) {
           reGroup(keyframe.id);
         }
         const object = canvas.getItemById(keyframe.id);
-        if (
-          currenttime <
-          p_keyframes.find((x) => x.id == keyframe.id).trimstart +
-            p_keyframes.find((x) => x.id == keyframe.id).start
-        ) {
+        const p_keyframe = p_keyframes.find(
+          (x) => x.id == keyframe.id
+        );
+        if (!object || !p_keyframe) {
+          return;
+        }
+        if (currenttime < p_keyframe.trimstart + p_keyframe.start) {
           object.set('visible', false);
           inst.renderAll();
         } else if (
-          currenttime >
-            p_keyframes.find((x) => x.id == keyframe.id).end ||
+          currenttime > p_keyframe.end ||
           currenttime > duration
         ) {
           object.set('visible', false);
@@ -1797,13 +1872,9 @@ async function animate(play, time) {
           object.set('visible', true);
           inst.renderAll();
         }
-        if (
-          currenttime >=
-          p_keyframes.find((x) => x.id == keyframe.id).trimstart +
-            p_keyframes.find((x) => x.id == keyframe.id).start
-        ) {
+        if (currenttime >= p_keyframe.trimstart + p_keyframe.start) {
           props.forEach(function (prop) {
-            checkAnyKeyframe(keyframe.id, prop, inst);
+            checkAnyKeyframe(keyframe.id, prop, inst, idx);
           });
         }
       }
@@ -1845,8 +1916,6 @@ async function animate(play, time) {
           object.shadow.offsetX = value;
         } else if (prop == 'shadow.offsetY') {
           object.shadow.offsetY = value;
-        } else if (prop == 'shadow.blur') {
-          object.shadow.blur = value;
         } else if (object.get('type') != 'group') {
           object.set(prop, value);
         } else if (prop != 'width') {
@@ -1856,22 +1925,28 @@ async function animate(play, time) {
       }
 
       var object = canvas.getItemById(keyframe.id);
+      var kf_p_keyframe = p_keyframes.find(
+        (x) => x.id == keyframe.id
+      );
+      if (!object || !kf_p_keyframe) {
+        return;
+      }
       if (
         keyframe.t >= time &&
         currenttime >=
-          p_keyframes.find((x) => x.id == keyframe.id).trimstart +
-            p_keyframes.find((x) => x.id == keyframe.id).start
+          kf_p_keyframe.trimstart + kf_p_keyframe.start
       ) {
         var delay = 0;
         var start = false;
         var lasttime, lastprop;
         // Find last keyframe in time from same object & property
-        var lastkey = lastKeyframe(keyframe, index);
+        var lastkey = lastKeyframe(keyframe, idx);
         if (!lastkey) {
           lasttime = 0;
-          lastprop = objects
-            .find((x) => x.id == keyframe.id)
-            .defaults.find((x) => x.name == keyframe.name).value;
+          lastprop = getDefaultValue(keyframe.id, keyframe.name);
+          if (lastprop === undefined) {
+            return;
+          }
         } else {
           lasttime = lastkey.t;
           lastprop = lastkey.value;
@@ -1900,12 +1975,8 @@ async function animate(play, time) {
             if (start && !paused) {
               if (
                 currenttime <
-                  p_keyframes.find((x) => x.id == keyframe.id)
-                    .trimstart +
-                    p_keyframes.find((x) => x.id == keyframe.id)
-                      .start ||
-                currenttime >
-                  p_keyframes.find((x) => x.id == keyframe.id).end ||
+                  kf_p_keyframe.trimstart + kf_p_keyframe.start ||
+                currenttime > kf_p_keyframe.end ||
                 currenttime > duration
               ) {
                 object.set('visible', false);
@@ -1945,7 +2016,7 @@ async function animate(play, time) {
         }
       } else if (
         keyframe.t < time &&
-        !nextKeyframe(keyframe, index)
+        !nextKeyframe(keyframe, idx)
       ) {
         var prop = keyframe.name;
         if (prop == 'left' && !recording) {
@@ -2007,33 +2078,28 @@ async function animate(play, time) {
     objects.forEach(function (object) {
       if (object.id.indexOf('Group') == -1) {
         const object2 = canvas.getItemById(object.id);
-        if (
-          currenttime <
-          p_keyframes.find((x) => x.id == object.id).trimstart +
-            p_keyframes.find((x) => x.id == object.id).start
-        ) {
+        const p_keyframe = p_keyframes.find((x) => x.id == object.id);
+        if (!object2 || !p_keyframe) {
+          return;
+        }
+        if (currenttime < p_keyframe.trimstart + p_keyframe.start) {
           object2.set('visible', false);
         } else if (
-          currenttime >
-            p_keyframes.find((x) => x.id == object.id).end ||
+          currenttime > p_keyframe.end ||
           currenttime > duration
         ) {
           object2.set('visible', false);
         } else {
           object2.set('visible', true);
         }
-        if (
-          currenttime >=
-          p_keyframes.find((x) => x.id == object.id).trimstart +
-            p_keyframes.find((x) => x.id == object.id).start
-        ) {
+        if (currenttime >= p_keyframe.trimstart + p_keyframe.start) {
           props.forEach(function (prop) {
-            checkAnyKeyframe(object.id, prop, inst);
+            checkAnyKeyframe(object.id, prop, inst, idx);
           });
         }
       }
       var obj = canvas.getItemById(object.id);
-      if (obj.type == 'lottie') {
+      if (obj && obj.type == 'lottie') {
         obj.goToSeconds(currenttime);
         inst.renderAll();
       }
@@ -2073,16 +2139,19 @@ async function animate(play, time) {
             objects.forEach(function (object) {
               if (object.id.indexOf('Group') == -1) {
                 const object2 = inst.getItemById(object.id);
+                const p_keyframe = p_keyframes.find(
+                  (x) => x.id == object.id
+                );
+                if (!object2 || !p_keyframe) {
+                  return;
+                }
                 if (
                   currenttime <
-                  p_keyframes.find((x) => x.id == object.id)
-                    .trimstart +
-                    p_keyframes.find((x) => x.id == object.id).start
+                  p_keyframe.trimstart + p_keyframe.start
                 ) {
                   object2.set('visible', false);
                 } else if (
-                  currenttime >
-                    p_keyframes.find((x) => x.id == object.id).end ||
+                  currenttime > p_keyframe.end ||
                   currenttime > duration
                 ) {
                   object2.set('visible', false);
@@ -2091,17 +2160,15 @@ async function animate(play, time) {
                 }
                 if (
                   currenttime >=
-                  p_keyframes.find((x) => x.id == object.id)
-                    .trimstart +
-                    p_keyframes.find((x) => x.id == object.id).start
+                  p_keyframe.trimstart + p_keyframe.start
                 ) {
                   props.forEach(function (prop) {
-                    checkAnyKeyframe(object.id, prop, inst);
+                    checkAnyKeyframe(object.id, prop, inst, idx);
                   });
                 }
               }
               var obj = canvas.getItemById(object.id);
-              if (obj.type == 'lottie') {
+              if (obj && obj.type == 'lottie') {
                 obj.goToSeconds(currenttime);
                 inst.renderAll();
               }
@@ -2129,64 +2196,53 @@ async function animate(play, time) {
   }
 }
 
-// Render a keyframe
+// Keep group keyframes last so children animate before their group regroups
+function sortKeyframes() {
+  keyframes.sort(function (a, b) {
+    if (a.id.indexOf('Group') >= 0 && b.id.indexOf('Group') == -1) {
+      return 1;
+    } else if (
+      b.id.indexOf('Group') >= 0 &&
+      a.id.indexOf('Group') == -1
+    ) {
+      return -1;
+    } else {
+      return 0;
+    }
+  });
+}
+
+// Render a keyframe.
+// data-time is ALWAYS the absolute timeline time, because every lookup keys
+// off it. The CSS offset is relative, since the row it lives in is already
+// shifted by the layer start.
 function renderKeyframe(object, prop, time) {
-  const color = objects.find((x) => x.id == object.id).color;
-  if (prop == 'shadow.color') {
-    if (
-      $('#' + object.get('id'))
-        .find('.shadowcolor')
-        .is(':visible')
-    ) {
-      time =
-        time -
-        parseFloat(
-          p_keyframes.find((x) => x.id == object.get('id')).start
-        );
-    }
-    $('#' + object.get('id'))
-      .find('.shadowcolor')
-      .prepend(
-        "<div class='keyframe' data-time='" +
-          time +
-          "' data-object='" +
-          object.get('id') +
-          "' data-property='" +
-          prop +
-          "'></div>"
-      );
-    $('#' + object.get('id'))
-      .find('.shadowcolor')
-      .find("[data-time='" + time + "']")
-      .css({ left: time / timelinetime, background: color });
-  } else {
-    if (
-      $('#' + object.get('id'))
-        .find('.' + prop)
-        .is(':visible')
-    ) {
-      time =
-        time -
-        parseFloat(
-          p_keyframes.find((x) => x.id == object.get('id')).start
-        );
-    }
-    $('#' + object.get('id'))
-      .find('.' + prop)
-      .prepend(
-        "<div class='keyframe' data-time='" +
-          time +
-          "' data-object='" +
-          object.get('id') +
-          "' data-property='" +
-          prop +
-          "'></div>"
-      );
-    $('#' + object.get('id'))
-      .find('.' + prop)
-      .find("[data-time='" + time + "']")
-      .css({ left: time / timelinetime, background: color });
+  const entry = objects.find((x) => x.id == object.get('id'));
+  const p_keyframe = p_keyframes.find(
+    (x) => x.id == object.get('id')
+  );
+  if (!entry || !p_keyframe) {
+    return;
   }
+  const color = entry.color;
+  const rowclass = prop == 'shadow.color' ? 'shadowcolor' : prop;
+  const row = $('#' + object.get('id')).find('.' + rowclass);
+  if (row.length == 0) {
+    return;
+  }
+  const displaytime = time - parseFloat(p_keyframe.start);
+  row.prepend(
+    "<div class='keyframe' data-time='" +
+      time +
+      "' data-object='" +
+      object.get('id') +
+      "' data-property='" +
+      prop +
+      "'></div>"
+  );
+  row
+    .find("[data-time='" + time + "'][data-property='" + prop + "']")
+    .css({ left: displaytime / timelinetime, background: color });
 }
 
 // Create a keyframe
@@ -2210,19 +2266,19 @@ function newKeyframe(property, object, time, value, render) {
     });
     if (keyarr2.length == 0) {
       if (property == 'left') {
-        objects
-          .find((x) => x.id == object.get('id'))
-          .defaults.find((x) => x.name == property).value =
-          object.get(property) - artboard.get('left');
+        setDefaultValue(
+          object,
+          property,
+          object.get(property) - artboard.get('left')
+        );
       } else if (property == 'top') {
-        objects
-          .find((x) => x.id == object.get('id'))
-          .defaults.find((x) => x.name == property).value =
-          object.get(property) - artboard.get('top');
+        setDefaultValue(
+          object,
+          property,
+          object.get(property) - artboard.get('top')
+        );
       } else {
-        objects
-          .find((x) => x.id == object.get('id'))
-          .defaults.find((x) => x.name == property).value = value;
+        setDefaultValue(object, property, value);
       }
     }
     if (keyarr.length == 0) {
@@ -2266,21 +2322,7 @@ function newKeyframe(property, object, time, value, render) {
       ) {
         renderKeyframe(object, property, time);
       }
-      keyframes.sort(function (a, b) {
-        if (
-          a.id.indexOf('Group') >= 0 &&
-          b.id.indexOf('Group') == -1
-        ) {
-          return 1;
-        } else if (
-          b.id.indexOf('Group') >= 0 &&
-          a.id.indexOf('Group') == -1
-        ) {
-          return -1;
-        } else {
-          return 0;
-        }
-      });
+      sortKeyframes();
     } else if (render) {
       if (
         property != 'top' &&
@@ -2308,19 +2350,19 @@ function newKeyframe(property, object, time, value, render) {
     }
   } else {
     if (property == 'left') {
-      objects
-        .find((x) => x.id == object.get('id'))
-        .defaults.find((x) => x.name == property).value =
-        object.get(property) - artboard.get('left');
+      setDefaultValue(
+        object,
+        property,
+        object.get(property) - artboard.get('left')
+      );
     } else if (property == 'top') {
-      objects
-        .find((x) => x.id == object.get('id'))
-        .defaults.find((x) => x.name == property).value =
-        object.get(property) - artboard.get('top');
+      setDefaultValue(
+        object,
+        property,
+        object.get(property) - artboard.get('top')
+      );
     } else {
-      objects
-        .find((x) => x.id == object.get('id'))
-        .defaults.find((x) => x.name == property).value = value;
+      setDefaultValue(object, property, value);
     }
   }
 }
@@ -2368,32 +2410,33 @@ function manualKeyframe() {
     );
   } else if (prop == 'shadow') {
     prop = 'shadow.color';
+    // fabric's get() is not a path getter - read the shadow object directly
     newKeyframe(
       'shadow.opacity',
       object,
       currenttime,
-      object.get('shadow.opacity'),
+      object.shadow.opacity,
       true
     );
     newKeyframe(
       'shadow.offsetX',
       object,
       currenttime,
-      object.get('shadow.offsetX'),
+      object.shadow.offsetX,
       true
     );
     newKeyframe(
       'shadow.offsetY',
       object,
       currenttime,
-      object.get('shadow.offsetY'),
+      object.shadow.offsetY,
       true
     );
     newKeyframe(
       'shadow.blur',
       object,
       currenttime,
-      object.get('shadow.blur'),
+      object.shadow.blur,
       true
     );
   } else if (prop == 'text') {
@@ -2406,7 +2449,7 @@ function manualKeyframe() {
       true
     );
   }
-  newKeyframe(prop, object, currenttime, object.get(prop), true);
+  newKeyframe(prop, object, currenttime, getPropValue(object, prop), true);
   save();
 }
 $(document).on('click', '.property-keyframe', manualKeyframe);
@@ -2526,14 +2569,8 @@ function animateProp(prop, object) {
       true
     );
     newKeyframe('top', object, currenttime, object.get('top'), true);
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'left').value =
-      object.get('left') - artboard.get('left');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'top').value =
-      object.get('top') - artboard.get('top');
+    setDefaultValue(object, 'left', object.get('left') - artboard.get('left'));
+    setDefaultValue(object, 'top', object.get('top') - artboard.get('top'));
   } else if (prop == 'scaleX') {
     newKeyframe(
       'scaleY',
@@ -2565,18 +2602,9 @@ function animateProp(prop, object) {
     objects
       .find((x) => x.id == object.get('id'))
       .animate.push('height');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'height').value =
-      object.get('height');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'width').value =
-      object.get('width');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'scaleY').value =
-      object.get('scaleY');
+    setDefaultValue(object, 'height', object.get('height'));
+    setDefaultValue(object, 'width', object.get('width'));
+    setDefaultValue(object, 'scaleY', object.get('scaleY'));
   } else if (prop == 'strokeWidth') {
     newKeyframe(
       'stroke',
@@ -2585,10 +2613,7 @@ function animateProp(prop, object) {
       object.get('stroke'),
       true
     );
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'stroke').value =
-      object.get('stroke');
+    setDefaultValue(object, 'stroke', object.get('stroke'));
     objects
       .find((x) => x.id == object.get('id'))
       .animate.push('stroke');
@@ -2628,26 +2653,11 @@ function animateProp(prop, object) {
       object.shadow.blur,
       true
     );
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.color').value =
-      object.get('shadow.color');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.opacity').value =
-      object.get('shadow.opacity');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.offsetX').value =
-      object.get('shadow.offsetX');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.offsetY').value =
-      object.get('shadow.offsetY');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.blur').value =
-      object.get('shadow.blur');
+    setDefaultValue(object, 'shadow.color', object.shadow.color);
+    setDefaultValue(object, 'shadow.opacity', object.shadow.opacity);
+    setDefaultValue(object, 'shadow.offsetX', object.shadow.offsetX);
+    setDefaultValue(object, 'shadow.offsetY', object.shadow.offsetY);
+    setDefaultValue(object, 'shadow.blur', object.shadow.blur);
     objects
       .find((x) => x.id == object.get('id'))
       .animate.push('shadow.opacity');
@@ -2668,10 +2678,7 @@ function animateProp(prop, object) {
       object.get('lineHeight'),
       true
     );
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'lineHeight').value =
-      object.get('lineHeight');
+    setDefaultValue(object, 'lineHeight', object.get('lineHeight'));
     objects
       .find((x) => x.id == object.get('id'))
       .animate.push('lineHeight');
@@ -2680,9 +2687,7 @@ function animateProp(prop, object) {
   // Exception
   if (prop != 'left' && prop != 'shadow.color') {
     newKeyframe(prop, object, currenttime, object.get(prop), true);
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == prop).value = object.get(prop);
+    setDefaultValue(object, prop, object.get(prop));
   }
 }
 
@@ -2704,27 +2709,12 @@ function freezeProp(prop, object) {
     keyframes = $.grep(keyframes, function (e) {
       return e.id != object.get('id') || e.name != 'top';
     });
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'left').value =
-      object.get('left') - artboard.get('left');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'top').value =
-      object.get('top') - artboard.get('top');
+    setDefaultValue(object, 'left', object.get('left') - artboard.get('left'));
+    setDefaultValue(object, 'top', object.get('top') - artboard.get('top'));
   } else if (prop == 'scaleX') {
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'height').value =
-      object.get('height');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'width').value =
-      object.get('width');
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'scaleY').value =
-      object.get('scaleY');
+    setDefaultValue(object, 'height', object.get('height'));
+    setDefaultValue(object, 'width', object.get('width'));
+    setDefaultValue(object, 'scaleY', object.get('scaleY'));
     objects.find((x) => x.id == object.get('id')).animate = $.grep(
       objects.find((x) => x.id == object.get('id')).animate,
       function (e) {
@@ -2753,10 +2743,7 @@ function freezeProp(prop, object) {
       return e.id != object.get('id') || e.name != 'height';
     });
   } else if (prop == 'strokeWidth') {
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'stroke').value =
-      object.get('stroke');
+    setDefaultValue(object, 'stroke', object.get('stroke'));
     objects.find((x) => x.id == object.get('id')).animate = $.grep(
       objects.find((x) => x.id == object.get('id')).animate,
       function (e) {
@@ -2767,22 +2754,10 @@ function freezeProp(prop, object) {
       return e.id != object.get('id') || e.name != 'stroke';
     });
   } else if (prop == 'shadow.color') {
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.opacity').value =
-      object.shadow.opacity;
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.offsetX').value =
-      object.shadow.offsetX;
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.offsetY').value =
-      object.shadow.offsetY;
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'shadow.blur').value =
-      object.shadow.blur;
+    setDefaultValue(object, 'shadow.opacity', object.shadow.opacity);
+    setDefaultValue(object, 'shadow.offsetX', object.shadow.offsetX);
+    setDefaultValue(object, 'shadow.offsetY', object.shadow.offsetY);
+    setDefaultValue(object, 'shadow.blur', object.shadow.blur);
     keyframes = $.grep(keyframes, function (e) {
       return e.id != object.get('id') || e.name != 'shadow.opacity';
     });
@@ -2820,10 +2795,7 @@ function freezeProp(prop, object) {
       }
     );
   } else if (prop == 'charSpacing') {
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == 'lineHeight').value =
-      object.get('lineHeight');
+    setDefaultValue(object, 'lineHeight', object.get('lineHeight'));
     objects.find((x) => x.id == object.get('id')).animate = $.grep(
       objects.find((x) => x.id == object.get('id')).animate,
       function (e) {
@@ -2841,9 +2813,7 @@ function freezeProp(prop, object) {
 
   // Exception
   if (prop != 'left' && prop != 'shadow.color') {
-    objects
-      .find((x) => x.id == object.get('id'))
-      .defaults.find((x) => x.name == prop).value = object.get(prop);
+    setDefaultValue(object, prop, object.get(prop));
   }
 
   $(
@@ -2944,7 +2914,11 @@ function lockLayer(e) {
     $(this).removeClass('locked');
     $(this).attr('src', 'assets/lock.svg');
     object.selectable = true;
-    $(this).parent().parent().parent().attr('draggable', true);
+    $(this)
+      .parent()
+      .parent()
+      .find('.layer-handle')
+      .attr('draggable', true);
   } else {
     $(this).addClass('locked');
     $(this).attr('src', 'assets/locked.svg');
@@ -2953,7 +2927,11 @@ function lockLayer(e) {
       canvas.discardActiveObject();
       canvas.renderAll();
     }
-    $(this).parent().parent().parent().attr('draggable', false);
+    $(this)
+      .parent()
+      .parent()
+      .find('.layer-handle')
+      .attr('draggable', false);
   }
   save();
 }
@@ -2972,8 +2950,15 @@ function centerObject(object) {
 
 // Render a layer
 function renderLayer(object, animate = false) {
+  const entry = objects.find((x) => x.id == object.get('id'));
+  const p_keyframe = p_keyframes.find(
+    (x) => x.id == object.get('id')
+  );
+  if (!entry || !p_keyframe) {
+    return;
+  }
   $('#nolayers').addClass('yaylayers');
-  const color = objects.find((x) => x.id == object.get('id')).color;
+  const color = entry.color;
   var src = '';
   var classlock = '';
   var srclock = 'lock';
@@ -3014,20 +2999,14 @@ function renderLayer(object, animate = false) {
   if (animate != false) {
     freeze = 'frozen';
   }
-  const leftoffset =
-    p_keyframes.find((x) => x.id == object.get('id')).trimstart /
-    timelinetime;
+  const leftoffset = p_keyframe.trimstart / timelinetime;
   const width =
-    (p_keyframes.find((x) => x.id == object.get('id')).end -
-      p_keyframes.find((x) => x.id == object.get('id')).trimstart) /
-    timelinetime;
+    (p_keyframe.end - p_keyframe.trimstart) / timelinetime;
   $('#inner-timeline').prepend(
     "<div class='object-props' id='" +
       object.get('id') +
       "' style='width:" +
-      (p_keyframes.find((x) => x.id == object.get('id')).end -
-        p_keyframes.find((x) => x.id == object.get('id')).start) /
-        timelinetime +
+      (p_keyframe.end - p_keyframe.start) / timelinetime +
       "px'><div class='row main-row'><div class='row-el' style='background-color:" +
       color +
       "'><div class='trim-row' style='left:" +
@@ -3046,10 +3025,10 @@ function renderLayer(object, animate = false) {
     $('#layer-inner-list').prepend(
       "<div class='layer' data-object='" +
         object.get('id') +
-        "'><div class='layer-name'><img class='droparrow' src='assets/drop-arrow.svg' ><img class='layer-icon' src=" +
+        "'><div class='layer-name'><div class='layer-handle' title='Drag to reorder'></div><img class='droparrow' src='assets/drop-arrow.svg' ><img class='layer-icon' src=" +
         src +
         "><input class='layer-custom-name' value='" +
-        objects.find((x) => x.id == object.get('id')).label +
+        entry.label +
         "' readonly></span><div class='layer-options'><img class='" +
         freeze +
         "' src='assets/" +
@@ -3060,10 +3039,10 @@ function renderLayer(object, animate = false) {
     $('#layer-inner-list').prepend(
       "<div class='layer' data-object='" +
         object.get('id') +
-        "'><div class='layer-name'><img class='droparrow' src='assets/drop-arrow.svg' ><img class='layer-icon' src=" +
+        "'><div class='layer-name'><div class='layer-handle' title='Drag to reorder'></div><img class='droparrow' src='assets/drop-arrow.svg' ><img class='layer-icon' src=" +
         src +
         "><input class='layer-custom-name' value='" +
-        objects.find((x) => x.id == object.get('id')).label +
+        entry.label +
         "' readonly></span><div class='layer-options'><img class='lock " +
         classlock +
         "' src='assets/" +
@@ -3079,35 +3058,27 @@ function renderLayer(object, animate = false) {
     .find('.properties')
     .toggle();
   setTimelineZoom(timelinetime);
-  sortable('#layer-inner-list', {
-    placeholderClass: 'hovering',
-    copy: true,
-    customDragImage: (draggedElement, elementOffset, event) => {
-      return {
-        element: document.getElementById('nothing'),
-        posX: event.pageX - elementOffset.left,
-        posY: event.pageY - elementOffset.top,
-      };
-    },
-  });
+  // Make the new layer draggable (html5sortable only wires up the
+  // children that exist when it is initialized)
+  if (typeof initLayerSortable == 'function') {
+    initLayerSortable();
+  }
   if (object.selectable == false) {
-    $(".layer[data-object='" + object.get('id') + "']").attr(
-      'draggable',
-      false
-    );
+    $(".layer[data-object='" + object.get('id') + "']")
+      .find('.layer-handle')
+      .attr('draggable', false);
   }
 }
 
 // Render a property
 function renderProp(prop, object) {
   var classfreeze = '';
-  srcfreeze = 'freeze';
-  if (
-    $.inArray(
-      prop,
-      objects.find((x) => x.id == object.get('id')).animate
-    ) != -1
-  ) {
+  var srcfreeze = 'freeze';
+  const entry = objects.find((x) => x.id == object.get('id'));
+  if (!entry) {
+    return;
+  }
+  if ($.inArray(prop, entry.animate) != -1) {
     classfreeze = 'frozen';
     srcfreeze = 'frozen';
   }
@@ -3218,6 +3189,10 @@ function newLayer(object) {
     } else if (object.get('assetType') == 'audio') {
       color = '#11C0F7';
     }
+  } else if (object.get('type') == 'lottie') {
+    color = '#F1890E';
+  } else {
+    color = '#9211F7';
   }
   if (
     (object.get('assetType') && object.get('assetType') == 'video') ||
@@ -3235,25 +3210,20 @@ function newLayer(object) {
       start: 0,
       end: object.get('duration'),
     });
-    if (object.get('duration') < duration) {
-      p_keyframes.push({
-        start: currenttime,
-        end: object.get('duration') + currenttime,
-        trimstart: 0,
-        trimend: object.get('duration') + currenttime,
-        object: object,
-        id: object.get('id'),
-      });
-    } else {
-      p_keyframes.push({
-        start: currenttime,
-        end: duration - currenttime,
-        trimstart: 0,
-        trimend: duration - currenttime,
-        object: object,
-        id: object.get('id'),
-      });
-    }
+    // Clamp to the project end. This used to be `duration - currenttime`,
+    // which shortened every layer added after t=0.
+    const mediaend = Math.min(
+      object.get('duration') + currenttime,
+      duration
+    );
+    p_keyframes.push({
+      start: currenttime,
+      end: mediaend,
+      trimstart: 0,
+      trimend: mediaend,
+      object: object,
+      id: object.get('id'),
+    });
   } else {
     objects.push({
       object: object,
@@ -3264,25 +3234,16 @@ function newLayer(object) {
       locked: [],
       mask: 'none',
     });
-    if (object.get('notnew')) {
-      p_keyframes.push({
-        start: object.get('starttime'),
-        end: duration - object.get('starttime'),
-        trimstart: 0,
-        trimend: duration - currenttime,
-        object: object,
-        id: object.get('id'),
-      });
-    } else {
-      p_keyframes.push({
-        start: currenttime,
-        end: duration - currenttime,
-        trimstart: 0,
-        trimend: duration - currenttime,
-        object: object,
-        id: object.get('id'),
-      });
-    }
+    p_keyframes.push({
+      start: object.get('notnew')
+        ? object.get('starttime')
+        : currenttime,
+      end: duration,
+      trimstart: 0,
+      trimend: duration,
+      object: object,
+      id: object.get('id'),
+    });
   }
   renderLayer(object);
   if (
@@ -3370,9 +3331,11 @@ function newLayer(object) {
   $(".layer[data-object='" + object.get('id') + "']").addClass(
     'layer-selected'
   );
-  document
-    .getElementsByClassName('layer-selected')[0]
-    .scrollIntoView();
+  const selectedLayer =
+    document.getElementsByClassName('layer-selected')[0];
+  if (selectedLayer) {
+    selectedLayer.scrollIntoView();
+  }
   objects.find((x) => x.id == object.id).animate = [];
   animate(false, currenttime);
   save();
@@ -3502,6 +3465,10 @@ function loadVideo(src, x, y, center) {
   vidSrc.src = src;
   vidObj.crossOrigin = 'anonymous';
   vidObj.appendChild(vidSrc);
+  vidObj.addEventListener('error', function () {
+    console.error('Could not load video', src);
+    $('#load-video').removeClass('loading-active');
+  });
   vidObj.addEventListener('loadeddata', function () {
     vidObj.width = this.videoWidth;
     vidObj.height = this.videoHeight;
@@ -3547,17 +3514,20 @@ function checkCrop(obj) {
 
 // Perform a crop
 function crop(obj) {
-  var crop = canvas.getItemById('crop');
+  var cropUI = canvas.getItemById('crop');
+  if (!obj || !cropUI || !cropobj) {
+    return;
+  }
   cropobj.setCoords();
-  crop.setCoords();
+  cropUI.setCoords();
   var cleft =
-    crop.get('left') - (crop.get('width') * crop.get('scaleX')) / 2;
+    cropUI.get('left') - (cropUI.get('width') * cropUI.get('scaleX')) / 2;
   var ctop =
-    crop.get('top') - (crop.get('height') * crop.get('scaleY')) / 2;
+    cropUI.get('top') - (cropUI.get('height') * cropUI.get('scaleY')) / 2;
   var height =
-    (crop.get('height') / cropobj.get('scaleY')) * crop.get('scaleY');
+    (cropUI.get('height') / cropobj.get('scaleY')) * cropUI.get('scaleY');
   var width =
-    (crop.get('width') / cropobj.get('scaleX')) * crop.get('scaleX');
+    (cropUI.get('width') / cropobj.get('scaleX')) * cropUI.get('scaleX');
   var img_height = cropobj.get('height') * cropobj.get('scaleY');
   var img_width = cropobj.get('width') * cropobj.get('scaleX');
   var left =
@@ -3603,8 +3573,8 @@ function crop(obj) {
     canvas.renderAll();
   }
   if (obj.get('id') != 'cropped') {
-    canvas.remove(crop);
-    canvas.remove(canvas.getItemById('overlay'));
+    canvas.remove(cropUI);
+    canvas.remove(canvas.getItemById('crop-overlay'));
     canvas.remove(canvas.getItemById('cropped'));
     cropping = false;
     resetControls();
@@ -3613,7 +3583,7 @@ function crop(obj) {
     newKeyframe('scaleX', obj, currenttime, obj.get('scaleX'), true);
     newKeyframe('scaleY', obj, currenttime, obj.get('scaleY'), true);
     newKeyframe('width', obj, currenttime, obj.get('width'), true);
-    newKeyframe('height', obj, currenttime, obj.get('width'), true);
+    newKeyframe('height', obj, currenttime, obj.get('height'), true);
     newKeyframe('left', obj, currenttime, obj.get('left'), true);
     newKeyframe('top', obj, currenttime, obj.get('top'), true);
     $('#properties-overlay').removeClass('properties-disabled');
@@ -3642,7 +3612,8 @@ function overlay() {
       height: artboard.height,
       fill: 'rgba(0,0,0,0.5)',
       selectable: false,
-      id: 'overlay',
+      // Not "overlay": that is the artboard's id
+      id: 'crop-overlay',
     })
   );
 }
@@ -3863,6 +3834,10 @@ function loadImage(src, x, y, width, center) {
   image.onload = function (img) {
     newImage(image, x, y, width, center);
   };
+  image.onerror = function () {
+    console.error('Could not load image', src);
+    $('#load-image').removeClass('loading-active');
+  };
   image.src = src;
 }
 
@@ -3890,19 +3865,15 @@ function createVideoThumbnail(file, max, seekTo = 0.0, isURL) {
       videoPlayer.addEventListener('seeked', () => {
         var oc = document.createElement('canvas');
         var octx = oc.getContext('2d');
-        oc.width = videoPlayer.videoWidth;
-        oc.height = videoPlayer.videoheight;
-        octx.drawImage(videoPlayer, 0, 0);
         if (videoPlayer.videoWidth > videoPlayer.videoHeight) {
+          oc.width = max;
           oc.height =
             (videoPlayer.videoHeight / videoPlayer.videoWidth) * max;
-          oc.width = max;
         } else {
+          oc.height = max;
           oc.width =
             (videoPlayer.videoWidth / videoPlayer.videoHeight) * max;
-          oc.height = max;
         }
-        octx.drawImage(oc, 0, 0, oc.width, oc.height);
         octx.drawImage(videoPlayer, 0, 0, oc.width, oc.height);
         resolve(oc.toDataURL());
       });
@@ -3919,17 +3890,13 @@ function createThumbnail(file, max) {
         if (img.width > max) {
           var oc = document.createElement('canvas');
           var octx = oc.getContext('2d');
-          oc.width = img.width;
-          oc.height = img.height;
-          octx.drawImage(img, 0, 0);
           if (img.width > img.height) {
-            oc.height = (img.height / img.width) * max;
             oc.width = max;
+            oc.height = (img.height / img.width) * max;
           } else {
-            oc.width = (img.width / img.height) * max;
             oc.height = max;
+            oc.width = (img.width / img.height) * max;
           }
-          octx.drawImage(oc, 0, 0, oc.width, oc.height);
           octx.drawImage(img, 0, 0, oc.width, oc.height);
           resolve(oc.toDataURL());
         } else {
@@ -4291,34 +4258,35 @@ $(document).on('click', '.align-text', alignText);
 // Change font
 function changeFont() {
   var font = $('#font-picker').val();
-  if (canvas.getActiveObject().get('assetType')) {
+  const active = canvas.getActiveObject();
+  if (!active || !font) {
+    return;
+  }
+  if (active.get('assetType')) {
     WebFont.load({
       google: {
         families: [font],
       },
       active: () => {
-        var object = canvas.getActiveObject();
-        animatedtext
-          .find((x) => x.id == object.id)
-          .reset(
-            animatedtext.find((x) => x.id == object.id).text,
-            $.extend(
-              animatedtext.find((x) => x.id == object.id).props,
-              { fontFamily: font }
-            ),
-            canvas
-          );
+        const text = animatedtext.find((x) => x.id == active.id);
+        if (!text) {
+          return;
+        }
+        text.reset(
+          text.text,
+          $.extend(text.props, { fontFamily: font }),
+          canvas
+        );
         save();
       },
     });
-    save();
   } else {
     WebFont.load({
       google: {
         families: [font],
       },
       active: () => {
-        canvas.getActiveObject().set('fontFamily', font);
+        active.set('fontFamily', font);
         canvas.renderAll();
         save();
       },
@@ -4396,7 +4364,7 @@ function newTextbox(
     strokeDashArray: false,
     width: calculateTextWidth(
       text,
-      fontweight + ' ' + fontsize + 'px Inter'
+      fontweight + ' ' + fontsize + 'px ' + (font || 'Inter')
     ),
     id: 'Text' + layer_count,
     shadow: {
@@ -4440,11 +4408,22 @@ function deleteObject(object, def = true) {
     });
   }
   if (object.type == 'image') {
-    var temp = files.find((x) => x.name == object.get('id'));
     files = $.grep(files, function (a) {
-      return a != temp.name;
+      return a.name != object.get('id');
     });
   }
+  // Release any media element the object was holding on to
+  if (typeof object.getElement === 'function') {
+    const el = object.getElement();
+    if (el && el.tagName == 'VIDEO') {
+      el.pause();
+      el.removeAttribute('src');
+      el.load();
+    }
+  }
+  if (object.get('src') && typeof object.get('src').pause === 'function') {
+    object.get('src').pause();
+  }
   $(".layer[data-object='" + object.get('id') + "']").remove();
   $('#' + object.get('id')).remove();
   keyframes = $.grep(keyframes, function (e) {
@@ -4519,29 +4498,25 @@ function setDuration(length) {
       ('0' + Math.floor((seconds % 1) * 100)).slice(-2)
   );
   $('.object-props').each(function () {
+    const p_keyframe = p_keyframes.find(
+      (x) => x.id == $(this).attr('id')
+    );
+    if (!p_keyframe) {
+      return;
+    }
     $(this).css(
       'width',
-      duration / timelinetime -
-        p_keyframes.find((x) => x.id == $(this).attr('id')).start /
-          timelinetime +
-        'px'
+      duration / timelinetime - p_keyframe.start / timelinetime + 'px'
     );
-    p_keyframes.find((x) => x.id == $(this).attr('id')).end =
-      duration;
-    if (
-      p_keyframes.find((x) => x.id == $(this).attr('id')).trimend >
-      p_keyframes.find((x) => x.id == $(this).attr('id')).end
-    ) {
-      p_keyframes.find((x) => x.id == $(this).attr('id')).trimend =
-        duration;
+    p_keyframe.end = duration;
+    if (p_keyframe.trimend > p_keyframe.end) {
+      p_keyframe.trimend = duration;
       $(this)
         .find('.trim-row')
         .css(
           'width',
           duration / timelinetime -
-            p_keyframes.find((x) => x.id == $(this).attr('id'))
-              .trimstart /
-              timelinetime +
+            p_keyframe.trimstart / timelinetime +
             'px'
         );
     }
@@ -4578,7 +4553,7 @@ function renderTimeMarkers() {
         's<span></span></div>'
     );
     if (timenumber % modulo != 0) {
-      $('.time-number:last-child()').css('opacity', '0');
+      $('#time-numbers .time-number:last-child').css('opacity', '0');
     }
     timenumber++;
   }
@@ -4587,21 +4562,22 @@ function renderTimeMarkers() {
 // Change timeline zoom level
 function setTimelineZoom(time) {
   $('.object-props').each(function () {
+    const p_keyframe = p_keyframes.find(
+      (x) => x.id == $(this).attr('id')
+    );
+    if (!p_keyframe) {
+      return;
+    }
     $(this).offset({
       left:
-        p_keyframes.find((x) => x.id == $(this).attr('id')).start /
-          time +
+        p_keyframe.start / time +
         $('#inner-timeline').offset().left +
         offset_left,
     });
     $(this).css({ width: ($(this).width() * timelinetime) / time });
     $(this)
       .find('.trim-row')
-      .css({
-        left:
-          p_keyframes.find((x) => x.id == $(this).attr('id'))
-            .trimstart / time,
-      });
+      .css({ left: p_keyframe.trimstart / time });
     $(this)
       .find('.trim-row')
       .css({
@@ -4635,95 +4611,18 @@ $(document).on('input', '#timeline-zoom', function () {
 });
 
 function removeKeyframe() {
+  if (!selectedkeyframe) {
+    return;
+  }
+  const time = selectedkeyframe.attr('data-time');
+  const id = selectedkeyframe.attr('data-object');
+  const prop = selectedkeyframe.attr('data-property');
+  const names = [prop].concat(KEYFRAME_COUNTERPARTS[prop] || []);
   keyframes = $.grep(keyframes, function (e) {
     return (
-      e.t != selectedkeyframe.attr('data-time') ||
-      e.id != selectedkeyframe.attr('data-object') ||
-      e.name != selectedkeyframe.attr('data-property')
+      e.t != time || e.id != id || names.indexOf(e.name) == -1
     );
   });
-  if (selectedkeyframe.attr('data-property') == 'left') {
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'top'
-      );
-    });
-  } else if (selectedkeyframe.attr('data-property') == 'scaleX') {
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'scaleY'
-      );
-    });
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'width'
-      );
-    });
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'height'
-      );
-    });
-  } else if (
-    selectedkeyframe.attr('data-property') == 'strokeWidth'
-  ) {
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'stroke'
-      );
-    });
-  } else if (
-    selectedkeyframe.attr('data-property') == 'shadow.color'
-  ) {
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'shadow.blur'
-      );
-    });
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'shadow.offsetX'
-      );
-    });
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'shadow.offsetY'
-      );
-    });
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'shadow.opacity'
-      );
-    });
-  } else if (
-    selectedkeyframe.attr('data-property') == 'charSpacing'
-  ) {
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != selectedkeyframe.attr('data-time') ||
-        e.id != selectedkeyframe.attr('data-object') ||
-        e.name != 'lineHeight'
-      );
-    });
-  }
   selectedkeyframe.remove();
   $('#keyframe-properties').removeClass('show-properties');
 }
@@ -4744,437 +4643,126 @@ function deleteKeyframe() {
 }
 $(document).on('click', '#delete-keyframe', deleteKeyframe);
 
+// Properties that are always keyframed together with a leading property
+const KEYFRAME_COUNTERPARTS = {
+  left: ['top'],
+  scaleX: ['scaleY', 'width', 'height'],
+  strokeWidth: ['stroke'],
+  'shadow.color': [
+    'shadow.opacity',
+    'shadow.offsetX',
+    'shadow.offsetY',
+    'shadow.blur',
+  ],
+  charSpacing: ['lineHeight'],
+};
+
 // Copy keyframes
 function copyKeyframes() {
+  if (!Array.isArray(clipboard) || clipboard.length == 0) {
+    return;
+  }
   clipboard.sort(function (a, b) {
     return a.t - b.t;
   });
   var inittime = clipboard[0].t;
   clipboard.forEach(function (keyframe) {
+    const object = canvas.getItemById(keyframe.id);
+    if (!object) {
+      return;
+    }
     var newtime = keyframe.t - inittime + currenttime;
     newKeyframe(
       keyframe.name,
-      canvas.getItemById(keyframe.id),
+      object,
       newtime,
       keyframe.value,
       true
     );
-    var keyprop = keyframe.name;
-    if (keyprop == 'left') {
+    // Counterpart properties are stored as separate keyframes at the same
+    // time; copy whichever of them actually exist.
+    const counterparts = KEYFRAME_COUNTERPARTS[keyframe.name] || [];
+    counterparts.forEach(function (name) {
       const keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t && e.id == keyframe.id && e.name == 'top'
-        );
-      });
-      newKeyframe(
-        'top',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-    } else if (keyprop == 'scaleX') {
-      var keyarr2 = $.grep(keyframes, function (e) {
         return (
           e.t == keyframe.t &&
           e.id == keyframe.id &&
-          e.name == 'scaleY'
-        );
-      });
-      newKeyframe(
-        'scaleY',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-      var keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'width'
+          e.name == name
         );
       });
       if (keyarr2.length > 0) {
-        newKeyframe(
-          'width',
-          canvas.getItemById(keyframe.id),
-          newtime,
-          keyarr2[0].value,
-          true
-        );
+        newKeyframe(name, object, newtime, keyarr2[0].value, true);
       }
-      var keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'height'
-        );
-      });
-      if (keyarr2.length > 0) {
-        newKeyframe(
-          'height',
-          canvas.getItemById(keyframe.id),
-          newtime,
-          keyarr2[0].value,
-          true
-        );
-      }
-    } else if (keyprop == 'strokeWidth') {
-      const keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'stroke'
-        );
-      });
-      newKeyframe(
-        'stroke',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-    } else if (keyprop == 'charSpacing') {
-      const keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'lineHeight'
-        );
-      });
-      newKeyframe(
-        'lineHeight',
-        canvas.getItemByid(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-    } else if (keyprop == 'shadow.color') {
-      var keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'shadow.opacity'
-        );
-      });
-      newKeyframe(
-        'shadow.opacity',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-      var keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'shadow.offsetX'
-        );
-      });
-      newKeyframe(
-        'shadow.offsetX',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-      var keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'shadow.offsetY'
-        );
-      });
-
-      newKeyframe(
-        'shadow.offsetY',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-      var keyarr2 = $.grep(keyframes, function (e) {
-        return (
-          e.t == keyframe.t &&
-          e.id == keyframe.id &&
-          e.name == 'shadow.blur'
-        );
-      });
-      newKeyframe(
-        'shadow.blur',
-        canvas.getItemById(keyframe.id),
-        newtime,
-        keyarr2[0].value,
-        true
-      );
-    }
-    save();
+    });
   });
+  save();
 }
 
-// Update keyframe (after dragging)
-function updateKeyframe(drag, newval, offset) {
-  var time = parseFloat(
-    (drag.position().left * timelinetime).toFixed(1)
-  );
+// Update keyframe (after dragging, or when re-stamping it at the playhead)
+function updateKeyframe(drag, newval) {
   const keyprop = drag.attr('data-property');
   const keytime = drag.attr('data-time');
+  const objectid = drag.attr('data-object');
   const keyarr = $.grep(keyframes, function (e) {
     return (
       e.t == parseFloat(keytime) &&
-      e.id == drag.attr('data-object') &&
+      e.id == objectid &&
       e.name == keyprop
     );
   });
+  if (keyarr.length == 0) {
+    return;
+  }
   const keyobj = canvas.getItemById(keyarr[0].id);
-  time =
-    parseFloat(
-      p_keyframes.find((x) => x.id == keyobj.get('id')).start
-    ) + time;
-  if (newval) {
-    time = currenttime;
+  const p_keyframe = p_keyframes.find((x) => x.id == objectid);
+  if (!keyobj || !p_keyframe) {
+    return;
   }
-  var keyval = keyarr[0].value;
-  if (newval) {
-    if (keyprop == 'shadow.color') {
-      keyval = keyobj.shadow.color;
-    } else if (keyprop == 'volume') {
-      keyval = parseFloat($('#object-volume input').val() / 200);
-    } else {
-      keyval = keyobj.get(keyprop);
-    }
-  } else if (keyprop == 'left') {
-    keyval = keyval + artboard.get('left');
-  }
-  keyframes = $.grep(keyframes, function (e) {
-    return (
-      e.t != parseFloat(keytime) ||
-      e.id != drag.attr('data-object') ||
-      e.name != keyprop
-    );
-  });
-  newKeyframe(keyprop, keyobj, time, keyval, false);
-  if (keyprop == 'left') {
-    const keyarr2 = $.grep(keyframes, function (e) {
+  // data-time is always absolute; drag.position() is relative to the layer
+  // row, which is itself offset by the layer start.
+  const time = newval
+    ? currenttime
+    : parseFloat(p_keyframe.start) +
+      parseFloat((drag.position().left * timelinetime).toFixed(1));
+
+  const names = [keyprop].concat(
+    KEYFRAME_COUNTERPARTS[keyprop] || []
+  );
+  names.forEach(function (name) {
+    const arr = $.grep(keyframes, function (e) {
       return (
         e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'top'
+        e.id == objectid &&
+        e.name == name
       );
     });
-    var keyval2 = keyarr2[0].value + artboard.get('top');
+    if (arr.length == 0) {
+      return;
+    }
+    let value = arr[0].value;
     if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).get('top');
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'top'
-      );
-    });
-    newKeyframe('top', keyobj, time, keyval2, false);
-  } else if (keyprop == 'scaleX') {
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'scaleY'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).get('scaleY');
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'scaleY'
-      );
-    });
-    newKeyframe('scaleY', keyobj, time, keyval2, false);
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'width'
-      );
-    });
-    if (keyarr2.length > 0) {
-      var keyval2 = keyarr2[0].value;
-      if (newval) {
-        keyval2 = canvas.getItemById(keyarr2[0].id).get('width');
+      if (name == 'volume') {
+        value = parseFloat($('#object-volume input').val()) / 200;
+      } else {
+        value = getPropValue(keyobj, name);
       }
-      keyframes = $.grep(keyframes, function (e) {
-        return (
-          e.t != parseFloat(keytime) ||
-          e.id != drag.attr('data-object') ||
-          e.name != 'width'
-        );
-      });
-      newKeyframe('width', keyobj, time, keyval2, false);
-    }
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'height'
-      );
-    });
-    if (keyarr2.length > 0) {
-      var keyval2 = keyarr2[0].value;
-      if (newval) {
-        keyval2 = canvas.getItemById(keyarr2[0].id).get('height');
-      }
-      keyframes = $.grep(keyframes, function (e) {
-        return (
-          e.t != parseFloat(keytime) ||
-          e.id != drag.attr('data-object') ||
-          e.name != 'height'
-        );
-      });
-      newKeyframe('height', keyobj, time, keyval2, false);
-    }
-  } else if (keyprop == 'strokeWidth') {
-    const keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'stroke'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).get('stroke');
+    } else if (name == 'left') {
+      // newKeyframe stores left/top relative to the artboard
+      value = value + artboard.get('left');
+    } else if (name == 'top') {
+      value = value + artboard.get('top');
     }
     keyframes = $.grep(keyframes, function (e) {
       return (
         e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'stroke'
+        e.id != objectid ||
+        e.name != name
       );
     });
-    newKeyframe('stroke', keyobj, time, keyval2, false);
-  } else if (keyprop == 'charSpacing') {
-    const keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'lineHeight'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).get('lineHeight');
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'lineHeight'
-      );
-    });
-    newKeyframe('lineHeight', keyobj, time, keyval2, false);
-  } else if (keyprop == 'shadow.color') {
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'shadow.opacity'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.opacity;
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'shadow.opacity'
-      );
-    });
-    newKeyframe('shadow.opacity', keyobj, time, keyval2, false);
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'shadow.offsetX'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.offsetX;
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'shadow.offsetX'
-      );
-    });
-    newKeyframe('shadow.offsetX', keyobj, time, keyval2, false);
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'shadow.offsetY'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.offsetY;
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'shadow.offsetY'
-      );
-    });
-    newKeyframe('shadow.offsetY', keyobj, time, keyval2, false);
-    var keyarr2 = $.grep(keyframes, function (e) {
-      return (
-        e.t == parseFloat(keytime) &&
-        e.id == drag.attr('data-object') &&
-        e.name == 'shadow.blur'
-      );
-    });
-    var keyval2 = keyarr2[0].value;
-    if (newval) {
-      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.blur;
-    }
-    keyframes = $.grep(keyframes, function (e) {
-      return (
-        e.t != parseFloat(keytime) ||
-        e.id != drag.attr('data-object') ||
-        e.name != 'shadow.blur'
-      );
-    });
-    newKeyframe('shadow.blur', keyobj, time, keyval2, false);
-  }
-  if (offset) {
-    drag.attr('data-time', time);
-  } else {
-    drag.attr(
-      'data-time',
-      time + p_keyframes.find((x) => x.id == keyarr[0].id).start
-    );
-  }
-  keyframes.sort(function (a, b) {
-    if (a.id.indexOf('Group') >= 0 && b.id.indexOf('Group') == -1) {
-      return 1;
-    } else if (
-      b.id.indexOf('Group') >= 0 &&
-      a.id.indexOf('Group') == -1
-    ) {
-      return -1;
-    } else {
-      return 0;
-    }
+    newKeyframe(name, keyobj, time, value, false);
   });
+  drag.attr('data-time', time);
+  sortKeyframes();
 }
 
 function keyframeSnap(drag) {
@@ -5193,11 +4781,12 @@ function keyframeSnap(drag) {
       });
       $('#line-snap').addClass('line-active');
     } else {
+      let snapped = false;
       drag
         .parent()
         .parent()
         .find('.keyframe')
-        .each(function (index) {
+        .each(function () {
           if (!drag.is($(this))) {
             if (
               drag.offset().left > $(this).offset().left - 5 &&
@@ -5212,17 +4801,67 @@ function keyframeSnap(drag) {
                 height: drag.parent().parent().height(),
               });
               $('#line-snap').addClass('line-active');
+              snapped = true;
               return false;
             }
           }
-          if (index == $('.keyframe').length - 1) {
-            $('#line-snap').removeClass('line-active');
-          }
         });
+      if (!snapped) {
+        $('#line-snap').removeClass('line-active');
+      }
     }
   }
 }
 
+// Shared plumbing for the timeline drags (seekbar, keyframes, layer bars,
+// timeline resize handle). Captures the pointer so the matching pointerup
+// always comes back to us, and tears the drag down on pointercancel, on a
+// stray native dragstart, or when the window loses focus. Without this a
+// swallowed mouseup leaves the dragged element glued to the cursor.
+function bindPointerDrag(e, el, onMove, onEnd) {
+  var pointerId =
+    e.originalEvent && e.originalEvent.pointerId != undefined
+      ? e.originalEvent.pointerId
+      : null;
+  if (pointerId != null && el && el.setPointerCapture) {
+    try {
+      el.setPointerCapture(pointerId);
+    } catch (err) {}
+  }
+  function end(ev) {
+    // Ignore another pointer going up while this one is still dragging
+    if (
+      ev &&
+      ev.originalEvent &&
+      pointerId != null &&
+      ev.originalEvent.pointerId != undefined &&
+      ev.originalEvent.pointerId != pointerId
+    ) {
+      return;
+    }
+    $(document)
+      .off('pointermove', onMove)
+      .off('pointerup', end)
+      .off('pointercancel', end)
+      .off('dragstart', end);
+    window.removeEventListener('blur', end);
+    if (pointerId != null && el && el.releasePointerCapture) {
+      try {
+        el.releasePointerCapture(pointerId);
+      } catch (err) {}
+    }
+    onEnd(ev);
+  }
+  $(document)
+    .on('pointermove', onMove)
+    .on('pointerup', end)
+    .on('pointercancel', end)
+    .on('dragstart', end);
+  // Native listener on purpose: jQuery routes blur through its focus special
+  // event, which defers the handler and can drop it entirely
+  window.addEventListener('blur', end);
+}
+
 // Dragging a keyframe
 function dragKeyframe(e) {
   if (e.which == 3) {
@@ -5243,8 +4882,9 @@ function dragKeyframe(e) {
       });
       $(this).addClass('keyframe-selected');
     } else {
+      const el = this;
       shiftkeys = $.grep(shiftkeys, function (e) {
-        return e.keyframe != this;
+        return e.keyframe !== el;
       });
       $(this).removeClass('keyframe-selected');
     }
@@ -5281,9 +4921,6 @@ function dragKeyframe(e) {
     }
   }
   function releasedKeyframe(e) {
-    $('body')
-      .off('mousemove', draggingKeyframe)
-      .off('mouseup', releasedKeyframe);
     $('#line-snap').removeClass('line-active');
     if (move) {
       if (shiftkeys.length == 0) {
@@ -5321,18 +4958,16 @@ function dragKeyframe(e) {
           }
         });
       }
-    } else if (!e.shiftDown) {
+    } else if (e && e.type == 'pointerup' && !e.shiftKey) {
       keyframeProperties(inst);
     }
     move = false;
     $('.line-active').removeClass('line-active');
     save();
   }
-  $('body')
-    .on('mouseup', releasedKeyframe)
-    .on('mousemove', draggingKeyframe);
+  bindPointerDrag(e, this, draggingKeyframe, releasedKeyframe);
 }
-$(document).on('mousedown', '.keyframe', dragKeyframe);
+$(document).on('pointerdown', '.keyframe', dragKeyframe);
 
 // Render current time in the playback area
 function renderTime() {
@@ -5382,6 +5017,10 @@ function dragSeekBar(e) {
   if (e.which == 3) {
     return false;
   }
+  // Stop the browser from turning the press into a native drag-and-drop.
+  // When it does, the mouseup is swallowed, released() never runs and the
+  // seekbar stays glued to the pointer.
+  e.preventDefault();
   var drag = $(this);
   var pageX = e.pageX;
   var offset = $(this).offset();
@@ -5425,7 +5064,6 @@ function dragSeekBar(e) {
     renderTime();
   }
   function released(e) {
-    $('body').off('mousemove', dragging).off('mouseup', released);
     updateTime(drag, false);
     seeking = false;
     if (tempselection && tempselection.type != 'activeSelection') {
@@ -5433,9 +5071,17 @@ function dragSeekBar(e) {
     }
     updatePanelValues();
   }
-  $('body').on('mouseup', released).on('mousemove', dragging);
+  bindPointerDrag(e, this, dragging, released);
 }
-$(document).on('mousedown', '#seekbar', dragSeekBar);
+$(document).on('pointerdown', '#seekbar', dragSeekBar);
+// The timeline drag targets must never become native drag sources
+$(document).on(
+  'dragstart',
+  '#seekbar, .keyframe, .main-row, .row-el, .trim-row, #timeline-handle',
+  function (e) {
+    e.preventDefault();
+  }
+);
 
 // Dragging layer horizontally
 function dragObjectProps(e) {
@@ -5562,7 +5208,7 @@ function dragObjectProps(e) {
         setTimelineZoom(timelinetime);
       }
       drag.find('.keyframe').each(function () {
-        updateKeyframe($(this), false, true);
+        updateKeyframe($(this), false);
       });
       animate(false, currenttime);
     } else if (trim == 'left') {
@@ -5605,7 +5251,6 @@ function dragObjectProps(e) {
     }
   }
   function released(e) {
-    $('body').off('mousemove', dragging).off('mouseup', released);
     if (opened) {
       $(".layer[data-object='" + drag.attr('id') + "']")
         .find('.properties')
@@ -5621,9 +5266,9 @@ function dragObjectProps(e) {
     animate(false, currenttime);
     save();
   }
-  $('body').on('mouseup', released).on('mousemove', dragging);
+  bindPointerDrag(e, this, dragging, released);
 }
-$(document).on('mousedown', '.main-row', dragObjectProps);
+$(document).on('pointerdown', '.main-row', dragObjectProps);
 
 function resetHeight() {
   var top = $(window).height() - oldtimelinepos - 92;
@@ -5654,31 +5299,29 @@ function resetHeight() {
 
 // Dragging timeline vertically
 function dragTimeline(e) {
-  const disableselect = (e) => {  
-    return false  
-  }  
-  document.onselectstart = disableselect  
-  document.onmousedown = disableselect
-  
-  oldtimelinepos = e.pageY;
   if (e.which == 3) {
     return false;
   }
+  // Suppress text selection for the duration of the drag only - leaving these
+  // handlers installed kills mousedown for the whole document.
+  const disableselect = function () {
+    return false;
+  };
+  const previousSelectStart = document.onselectstart;
+  document.onselectstart = disableselect;
+
+  oldtimelinepos = e.pageY;
   function draggingKeyframe(e) {
     oldtimelinepos = e.pageY;
     resetHeight(e);
   }
   function releasedKeyframe(e) {
-    $('body')
-      .off('mousemove', draggingKeyframe)
-      .off('mouseup', releasedKeyframe);
+    document.onselectstart = previousSelectStart || null;
   }
-  $('body')
-    .on('mouseup', releasedKeyframe)
-    .on('mousemove', draggingKeyframe);
+  bindPointerDrag(e, this, draggingKeyframe, releasedKeyframe);
 }
 
-$(document).on('mousedown', '#timeline-handle', dragTimeline);
+$(document).on('pointerdown', '#timeline-handle', dragTimeline);
 
 oldtimelinepos = $(window).height() - 92 - $('#timearea').height();
 
@@ -5749,6 +5392,9 @@ function keyframeProperties(inst) {
         e.name == selectedkeyframe.attr('data-property')
       );
     });
+    if (keyarr.length == 0) {
+      return;
+    }
     $('#easing select').val(keyarr[0].easing);
     $('#easing select').niceSelect('update');
     popup.css({
@@ -5762,108 +5408,28 @@ function keyframeProperties(inst) {
 
 // Apply easing to keyframe
 function applyEasing() {
-  var keyarr = keyframes.filter(function (e) {
-    return (
-      e.t == selectedkeyframe.attr('data-time') &&
-      e.id == selectedkeyframe.attr('data-object') &&
-      e.name == selectedkeyframe.attr('data-property')
-    );
-  });
-  keyarr[0].easing = $(this).attr('data-value');
-  if (selectedkeyframe.attr('data-property') == 'left') {
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'top'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-  } else if (selectedkeyframe.attr('data-property') == 'scaleX') {
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'scaleY'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'width'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'height'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-  } else if (
-    selectedkeyframe.attr('data-property') == 'strokeWidth'
-  ) {
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'stroke'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-  } else if (
-    selectedkeyframe.attr('data-property') == 'shadow.color'
-  ) {
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'shadow.opacity'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'shadow.offsetX'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'shadow.offsetY'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'shadow.blur'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
-  } else if (
-    selectedkeyframe.attr('data-property') == 'charSpacing'
-  ) {
-    var keyarr = keyframes.filter(function (e) {
-      return (
-        e.t == selectedkeyframe.attr('data-time') &&
-        e.id == selectedkeyframe.attr('data-object') &&
-        e.name == 'lineHeight'
-      );
-    });
-    keyarr[0].easing = $('#easing select').val();
+  if (!selectedkeyframe) {
+    return;
   }
+  // Read the clicked item, not the underlying <select>: nice-select has not
+  // necessarily written the value back yet on mouseup.
+  const easing = $(this).attr('data-value');
+  const time = selectedkeyframe.attr('data-time');
+  const id = selectedkeyframe.attr('data-object');
+  const prop = selectedkeyframe.attr('data-property');
+  const names = [prop].concat(KEYFRAME_COUNTERPARTS[prop] || []);
+  names.forEach(function (name) {
+    keyframes
+      .filter(function (e) {
+        return e.t == time && e.id == id && e.name == name;
+      })
+      .forEach(function (e) {
+        e.easing = easing;
+      });
+  });
   $('#keyframe-properties').removeClass('show-properties');
   selectedkeyframe.removeClass('keyframe-selected');
+  animate(false, currenttime);
   save();
 }
 $(document).on('mouseup', '#easing li', applyEasing);
diff --git a/src/js/init.js b/src/js/init.js
index 44e0f9c..6505b28 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -3,7 +3,6 @@ var GOOGLE_FONTS_API_KEY = 'GOOGLE_FONTS_API_KEY';
 
 // for legacy browsers
 const AudioContext = window.AudioContext || window.webkitAudioContext;
-const audioContext = new AudioContext();
 var oldsrc, oldobj;
 var oldtimelinepos;
 var speed = 1;
@@ -58,7 +57,6 @@ var editingpanel = false;
 var files = [];
 var re = /(?:\.([^.]+))?$/;
 var filelist = [];
-var timeout;
 var spacehold = false;
 var spacerelease = false;
 var tempselection;
@@ -94,7 +92,7 @@ var chromaslider, noiseslider, blurslider;
 var isChrome =
   window.chrome && Object.values(window.chrome).length !== 0;
 var eyeDropper;
-if (isChrome) {
+if (isChrome && typeof EyeDropper !== 'undefined') {
   eyeDropper = new EyeDropper();
 }
 var presets = [
@@ -156,20 +154,30 @@ var sliders = [];
 var hovertime = 0;
 var animatedtext = [];
 
-// Get list of fonts
-$.ajax({
-  url:
-    'https://www.googleapis.com/webfonts/v1/webfonts?key=' +
-    GOOGLE_FONTS_API_KEY +
-    '&sort=alpha',
-  type: 'GET',
-  dataType: 'json', // added data type
-  success: function (response) {
-    response.items.forEach(function (item) {
-      fonts.push(item.family);
-    });
-  },
-});
+// Get list of fonts.
+// Both API keys are placeholders in the repository - replace them to enable
+// the Google Fonts list and the Pixabay browser.
+const HAS_FONTS_KEY =
+  GOOGLE_FONTS_API_KEY && GOOGLE_FONTS_API_KEY != 'GOOGLE_FONTS_API_KEY';
+const HAS_PIXABAY_KEY = API_KEY && API_KEY != 'PIXABAY_API';
+if (HAS_FONTS_KEY) {
+  $.ajax({
+    url:
+      'https://www.googleapis.com/webfonts/v1/webfonts?key=' +
+      GOOGLE_FONTS_API_KEY +
+      '&sort=alpha',
+    type: 'GET',
+    dataType: 'json', // added data type
+    success: function (response) {
+      response.items.forEach(function (item) {
+        fonts.push(item.family);
+      });
+    },
+    error: function () {
+      console.warn('Could not load the Google Fonts list');
+    },
+  });
+}
 
 // Panel variants
 const canvas_panel =
@@ -444,6 +452,25 @@ var text_items = {
   ],
 };
 
+// Without a Google Fonts key the font pickers would be empty, so fall back
+// to the families that are already bundled in the text browser.
+// (Declared here because it reads text_items, defined just above.)
+if (!HAS_FONTS_KEY) {
+  Object.keys(text_items).forEach(function (group) {
+    text_items[group].forEach(function (item) {
+      if (fonts.indexOf(item.fontname) == -1) {
+        fonts.push(item.fontname);
+      }
+    });
+  });
+  ['Inter', 'Syne'].forEach(function (name) {
+    if (fonts.indexOf(name) == -1) {
+      fonts.push(name);
+    }
+  });
+  fonts.sort();
+}
+
 WebFont.load({
   google: {
     families: ['Syne'],
@@ -460,7 +487,11 @@ try {
 var canvas2dBackend = new fabric.Canvas2dFilterBackend();
 
 fabric.filterBackend = fabric.initFilterBackend();
-fabric.filterBackend = webglBackend;
+// Only take over the backend if WebGL actually initialized, otherwise filters
+// would silently break on machines without a usable WebGL context.
+if (webglBackend) {
+  fabric.filterBackend = webglBackend;
+}
 
 // Lottie support
 fabric.Lottie = fabric.util.createClass(fabric.Image, {
@@ -491,14 +522,18 @@ fabric.Lottie = fabric.util.createClass(fabric.Image, {
     });
 
     this.lottieItem.addEventListener('enterFrame', (e) => {
-      this.canvas.requestRenderAll();
+      if (this.canvas) {
+        this.canvas.requestRenderAll();
+      }
     });
 
     this.lottieItem.addEventListener('DOMLoaded', () => {
       this.lottieItem.goToAndStop(currenttime, false);
       this.lottieItem.duration =
         this.lottieItem.getDuration(false) * 1000;
-      this.canvas.requestRenderAll();
+      if (this.canvas) {
+        this.canvas.requestRenderAll();
+      }
       canvas.renderAll();
       canvas.fire('lottie:loaded', { any: 'payload' });
     });
@@ -508,7 +543,9 @@ fabric.Lottie = fabric.util.createClass(fabric.Image, {
 
   goToSeconds: function (seconds) {
     this.lottieItem.goToAndStop(seconds, false);
-    this.canvas.requestRenderAll();
+    if (this.canvas) {
+      this.canvas.requestRenderAll();
+    }
   },
   goToFrame: function (frame) {
     this.lottieItem.goToAndStop(frame, true);
@@ -758,30 +795,23 @@ textBoxControls.mr = new fabric.Control({
 
 // Get any object by ID
 fabric.Canvas.prototype.getItemById = function (name) {
-  var object = null,
-    objects = this.getObjects();
-  for (var i = 0, len = this.size(); i < len; i++) {
-    if (objects[i].get('type') == 'group') {
-      if (objects[i].get('id') && objects[i].get('id') === name) {
-        object = objects[i];
-        break;
+  function search(list) {
+    for (var i = 0; i < list.length; i++) {
+      const item = list[i];
+      if (item.id && item.id === name) {
+        return item;
       }
-      var wip = i;
-      for (var o = 0; o < objects[i]._objects.length; o++) {
-        if (
-          objects[wip]._objects[o].id &&
-          objects[wip]._objects[o].id === name
-        ) {
-          object = objects[wip]._objects[o];
-          break;
+      // Recurse so groups nested more than one level deep are found too
+      if (item._objects && item._objects.length > 0) {
+        const found = search(item._objects);
+        if (found) {
+          return found;
         }
       }
-    } else if (objects[i].id && objects[i].id === name) {
-      object = objects[i];
-      break;
     }
+    return null;
   }
-  return object;
+  return search(this.getObjects());
 };
 
 // Create the artboard
diff --git a/src/js/lottie.js b/src/js/lottie.js
index 3af1e13..b974351 100644
--- a/src/js/lottie.js
+++ b/src/js/lottie.js
@@ -14,7 +14,7 @@ async function newLottieAnimation(x, y, json) {
     strokeWidth: 0,
     cursorDuration: 1,
     cursorDelay: 250,
-    duration: duration * 1000,
+    duration: duration,
     assetType: 'sprite',
     id: 'Sprite' + layer_count,
     objectCaching: false,
diff --git a/src/js/recorder.js b/src/js/recorder.js
index 8e7a99b..0964d7b 100644
--- a/src/js/recorder.js
+++ b/src/js/recorder.js
@@ -1,68 +1,108 @@
-const FPS = 30;
-let frame = 0;
-var chunks = [];
-var stream;
-var rec;
-var track;
+// Everything the current export needs to tear down when it finishes
+var exportAudio = null;
 
-function timeout(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+// Route every sound source of the project into a single destination node.
+//
+// This has to be one shared AudioContext with one destination:
+//   - MediaRecorder only records the first audio track of a stream, so
+//     adding one track per source silently dropped all but one of them,
+//   - a context per source was never closed, and browsers cap how many a
+//     page may hold.
+function buildExportAudio(stream) {
+  const ctx = new AudioContext();
+  const destination = ctx.createMediaStreamDestination();
+  const elements = [];
+  var connected = false;
 
-function initRecorder() {
-  stream = document.getElementById('canvasrecord').captureStream(0);
-  track = stream.getVideoTracks()[0];
-
-  if (!track.requestFrame) {
-    track.requestFrame = () => stream.requestFrame();
+  function connect(element) {
+    try {
+      ctx.createMediaElementSource(element).connect(destination);
+      connected = true;
+      return true;
+    } catch (e) {
+      // Already bound to another context, or tainted by CORS
+      console.warn('Could not route audio for export', e);
+      return false;
+    }
   }
 
-  rec = new MediaRecorder(stream, {
-    bitsPerSecond: 3200000,
+  objects.forEach(function (object) {
+    const obj = canvasrecord.getItemById(object.id);
+    const p_keyframe = p_keyframes.find((x) => x.id == object.id);
+    if (!obj || !p_keyframe) {
+      return;
+    }
+    if (obj.get('assetType') == 'video') {
+      const element = $(obj.getElement())[0];
+      if (element) {
+        connect(element);
+      }
+    } else if (
+      obj.get('assetType') == 'audio' &&
+      obj.get('audioSrc')
+    ) {
+      // Audio layers used to be left out of the export entirely
+      const element = new Audio(obj.get('audioSrc'));
+      element.crossOrigin = 'anonymous';
+      element.volume = obj.get('volume');
+      if (connect(element)) {
+        elements.push({
+          element: element,
+          start: p_keyframe.start,
+          end: p_keyframe.end,
+          trimstart: p_keyframe.trimstart,
+        });
+      }
+    }
   });
 
-  rec.ondataavailable = function (evt) {
-    console.log('chunky');
-    chunks.push(evt.data);
-  };
+  if (background_audio != false && connect(background_audio)) {
+    elements.push({
+      element: background_audio,
+      start: 0,
+      end: duration,
+      trimstart: 0,
+    });
+  }
 
-  rec.start();
-
-  console.log('Recorder has been started');
-
-  rec.onstart = function () {
-    rec.pause();
-    console.log('start!');
-  };
+  if (connected) {
+    stream.addTrack(destination.stream.getAudioTracks()[0]);
+  }
+  return { context: ctx, elements: elements, timers: [] };
 }
 
-async function recordFrame() {
-  console.log(frame);
-
-  waitForEvent(rec, 'pause');
-
-  //rec.onpause = async function(e) {
-
-  // wake up the recorder
-  rec.resume();
-  recordAnimate(false, (frame / FPS) * 1000);
-  //animate(false, (frame/FPS)*1000)
-  // force write the frame
-  track.requestFrame();
-
-  // wait until our frame-time elapsed
-  await timeout(1000 / FPS);
-
-  // sleep recorder
-  rec.pause();
-  //}
+// Start the scheduled audio layers relative to the start of the recording
+function startExportAudio(audio) {
+  if (!audio) {
+    return;
+  }
+  audio.elements.forEach(function (item) {
+    item.element.currentTime = item.trimstart / 1000;
+    audio.timers.push(
+      window.setTimeout(function () {
+        item.element.play();
+      }, Math.max(0, item.start))
+    );
+    audio.timers.push(
+      window.setTimeout(function () {
+        item.element.pause();
+      }, Math.max(0, item.end))
+    );
+  });
 }
 
-async function exportRecording() {
-  rec.stop();
-  stream.getTracks().forEach((track) => track.stop());
-  await waitForEvent(rec, 'stop');
-  return new Blob(chunks);
+function stopExportAudio(audio) {
+  if (!audio) {
+    return;
+  }
+  audio.timers.forEach(window.clearTimeout);
+  audio.timers = [];
+  audio.elements.forEach(function (item) {
+    item.element.pause();
+  });
+  if (audio.context && audio.context.state != 'closed') {
+    audio.context.close();
+  }
 }
 
 // Record canvas
@@ -85,280 +125,122 @@ async function record() {
     document.body.removeChild(link);
     recording = false;
     updateRecordCanvas();
-  } else {
-    if (!recording) {
-      recording = true;
-      paused = true;
-      await recordAnimate(0);
-      $('#download-real').html('Rendering...');
-      $('#download-real').addClass('downloading');
-      var fps = 60;
-      var aCtx = new AudioContext();
-      function audioTimerLoop(callback, frequency) {
-        var freq = frequency / 1000;
-        var silence = aCtx.createGain();
-        silence.gain.value = 0;
-        silence.connect(aCtx.destination);
-        onOSCend();
-        var stopped = false;
-        function onOSCend() {
-          osc = aCtx.createOscillator();
-          osc.onended = onOSCend;
-          osc.connect(silence);
-          osc.start(0);
-          osc.stop(aCtx.currentTime + freq);
-          callback(aCtx.currentTime);
-          if (stopped) {
-            osc.onended = function () {
-              return;
-            };
-          }
-        }
-        return function () {
-          stopped = true;
-        };
-      }
-      var stopAnim = audioTimerLoop(renderAnim, 1000 / fps);
-      var stream = document
-        .getElementById('canvasrecord')
-        .captureStream(fps);
-      objects.forEach(function (object) {
-        if (
-          canvasrecord.getItemById(object.id).get('assetType') &&
-          canvasrecord.getItemById(object.id).get('assetType') ==
-            'video'
-        ) {
-          var audio = $(
-            canvasrecord.getItemById(object.id).getElement()
-          )[0];
-          var audioContext = new AudioContext();
-          var audioSource =
-            audioContext.createMediaElementSource(audio);
-          var audioDestination =
-            audioContext.createMediaStreamDestination();
-          audioSource.connect(audioDestination);
-          stream.addTrack(
-            audioDestination.stream.getAudioTracks()[0]
-          );
-        }
-      });
-      if (background_audio != false) {
-        var audioContext = new AudioContext();
-        var audioSource =
-          audioContext.createMediaElementSource(background_audio);
-        var audioDestination =
-          audioContext.createMediaStreamDestination();
-        audioSource.connect(audioDestination);
-        stream.addTrack(audioDestination.stream.getAudioTracks()[0]);
-        background_audio.currentTime = 0;
-        background_audio.play();
-      }
-      let chunks = [];
-      var recorder = new MediaRecorder(stream, {
-        bitsPerSecond: 3200000,
-      });
-      recorder.ondataavailable = (e) => chunks.push(e.data);
-      recorder.onstop = (e) => {
-        stopAnim();
-        downloadRecording(chunks);
-        animate(false, 0);
-        $('#seekbar').offset({
-          left:
-            offset_left +
-            $('#inner-timeline').offset().left +
-            currenttime / timelinetime,
-        });
-        canvas.renderAll();
-        console.log('Finished rendering');
-      };
-      recorder.start();
-
-      setTimeout(function () {
-        recorder.stop();
-      }, duration);
-
-      async function renderAnim(time) {
-        await recordAnimate(time * 1000);
-      }
-    }
+    return;
   }
+  if (recording) {
+    return;
+  }
+
+  recording = true;
+  paused = true;
+  await recordAnimate(0);
+  $('#download-real').html('Rendering...');
+  $('#download-real').addClass('downloading');
+
+  // Preferred path: render every frame offline, with no clock attached, so
+  // nothing is dropped and video layers land on the exact frame.
+  if (frameAccurateSupported()) {
+    const blob = await renderFrameAccurate();
+    if (blob) {
+      deliverRecording(blob);
+      return;
+    }
+    console.warn('Falling back to the real-time encoder');
+    $('#download-real').html('Rendering...');
+    await updateRecordCanvas();
+    await recordAnimate(0);
+  }
+
+  const fps = getExportFramerate();
+  const aCtx = new AudioContext();
+
+  // requestAnimationFrame is throttled in background tabs, an oscillator is
+  // not, so the render keeps running while the tab is hidden.
+  function audioTimerLoop(callback, frequency) {
+    const freq = frequency / 1000;
+    const silence = aCtx.createGain();
+    silence.gain.value = 0;
+    silence.connect(aCtx.destination);
+    var stopped = false;
+    var osc;
+    function onOSCend() {
+      if (stopped) {
+        return;
+      }
+      osc = aCtx.createOscillator();
+      osc.onended = onOSCend;
+      osc.connect(silence);
+      osc.start(0);
+      osc.stop(aCtx.currentTime + freq);
+      callback(aCtx.currentTime);
+    }
+    onOSCend();
+    return function () {
+      stopped = true;
+      if (osc) {
+        osc.onended = null;
+      }
+    };
+  }
+
+  const stream = document
+    .getElementById('canvasrecord')
+    .captureStream(fps);
+  exportAudio = buildExportAudio(stream);
+
+  const chunks = [];
+  const recorder = new MediaRecorder(stream, {
+    bitsPerSecond: 3200000,
+  });
+  recorder.ondataavailable = (e) => chunks.push(e.data);
+  recorder.onerror = (e) => {
+    console.error('Recording failed', e);
+    stopAnim();
+    stopExportAudio(exportAudio);
+    exportAudio = null;
+    aCtx.close();
+    resetRecordingUI();
+  };
+  recorder.onstop = () => {
+    stopAnim();
+    stopExportAudio(exportAudio);
+    exportAudio = null;
+    stream.getTracks().forEach((track) => track.stop());
+    aCtx.close();
+    downloadRecording(chunks);
+    console.log('Finished rendering');
+  };
+
+  // The capture is real time, so the animation clock is driven off the audio
+  // clock and the recording is stopped once it has covered the timeline.
+  var origin = null;
+  var stopping = false;
+  async function renderAnim(time) {
+    if (origin === null) {
+      origin = time;
+    }
+    const elapsed = (time - origin) * 1000;
+    if (elapsed >= duration) {
+      if (!stopping) {
+        stopping = true;
+        await recordAnimate(duration);
+        if (recorder.state != 'inactive') {
+          recorder.stop();
+        }
+      }
+      return;
+    }
+    await recordAnimate(elapsed);
+  }
+
+  recorder.start();
+  startExportAudio(exportAudio);
+  var stopAnim = audioTimerLoop(renderAnim, 1000 / fps);
+
+  // Safety net: never leave the UI stuck if the oscillator clock stalls
+  window.setTimeout(function () {
+    if (recorder.state != 'inactive') {
+      recorder.stop();
+    }
+  }, duration + 5000);
 }
-
-/*
-
-			initRecorder();
-
-			//await timeout(2000)
-		
-			// draw one frame at a time
-			while (frame++ < FPS * (duration/1000)) {
-				await longDraw(); // do the long drawing
-				await recordFrame(); // record at constant FPS 
-			}
-			// now all the frames have been drawn
-			const recorded = await exportRecording(); // we can get our final video file
-			const a = document.createElement('a');
-			a.style.display = 'none';
-			a.href =  URL.createObjectURL(recorded);
-			a.download = "test.webm";
-			document.body.appendChild(a);
-			a.click();
-			recording = false;
-			currenttime = 0;
-			animate(false, 0);
-			$("#seekbar").offset({left:offset_left+$("#inner-timeline").offset().left+(currenttime/timelinetime)});
-			canvas.renderAll();
-				resizeCanvas();
-				if (background_audio != false) {
-						background_audio.pause();
-						background_audio = new Audio(background_audio.src)
-				}
-			$("#download-real").html("Download");
-			$("#download-real").removeClass("downloading");
-			updateRecordCanvas();
-		
-			// Fake long drawing operations that make real-time recording impossible
-			function longDraw() {
-				recordAnimate((frame/FPS)*1000)
-				return wait(Math.random() * 300)
-					.then(recordAnimate((frame/FPS)*1000));
-			}*/
-
-/*
-paused = true;
-			recording = true;
-			$("#download-real").html("Rendering...");
-			$("#download-real").addClass("downloading");
-			var fps = 60;
-			var aCtx = new AudioContext();
-			function audioTimerLoop(callback, frequency) {
-					var freq = frequency / 1000;
-					var silence = aCtx.createGain();
-					silence.gain.value = 0;
-					silence.connect(aCtx.destination);
-					onOSCend();
-					var stopped = false;
-					function onOSCend() {
-							osc = aCtx.createOscillator();
-							osc.onended = onOSCend;
-							osc.connect(silence);
-							osc.start(0);
-							osc.stop(aCtx.currentTime + freq);
-							callback(aCtx.currentTime);
-							if (stopped) {
-									osc.onended = function() {
-											return;
-									};
-							}
-					};
-					return function() {
-					stopped = true;
-					};
-			}
-			var stopAnim = audioTimerLoop(renderAnim, 1000/(fps));
-			var stream = document.getElementById("canvasrecord").captureStream(fps);
-			objects.forEach(function(object){
-					if (canvasrecord.getItemById(object.id).get("assetType") && canvasrecord.getItemById(object.id).get("assetType") == "video") {
-							var audio = $(canvasrecord.getItemById(object.id).getElement())[0];
-							var audioContext = new AudioContext();
-							var audioSource = audioContext.createMediaElementSource(audio);
-							var audioDestination = audioContext.createMediaStreamDestination();
-							audioSource.connect(audioDestination);
-							stream.addTrack(audioDestination.stream.getAudioTracks()[0]);
-					}
-			})
-			if (background_audio != false) {
-					var audioContext = new AudioContext();
-					var audioSource = audioContext.createMediaElementSource(background_audio);
-					var audioDestination = audioContext.createMediaStreamDestination();
-					audioSource.connect(audioDestination);
-					stream.addTrack(audioDestination.stream.getAudioTracks()[0]);
-					background_audio.currentTime = 0;
-					background_audio.play();
-			}
-			let chunks = [];
-			var recorder = new MediaRecorder(stream, {
-				bitsPerSecond : 3200000,
-			});
-			recorder.ondataavailable = e => chunks.push(e.data);
-			recorder.onstop = e => {
-					stopAnim();
-					downloadRecording(chunks);
-					animate(false, 0);
-					$("#seekbar").offset({left:offset_left+$("#inner-timeline").offset().left+(currenttime/timelinetime)});
-					canvas.renderAll();
-					console.log("Finished rendering")
-			}
-			recorder.start();
-
-			setTimeout(function() {
-					recorder.stop();
-			}, duration)
-
-			async function renderAnim(time) {
-					await animate(false, time*1000);
-			} 
-
-*/
-
-/*
-$("#download-real").html("Rendering...");
-			$("#download-real").addClass("downloading");
-		
-			// browser check
-			if (typeof MediaStreamTrackGenerator === undefined || typeof MediaStream === undefined || typeof VideoFrame === undefined) {
-				console.log('Your browser does not support the web APIs used in this demo');
-				return;
-			}
-		
-			// recording setup
-			const fps = 60;
-			const generator = new MediaStreamTrackGenerator({ kind: "video" });
-			const writer = generator.writable.getWriter();
-			const stream = new MediaStream();
-			stream.addTrack(generator);
-			const recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
-			recorder.start();
-
-			function timeout(ms) {
-				return new Promise(resolve => setTimeout(resolve, ms));
-		}
-		
-			// animate stuff
-			console.log('rendering...')
-			console.log(duration);
-			for (let i = 0; i < (duration/1000)*fps; i++) {
-				animate(false, (i/fps)*1000);
-				const frame = new VideoFrame(document.getElementById("canvasrecord"), { 
-					timestamp: (i / fps)*1000
-				});
-				await writer.write(frame);
-				await timeout(100)
-				console.log("frame "+(i/fps)*1000);
-			}
-			console.log('rendering done');
-		
-			// stop recording and 
-			recorder.addEventListener("dataavailable", (evt) => {
-				const a = document.createElement('a');
-				a.style.display = 'none';
-				a.href =  URL.createObjectURL(evt.data);
-				a.download = "test.webm";
-				document.body.appendChild(a);
-				a.click();
-				recording = false;
-				currenttime = 0;
-				animate(false, 0);
-				$("#seekbar").offset({left:offset_left+$("#inner-timeline").offset().left+(currenttime/timelinetime)});
-				canvas.renderAll();
-					resizeCanvas();
-					if (background_audio != false) {
-							background_audio.pause();
-							background_audio = new Audio(background_audio.src)
-					}
-				$("#download-real").html("Download");
-				$("#download-real").removeClass("downloading");
-				updateRecordCanvas();
-			});
-			recorder.stop();
-			*/
diff --git a/src/js/render.js b/src/js/render.js
new file mode 100644
index 0000000..00ded6c
--- /dev/null
+++ b/src/js/render.js
@@ -0,0 +1,515 @@
+// Frame-accurate offline renderer.
+//
+// The original export path captured the canvas with MediaRecorder in real
+// time, so anything the browser could not draw at 60fps was simply dropped and
+// video layers were sampled wherever they happened to be. This renders one
+// frame at a time with no clock attached: every frame is drawn at the frame
+// rate picked in the download modal, every video layer is seeked to the exact
+// frame time, and the audio is mixed offline.
+//
+// Needs WebCodecs (Chrome/Edge). record() falls back to the real-time path
+// when this is unavailable or fails.
+
+// The muxer can only close a cluster on a video keyframe, and a cluster may
+// not span more than ~32s (block timecodes are a signed 16 bit offset), so
+// keyframes have to stay frequent.
+const RENDER_KEYFRAME_INTERVAL = 2; // seconds
+// A seek that never completes must not hang the whole export
+const RENDER_MAX_SEEK_WAIT = 2000;
+
+// recordAnimate() drives video playback in real time; while rendering offline
+// the frames are seeked explicitly instead.
+var offlinerender = false;
+
+function frameAccurateSupported() {
+  return (
+    typeof VideoEncoder !== 'undefined' &&
+    typeof VideoFrame !== 'undefined' &&
+    typeof WebMWriter !== 'undefined' &&
+    typeof OfflineAudioContext !== 'undefined'
+  );
+}
+
+function renderProgress(text) {
+  $('#download-real').html(text);
+}
+
+// ---------------------------------------------------------------------------
+// Media positioning
+// ---------------------------------------------------------------------------
+
+// Put every time-based layer at exactly `time` and wait until it is actually
+// showing that frame. A plain currentTime assignment is asynchronous - drawing
+// before 'seeked' captures the previous frame.
+async function seekMediaForFrame(time) {
+  const waits = [];
+  objects.forEach(function (object) {
+    const obj = canvasrecord.getItemById(object.id);
+    const p_keyframe = p_keyframes.find((x) => x.id == object.id);
+    if (!obj || !p_keyframe) {
+      return;
+    }
+
+    if (obj.type == 'lottie') {
+      obj.goToSeconds(time);
+      return;
+    }
+
+    if (obj.get('assetType') != 'video') {
+      return;
+    }
+
+    const element = $(obj.getElement())[0];
+    if (!element) {
+      return;
+    }
+    element.pause();
+
+    const visible =
+      time >= p_keyframe.trimstart + p_keyframe.start &&
+      time <= p_keyframe.end;
+    obj.set('visible', visible);
+    if (!visible) {
+      return;
+    }
+
+    var target =
+      (time - p_keyframe.start + p_keyframe.trimstart) / 1000;
+    if (element.duration) {
+      target = Math.min(target, Math.max(0, element.duration - 0.001));
+    }
+    target = Math.max(0, target);
+    if (Math.abs(element.currentTime - target) < 0.0005) {
+      return;
+    }
+
+    waits.push(
+      new Promise(function (resolve) {
+        var settled = false;
+        function finish() {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          element.removeEventListener('seeked', finish);
+          element.removeEventListener('error', finish);
+          resolve();
+        }
+        element.addEventListener('seeked', finish);
+        element.addEventListener('error', finish);
+        // A stuck seek must not hang the whole export
+        window.setTimeout(finish, RENDER_MAX_SEEK_WAIT);
+        try {
+          element.currentTime = target;
+        } catch (e) {
+          finish();
+        }
+      })
+    );
+  });
+  await Promise.all(waits);
+}
+
+// ---------------------------------------------------------------------------
+// Audio
+// ---------------------------------------------------------------------------
+
+// Every sound in the project, with where it sits on the timeline
+function collectAudioSources() {
+  const sources = [];
+  objects.forEach(function (object) {
+    const obj = canvasrecord.getItemById(object.id);
+    const p_keyframe = p_keyframes.find((x) => x.id == object.id);
+    if (!obj || !p_keyframe) {
+      return;
+    }
+    if (obj.get('assetType') == 'audio' && obj.get('audioSrc')) {
+      sources.push({
+        src: obj.get('audioSrc'),
+        start: p_keyframe.start,
+        end: p_keyframe.end,
+        trimstart: p_keyframe.trimstart,
+        volume: obj.get('volume'),
+      });
+    } else if (obj.get('assetType') == 'video' && obj.get('source')) {
+      sources.push({
+        src: obj.get('source'),
+        start: p_keyframe.start,
+        end: p_keyframe.end,
+        trimstart: p_keyframe.trimstart,
+        volume: 1,
+      });
+    }
+  });
+  if (background_audio != false && background_audio.src) {
+    sources.push({
+      src: background_audio.src,
+      start: 0,
+      end: duration,
+      trimstart: 0,
+      volume: 1,
+    });
+  }
+  return sources;
+}
+
+// Mix the whole timeline in one pass. OfflineAudioContext renders faster than
+// real time and is sample-accurate, unlike routing live elements into a
+// MediaStream.
+async function renderAudioBuffer() {
+  const sources = collectAudioSources();
+  if (sources.length == 0) {
+    return null;
+  }
+
+  const sampleRate = 48000;
+  const frames = Math.ceil((duration / 1000) * sampleRate);
+  if (!(frames > 0)) {
+    return null;
+  }
+  const offline = new OfflineAudioContext(2, frames, sampleRate);
+
+  const decoded = [];
+  for (const source of sources) {
+    try {
+      const response = await fetch(source.src);
+      const bytes = await response.arrayBuffer();
+      const buffer = await offline.decodeAudioData(bytes);
+      decoded.push({ source: source, buffer: buffer });
+    } catch (e) {
+      // Silent video, unsupported container, or an unreachable asset
+      console.warn('Skipping audio source', e);
+    }
+  }
+  if (decoded.length == 0) {
+    return null;
+  }
+
+  decoded.forEach(function (item) {
+    const node = offline.createBufferSource();
+    node.buffer = item.buffer;
+    const gain = offline.createGain();
+    gain.gain.value =
+      typeof item.source.volume == 'number' ? item.source.volume : 1;
+    node.connect(gain);
+    gain.connect(offline.destination);
+
+    const when = Math.max(0, item.source.start / 1000);
+    const offset = Math.max(0, item.source.trimstart / 1000);
+    const length = Math.max(
+      0,
+      (item.source.end - item.source.start) / 1000
+    );
+    if (length > 0 && offset < item.buffer.duration) {
+      node.start(when, offset, length);
+    }
+  });
+
+  return await offline.startRendering();
+}
+
+// Matroska needs the Opus identification header as CodecPrivate
+function buildOpusHead(channels, sampleRate) {
+  const head = new Uint8Array(19);
+  const view = new DataView(head.buffer);
+  head.set([0x4f, 0x70, 0x75, 0x73, 0x48, 0x65, 0x61, 0x64], 0); // "OpusHead"
+  head[8] = 1; // version
+  head[9] = channels;
+  view.setUint16(10, 3840, true); // pre-skip
+  view.setUint32(12, sampleRate, true);
+  view.setUint16(16, 0, true); // output gain
+  head[18] = 0; // channel mapping family
+  return head;
+}
+
+async function encodeAudioBuffer(audioBuffer) {
+  const channels = Math.min(2, audioBuffer.numberOfChannels);
+  const sampleRate = audioBuffer.sampleRate;
+  const config = {
+    codec: 'opus',
+    sampleRate: sampleRate,
+    numberOfChannels: channels,
+    bitrate: 128000,
+  };
+  if (typeof AudioEncoder === 'undefined') {
+    return null;
+  }
+  const support = await AudioEncoder.isConfigSupported(config);
+  if (!support || !support.supported) {
+    return null;
+  }
+
+  const chunks = [];
+  var failed = false;
+  const encoder = new AudioEncoder({
+    output: function (chunk) {
+      chunks.push(chunk);
+    },
+    error: function (e) {
+      failed = true;
+      console.error('Audio encoding failed', e);
+    },
+  });
+  encoder.configure(config);
+
+  const sliceFrames = Math.round(sampleRate / 10); // 100ms
+  const planes = [];
+  for (var c = 0; c < channels; c++) {
+    planes.push(audioBuffer.getChannelData(c));
+  }
+
+  for (
+    var offset = 0;
+    offset < audioBuffer.length && !failed;
+    offset += sliceFrames
+  ) {
+    const count = Math.min(sliceFrames, audioBuffer.length - offset);
+    const planar = new Float32Array(count * channels);
+    for (var ch = 0; ch < channels; ch++) {
+      planar.set(
+        planes[ch].subarray(offset, offset + count),
+        ch * count
+      );
+    }
+    const data = new AudioData({
+      format: 'f32-planar',
+      sampleRate: sampleRate,
+      numberOfFrames: count,
+      numberOfChannels: channels,
+      timestamp: Math.round((offset / sampleRate) * 1e6),
+      data: planar,
+    });
+    encoder.encode(data);
+    data.close();
+  }
+
+  await encoder.flush();
+  encoder.close();
+  if (failed || chunks.length == 0) {
+    return null;
+  }
+  return {
+    chunks: chunks,
+    sampleRate: sampleRate,
+    channels: channels,
+    codecPrivate: buildOpusHead(channels, sampleRate),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Video
+// ---------------------------------------------------------------------------
+
+async function pickVideoCodec(width, height, fps) {
+  const candidates = [
+    { codec: 'vp09.00.10.08', name: 'VP9' },
+    { codec: 'vp8', name: 'VP8' },
+  ];
+  for (const candidate of candidates) {
+    const config = {
+      codec: candidate.codec,
+      width: width,
+      height: height,
+      bitrate: 8000000,
+      framerate: fps,
+    };
+    try {
+      const support = await VideoEncoder.isConfigSupported(config);
+      if (support && support.supported) {
+        return { config: config, name: candidate.name };
+      }
+    } catch (e) {
+      // try the next one
+    }
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Orchestration
+// ---------------------------------------------------------------------------
+
+// Confirm the muxed file is actually decodable before handing it to the user.
+// The muxer is hand-rolled, so a silent failure here would otherwise reach
+// the user as a file that will not play.
+function verifyRenderedBlob(blob) {
+  return new Promise(function (resolve) {
+    const element = document.createElement('video');
+    const url = URL.createObjectURL(blob);
+    var settled = false;
+    function finish(ok) {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      URL.revokeObjectURL(url);
+      element.removeAttribute('src');
+      resolve(ok);
+    }
+    element.onloadedmetadata = function () {
+      finish(element.videoWidth > 0 && element.videoHeight > 0);
+    };
+    element.onerror = function () {
+      finish(false);
+    };
+    window.setTimeout(function () {
+      finish(false);
+    }, 5000);
+    element.src = url;
+  });
+}
+
+// Returns a WebM Blob, or null to tell the caller to use the real-time path
+async function renderFrameAccurate() {
+  const canvasElement = document.getElementById('canvasrecord');
+  const width = canvasElement.width;
+  const height = canvasElement.height;
+  if (!(width > 0 && height > 0)) {
+    return null;
+  }
+
+  const fps = getExportFramerate();
+  const selected = await pickVideoCodec(width, height, fps);
+  if (!selected) {
+    console.warn('No supported WebCodecs video configuration');
+    return null;
+  }
+
+  offlinerender = true;
+  var encoder = null;
+  try {
+    renderProgress('Mixing audio...');
+    var audio = null;
+    try {
+      const audioBuffer = await renderAudioBuffer();
+      if (audioBuffer) {
+        audio = await encodeAudioBuffer(audioBuffer);
+      }
+    } catch (e) {
+      console.warn('Rendering without audio', e);
+      audio = null;
+    }
+
+    const writer = new WebMWriter({
+      codec: selected.name,
+      width: width,
+      height: height,
+      audio: audio
+        ? {
+            sampleRate: audio.sampleRate,
+            channels: audio.channels,
+            codecPrivate: audio.codecPrivate,
+          }
+        : null,
+    });
+
+    const videoChunks = [];
+    var encoderFailed = false;
+    encoder = new VideoEncoder({
+      output: function (chunk) {
+        videoChunks.push(chunk);
+      },
+      error: function (e) {
+        encoderFailed = true;
+        console.error('Video encoding failed', e);
+      },
+    });
+    encoder.configure(selected.config);
+
+    const totalFrames = Math.max(
+      1,
+      Math.round((duration / 1000) * fps)
+    );
+    const frameDuration = 1e6 / fps;
+    const keyframeEvery = Math.max(
+      1,
+      Math.round(fps * RENDER_KEYFRAME_INTERVAL)
+    );
+
+    for (var i = 0; i < totalFrames; i++) {
+      if (encoderFailed) {
+        break;
+      }
+      const time = (i / fps) * 1000;
+
+      await seekMediaForFrame(time);
+      await recordAnimate(time);
+      canvasrecord.renderAll();
+
+      const frame = new VideoFrame(canvasElement, {
+        timestamp: Math.round(i * frameDuration),
+        duration: Math.round(frameDuration),
+      });
+      encoder.encode(frame, { keyFrame: i % keyframeEvery == 0 });
+      frame.close();
+
+      // Keep the encoder queue short so memory stays bounded
+      while (encoder.encodeQueueSize > 8 && !encoderFailed) {
+        await new Promise(function (resolve) {
+          window.setTimeout(resolve, 4);
+        });
+      }
+
+      if (i % 5 == 0) {
+        renderProgress(
+          'Rendering ' +
+            Math.round(((i + 1) / totalFrames) * 100) +
+            '%'
+        );
+      }
+    }
+
+    await encoder.flush();
+    encoder.close();
+    encoder = null;
+    if (encoderFailed || videoChunks.length == 0) {
+      return null;
+    }
+
+    renderProgress('Muxing...');
+    // Interleave both tracks in timestamp order: a cluster's blocks have to
+    // be ordered, and this avoids threading the two producers together.
+    const all = [];
+    videoChunks.forEach(function (chunk) {
+      all.push({ chunk: chunk, track: 1 });
+    });
+    if (audio) {
+      audio.chunks.forEach(function (chunk) {
+        all.push({ chunk: chunk, track: 2 });
+      });
+    }
+    all.sort(function (a, b) {
+      if (a.chunk.timestamp == b.chunk.timestamp) {
+        return a.track - b.track;
+      }
+      return a.chunk.timestamp - b.chunk.timestamp;
+    });
+    all.forEach(function (item) {
+      writer.addFrame(item.chunk, item.track);
+    });
+
+    const blob = await writer.complete();
+    if (!blob || blob.size == 0) {
+      return null;
+    }
+    if (!(await verifyRenderedBlob(blob))) {
+      console.warn(
+        'Rendered file failed verification, using the real-time encoder'
+      );
+      return null;
+    }
+    return blob;
+  } catch (e) {
+    console.error('Frame-accurate render failed', e);
+    return null;
+  } finally {
+    offlinerender = false;
+    if (encoder && encoder.state != 'closed') {
+      try {
+        encoder.close();
+      } catch (e) {
+        // already torn down
+      }
+    }
+  }
+}
diff --git a/src/js/text.js b/src/js/text.js
index 5204843..65f4d9c 100644
--- a/src/js/text.js
+++ b/src/js/text.js
@@ -1,10 +1,16 @@
 function animateText(group, ms, play, props, cv, id) {
-  var starttime = p_keyframes.find((x) => x.id == id).start;
-  ms -= starttime;
+  const p_keyframe = p_keyframes.find((x) => x.id == id);
+  if (!group || !p_keyframe) {
+    return;
+  }
+  ms -= p_keyframe.start;
   var length = group._objects.length;
   var globaldelay = 0;
+  // Every letter needs its own binding: the anime callbacks below run long
+  // after the loop has finished, so `var` would make them all share the last
+  // letter's state.
   for (var i = 0; i < length; i++) {
-    var index = i;
+    let index = i;
     if (props.order == 'backward') {
       index = length - i - 1;
     }
@@ -12,9 +18,10 @@ function animateText(group, ms, play, props, cv, id) {
     let top = group.item(index).defaultTop;
     let scaleX = group.item(index).defaultScaleX;
     let scaleY = group.item(index).defaultScaleY;
-    var delay = i * duration;
-    var duration = props.duration / length;
-    var animation = {
+    // Named `step` so it does not shadow the global project duration
+    let step = props.duration / length;
+    let delay = i * step;
+    let animation = {
       opacity: 0,
       top: top,
       left: left,
@@ -22,7 +29,7 @@ function animateText(group, ms, play, props, cv, id) {
       scaleY: scaleY,
     };
     if (props.typeAnim == 'letter') {
-      delay = i * duration - 100;
+      delay = i * step - 100;
     } else if (props.typeAnim == 'word') {
       if (group.item(index).text == ' ') {
         globaldelay += 500;
@@ -30,8 +37,8 @@ function animateText(group, ms, play, props, cv, id) {
       delay = globaldelay;
     }
     if (props.preset == 'typewriter') {
-      delay = i * duration;
-      duration = 20;
+      delay = i * step;
+      step = 20;
     } else if (props.preset == 'fade in') {
     } else if (props.preset == 'slide top') {
       animation.top += 20;
@@ -48,14 +55,14 @@ function animateText(group, ms, play, props, cv, id) {
       animation.scaleX = 1.5;
       animation.scaleY = 1.5;
     }
-    if (delay < 0) {
+    if (!(delay > 0)) {
       delay = 0;
     }
-    if (duration < 20) {
-      duration = 20;
+    if (!(step > 20)) {
+      step = 20;
     }
-    var start = false;
-    var instance = anime({
+    let start = false;
+    let instance = anime({
       targets: animation,
       delay: delay,
       opacity: 1,
@@ -63,7 +70,7 @@ function animateText(group, ms, play, props, cv, id) {
       top: top,
       scaleX: scaleX,
       scaleY: scaleY,
-      duration: duration,
+      duration: step,
       easing: props.easing,
       autoplay: play,
       update: function () {
@@ -228,8 +235,7 @@ class AnimatedText {
     var obj = cv.getItemById(this.id);
     var left = obj.left;
     var top = obj.top;
-    var scaleX = obj,
-      scaleX;
+    var scaleX = obj.scaleX;
     var scaleY = obj.scaleY;
     var angle = obj.angle;
     var start = p_keyframes.find((x) => x.id == this.id).start;
@@ -260,10 +266,16 @@ class AnimatedText {
       cv,
       this.id
     );
-    animate(currenttime, false);
+    animate(false, currenttime);
     save();
   }
   assignTo(id, text, props) {
     this.id = id;
+    if (text !== undefined) {
+      this.text = text;
+    }
+    if (props !== undefined) {
+      this.props = props;
+    }
   }
 }
diff --git a/src/js/ui.js b/src/js/ui.js
index 10f9912..e70b222 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -1,5 +1,8 @@
 // Update panel (when selecting / de-selecting objects)
 function updatePanel(selection) {
+  if (selection && !canvas.getActiveObject()) {
+    selection = false;
+  }
   if (!selection) {
     $('#align').addClass('align-off');
     $('#object-specific').html(canvas_panel);
@@ -330,17 +333,19 @@ function convertToHex(nonHexColorString) {
 
 function updateStrokeValues() {
   const object = canvas.getActiveObject();
+  if (!object) {
+    return;
+  }
   $('.line-join-active').removeClass('line-join-active');
-  if (
-    object.get('strokeDashArray') == false &&
-    object.get('strokeWidth') == 0
-  ) {
+  const dash = object.get('strokeDashArray');
+  const hasDash = Array.isArray(dash) && dash.length > 0;
+  if (!hasDash && object.get('strokeWidth') == 0) {
     $('#miter').addClass('line-join-active');
     $('#miter img').attr('src', 'assets/miter-active.svg');
-  } else if (object.get('strokeDashArray') == false) {
+  } else if (!hasDash) {
     $('#bevel').addClass('line-join-active');
     $('#bevel img').attr('src', 'assets/bevel-active.svg');
-  } else if (object.get('strokeDashArray') == [10, 5]) {
+  } else if (dash[0] == 10 && dash[1] == 5) {
     $('#round').addClass('line-join-active');
     $('#round img').attr('src', 'assets/round-active.svg');
   } else {
@@ -350,39 +355,39 @@ function updateStrokeValues() {
 }
 
 function toggleAnimationOrder() {
-  var object = canvas.getActiveObject();
+  const text = activeAnimatedText();
+  if (!text) {
+    return;
+  }
   $('.order-toggle-item-active').removeClass(
     'order-toggle-item-active'
   );
   if ($(this).attr('id') == 'order-backward') {
-    animatedtext
-      .find((x) => x.id == object.id)
-      .setProp({ order: 'backward' }, canvas);
+    text.setProp({ order: 'backward' });
   } else if ($(this).attr('id') == 'order-forward') {
-    animatedtext
-      .find((x) => x.id == object.id)
-      .setProp({ order: 'forward' }, canvas);
+    text.setProp({ order: 'forward' });
   }
   $(this).addClass('order-toggle-item-active');
-  animate(currenttime, false);
+  // animate(play, time) - the arguments used to be the other way round, so
+  // the canvas never refreshed after changing a text animation.
+  animate(false, currenttime);
   save();
 }
 function toggleAnimationType() {
-  var object = canvas.getActiveObject();
+  const text = activeAnimatedText();
+  if (!text) {
+    return;
+  }
   $('.order-toggle-item-active-2').removeClass(
     'order-toggle-item-active-2'
   );
   if ($(this).attr('id') == 'type-words') {
-    animatedtext
-      .find((x) => x.id == object.id)
-      .setProp({ typeAnim: 'word' }, canvas);
+    text.setProp({ typeAnim: 'word' });
   } else if ($(this).attr('id') == 'type-letters') {
-    animatedtext
-      .find((x) => x.id == object.id)
-      .setProp({ typeAnim: 'letter' }, canvas);
+    text.setProp({ typeAnim: 'letter' });
   }
   $(this).addClass('order-toggle-item-active-2');
-  animate(currenttime, false);
+  animate(false, currenttime);
   save();
 }
 $(document).on(
@@ -473,7 +478,7 @@ function updatePanelValues() {
     var tempstore = false;
     var object = canvas.getActiveObject();
     if (
-      canvas.getActiveObjects.length > 1 ||
+      canvas.getActiveObjects().length > 1 ||
       object.get('type') == 'activeSelection'
     ) {
       object = object.toGroup();
@@ -590,7 +595,8 @@ function updatePanelValues() {
 
 // Update opacity input
 function updateInputs(id) {
-  if (canvas.getActiveObject().get('assetType') == 'audio') {
+  const active = canvas.getActiveObject();
+  if (!active || active.get('assetType') == 'audio') {
     return false;
   }
   if ($('#object-o input').val() > 100) {
@@ -604,7 +610,7 @@ function updateInputs(id) {
     id == 'object-color-fill-opacity'
   ) {
     if ($('#object-color-fill-opacity input').val() > 100) {
-      $('#object-color-fill-opacity').val(100);
+      $('#object-color-fill-opacity input').val(100);
     } else if ($('#object-color-fill-opacity input').val() < 0) {
       $('#object-color-fill-opacity input').val(0);
     }
@@ -628,7 +634,7 @@ function updateInputs(id) {
     id == 'object-color-stroke-opacity'
   ) {
     if ($('#object-color-stroke-opacity input').val() > 100) {
-      $('#object-color-stroke-opacity').val(100);
+      $('#object-color-stroke-opacity input').val(100);
     } else if ($('#object-color-stroke-opacity input').val() < 0) {
       $('#object-color-stroke-opacity input').val(0);
     }
@@ -652,7 +658,7 @@ function updateInputs(id) {
     id == 'object-color-shadow-opacity'
   ) {
     if ($('#object-color-shadow-opacity input').val() > 100) {
-      $('#object-color-shadow-opacity').val(100);
+      $('#object-color-shadow-opacity input').val(100);
     } else if ($('#object-color-shadow-opacity input').val() < 0) {
       $('#object-color-shadow-opacity input').val(0);
     }
@@ -673,7 +679,6 @@ function updateInputs(id) {
 
 // Update object position based on panel input values
 function updateObjectValues(type) {
-  autoSave();
   if (canvas.getActiveObjects().length > 0) {
     if ($(this).find('input').val() || type) {
       var object = canvas.getActiveObject();
@@ -832,14 +837,11 @@ function updateObjectValues(type) {
   }
 }
 function setTextAnimation() {
-  var object = canvas.getActiveObject();
-  animatedtext
-    .find((x) => x.id == object.id)
-    .reset(
-      $(this).parent().find('input').val(),
-      animatedtext.find((x) => x.id == object.id).props,
-      canvas
-    );
+  const text = activeAnimatedText();
+  if (!text) {
+    return;
+  }
+  text.reset($(this).parent().find('input').val(), text.props, canvas);
 }
 
 $(document).on('input', '.property-input', updateObjectValues);
@@ -850,8 +852,10 @@ $(document).on('click', '#animatedset', setTextAnimation);
 // Toggle picker (maybe it could be condensed?)
 function togglePicker() {
   const object = canvas.getActiveObject();
+  if (!object && $(this).attr('id') != 'canvas-color') {
+    return;
+  }
   if (!o_fill.isOpen()) {
-    newcolorkeyframe = true;
     if ($(this).attr('id') == 'object-color-fill') {
       colormode = 'fill';
       o_fill.setColor(object.get('fill'));
@@ -879,7 +883,6 @@ function togglePicker() {
       colormode = 'shadow';
       o_fill.setColor(object.shadow.color);
     }
-    newcolorkeyframe = false;
     o_fill.show();
   } else {
     o_fill.hide();
@@ -917,6 +920,7 @@ function populateGrid(type) {
     });
   } else if (type == 'image-tool') {
     $('#images-grid').html('');
+    $('#categories').html('');
     image_categories.forEach(function (category) {
       $('#categories').append(
         "<div class='category' data-name='" +
@@ -930,6 +934,7 @@ function populateGrid(type) {
     });
   } else if (type == 'video-tool') {
     $('#images-grid').html('');
+    $('#categories').html('');
     video_categories.forEach(function (category) {
       $('#categories').append(
         "<div class='category' data-name='" +
@@ -959,7 +964,7 @@ function populateGrid(type) {
               item.key +
               "'><img class='delete-media' draggable=false src='assets/more-options.svg'><img draggable=false onload='onLoadImage(this)' class='image-thing' src='" +
               item.thumb +
-              "'</div>"
+              "'></div>"
           );
         }
       });
@@ -999,6 +1004,7 @@ function populateGrid(type) {
     }
   } else if (type == 'audio-tool') {
     var flag = false;
+    $('#audio-list').html('');
     audio_items.forEach(function (item) {
       if (item.src == background_key) {
         flag = true;
@@ -1015,7 +1021,7 @@ function populateGrid(type) {
             item.desc +
             "</a><div class='audio-info-duration'>" +
             item.duration +
-            '</div></div></div></div>'
+            '</div></div></div>'
         );
       } else {
         $('#audio-list').append(
@@ -1031,7 +1037,7 @@ function populateGrid(type) {
             item.desc +
             "</a><div class='audio-info-duration'>" +
             item.duration +
-            '</div></div></div></div>'
+            '</div></div></div>'
         );
       }
     });
@@ -1057,7 +1063,7 @@ function populateGrid(type) {
         },
       });
       $('#shapes-cont').append(
-        "<div id='item-text' class='add-text noselect' data-font='" +
+        "<div class='item-text add-text noselect' data-font='" +
           text.fontname +
           "' style='font-family: " +
           text.fontname +
@@ -1074,7 +1080,7 @@ function populateGrid(type) {
         },
       });
       $('#shapes-cont').append(
-        "<div id='item-text' class='add-text noselect' data-font='" +
+        "<div class='item-text add-text noselect' data-font='" +
           text.fontname +
           "' style='font-family: " +
           text.fontname +
@@ -1091,7 +1097,7 @@ function populateGrid(type) {
         },
       });
       $('#shapes-cont').append(
-        "<div id='item-text' class='add-text noselect' data-font='" +
+        "<div class='item-text add-text noselect' data-font='" +
           text.fontname +
           "' style='font-family: " +
           text.fontname +
@@ -1108,7 +1114,7 @@ function populateGrid(type) {
         },
       });
       $('#shapes-cont').append(
-        "<div id='item-text' class='add-text noselect' data-font='" +
+        "<div class='item-text add-text noselect' data-font='" +
           text.fontname +
           "' style='font-family: " +
           text.fontname +
@@ -1125,7 +1131,7 @@ function populateGrid(type) {
         },
       });
       $('#shapes-cont').append(
-        "<div id='item-text' class='add-text noselect' data-font='" +
+        "<div class='item-text add-text noselect' data-font='" +
           text.fontname +
           "' style='font-family: " +
           text.fontname +
@@ -1175,27 +1181,27 @@ function updateBrowser(type) {
   if (type == 'image-tool') {
     $('#browser-container').html(image_browser);
     populateGrid(type);
-    $('#browser').on('scroll', scrollBottom);
+    $('#browser').off('scroll', scrollBottom).on('scroll', scrollBottom);
   } else if (type == 'shape-tool') {
     $('#browser-container').html(shape_browser);
     populateGrid(type);
-    $('#browser').on('scroll', scrollBottom);
+    $('#browser').off('scroll', scrollBottom).on('scroll', scrollBottom);
   } else if (type == 'video-tool') {
     $('#browser-container').html(video_browser);
     populateGrid(type);
-    $('#browser').on('scroll', scrollBottom);
+    $('#browser').off('scroll', scrollBottom).on('scroll', scrollBottom);
   } else if (type == 'text-tool') {
     $('#browser-container').html(text_browser);
     populateGrid(type);
-    $('#browser').on('scroll', scrollBottom);
+    $('#browser').off('scroll', scrollBottom).on('scroll', scrollBottom);
   } else if (type == 'upload-tool') {
     $('#browser-container').html(upload_browser);
     populateGrid('images-tab');
-    $('#browser').on('scroll', scrollBottom);
+    $('#browser').off('scroll', scrollBottom).on('scroll', scrollBottom);
   } else if (type == 'audio-tool') {
     $('#browser-container').html(audio_browser);
     populateGrid(type);
-    $('#browser').on('scroll', scrollBottom);
+    $('#browser').off('scroll', scrollBottom).on('scroll', scrollBottom);
   }
 }
 
@@ -1260,10 +1266,14 @@ $(document).on('click', '.tool:not(.tool-active)', switchTool);
 
 // Replace image or video by dragging on top and holding a key
 function replaceObject(src, object) {
+  if (!src || !object) {
+    return;
+  }
   var img = new Image();
   var width = object.width;
   var height = object.height;
-  oldsrc = object._originalElement.currentSrc;
+  const element = object.getElement();
+  oldsrc = element ? element.currentSrc || element.src : null;
   oldobj = object;
   img.onload = function () {
     object.setElement(img);
@@ -1271,6 +1281,9 @@ function replaceObject(src, object) {
     object.set('height', height);
     canvas.renderAll();
   };
+  img.onerror = function () {
+    console.warn('Could not load replacement image');
+  };
   img.src = src;
 }
 
@@ -1339,7 +1352,9 @@ function dragObject(e) {
       (replacing && !e.ctrlKey)
     ) {
       drag.css('visibility', 'visible');
-      replaceObject(oldsrc, oldobj);
+      if (oldsrc && oldobj) {
+        replaceObject(oldsrc, oldobj);
+      }
       replacing = false;
       canvas.discardActiveObject();
       $('#replace-image').removeClass('replace-active');
@@ -1361,7 +1376,21 @@ function dragObject(e) {
     $('#properties').removeClass('noselect');
     $('#controls').removeClass('noselect');
     draggingPanel = false;
-    $('body').off('mousemove', dragging).off('mouseup', released);
+    // An aborted drag (pointercancel, a stray native dragstart, or the window
+    // losing focus) carries no pointer position, so there is nowhere to drop.
+    // Undo any in-progress replacement and bin the ghost.
+    if (!e || e.type != 'pointerup') {
+      if (replacing) {
+        if (oldsrc && oldobj) {
+          replaceObject(oldsrc, oldobj);
+        }
+        replacing = false;
+        canvas.discardActiveObject();
+        canvas.renderAll();
+      }
+      drag.remove();
+      return false;
+    }
     canvasx = canvas.getPointer(e).x;
     canvasy = canvas.getPointer(e).y;
     var xpos = canvasx + offsetx - artboard.get('left');
@@ -1561,16 +1590,32 @@ function dragObject(e) {
     }
     drag.remove();
   }
-  $('body').on('mouseup', released).on('mousemove', dragging);
+  // No pointer capture here (unlike the timeline drags): the drop target is
+  // worked out from the canvas hover state, and capturing would retarget those
+  // events to the panel item and leave overCanvas permanently false.
+  bindPointerDrag(e, null, dragging, released);
 }
-$(document).on('mousedown', '.image-grid-item', dragObject);
-$(document).on('mousedown', '.video-grid-item', dragObject);
-$(document).on('mousedown', '.grid-item', dragObject);
-$(document).on('mousedown', '.grid-emoji-item', dragObject);
-$(document).on('mousedown', '.add-text', dragObject);
-$(document).on('mousedown click mouseup', '.credit', function (e) {
-  e.stopPropagation();
-});
+$(document).on('pointerdown', '.image-grid-item', dragObject);
+$(document).on('pointerdown', '.video-grid-item', dragObject);
+$(document).on('pointerdown', '.grid-item', dragObject);
+$(document).on('pointerdown', '.grid-emoji-item', dragObject);
+$(document).on('pointerdown', '.add-text', dragObject);
+$(document).on(
+  'pointerdown mousedown click mouseup',
+  '.credit',
+  function (e) {
+    e.stopPropagation();
+  }
+);
+// Panel items must never become native drag sources - a native drag swallows
+// the pointerup and leaves the dragged ghost stuck to the cursor
+$(document).on(
+  'dragstart',
+  '.image-grid-item, .video-grid-item, .grid-item, .grid-emoji-item, .add-text, .credit',
+  function (e) {
+    e.preventDefault();
+  }
+);
 
 // Collapse library
 function collapsePanel() {
@@ -1613,18 +1658,29 @@ function setPreset() {
 }
 $(document).on('change', '#preset', setPreset);
 
+function activeAnimatedText() {
+  const object = canvas.getActiveObject();
+  if (!object) {
+    return null;
+  }
+  return animatedtext.find((x) => x.id == object.id) || null;
+}
 function setTextPreset() {
-  var object = canvas.getActiveObject();
-  animatedtext
-    .find((x) => x.id == object.id)
-    .setProp({ preset: $(this).val() }, canvas);
+  const text = activeAnimatedText();
+  if (!text) {
+    return;
+  }
+  text.setProp({ preset: $(this).val() });
+  animate(false, currenttime);
   save();
 }
 function setTextEasing() {
-  var object = canvas.getActiveObject();
-  animatedtext
-    .find((x) => x.id == object.id)
-    .setProp({ easing: $(this).val() }, canvas);
+  const text = activeAnimatedText();
+  if (!text) {
+    return;
+  }
+  text.setProp({ easing: $(this).val() });
+  animate(false, currenttime);
   save();
 }
 $(document).on('change', '#preset-picker', setTextPreset);
@@ -1651,11 +1707,14 @@ function saveLayerName() {
   if ($('.name-active').val() == '') {
     $('.name-active').val('Untitled layer');
   }
-  objects.find(
+  const entry = objects.find(
     (x) =>
       x.id == $('.name-active').parent().parent().attr('data-object')
-  ).label = $('.name-active').val();
-  save();
+  );
+  if (entry) {
+    entry.label = $('.name-active').val();
+    save();
+  }
   $('.name-active').removeClass('name-active');
   if (window.getSelection) {
     if (window.getSelection().empty) {
@@ -1750,6 +1809,9 @@ function fancyTimeFormat(duration) {
 
 function loadMoreMedia() {
   var value = $('#browser-search input').val();
+  if (!HAS_PIXABAY_KEY) {
+    return;
+  }
   if (value != '' && page != false) {
     page += 1;
     if ($('#image-tool').hasClass('tool-active')) {
@@ -1772,7 +1834,7 @@ function loadMoreMedia() {
                 hit.user +
                 "</a><img draggable=false onload='onLoadImage(this)' src='" +
                 hit.webformatURL +
-                "'</div>"
+                "'></div>"
             );
           });
         } else {
@@ -1800,7 +1862,7 @@ function loadMoreMedia() {
                 hit.user +
                 "</a><div id='time-video'>" +
                 fancyTimeFormat(hit.duration) +
-                "</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'</div>"
+                "</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'></div>"
             );
             createVideoThumbnail(video, 250, 0, true).then(function (
               data
@@ -1821,6 +1883,15 @@ function loadMoreMedia() {
 function search() {
   page = 1;
   var value = $('#browser-search input').val();
+  const pixabaySearch =
+    $('#image-tool').hasClass('tool-active') ||
+    $('#video-tool').hasClass('tool-active');
+  if (pixabaySearch && !HAS_PIXABAY_KEY) {
+    $('#shapes-cont').html(
+      "<div id='no-results'>Image and video search needs a Pixabay API key. Set API_KEY in js/init.js.</div>"
+    );
+    return;
+  }
   if ($('#image-tool').hasClass('tool-active')) {
     var URL =
       'https://pixabay.com/api/?key=' +
@@ -1845,7 +1916,7 @@ function search() {
                 hit.user +
                 "</a><img draggable=false onload='onLoadImage(this)' src='" +
                 hit.webformatURL +
-                "'</div>"
+                "'></div>"
             );
           });
         } else {
@@ -1883,7 +1954,7 @@ function search() {
                 hit.user +
                 "</a><div id='time-video'>" +
                 fancyTimeFormat(hit.duration) +
-                "</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'</div>"
+                "</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'></div>"
             );
             //createVideoThumbnail(video, 250, 0, true).then(function(data){
             $(".image-grid-item[data-src='" + video + "']")
@@ -1963,7 +2034,7 @@ function search() {
             },
           });
           $('#shapes-cont').append(
-            "<div id='item-text' class='add-text noselect' data-font='" +
+            "<div class='item-text add-text noselect' data-font='" +
               font +
               "' style='font-family: " +
               font +
@@ -2069,10 +2140,7 @@ function checkFilter() {
   resetFilters();
   if (canvas.getActiveObject()) {
     var obj = canvas.getActiveObject();
-    if (
-      canvas.getActiveObjects().length == 1 &&
-      (obj.type == 'image' || obj.type == 'video')
-    ) {
+    if (canvas.getActiveObjects().length == 1 && obj.filters) {
       var value = 'none';
       if (obj.filters.length > 0) {
         obj.filters.forEach(function (filter) {
@@ -2224,6 +2292,9 @@ $(document).on('click', '#reset-filters', removeFilters);
 function updateChromaValues() {
   if (canvas.getActiveObject()) {
     var obj = canvas.getActiveObject();
+    if (!obj.filters) {
+      return;
+    }
     if ($('.status-active').attr('id') == 'status-on') {
       if (obj.filters.find((x) => x.type == 'RemoveColor')) {
         obj.filters.find((x) => x.type == 'RemoveColor').distance =
@@ -2264,7 +2335,8 @@ function updateChromaUI() {
           $('.status-active').removeClass('status-active');
           $('#status-on').addClass('status-active');
           chromaslider.setValue(
-            obj.filters.find((x) => x.type == 'RemoveColor').distance
+            obj.filters.find((x) => x.type == 'RemoveColor').distance *
+              100
           );
           $('#chroma-color input').val(
             obj.filters.find((x) => x.type == 'RemoveColor').color
@@ -2278,7 +2350,7 @@ function updateChromaUI() {
           $('#status-off').addClass('status-active');
           chromaslider.setValue(1);
           $('#chroma-color input').val('#FFFFFF');
-          $('#color-chroma-side').css('background-color', '#FFFFF');
+          $('#color-chroma-side').css('background-color', '#FFFFFF');
         }
       }
     }
@@ -2350,13 +2422,24 @@ function hideMore() {
 
 function handleLottieUpload() {
   var filething = $('#filepick3').get(0).files;
+  if (!filething || filething.length == 0) {
+    return;
+  }
   var reader = new FileReader();
   reader.onload = function (event) {
-    newLottieAnimation(
-      artboard.get('left') + artboard.get('width') / 2,
-      artboard.get('top') + artboard.get('height') / 2,
-      event.target.result
-    );
+    try {
+      newLottieAnimation(
+        artboard.get('left') + artboard.get('width') / 2,
+        artboard.get('top') + artboard.get('height') / 2,
+        event.target.result
+      );
+    } catch (e) {
+      console.error(e);
+      alert('That does not look like a valid Lottie file');
+    }
+  };
+  reader.onerror = function () {
+    alert('Could not read the file');
   };
   reader.readAsDataURL(filething.item(0));
 }
diff --git a/src/js/webm-writer2.js b/src/js/webm-writer2.js
index ce8e75c..9886711 100644
--- a/src/js/webm-writer2.js
+++ b/src/js/webm-writer2.js
@@ -596,7 +596,12 @@ function writeEBML(buffer, bufferFileOffset, ebml) {
       buffer.writeEBMLVarInt(4);  // Size field
       ebml.dataOffset = buffer.pos + bufferFileOffset;
       buffer.writeFloatBE(ebml.data.value);
-    } else if (ebml.data instanceof Uint8Array) {
+    } else if (
+        ebml.data instanceof Uint8Array ||
+        (ArrayBuffer.isView(ebml.data) &&
+         ebml.data.BYTES_PER_ELEMENT === 1)) {
+      // isView as well as instanceof: a byte array that crossed a realm
+      // boundary (worker, vm context) fails the instanceof check
       buffer.writeEBMLVarInt(ebml.data.byteLength);  // Size field
       ebml.dataOffset = buffer.pos + bufferFileOffset;
       buffer.writeBytes(ebml.data);
@@ -630,7 +635,8 @@ function writeEBML(buffer, bufferFileOffset, ebml) {
  */
 let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
   return function(options) {
-    let MAX_CLUSTER_DURATION_MSEC = 5000000, DEFAULT_TRACK_NUMBER = 1,
+    let MAX_CLUSTER_DURATION_MSEC = 5000, DEFAULT_TRACK_NUMBER = 1,
+        AUDIO_TRACK_NUMBER = 2,
         writtenHeader = false, videoWidth = 0, videoHeight = 0,
         firstTimestampEver = true, earliestTimestamp = 0,
 
@@ -649,6 +655,9 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
                      // (optional)
       codec: 'VP8',  // Codec to write to webm file
 
+      // Optional second track holding Opus audio. Supply:
+      //   {sampleRate, channels, codecPrivate: Uint8Array (OpusHead)}
+      audio: null,
     },
 
     seekPoints = {
@@ -787,9 +796,7 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
             }
           ];
 
-      let tracks = {
-        'id': 0x1654ae6b,  // Tracks
-        'data': [{
+      let trackEntries = [{
           'id': 0xae,  // TrackEntry
           'data': [
             {
@@ -868,7 +875,87 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
                'data': options.codec
              },*/
           ]
-        }]
+        }];
+
+      // Optional Opus audio track.
+      // CodecPrivate must be an OpusHead block, and Opus needs the pre-roll
+      // hints or players will start it with audible artefacts.
+      if (options.audio) {
+        trackEntries.push({
+          'id': 0xae,  // TrackEntry
+          'data': [
+            {
+              'id': 0xd7,  // TrackNumber
+              'data': AUDIO_TRACK_NUMBER
+            },
+            {
+              'id': 0x73c5,  // TrackUID
+              'data': AUDIO_TRACK_NUMBER
+            },
+            {
+              'id': 0x83,  // TrackType (2 = audio)
+              'data': 2
+            },
+            {
+              'id': 0x9c,  // FlagLacing
+              'data': 0
+            },
+            {
+              'id': 0x22b59c,  // Language
+              'data': 'und'
+            },
+            {
+              'id': 0xb9,  // FlagEnabled
+              'data': 1
+            },
+            {
+              'id': 0x88,  // FlagDefault
+              'data': 1
+            },
+            {
+              'id': 0x55aa,  // FlagForced
+              'data': 0
+            },
+            {
+              'id': 0x86,  // CodecID
+              'data': 'A_OPUS'
+            },
+            {
+              'id': 0x63A2,  // CodecPrivate
+              'data': options.audio.codecPrivate
+            },
+            {
+              'id': 0x56AA,  // CodecDelay (ns)
+              'data': 6500000
+            },
+            {
+              'id': 0x56BB,  // SeekPreRoll (ns)
+              'data': 80000000
+            },
+            {
+              'id': 0xe1,  // Audio
+              'data': [
+                {
+                  'id': 0xb5,  // SamplingFrequency
+                  'data': new EBMLFloat64(options.audio.sampleRate)
+                },
+                {
+                  'id': 0x9f,  // Channels
+                  'data': options.audio.channels
+                },
+                {
+                  'id': 0x6264,  // BitDepth
+                  'data': 32
+                }
+              ]
+            }
+          ]
+        });
+      }
+
+      let tracks = {
+        'id': 0x1654ae6b,  // Tracks
+        'data': trackEntries
       };
 
       ebmlSegment = {
@@ -881,7 +968,9 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
         ]
       };
 
-      let bufferStream = new ArrayBufferDataStream(256);
+      // Has to fit the header, SeekHead, SegmentInfo and every TrackEntry.
+      // 256 was only ever enough for a single video track.
+      let bufferStream = new ArrayBufferDataStream(1024);
 
       writeEBML(bufferStream, blobBuffer.pos, [ebmlHeader, ebmlSegment]);
       blobBuffer.write(bufferStream.getAsDataArray());
@@ -1036,7 +1125,7 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
      * @param {Frame} frame
      */
     function addFrameToCluster(frame) {
-        frame.trackNumber = DEFAULT_TRACK_NUMBER;
+        frame.trackNumber = frame.trackNumber || DEFAULT_TRACK_NUMBER;
         var time = frame.intime / 1000;
         if (firstTimestampEver) {
           earliestTimestamp = time;
@@ -1045,19 +1134,30 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
         } else {
           time = time - earliestTimestamp;
         }
-        lastTimeCode = time;
-        if (clusterDuration == 0) clusterStartTime = time;
+        if (time > lastTimeCode) {
+          lastTimeCode = time;
+        }
+
+        // Start a new cluster on a video keyframe once the current one has
+        // grown past the limit. SimpleBlock timecodes are a signed 16 bit
+        // offset from the cluster, so clusters cannot span more than ~32s.
+        const isVideoKeyframe =
+            frame.trackNumber == DEFAULT_TRACK_NUMBER && frame.type == 'key';
+        if (
+          clusterFrameBuffer.length > 0 && isVideoKeyframe &&
+          time - clusterStartTime >= MAX_CLUSTER_DURATION_MSEC) {
+          flushClusterFrameBuffer();
+        }
+
+        if (clusterFrameBuffer.length === 0) {
+          clusterStartTime = time;
+        }
 
         // Frame timecodes are relative to the start of their cluster:
-        // frame.timecode = Math.round(clusterDuration);
         frame.timecode = Math.round(time - clusterStartTime);
 
         clusterFrameBuffer.push(frame);
         clusterDuration = frame.timecode + 1;
-
-        if (clusterDuration >= MAX_CLUSTER_DURATION_MSEC) {
-          flushClusterFrameBuffer();
-        }
       }
 
       /**
@@ -1106,24 +1206,33 @@ let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
        * toDataUrl() on an image yourself.
        *
        */
-      this.addFrame = function(frame) {
+      this.addFrame = function(frame, trackNumber) {
         if (!writtenHeader) {
           videoWidth = options.width;
           videoHeight = options.height;
           writeHeader();
         }
-        if (frame.constructor.name == 'EncodedVideoChunk') {
+        const name = frame.constructor.name;
+        if (name == 'EncodedVideoChunk' || name == 'EncodedAudioChunk') {
           let frameData = new Uint8Array(frame.byteLength);
           frame.copyTo(frameData);
           addFrameToCluster({
             frame: frameData,
             intime: frame.timestamp,
             type: frame.type,
+            trackNumber: trackNumber ||
+                (name == 'EncodedAudioChunk' ? AUDIO_TRACK_NUMBER :
+                                              DEFAULT_TRACK_NUMBER),
           });
           return;
         }
       };
 
+      // Encoded audio for the optional second track
+      this.addAudioChunk = function(chunk) {
+        this.addFrame(chunk, AUDIO_TRACK_NUMBER);
+      };
+
       /**
        * Finish writing the video and return a Promise to signal completion.
        *
diff --git a/src/styles.css b/src/styles.css
index 3fa0fe6..d57001b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -734,7 +734,7 @@ body {
   height: 28px;
   line-height: 28px;
 }
-#item-text {
+.item-text {
   font-size: 16px;
   font-weight: 500;
   height: 34px;
@@ -1418,7 +1418,8 @@ input[type="number"] {
 /* Download modal */
 #download-modal {
   width: 300px;
-  height: 255px;
+  /* Grows with its content: the frame rate row is hidden for image exports */
+  padding-bottom: 20px;
   background-color: var(--panel-back);
   border: 1px solid var(--panel-stroke);
   border-radius: 5px;
@@ -1463,6 +1464,28 @@ input[type="number"] {
   margin-left: 10px;
   margin-bottom: 20px;
 }
+#framerate-row {
+  margin-bottom: 20px;
+}
+#framerate-row .subheader {
+  margin-bottom: 8px;
+}
+#framerate {
+  background-color: var(--input-color);
+  border: none;
+  border-radius: 5px;
+  color: var(--main-text-color);
+  font-family: Inter;
+  font-size: 14px;
+  height: 35px;
+  outline: none;
+  padding-left: 11px;
+  width: calc(100% - 40px);
+  margin-left: 20px;
+}
+#framerate:hover {
+  cursor: pointer;
+}
 .magic-radio:checked + label:before {
   background-color: var(--accent-color) !important;
   border: 0px !important;
@@ -1626,6 +1649,46 @@ layer:nth-child(even) .properties {
   font-size: 14px;
   text-indent: 25px;
   display: inline-block;
+  position: relative;
+}
+.layer-handle {
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 9px;
+  height: 16px;
+  text-indent: 0;
+  opacity: 0.3;
+  cursor: grab;
+  background-image: radial-gradient(
+    currentColor 1px,
+    transparent 1.5px
+  );
+  background-size: 4px 5px;
+  background-position: 1px 2px;
+  transition: opacity 0.15s ease;
+}
+.layer:hover .layer-handle {
+  opacity: 0.7;
+}
+.layer .layer-handle:hover {
+  opacity: 1;
+}
+.layer-handle:active {
+  cursor: grabbing;
+}
+.layer-handle[draggable="false"] {
+  cursor: not-allowed;
+  opacity: 0.15 !important;
+}
+.sortable-placeholder {
+  height: 35px;
+  margin-bottom: 2px;
+  box-sizing: border-box;
+  border: 1px dashed var(--accent-color);
+  border-radius: 3px;
+  background: rgba(0, 122, 255, 0.12);
 }
 .layer-custom-name {
   background: transparent;
@@ -2020,6 +2083,33 @@ layer:nth-child(even) .properties {
   z-index: 99999999;
   pointer-events: all;
   top: 0px;
+  /* Never let the browser start a native drag or a selection on the seekbar */
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+}
+#seekbar:after,
+#seek-hover {
+  -webkit-user-drag: none;
+}
+/* Same for the other timeline drag targets */
+.keyframe,
+.main-row,
+.row-el,
+.trim-row,
+#timeline-handle {
+  -webkit-user-drag: none;
+  touch-action: none;
+}
+/* And for the library panel items dragged onto the canvas */
+.image-grid-item,
+.video-grid-item,
+.grid-item,
+.grid-emoji-item,
+.add-text,
+.credit {
+  -webkit-user-drag: none;
 }
 #seekbar:hover {
   outline: 3px solid rgba(255, 255, 255, 0.1);
@@ -2438,10 +2528,10 @@ layer:nth-child(even) .properties {
 	margin-top: -45px;
 	box-shadow: 0px 8px 4px -4px rgb(12 13 26 / 50%);
 }
-#filters-header #filters-title {
+#filters-header .filters-title {
 	margin-top: 0px!important;
 }
-#filters-title {
+.filters-title {
 	color: var(--main-text-color);
 	font-size: 14px;
 	font-weight: 500;
diff --git a/test/webm-muxer.test.js b/test/webm-muxer.test.js
new file mode 100644
index 0000000..1959e8d
--- /dev/null
+++ b/test/webm-muxer.test.js
@@ -0,0 +1,286 @@
+// Exercise the extended WebM muxer without a browser and validate the EBML it
+// produces. Feeds fake encoded chunks, then parses the resulting file.
+const fs = require('fs');
+const vm = require('vm');
+
+const code = fs.readFileSync(
+  require('path').join(__dirname, '..', 'src', 'js', 'webm-writer2.js'),
+  'utf8'
+);
+
+const sandbox = { Blob, console };
+sandbox.self = sandbox;
+vm.createContext(sandbox);
+// `module` must stay undefined so the browser branch runs
+vm.runInContext(code, sandbox);
+
+const WebMWriter = sandbox.WebMWriter;
+if (!WebMWriter) throw new Error('WebMWriter not exported');
+
+class EncodedVideoChunk {
+  constructor(o) {
+    this.timestamp = o.timestamp;
+    this.type = o.type;
+    this._data = o.data;
+    this.byteLength = o.data.length;
+  }
+  copyTo(dst) {
+    dst.set(this._data);
+  }
+}
+class EncodedAudioChunk {
+  constructor(o) {
+    this.timestamp = o.timestamp;
+    this.type = o.type;
+    this._data = o.data;
+    this.byteLength = o.data.length;
+  }
+  copyTo(dst) {
+    dst.set(this._data);
+  }
+}
+
+function opusHead(channels, sampleRate) {
+  const head = new Uint8Array(19);
+  const view = new DataView(head.buffer);
+  head.set([0x4f, 0x70, 0x75, 0x73, 0x48, 0x65, 0x61, 0x64], 0);
+  head[8] = 1;
+  head[9] = channels;
+  view.setUint16(10, 3840, true);
+  view.setUint32(12, sampleRate, true);
+  view.setUint16(16, 0, true);
+  head[18] = 0;
+  return head;
+}
+
+// ---- EBML parser -----------------------------------------------------------
+function readVarInt(buf, pos, stripMarker) {
+  const first = buf[pos];
+  if (first === 0) throw new Error('invalid varint at ' + pos);
+  let width = 1;
+  let mask = 0x80;
+  while (!(first & mask)) {
+    mask >>= 1;
+    width++;
+  }
+  let value = stripMarker ? first & (mask - 1) : first;
+  let unknown = stripMarker && (first & (mask - 1)) === mask - 1;
+  for (let i = 1; i < width; i++) {
+    value = value * 256 + buf[pos + i];
+    if (buf[pos + i] !== 0xff) unknown = false;
+  }
+  return { value, width, unknown };
+}
+
+function parse(buf, start, end, depth, out) {
+  let pos = start;
+  while (pos < end) {
+    const id = readVarInt(buf, pos, false);
+    const idBytes = buf.slice(pos, pos + id.width);
+    let idHex = 0;
+    for (const b of idBytes) idHex = idHex * 256 + b;
+    pos += id.width;
+    const size = readVarInt(buf, pos, true);
+    pos += size.width;
+    const dataStart = pos;
+    const dataEnd = size.unknown ? end : Math.min(dataStart + size.value, end);
+    out.push({ id: idHex, depth, dataStart, dataEnd });
+    const MASTER = [
+      0x1a45dfa3, 0x18538067, 0x1654ae6b, 0xae, 0x1f43b675, 0x1549a966,
+      0x114d9b74, 0x4dbb, 0xe0, 0xe1, 0x1c53bb6b, 0xbb, 0xb7,
+    ];
+    if (MASTER.includes(idHex)) parse(buf, dataStart, dataEnd, depth + 1, out);
+    pos = dataEnd;
+    if (dataEnd <= dataStart && size.value === 0) continue;
+  }
+}
+
+function uintAt(buf, s, e) {
+  let v = 0;
+  for (let i = s; i < e; i++) v = v * 256 + buf[i];
+  return v;
+}
+function strAt(buf, s, e) {
+  return Buffer.from(buf.slice(s, e)).toString('ascii').replace(/\0+$/, '');
+}
+
+async function run(withAudio) {
+  const writer = new WebMWriter({
+    codec: 'VP9',
+    width: 640,
+    height: 480,
+    audio: withAudio
+      ? { sampleRate: 48000, channels: 2, codecPrivate: opusHead(2, 48000) }
+      : null,
+  });
+
+  const FPS = 30;
+  const SECONDS = 75;
+  const items = [];
+  for (let i = 0; i < FPS * SECONDS; i++) {
+    items.push({
+      track: 1,
+      chunk: new EncodedVideoChunk({
+        timestamp: Math.round((i / FPS) * 1e6),
+        type: i % (FPS * 2) === 0 ? 'key' : 'delta',
+        data: new Uint8Array(120).fill(i & 0xff),
+      }),
+    });
+  }
+  if (withAudio) {
+    for (let i = 0; i < SECONDS * 10; i++) {
+      items.push({
+        track: 2,
+        chunk: new EncodedAudioChunk({
+          timestamp: Math.round(i * 0.1 * 1e6),
+          type: 'key',
+          data: new Uint8Array(40).fill(0x55),
+        }),
+      });
+    }
+  }
+  items.sort((a, b) =>
+    a.chunk.timestamp === b.chunk.timestamp
+      ? a.track - b.track
+      : a.chunk.timestamp - b.chunk.timestamp
+  );
+  items.forEach((it) => writer.addFrame(it.chunk, it.track));
+
+  const blob = await writer.complete();
+  const buf = new Uint8Array(await blob.arrayBuffer());
+
+  const els = [];
+  parse(buf, 0, buf.length, 0, els);
+
+  const label = withAudio ? 'video+audio' : 'video only';
+  const problems = [];
+
+  if (!els.some((e) => e.id === 0x1a45dfa3)) problems.push('no EBML header');
+  if (!els.some((e) => e.id === 0x18538067)) problems.push('no Segment');
+
+  const trackEntries = els.filter((e) => e.id === 0xae);
+  const expectedTracks = withAudio ? 2 : 1;
+  if (trackEntries.length !== expectedTracks)
+    problems.push(`expected ${expectedTracks} TrackEntry, got ${trackEntries.length}`);
+
+  const codecIds = els
+    .filter((e) => e.id === 0x86)
+    .map((e) => strAt(buf, e.dataStart, e.dataEnd));
+  if (!codecIds.includes('V_VP9')) problems.push('missing V_VP9, got ' + codecIds);
+  if (withAudio && !codecIds.includes('A_OPUS'))
+    problems.push('missing A_OPUS, got ' + codecIds);
+
+  const trackTypes = els
+    .filter((e) => e.id === 0x83)
+    .map((e) => uintAt(buf, e.dataStart, e.dataEnd));
+  if (!trackTypes.includes(1)) problems.push('no video TrackType');
+  if (withAudio && !trackTypes.includes(2)) problems.push('no audio TrackType');
+
+  if (withAudio) {
+    const priv = els.find((e) => e.id === 0x63a2);
+    if (!priv) problems.push('no CodecPrivate');
+    else {
+      if (priv.dataEnd - priv.dataStart !== 19)
+        problems.push('CodecPrivate is not 19 bytes');
+      if (strAt(buf, priv.dataStart, priv.dataStart + 8) !== 'OpusHead')
+        problems.push('CodecPrivate is not OpusHead');
+    }
+  }
+
+  const clusters = els.filter((e) => e.id === 0x1f43b675);
+  if (clusters.length < 2)
+    problems.push(`expected multiple clusters over ${SECONDS}s, got ${clusters.length}`);
+
+  // Every SimpleBlock: track number valid, timecode inside signed 16 bit
+  const blocks = els.filter((e) => e.id === 0xa3);
+  if (blocks.length !== items.length)
+    problems.push(`expected ${items.length} blocks, got ${blocks.length}`);
+  const seenTracks = new Set();
+  let badTimecode = 0;
+  for (const b of blocks) {
+    const tn = readVarInt(buf, b.dataStart, true);
+    seenTracks.add(tn.value);
+    const tc = (buf[b.dataStart + tn.width] << 8) | buf[b.dataStart + tn.width + 1];
+    const signed = tc > 32767 ? tc - 65536 : tc;
+    if (signed < 0 || signed > 32767) badTimecode++;
+  }
+  if (badTimecode) problems.push(badTimecode + ' block timecodes out of range');
+  const expectTrackSet = withAudio ? [1, 2] : [1];
+  for (const t of expectTrackSet)
+    if (!seenTracks.has(t)) problems.push('no blocks for track ' + t);
+  for (const t of seenTracks)
+    if (!expectTrackSet.includes(t)) problems.push('unexpected track ' + t);
+
+  // Reconstruct absolute times: cluster timecode + block timecode must give
+  // back exactly the timestamps that went in, in order.
+  const rebuilt = [];
+  let lastClusterTime = -1;
+  for (const c of clusters) {
+    const tcEl = els.find(
+      (e) => e.id === 0xe7 && e.dataStart > c.dataStart && e.dataEnd <= c.dataEnd
+    );
+    if (!tcEl) {
+      problems.push('cluster without Timecode');
+      continue;
+    }
+    const clusterTime = uintAt(buf, tcEl.dataStart, tcEl.dataEnd);
+    if (clusterTime < lastClusterTime) problems.push('cluster timecodes go backwards');
+    lastClusterTime = clusterTime;
+    const inner = blocks.filter(
+      (b) => b.dataStart > c.dataStart && b.dataEnd <= c.dataEnd
+    );
+    if (inner.length === 0) problems.push('empty cluster');
+    for (const b of inner) {
+      const tn = readVarInt(buf, b.dataStart, true);
+      const raw = (buf[b.dataStart + tn.width] << 8) | buf[b.dataStart + tn.width + 1];
+      const rel = raw > 32767 ? raw - 65536 : raw;
+      if (rel < 0) problems.push('negative block timecode in cluster');
+      rebuilt.push({ track: tn.value, ms: clusterTime + rel });
+    }
+  }
+  const expected = items.map((it) => ({
+    track: it.track,
+    ms: Math.round(it.chunk.timestamp / 1000),
+  }));
+  if (rebuilt.length !== expected.length) {
+    problems.push('block count mismatch on rebuild');
+  } else {
+    let drift = 0;
+    for (let i = 0; i < expected.length; i++) {
+      if (rebuilt[i].track !== expected[i].track) {
+        problems.push('track order changed at block ' + i);
+        break;
+      }
+      drift = Math.max(drift, Math.abs(rebuilt[i].ms - expected[i].ms));
+    }
+    if (drift > 1) problems.push('timestamp drift of ' + drift + 'ms');
+  }
+
+  const durationEl = els.find((e) => e.id === 0x4489);
+  if (!durationEl) problems.push('no Duration');
+  else {
+    const dv = new DataView(buf.buffer, buf.byteOffset + durationEl.dataStart, 8);
+    const d = dv.getFloat64(0);
+    if (!(d > 0)) problems.push('Duration is ' + d);
+    else if (Math.abs(d - (SECONDS - 1 / FPS) * 1000) > 200)
+      problems.push('Duration ' + d + 'ms is not ~' + SECONDS * 1000);
+  }
+
+  console.log(
+    `[${label}] ${buf.length} bytes, ${clusters.length} clusters, ` +
+      `${blocks.length} blocks, tracks=${[...seenTracks].join(',')}`
+  );
+  if (problems.length) {
+    console.log('  FAIL:');
+    problems.forEach((p) => console.log('   - ' + p));
+    return false;
+  }
+  console.log('  OK');
+  return true;
+}
+
+(async () => {
+  const a = await run(false);
+  const b = await run(true);
+  process.exit(a && b ? 0 : 1);
+})();