@plotdb/lotion 0.2.0 → 0.4.2

package/CHANGELOG.md

@@ -1,3 +1,59 @@
+## v0.4.2
+
+ - animate, size: `clip-path: inset()` ( reveals ) becomes one svg clipPath whose rect moves by smil, instead of one
+   appearance per inset ( lotitor's sumi-ink trial: html variants 68 to 35 )
+
+
+## v0.4.1
+
+ - bug fix:
+   - vector / animate: box-shadow and text-shadow are reordered to "offsets blur spread color", since computed style
+     puts the color first and satori then drew a broken path, so shadows were missing
+
+
+## v0.4.0
+
+ - features:
+   - `lotion.animate(opt)` / `player.animate(opt)` ( experimental, in `vector.js` ): convert a whole animation into one
+     animated svg. each element becomes a `<g>` nested as in the dom; its motion ( position and transform as a matrix,
+     opacity, blur ) is sampled per frame and written as css keyframes, simplified to the points linear interpolation
+     needs; each distinct appearance is drawn once by satori and switched by visibility. inline svg is walked
+     natively: groups animate, leaves keep their markup with numeric attributes as smil `<animate>`, definitions are
+     written once, and text uses fonts embedded once. `mix-blend-mode` now works at any depth.
+   - demo: the `/vector/` page converts the whole animation and plays the animated svg
+   - animate, size: numeric tracks are written once per element instead of once per appearance ( positions of svg
+     leaves join the group matrix, inheritable values such as `stroke-dashoffset` animate on the group );
+     css gradient masks moved by `mask-position` / `mask-size` ( wipes ) become one svg mask with a moving rect, so
+     the content is drawn once; paths drawn progressively ( each `d` a prefix of a longer one ) become the full path
+     revealed by a dash animation. the code-only sumi-ink trial drops from 3.2 MB to 1.5 MB.
+ - tweaks:
+   - vector: inline svg keeps a content-based placeholder `src` until fonts are ready
+
+
+## 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:

package/README.md

@@ -55,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
@@ -83,6 +84,100 @@ 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 ).
+
+### Animated svg
+
+`lotion.animate({el, seek, duration, fps})` ( or `player.animate({fps})` ) converts the whole animation into one svg
+that plays by itself, resolving to `{svg, warnings, stats}`:
+
+ - every element becomes a `<g>`, nested as in the dom. Its motion, the position and transform combined into a
+   matrix, opacity and a `blur()` filter, is sampled at `fps` and written as css keyframes, keeping only the samples
+   linear interpolation needs.
+ - everything else is its appearance. Each distinct appearance is drawn once ( by satori ) and shown by visibility
+   keyframes, so an element that only moves costs one drawing, while one whose content changes ( typing, a growing
+   width ) costs one per state. Elements with a css mask, clip-path or other filters, `<img>` and `<canvas>`, are
+   drawn with their children as one appearance.
+ - inline svg is kept as svg: groups animate like elements, leaves keep their markup with numeric attributes
+   ( coordinates, `stroke-dashoffset`, opacities ... ) written as smil `<animate>`, definitions are written once,
+   and text uses fonts embedded once. nested `<svg>` becomes a group, since smil inside a nested svg does not follow
+   the outer svg when paused or seeked.
+ - tracks are written once per element: positions of svg leaves join the group matrix, and inheritable values
+   ( `stroke-dashoffset`, `stroke-width`, fill / stroke opacity ) animate on the group.
+ - a css mask of one `linear-gradient` ( horizontal or vertical, `no-repeat` ) becomes an svg mask whose rect follows
+   `mask-position` / `mask-size`, so a wipe draws its content once. Other masks and clip-paths are drawn per state.
+ - a path whose `d` grows ( each one a prefix of a longer one, stroked without fill, dashes or markers ) becomes the
+   longest path revealed by a dash animation.
+ - options: `fps` ( default 30 ), `from`, `to`, `loop` ( default true ), `progress`, `signal`.
+
+The demo converts in under a second into 230 KB ( 35 KB with brotli ); the code-only sumi-ink trial ( 44 s at 10 fps )
+in about 2 seconds into 1.5 MB ( 230 KB with brotli ). Serve it compressed, or save it as `.svgz`. Frames of the animated svg match screenshots as closely as single frames do.
+
+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:
@@ -137,6 +232,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.
@@ -173,6 +270,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,5 +1,5 @@
 #!/usr/bin/env node
-var fs, path, http, child_process, usage, parse, types, serve, playwright, open, shot, frames, sheet, video, cues, bundle, moved, 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');
@@ -198,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");
+      }
+    };
+    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 )");
     };
-    step = function(i, j){
-      var t;
-      if (i >= n) {
-        return Promise.resolve();
+    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){

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;

package/index.js

@@ -1,5 +1,5 @@
 (function(){
-  var PI, sin, cos, exp, sqrt, round, clamp, lerp, ss, spring, presets, track, vis, bump, typing, hex, mixc, rgb, mk, put, txt, NS, svg, player, ref$, lotion;
+  var PI, sin, cos, exp, sqrt, round, clamp, lerp, ss, spring, presets, track, vis, bump, typing, hex, mixc, rgb, mk, put, txt, NS, svg, player, ref$, libs, libCache, lib, encode, lotion;
   PI = Math.PI, sin = Math.sin, cos = Math.cos, exp = Math.exp, sqrt = Math.sqrt, round = Math.round;
   clamp = function(v, a, b){
     a == null && (a = 0);
@@ -338,6 +338,9 @@
     });
   }, ref$.fit = function(){
     var w, h, s;
+    if (this.encoding) {
+      return;
+    }
     w = this.viewport.clientWidth;
     h = this.viewport.clientHeight;
     if (!w || !h) {
@@ -349,7 +352,7 @@
     return Math.floor(t / 60) + ":" + ("0" + Math.floor(t % 60)).slice(-2);
   }, ref$.seek = function(t){
     var p, ch;
-    if (!this.started) {
+    if (!this.started || this.encoding) {
       return;
     }
     this.t = t = clamp(t, 0, this.duration);
@@ -382,7 +385,7 @@
   }, ref$.play = function(go){
     var this$ = this;
     go == null && (go = true);
-    if (!this.started) {
+    if (!this.started || this.encoding) {
       return;
     }
     if (go && this.t >= this.duration) {
@@ -409,7 +412,177 @@
       (this.root.requestFullscreen || this.root.webkitRequestFullscreen).call(this.root);
     }
     return this.root.focus();
+  }, ref$.encode = function(opt){
+    var t0, tf, cover, bar, done, progress, ref$, this$ = this;
+    opt == null && (opt = {});
+    if (!this.started) {
+      return Promise.reject(new Error('[lotion] encode() before start()'));
+    }
+    if (this.encoding) {
+      return Promise.reject(new Error('[lotion] already encoding'));
+    }
+    this.pause();
+    t0 = this.t;
+    this.encoding = true;
+    this.root.classList.add('lotion-encoding');
+    tf = this.stage.style.transform;
+    this.stage.style.transform = 'none';
+    cover = mk('lotion-encoding-screen', '<div class="lotion-spinner"></div><div class="lotion-progress"></div>', this.viewport);
+    bar = cover.querySelector('.lotion-progress');
+    done = function(){
+      cover.remove();
+      this$.stage.style.transform = tf;
+      this$.encoding = false;
+      this$.root.classList.remove('lotion-encoding');
+      this$.fit();
+      return this$.seek(t0);
+    };
+    progress = function(v){
+      bar.textContent = Math.round(v * 100) + "%";
+      if (opt.progress) {
+        return opt.progress(v);
+      }
+    };
+    return encode((ref$ = import$({
+      el: this.stage,
+      seek: this.opt.seek,
+      duration: this.duration,
+      width: this.width,
+      height: this.height
+    }, opt), ref$.progress = progress, ref$)).then(function(b){
+      done();
+      return b;
+    })['catch'](function(e){
+      done();
+      throw e;
+    });
   }, ref$);
+  libs = {
+    snapdom: 'https://cdn.jsdelivr.net/npm/@zumer/snapdom@3.3.0/dist/snapdom.mjs',
+    mediabunny: 'https://cdn.jsdelivr.net/npm/mediabunny@1.61.3/dist/bundles/mediabunny.min.mjs'
+  };
+  libCache = {};
+  lib = function(name){
+    var ref$;
+    return (ref$ = libCache[name]) != null
+      ? ref$
+      : libCache[name] = import(libs[name]);
+  };
+  encode = function(opt){
+    var even, w, h, fps, sub, d, ref$, from, to, n, bg, abort, output, that;
+    opt == null && (opt = {});
+    if (typeof VideoEncoder === 'undefined') {
+      return Promise.reject(new Error('[lotion] WebCodecs ( VideoEncoder ) is not supported in this browser'));
+    }
+    even = function(v){
+      return 2 * Math.round(v / 2);
+    };
+    w = even(opt.width || 1920);
+    h = even(opt.height || 1080);
+    fps = opt.fps || 30;
+    sub = Math.max(1, Math.round(opt.sub || 1));
+    d = ((ref$ = opt.shutter) != null ? ref$ : 0.5) / fps / sub;
+    from = opt.from || 0;
+    to = (ref$ = opt.to) != null
+      ? ref$
+      : opt.duration;
+    n = Math.max(1, Math.round((to - from) * fps));
+    bg = opt.background || getComputedStyle(opt.el).backgroundColor;
+    if (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
+      bg = '#000';
+    }
+    abort = function(){
+      if (opt.signal && opt.signal.aborted) {
+        throw new DOMException('export aborted', 'AbortError');
+      }
+    };
+    output = null;
+    return Promise.all([
+      (that = opt.snapdom)
+        ? Promise.resolve(that)
+        : lib('snapdom'), (that = opt.mediabunny)
+        ? Promise.resolve(that)
+        : lib('mediabunny')
+    ]).then(function(arg$){
+      var sd, mb, snap, canvas, ctx;
+      sd = arg$[0], mb = arg$[1];
+      snap = sd.snapdom || sd;
+      canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      ctx = canvas.getContext('2d');
+      return mb.getFirstEncodableVideoCodec(['avc', 'vp9', 'av1'], {
+        width: w,
+        height: h
+      }).then(function(codec){
+        var src;
+        if (!codec) {
+          throw new Error("[lotion] no encodable video codec for " + w + "x" + h);
+        }
+        output = new mb.Output({
+          format: new mb.Mp4OutputFormat({
+            fastStart: 'in-memory'
+          }),
+          target: new mb.BufferTarget()
+        });
+        src = new mb.CanvasSource(canvas, {
+          codec: codec,
+          bitrate: opt.bitrate || mb.QUALITY_HIGH
+        });
+        output.addVideoTrack(src, {
+          frameRate: fps
+        });
+        return output.start().then(function(){
+          return src;
+        });
+      }).then(function(src){
+        var pending, step;
+        pending = Promise.resolve();
+        step = function(i, j){
+          var t;
+          abort();
+          if (i >= n) {
+            return pending;
+          }
+          if (j >= sub) {
+            return pending.then(function(){
+              abort();
+              pending = src.add(i / fps, 1 / fps);
+              if (opt.progress) {
+                opt.progress((i + 1) / n);
+              }
+              return step(i + 1, 0);
+            });
+          }
+          t = clamp(from + i / fps + (sub > 1 ? (j - (sub - 1) / 2) * d : 0), 0, opt.duration);
+          opt.seek(t);
+          return snap.toCanvas(opt.el, {
+            width: w,
+            height: h,
+            dpr: 1,
+            backgroundColor: bg
+          }).then(function(c){
+            ctx.globalAlpha = 1 / (j + 1);
+            ctx.drawImage(c, 0, 0, w, h);
+            return step(i, j + 1);
+          });
+        };
+        return step(0, 0);
+      });
+    }).then(function(){
+      return output.finalize();
+    }).then(function(){
+      return new Blob([output.target.buffer], {
+        type: 'video/mp4'
+      });
+    })['catch'](function(e){
+      var ref$;
+      if (output && ((ref$ = output.state) === 'started' || ref$ === 'pending')) {
+        output.cancel();
+      }
+      throw e;
+    });
+  };
   lotion = {
     clamp: clamp,
     lerp: lerp,
@@ -427,11 +600,19 @@
     put: put,
     txt: txt,
     svg: svg,
-    player: player
+    player: player,
+    encode: encode,
+    libs: libs,
+    lib: lib
   };
   if (typeof module != 'undefined' && module !== null) {
     module.exports = lotion;
   } else if (typeof window != 'undefined' && window !== null) {
     window.lotion = lotion;
   }
+  function import$(obj, src){
+    var own = {}.hasOwnProperty;
+    for (var key in src) if (own.call(src, key)) obj[key] = src[key];
+    return obj;
+  }
 }).call(this);