@plotdb/lotion 0.3.0 → 0.4.2

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 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:

package/README.md

@@ -147,6 +147,33 @@ dependency after lotion ( `{name: 'lotion', path: 'vector.min.js'}` ); rescope g
    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.
 

package/package.json

@@ -1 +1 @@
-{"author":"zbryikt","name":"@plotdb/lotion","version":"0.3.0","description":"deterministic motion toolkit: animation as a pure function of time, with player, frame renderer and block packaging","license":"MIT","main":"index.min.js","browser":"index.min.js","bin":{"lotion":"./cli.js"},"homepage":"https://github.com/plotdb/lotion","repository":{"type":"git","url":"git+https://github.com/plotdb/lotion.git"},"scripts":{"start":"npx server -r web -o true"},"engines":{"node":">=14"},"keywords":["motion","animation","video","playwright","block"],"dependencies":{"@plotdb/block":"^5.7.3","@plotdb/csscope":"^5.0.4","@plotdb/rescope":"^5.1.0","@plotdb/semver":"^0.0.4","proxise":"^1.0.1"},"peerDependencies":{"playwright":">=1.40"},"peerDependenciesMeta":{"playwright":{"optional":true}},"devDependencies":{"@plotdb/guides":"github:plotdb/guides","@zbryikt/template":"^2.5.0","@zumer/snapdom":"^3.3.0","fedep":"^1.9.0","livescript":"^1.6.0","mediabunny":"^1.61.3","playwright":"^1.63.0","stylus":"^0.64.0","uglify-js":"^3.19.3"},"frontendDependencies":{"root":"web/static/assets/lib","modules":["@zumer/snapdom","mediabunny"]}}
+{"author":"zbryikt","name":"@plotdb/lotion","version":"0.4.2","description":"deterministic motion toolkit: animation as a pure function of time, with player, frame renderer and block packaging","license":"MIT","main":"index.min.js","browser":"index.min.js","bin":{"lotion":"./cli.js"},"homepage":"https://github.com/plotdb/lotion","repository":{"type":"git","url":"git+https://github.com/plotdb/lotion.git"},"scripts":{"start":"npx server -r web -o true"},"engines":{"node":">=14"},"keywords":["motion","animation","video","playwright","block"],"dependencies":{"@plotdb/block":"^5.7.3","@plotdb/csscope":"^5.0.4","@plotdb/rescope":"^5.1.0","@plotdb/semver":"^0.0.4","proxise":"^1.0.1"},"peerDependencies":{"playwright":">=1.40"},"peerDependenciesMeta":{"playwright":{"optional":true}},"devDependencies":{"@plotdb/guides":"github:plotdb/guides","@zbryikt/template":"^2.5.0","@zumer/snapdom":"^3.3.0","fedep":"^1.9.0","livescript":"^1.6.0","mediabunny":"^1.61.3","playwright":"^1.63.0","stylus":"^0.64.0","uglify-js":"^3.19.3"},"frontendDependencies":{"root":"web/static/assets/lib","modules":["@zumer/snapdom","mediabunny"]}}