@plotdb/lotion 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## v0.3.0
+
+ - features:
+   - `player.encode(opt)` / `lotion.encode(opt)`: render to mp4 in the browser ( snapdom capture, WebCodecs encode via
+     mediabunny ), both libraries loaded on demand by dynamic `import()`; urls configurable in `lotion.libs`
+   - demo: export button
+   - `dist/vector.js` ( experimental ): `lotion.vector(el)` / `player.vector(t)` convert the current frame to a vector svg
+     with satori. layout is taken from the browser and each element becomes an absolutely positioned node; web fonts
+     are collected from `@font-face` by the characters in use, woff2 decompressed, subset with HarfBuzz and variable
+     fonts pinned to the used weight. root-level `mix-blend-mode` is composed as svg layers; inline svg is embedded
+     with its computed styles, referenced external defs and fonts.
+   - `lotion.lib(name)`: load an on-demand dependency listed in `lotion.libs`
+   - demo: `/vector/` compares the player with its converted svg side by side; the block demo loads `vector.min.js`
+
+
+## v0.2.1
+
+ - features:
+   - cli: `video --workers N` renders with N browsers in parallel, splitting frames into contiguous ranges and joining
+     the encoded parts without re-encoding. each part first renders the 3 preceding frames and discards them, since a
+     freshly opened page that jumps straight to a frame rasterizes its first frames slightly differently; with this the
+     output matches a single worker frame for frame. about 2.7x faster with 4 workers on an 8-core ( 4 performance ) mac.
+
+
+## v0.2.0
+
+ - breaking:
+   - remove audio generators ( `audio/`, `lotion bgm | sfx | mix | beats` ); the commands now only print a notice.
+     they moved to the authoring toolkit `@plotdb/lotitor` ( not public yet )
+   - move `prompt/explainer.md` and `prompt/ui-loop.md` to `@plotdb/lotitor`
+ - features:
+   - `prompt/lotion.md`: how to write a lotion animation, independent of form and style
+     ( split from `prompt/explainer.md` )
+ - tweaks:
+   - cli: when `playwright` is missing, print how to install it instead of a node stack trace
+
+
 ## v0.1.0
 
  - features:

package/README.md

@@ -8,8 +8,11 @@ play, scrub, embed, or render them frame by frame into video.
  - block player ( `dist/block/player.js` ): package an animation as a `@plotdb/block` and embed it anywhere.
  - cli ( `lotion` ): render any page following the render protocol into png frames, contact sheets or mp4,
    and bundle blocks.
- - audio tools ( `audio/` ): beat detection, ui sound effects, a simple bassline bgm synthesizer and a cue mixer.
- - prompts ( `prompt/` ): workflow notes for producing motion designs and explainer animations with an AI agent.
+ - prompt ( `prompt/lotion.md` ): how to write a lotion animation correctly, for people and AI agents.
+
+lotion is self-contained for writing, playing and rendering animations. Authoring aids ( guides for specific forms,
+a style library, asset and audio generation ) are kept in a separate toolkit, `@plotdb/lotitor`, which is not public
+yet; nothing in lotion depends on it.
 
 
 ## Install
@@ -52,7 +55,8 @@ player options:
  - `loading`: what to show before `start()`. default `true` ( a spinner ); a string is used as custom html;
    `false` shows nothing.
 
-player methods: `start()`, `seek(t)`, `play(go = true)`, `pause()`, `toggle()`, `fullscreen()`.
+player methods: `start()`, `seek(t)`, `play(go = true)`, `pause()`, `toggle()`, `fullscreen()`, `encode(opt)`
+( see Online Export ).
 `player.ready` is a promise resolved by `start()`.
 
 Until `start()` is called, the stage is hidden behind the loading screen, the control bar is disabled, and
@@ -80,6 +84,73 @@ helpers:
  - `svg(tag, attrs, parent)`: create an svg element.
 
 
+## Online Export
+
+`player.encode(opt)` renders the animation to mp4 inside the browser, with no server: it seeks frame by frame, captures
+the stage with [snapdom](https://github.com/zumerlab/snapdom) and encodes with WebCodecs through
+[mediabunny](https://github.com/Vanilagy/mediabunny). Returns a promise of a `Blob` ( `video/mp4` ).
+
+    p.encode({fps: 30, progress: (v) -> console.log v})
+      .then (blob) -> a.href = URL.createObjectURL(blob)
+
+options:
+
+ - `width`, `height`: output size, default the player's design size; rounded to even numbers.
+ - `fps`: default `30`. `from`, `to`: render only a range, in seconds.
+ - `sub`, `shutter`: motion blur, as in the cli.
+ - `bitrate`: in bps. default mediabunny's `QUALITY_HIGH` for the size.
+ - `background`: default the stage's background color; black when transparent, since mp4 has no alpha.
+ - `progress(v)`: `0..1`. `signal`: an `AbortSignal`; aborting rejects with an `AbortError`.
+
+While encoding, the player is paused and locked, the stage is shown unscaled ( snapdom pads a scaled element by a few
+pixels, which shrinks the frame slightly ) behind a cover showing the progress, and afterwards it returns to the time
+it was at.
+
+snapdom and mediabunny are loaded by dynamic `import()` only when encoding, from jsdelivr by default. Point
+`lotion.libs.snapdom` / `lotion.libs.mediabunny` to self-hosted ES module builds
+( `@zumer/snapdom/dist/snapdom.mjs`, `mediabunny/dist/bundles/mediabunny.min.mjs` ), or pass loaded modules as
+`opt.snapdom` / `opt.mediabunny`. `lotion.encode({el, seek, duration, ...})` does the same for any element, such as a
+block; `el` should not be scaled by a transform.
+
+Frames match the cli's closely ( about 49 dB PSNR on the demo, the remaining difference being compression ), since
+both are rasterized by the browser; what snapdom cannot capture ( cross-origin images or fonts without CORS, iframes )
+differs. Requires `VideoEncoder` ( Chrome / Edge, Safari 16.4+, Firefox 130+ ). Speed is bound by snapdom cloning the
+DOM, not by resolution: the 17 seconds demo at 1080p30 takes about 46 seconds in Chrome on a development mac. For long or
+final renders, the cli remains faster ( `--workers` ) and exact.
+
+
+## Vector ( experimental )
+
+`dist/vector.js` converts the current frame into a vector svg with [satori](https://github.com/vercel/satori):
+
+    <script src="index.min.js"></script>
+    <script src="vector.min.js"></script>
+
+    lotion.vector(el).then ({svg, warnings}) -> ...
+    player.vector(t).then ({svg, warnings}) -> ...   # the frame at t, without moving the player
+
+`vector.js` extends the `lotion` object loaded before it, so load it after `index.js`. In a block, declare it as a
+dependency after lotion ( `{name: 'lotion', path: 'vector.min.js'}` ); rescope gives it the same `lotion`.
+
+ - layout is read from the browser ( `offsetLeft` / `offsetWidth` ... ) and every element becomes an absolutely
+   positioned satori node with its computed style; text becomes paths.
+ - fonts are collected from the page's `@font-face` rules by the families, weights and characters in use, following
+   `font-family` fallbacks and `unicode-range`. woff2 is decompressed ( woff2-encoder ), then each font is subset with
+   HarfBuzz, which also pins variable fonts ( as served by Google Fonts ) to the weight in use; satori would otherwise
+   draw only their default instance. Pass `opt.fonts` to provide fonts yourself.
+ - `mix-blend-mode` on children of the root is kept by converting the children in layers and stacking them with
+   svg `mix-blend-mode` ( honored by browsers, not by every svg viewer ).
+ - inline `<svg>` is embedded as an svg image with its computed styles, the external definitions it references and
+   the fonts its text needs. `<img>` and `<canvas>` are embedded as raster images.
+ - satori, woff2-encoder and the HarfBuzz subsetter ( wasm ) are loaded on demand; urls are in `lotion.libs`.
+ - what may differ is listed in `warnings`: blend on nested elements, text mixed with elements, characters without a
+   web font ( system fonts are not available ), mask or clip-path under a transform other than a translation
+   ( satori does not move masks with transforms ).
+
+On the demo and the sumi-ink trial of lotitor, frames rasterized from the svg match screenshots at 29 - 39 dB PSNR;
+the remaining difference is mostly text antialiasing and baselines in fixed line-heights. A frame takes 50 - 300 ms.
+
+
 ## Render protocol
 
 With `?render` in the url, a page should cover the viewport with its stage and expose:
@@ -125,7 +196,7 @@ targets under the root ( or use `:scope` ). A block sample is in `web/src/pug/bl
     lotion video  <src> <out.mp4>            render to mp4
     lotion cues   <src> <out.json>           dump window.cues()
     lotion bundle <base-url> <block> <out>   pack a block and its dependencies into one file
-    lotion bgm | sfx | mix | beats ...       audio tools, see below
+    lotion bgm | sfx | mix | beats           removed, see Audio
 
 `<src>` is an http(s) url, or a local html file / directory served by a built-in static server.
 
@@ -134,6 +205,8 @@ options:
  - `--width 1920 --height 1080`: viewport size.
  - `--fps 60`, `--sub 1`, `--shutter 0.5`: video settings. with `--sub` greater than 1, each frame averages
    `sub` sub-samples spread over `shutter` of the frame interval ( motion blur, via ffmpeg `tmix` ).
+ - `--workers 1`: render a video with N browsers in parallel. frames are split into contiguous ranges, each encoded on
+   its own, then joined without re-encoding. since every frame depends on `t` only, the result matches a single worker.
  - `--from`, `--to`: render only a range, in seconds.
  - `--crf 16`: x264 quality.
  - `--cols 3`, `--tile 640`: contact sheet layout.
@@ -143,36 +216,21 @@ options:
 
 ## Audio
 
-Each command forwards its arguments to the python script of the same name in `audio/`; pass `-h` for all options.
-All times are aligned so that `t = 0` matches the start of the animation.
-
- - `lotion bgm out.wav --bpm 120 --bars 16 --key A --scale minor --prog 1,6,3,7 --bass drive --drums four --pad`:
-   synthesize a track around a repeating bassline. bass presets: `pulse`, `octave`, `house`, `drive`, `walk`,
-   or 16 custom steps ( semitones from the chord root, `.` rest, `-` hold ). drum presets: `four`, `half`, `broken`,
-   `none`. `--loop` makes it loop seamlessly; `--grid grid.json` writes its beat grid.
- - `lotion beats music.mp3 --start 64.11 --dur 30 --out grid.json`: estimate bpm and the beat grid
-   ( `{bpm, offset, beats, downbeats}` ). with an off-beat bassline and syncopated kicks the grid may be half a beat
-   off; correct it with `--shift 0.5`.
- - `lotion sfx sfx/`: synthesize ui sound effects ( click, tick, scrub, pop, toggle, success, notify, type, whoosh )
-   and measure each transient peak into `sfx/peaks.json`.
- - `lotion mix cues.json out.wav --dur 30 --music bgm.wav --sfx sfx/ [--loop | --fade 2]`: mix music with sound
-   effects placed at cue times ( `[{t, sfx, gain}]`, e.g. from `lotion cues` ), aligning each effect's measured
-   peak rather than its file start.
-
-A typical flow:
-
-    lotion bgm bgm.wav --bpm 120 --bars 16 --grid grid.json   # time the animation on this grid
-    lotion sfx sfx/
+The audio generators ( `bgm`, `sfx`, `mix`, `beats` ) are no longer part of lotion; `lotion bgm ...` and the like
+only print a notice. Sound stays aligned through cues: the page's `cues()` lists `[{t, ...}]`, `lotion cues` exports
+it, and any audio tool can place sounds at those times. Then add the track to the rendered video:
+
     lotion cues page.html cues.json
-    lotion mix cues.json audio.wav --dur 32 --music bgm.wav --sfx sfx/ --fade 2
     lotion video page.html silent.mp4
     ffmpeg -i silent.mp4 -i audio.wav -c:v copy -c:a aac -shortest out.mp4
 
 
 ## Prompts
 
- - `prompt/ui-loop.md`: a phased workflow for short, looping, single-object UI motion with music.
- - `prompt/explainer.md`: practices for longer explainer animations, embedding them into pages, and common pitfalls.
+ - `prompt/lotion.md`: writing `seek(t)`, embedding into pages, block packaging, and common pitfalls.
+
+Guides for specific forms ( explainers, UI loops ) and for choosing a style moved to the authoring toolkit
+`@plotdb/lotitor` ( not public yet ). `prompt/lotion.md` covers everything needed to write a lotion animation.
 
 
 ## Development
@@ -185,6 +243,14 @@ the packed block demo is generated from the running dev server:
     node dist/cli.js bundle http://localhost:<port> lotion-demo web/static/block/lotion-demo.bundle.html
 
 
+## Credits
+
+Releases up to v0.1.0 included `prompt/ui-loop.md`, derived from a prompt template posted by zero
+( [@twoclipping](https://x.com/twoclipping) ) on X on 2026-09-25: https://x.com/twoclipping/status/2103273003555402193 .
+The post says "im open sourcing the prompt template for these motion designs" but attaches no explicit license, so that
+file was never covered by lotion's MIT license; rights remain with the author. It is no longer part of lotion.
+
+
 ## License
 
 MIT

package/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-var fs, path, http, child_process, usage, parse, types, serve, open, shot, frames, sheet, video, cues, bundle, audioDir, audio, argv, ref$, pos, opt, cmd, src, out, rest, times, p, slice$ = [].slice;
+var fs, path, http, child_process, usage, parse, types, serve, playwright, open, shot, frames, sheet, WARM, encode, video, cues, bundle, moved, argv, ref$, pos, opt, cmd, src, out, rest, times, p, slice$ = [].slice;
 fs = require('fs');
 path = require('path');
 http = require('http');
 child_process = require('child_process');
-usage = 'usage:\n  lotion <frames|sheet|video|cues> <src> <out> [t...] [options]\n  lotion bundle <base-url> <block-name> <out> [options]\n  lotion <bgm|sfx|mix|beats> ... ( -h for help )\nsee README for options.';
+usage = 'usage:\n  lotion <frames|sheet|video|cues> <src> <out> [t...] [options]\n  lotion bundle <base-url> <block-name> <out> [options]\n  audio generators ( bgm | sfx | mix | beats ) were removed, see README > Audio\nsee README for options.';
 parse = function(argv){
   var ref$, pos, opt, i, a;
   ref$ = [[], {}], pos = ref$[0], opt = ref$[1];
@@ -75,9 +75,22 @@ serve = function(src){
     });
   });
 };
+playwright = function(){
+  var e;
+  try {
+    return require('playwright');
+  } catch (e$) {
+    e = e$;
+    if (e.code !== 'MODULE_NOT_FOUND' || !/playwright/.test(e.message)) {
+      throw e;
+    }
+    console.error('lotion: this command needs playwright, which is not installed. install it with:\n\n    npm i -D playwright\n    npx playwright install chromium');
+    return process.exit(1);
+  }
+};
 open = function(src, opt){
   var chromium, p;
-  chromium = require('playwright').chromium;
+  chromium = playwright().chromium;
   p = /^https?:/.test(src)
     ? Promise.resolve({
       url: src,
@@ -185,60 +198,151 @@ sheet = function(src, out, times, opt){
     });
   });
 };
-video = function(src, out, opt){
-  var fps, sub, shutter;
-  fps = +(opt.fps || 60);
-  sub = +(opt.sub || 1);
-  shutter = +(opt.shutter || 0.5);
-  return open(src, opt).then(function(arg$){
-    var page, duration, close, from, to, n, d, vf, ff, t0, write, step;
-    page = arg$.page, duration = arg$.duration, close = arg$.close;
-    from = +(opt.from || 0);
-    to = +(opt.to || duration);
-    n = Math.round((to - from) * fps);
-    d = shutter / fps / sub;
-    vf = sub > 1
-      ? ['-vf', "tmix=frames=" + sub + ",select='eq(mod(n\\," + sub + ")\\," + (sub - 1) + ")',setpts=N/" + fps + "/TB"]
-      : [];
-    ff = child_process.spawn('ffmpeg', ['-y', '-v', 'error', '-f', 'image2pipe', '-framerate', fps * sub + "", '-i', '-'].concat(vf, ['-r', fps + "", '-c:v', 'libx264', '-preset', 'slow', '-crf', (opt.crf || 16) + "", '-pix_fmt', 'yuv420p', '-movflags', '+faststart', out]), {
-      stdio: ['pipe', 'inherit', 'inherit']
+WARM = 3;
+encode = function(page, i0, i1, out, o, tick){
+  var fps, sub, shutter, from, d, vf, ff, write, step, warm;
+  fps = o.fps, sub = o.sub, shutter = o.shutter, from = o.from;
+  d = shutter / fps / sub;
+  vf = sub > 1
+    ? ['-vf', "tmix=frames=" + sub + ",select='eq(mod(n\\," + sub + ")\\," + (sub - 1) + ")',setpts=N/" + fps + "/TB"]
+    : [];
+  ff = child_process.spawn('ffmpeg', ['-y', '-v', 'error', '-f', 'image2pipe', '-framerate', fps * sub + "", '-i', '-'].concat(vf, ['-r', fps + "", '-c:v', 'libx264', '-preset', 'slow', '-crf', o.crf + "", '-pix_fmt', 'yuv420p', '-movflags', '+faststart', out]), {
+    stdio: ['pipe', 'inherit', 'inherit']
+  });
+  write = function(buf){
+    return new Promise(function(res){
+      if (ff.stdin.write(buf)) {
+        return res();
+      } else {
+        return ff.stdin.once('drain', res);
+      }
     });
-    t0 = Date.now();
-    write = function(buf){
-      return new Promise(function(res){
-        if (ff.stdin.write(buf)) {
-          return res();
+  };
+  step = function(i, j){
+    var t;
+    if (i >= i1) {
+      return Promise.resolve();
+    }
+    if (j >= sub) {
+      tick();
+      return step(i + 1, 0);
+    }
+    t = Math.max(0, from + i / fps + (sub > 1 ? (j - (sub - 1) / 2) * d : 0));
+    return shot(page, t).then(write).then(function(){
+      return step(i, j + 1);
+    });
+  };
+  warm = (function(){
+    var i$, to$, results$ = [];
+    for (i$ = Math.max(0, i0 - WARM), to$ = i0; i$ < to$; ++i$) {
+      results$.push(i$);
+    }
+    return results$;
+  }()).reduce(function(p, i){
+    return p.then(function(){
+      return shot(page, Math.max(0, from + i / fps));
+    });
+  }, Promise.resolve());
+  return warm.then(function(){
+    return step(i0, 0);
+  }).then(function(){
+    return new Promise(function(res, rej){
+      ff.on('close', function(c){
+        if (c) {
+          return rej(new Error("ffmpeg exited with " + c));
         } else {
-          return ff.stdin.once('drain', res);
+          return res();
         }
       });
+      return ff.stdin.end();
+    });
+  });
+};
+video = function(src, out, opt){
+  var o, workers, t0;
+  o = {
+    fps: +(opt.fps || 60),
+    sub: +(opt.sub || 1),
+    shutter: +(opt.shutter || 0.5),
+    crf: opt.crf || 16
+  };
+  workers = Math.max(1, Math.floor(+(opt.workers || 1)));
+  t0 = Date.now();
+  return open(src, opt).then(function(first){
+    var n, done, tick, finish, k, tmp, parts;
+    o.from = +(opt.from || 0);
+    n = Math.round((+(opt.to || first.duration) - o.from) * o.fps);
+    done = 0;
+    tick = function(){
+      if (++done % 300 === 0) {
+        return console.log("frame " + done + "/" + n + " " + ((Date.now() - t0) / 1000).toFixed(0) + "s");
+      }
     };
-    step = function(i, j){
-      var t;
-      if (i >= n) {
-        return Promise.resolve();
+    console.log(("frame 0/" + n + " 0s") + (workers > 1 ? " ( " + workers + " workers )" : ''));
+    finish = function(){
+      return console.log(out + " ( " + n + " frames, " + ((Date.now() - t0) / 1000).toFixed(0) + "s )");
+    };
+    if (workers === 1) {
+      return encode(first.page, 0, n, out, o, tick).then(function(){
+        return first.close();
+      }).then(finish);
+    }
+    k = Math.min(workers, n);
+    tmp = fs.mkdtempSync(path.join(require('os').tmpdir(), 'lotion-'));
+    parts = (function(){
+      var i$, to$, results$ = [];
+      for (i$ = 0, to$ = k; i$ < to$; ++i$) {
+        results$.push(i$);
       }
-      if (j >= sub) {
-        if (i % 300 === 0) {
-          console.log("frame " + i + "/" + n + " " + ((Date.now() - t0) / 1000).toFixed(0) + "s");
-        }
-        return step(i + 1, 0);
+      return results$;
+    }()).map(function(w){
+      return {
+        i0: Math.floor(n * w / k),
+        i1: Math.floor(n * (w + 1) / k),
+        out: path.join(tmp, "part-" + w + ".mp4")
+      };
+    });
+    return Promise.all([Promise.resolve(first)].concat((function(){
+      var i$, to$, results$ = [];
+      for (i$ = 1, to$ = k; i$ < to$; ++i$) {
+        results$.push(i$);
       }
-      t = Math.max(0, from + i / fps + (sub > 1 ? (j - (sub - 1) / 2) * d : 0));
-      return shot(page, t).then(write).then(function(){
-        return step(i, j + 1);
-      });
-    };
-    return step(0, 0).then(function(){
-      return new Promise(function(res){
-        ff.on('close', res);
-        return ff.stdin.end();
+      return results$;
+    }()).map(function(){
+      return open(src, opt);
+    }))).then(function(pages){
+      return Promise.all(parts.map(function(p, w){
+        return encode(pages[w].page, p.i0, p.i1, p.out, o, tick);
+      }))['finally'](function(){
+        return Promise.all(pages.map(function(p){
+          return p.close();
+        }));
       });
     }).then(function(){
-      return close();
-    }).then(function(){
-      return console.log(out + " ( " + n + " frames, " + ((Date.now() - t0) / 1000).toFixed(0) + "s )");
-    });
+      var list;
+      list = path.join(tmp, 'list.txt');
+      fs.writeFileSync(list, parts.map(function(p){
+        return "file '" + p.out + "'";
+      }).join('\n'));
+      return new Promise(function(res, rej){
+        var ff;
+        ff = child_process.spawn('ffmpeg', ['-y', '-v', 'error', '-f', 'concat', '-safe', '0', '-i', list, '-c', 'copy', '-movflags', '+faststart', out], {
+          stdio: 'inherit'
+        });
+        return ff.on('close', function(c){
+          if (c) {
+            return rej(new Error("ffmpeg concat exited with " + c));
+          } else {
+            return res();
+          }
+        });
+      });
+    })['finally'](function(){
+      return fs.rmSync(tmp, {
+        recursive: true,
+        force: true
+      });
+    }).then(finish);
   });
 };
 cues = function(src, out, opt){
@@ -260,7 +364,7 @@ cues = function(src, out, opt){
 };
 bundle = function(base, name, out, opt){
   var chromium, m;
-  chromium = require('playwright').chromium;
+  chromium = playwright().chromium;
   base = base.replace(/\/$/, '');
   m = function(f){
     return require.resolve(f);
@@ -322,37 +426,13 @@ bundle = function(base, name, out, opt){
     });
   });
 };
-audioDir = function(){
-  return [path.join(__dirname, 'audio'), path.join(__dirname, '..', 'audio')].find(function(d){
-    return fs.existsSync(d);
-  });
-};
-audio = function(cmd, args){
-  return new Promise(function(res, rej){
-    var d, f, py;
-    if (!(d = audioDir())) {
-      return rej(new Error("audio scripts not found"));
-    }
-    f = path.join(d, cmd + ".py");
-    py = child_process.spawn(process.env.PYTHON || 'python3', [f].concat(args), {
-      stdio: 'inherit'
-    });
-    py.on('error', rej);
-    return py.on('close', function(c){
-      if (c) {
-        return rej(new Error(cmd + ".py exited with " + c));
-      } else {
-        return res();
-      }
-    });
-  });
+moved = function(cmd){
+  console.error("lotion " + cmd + ": audio generators are no longer part of lotion ( moved to @plotdb/lotitor, not public yet ).\nto align any audio with the animation, export cue times with `lotion cues <src> cues.json`. see README > Audio.");
+  return process.exit(1);
 };
 argv = process.argv.slice(2);
 if ((ref$ = argv[0]) === 'bgm' || ref$ === 'sfx' || ref$ === 'mix' || ref$ === 'beats') {
-  audio(argv[0], argv.slice(1))['catch'](function(e){
-    console.error(e.message);
-    return process.exit(1);
-  });
+  moved(argv[0]);
 } else {
   ref$ = parse(argv), pos = ref$.pos, opt = ref$.opt;
   cmd = pos[0], src = pos[1], out = pos[2], rest = slice$.call(pos, 3);

package/index.css

@@ -124,15 +124,26 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.lotion .lotion-loading-screen {
+.lotion.lotion-encoding .lotion-bar {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.lotion .lotion-loading-screen,
+.lotion .lotion-encoding-screen {
   position: absolute;
   inset: 0;
   display: flex;
+  flex-direction: column;
+  gap: 12px;
   align-items: center;
   justify-content: center;
   background: var(--lotion-bg);
   color: var(--lotion-mute);
 }
+.lotion .lotion-progress {
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
 .lotion .lotion-spinner {
   width: 36px;
   height: 36px;