domotion-svg 0.20.0 → 0.21.1

package/README.md

@@ -14,7 +14,7 @@
 
 **Domotion turns real HTML/CSS into one self-contained, animated SVG** — an accurate reproduction of the rendered page, with optional animation and simulated interaction built in. Text is emitted as real glyph paths, so it looks identical across browsers; the output scales crisply at any size and embeds anywhere with a plain `<img>`, no external assets.
 
-Beyond raw capture it ships a **template library** that turns a few flags into a polished animated SVG, **terminal-session capture** (a recording → an animated terminal), **scroll capture** (a long page replayed as one self-contained scrolling SVG), multi-frame **animation** with transitions, overlays, and simulated interaction, **device-chrome** framing, **nested compositing** (animated layers inside animated layers), one-command **SVG → MP4/WebM**, and a fidelity **review** tool.
+Beyond raw capture it ships a **template library** that turns a few flags into a polished animated SVG, **terminal-session capture** (a recording → an animated terminal), **scroll capture** (a long page replayed as one self-contained scrolling SVG), multi-frame **animation** with transitions, overlays, and simulated interaction, **scene storyboarding** (sequence distinct scenes end-to-end), **brand kits** and **social-format presets** (reel / square / portrait / landscape), **device-chrome** framing, **nested compositing** (animated layers inside animated layers), one-command **SVG → MP4/WebM**, and a fidelity **review** tool.
 
 <p align="center">
   <img src="examples/output/hero-product-demo.svg" alt="An analytics dashboard assembling itself inside a browser window — KPI cards rise in, a bar chart grows with its peak highlighted, a search query types itself, and a nav item is clicked — all in one self-contained animated SVG" width="760">
@@ -87,7 +87,7 @@ For a multi-frame animated SVG, write a small JSON config and run `domotion anim
 domotion animate ./demo.json
 ```
 
-The config describes each frame (input, duration, transition) plus a declarative surface for interaction demos: continuous-session frames that carry client-side state across steps (omit `input` / set `"continue": true`), DOM-mutation and interaction actions, richer readiness waits (`waitForText` / `waitForGone` / `waitForCount`), typing / tap / svg / blink overlays that can anchor to an element's box, an on-screen `cursor` (explicit or `"auto"`), `vars` + `${}` interpolation, and a small `evaluate` escape hatch. See `domotion --help` for the full grammar and the [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/) for a walkthrough.
+The config describes each frame (input, duration, transition) plus a declarative surface for interaction demos: continuous-session frames that carry client-side state across steps (omit `input` / set `"continue": true`), DOM-mutation and interaction actions, richer readiness waits (`waitForText` / `waitForGone` / `waitForCount`), typing / tap / svg / blink / shine / interact overlays that can anchor to an element's box (typing supports per-keystroke reveal, `kern`, caret shapes, and a high-fidelity `typeResample` mode), real interaction-state capture (`forceState` / `hoverReveal` / `hoverDetect` / `jsReveal`), an on-screen `cursor` (explicit or `"auto"`), `vars` + `${}` interpolation, and a small `evaluate` escape hatch. See `domotion --help` for the full grammar and the [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/) for a walkthrough.
 
 ### Templates — animated SVGs from a few flags
 
@@ -99,7 +99,7 @@ domotion template chart --type donut --data "42,28,18,12" --labels "Search,Direc
 domotion template kinetic-text --text "Ship it" --variant pop --by char -o title.svg
 ```
 
-Built-ins: **lower-third** (broadcast banner) · **kinetic-text** (animated typography) · **chart** (column / bar / line / pie / donut) · **chat** (message thread) · **subscribe** (follow pop-up) · **background-loop** (seamless looping background) · **device-mockup** (wrap a page in a phone / browser / window bezel). Third-party templates are npm packages named `domotion-template-<name>`.
+Built-ins (14): **lower-third** (broadcast banner) · **kinetic-text** (animated typography) · **chart** (column / bar / line / pie / donut) · **chat** (message thread) · **subscribe** (follow pop-up) · **background-loop** (seamless looping background) · **device-mockup** (wrap a page in a phone / browser / window bezel) · and a **creative-template pack** of full-bleed text/number cards: **title-card**, **quote**, **caption**, **cta**, **counter**, **stat**, **compare**. Every template adapts to a `--format` social preset (reel / square / portrait / landscape) and a `--brand` kit (palette / type / logo). Third-party templates are npm packages named `domotion-template-<name>`.
 
 ### Terminal sessions
 

package/assets/favicon.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="87px" height="63px" viewBox="0 0 87 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <defs>
+        <path d="M52.1302578,62.6943682 L52.9561621,62.4203238 C54.9907421,61.6285255 56.5742403,60.1130126 57.4803182,58.2543611 C57.8521129,58.6506388 58.2699053,59.0147811 58.7300111,59.3415229 C62.5574997,62.0595945 67.8637247,61.1602344 70.5817963,57.3327457 L85.4302812,36.4236548 C87.5232396,33.4764277 87.5232396,29.5278738 85.4302812,26.5806467 L70.5817964,5.6715558 C67.8637247,1.84406717 62.5574997,0.944707 58.7300111,3.66277864 C54.9025225,6.38085027 54.0031623,11.6870753 56.7212339,15.5145639 L68.0747376,31.5021508 L56.7367455,47.4678948 L45.3285811,6.23552933 C44.0767607,1.71109255 39.394179,-0.941887166 34.8697422,0.309933287 C32.4374738,0.982892913 30.5460517,2.6473336 29.5196818,4.74994043 C29.1478855,4.35366131 28.7300938,3.98951979 28.2699889,3.66277864 C24.4425003,0.944707 19.1362753,1.84406717 16.4182036,5.6715558 L1.56971878,26.5806467 C-0.523239593,29.5278738 -0.523239593,33.4764277 1.56971878,36.4236548 L16.4182036,57.3327457 C19.1362753,61.1602344 24.4425003,62.0595945 28.2699889,59.3415229 C32.0974775,56.6234513 32.9968377,51.3172263 30.2787661,47.4897376 L18.9252624,31.5021508 L30.2632545,15.5364067 L41.6714189,56.7687722 C42.9232393,61.293209 47.605821,63.9461887 52.1302578,62.6943682 Z M48.4179509,54.9021428 L35.6906782,8.90214279 C35.4697687,8.10371277 35.9379416,7.27737482 36.7363716,7.05646533 C37.5348016,6.83555584 38.3611396,7.30372873 38.5820491,8.10215875 L51.3093218,54.1021588 C51.5302313,54.9005888 51.0620584,55.7269267 50.2636283,55.9478361 L50.1137503,55.9812691 C49.3642711,56.108934 48.6250536,55.6506709 48.4179509,54.9021428 Z M22.125494,53.2797424 L7.2770092,32.3706515 C6.9076636,31.8505526 6.9076636,31.153749 7.2770092,30.6336501 L22.125494,9.72455914 C22.6051537,9.04911997 23.5415464,8.89040935 24.2169856,9.37006906 C24.8924247,9.84972876 25.0511354,10.7861214 24.5714757,11.4615606 L11.7788621,29.4756491 C10.9170557,30.6892132 10.9170557,32.3150883 11.7788621,33.5286524 L24.5714757,51.542741 C25.0511354,52.2181801 24.8924247,53.1545728 24.2169856,53.6342325 C23.5415464,54.1138922 22.6051537,53.9551816 22.125494,53.2797424 Z M62.7830144,53.6342325 C62.1075753,53.1545728 61.9488646,52.2181801 62.4285243,51.542741 L75.2211379,33.5286524 C76.0829443,32.3150883 76.0829443,30.6892132 75.2211379,29.4756491 L62.4285243,11.4615606 C61.9488646,10.7861214 62.1075753,9.84972876 62.7830144,9.37006906 C63.4584536,8.89040935 64.3948463,9.04911997 64.874506,9.72455914 L79.7229908,30.6336501 C80.0923364,31.153749 80.0923364,31.8505526 79.7229908,32.3706515 L64.8745059,53.2797424 L64.7793926,53.4003021 C64.2788165,53.9725268 63.4162387,54.0839135 62.7830144,53.6342325 Z" id="path-1"></path>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#EF4370" offset="0%"></stop>
+            <stop stop-color="#B22B2B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#8B5CF6" offset="0%"></stop>
+            <stop stop-color="#EC4899" offset="100%"></stop>
+        </linearGradient>
+        <path d="M28.74,81.8621508 L58.34,81.8621508 C70.6611551,81.8621508 76.8217327,81.8621508 81.527791,79.4642943 C85.667357,77.3550801 89.0329293,73.9895078 91.1421435,69.8499418 C93.54,65.1438835 93.54,58.9833059 93.54,46.6621508 L93.54,17.0621508 C93.54,4.74099564 93.54,-1.41958193 91.1421435,-6.12564023 C89.0329293,-10.2652063 85.667357,-13.6307785 81.527791,-15.7399928 C76.8217327,-18.1378492 70.6611551,-18.1378492 58.34,-18.1378492 L28.74,-18.1378492 C16.4188449,-18.1378492 10.2582673,-18.1378492 5.55220901,-15.7399928 C1.41264296,-13.6307785 -1.95292928,-10.2652063 -4.06214353,-6.12564023 C-6.46,-1.41958193 -6.46,4.74099564 -6.46,17.0621508 L-6.46,46.6621508 C-6.46,58.9833059 -6.46,65.1438835 -4.06214353,69.8499418 C-1.95292928,73.9895078 1.41264296,77.3550801 5.55220901,79.4642943 C10.2582673,81.8621508 16.4188449,81.8621508 28.74,81.8621508 Z" id="path-5"></path>
+    </defs>
+    <g id="favicon" stroke="none" fill="none">
+        <g id="Group" stroke-width="1" fill-rule="evenodd">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Shape" fill="#979797" fill-rule="nonzero" xlink:href="#path-1"></use>
+            <g id="Path" mask="url(#mask-2)">
+                <use fill="url(#linearGradient-3)" xlink:href="#path-5"></use>
+                <use fill="url(#linearGradient-4)" xlink:href="#path-5"></use>
+            </g>
+        </g>
+        <polyline id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" transform="translate(15.9242, 31.5022) scale(1, -1) translate(-15.9242, -31.5022)" points="23.3484848 10.5930599 8.5 31.5021508 23.3484848 52.4112417"></polyline>
+        <polyline id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" transform="translate(71.0758, 31.5022) scale(1, -1) translate(-71.0758, -31.5022)" points="63.6515152 10.5930599 78.5 31.5021508 63.6515152 52.4112417"></polyline>
+        <line x1="49.8636364" y1="8.50215077" x2="37.1363636" y2="54.5021508" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" transform="translate(43.5, 31.5022) scale(1, -1) translate(-43.5, -31.5022)"></line>
+    </g>
+</svg>

package/assets/logo.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#EF4370" offset="0%"></stop>
+            <stop stop-color="#B22B2B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#8B5CF6" offset="0%"></stop>
+            <stop stop-color="#EC4899" offset="100%"></stop>
+        </linearGradient>
+        <path d="M35.2,100 L64.8,100 C77.1211551,100 83.2817327,100 87.987791,97.6021435 C92.127357,95.4929293 95.4929293,92.127357 97.6021435,87.987791 C100,83.2817327 100,77.1211551 100,64.8 L100,35.2 C100,22.8788449 100,16.7182673 97.6021435,12.012209 C95.4929293,7.87264296 92.127357,4.50707072 87.987791,2.39785647 C83.2817327,-2.84217094e-14 77.1211551,-2.84217094e-14 64.8,-2.84217094e-14 L35.2,-2.84217094e-14 C22.8788449,-2.84217094e-14 16.7182673,-2.84217094e-14 12.012209,2.39785647 C7.87264296,4.50707072 4.50707072,7.87264296 2.39785647,12.012209 C0,16.7182673 0,22.8788449 0,35.2 L0,64.8 C0,77.1211551 0,83.2817327 2.39785647,87.987791 C4.50707072,92.127357 7.87264296,95.4929293 12.012209,97.6021435 C16.7182673,100 22.8788449,100 35.2,100 Z" id="path-3"></path>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-6">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-10.7%" y="-20.7%" width="121.4%" height="134.8%" filterUnits="objectBoundingBox" id="filter-7">
+            <feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="logo" stroke="none" fill="none" fill-rule="evenodd">
+        <g id="Path">
+            <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+            <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+        </g>
+        <g id="Group-6" opacity="0.1" stroke-width="1" transform="translate(14.96, 49.64) scale(1, -1) translate(-14.96, -49.64)translate(-20.04, 26.64)">
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-5" opacity="0.14" stroke-width="1" transform="translate(19.96, 49.64) scale(1, -1) translate(-19.96, -49.64)translate(-15.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-4" opacity="0.18" stroke-width="1" transform="translate(24.96, 49.64) scale(1, -1) translate(-24.96, -49.64)translate(-10.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-3" opacity="0.22" stroke-width="1" transform="translate(29.96, 49.64) scale(1, -1) translate(-29.96, -49.64)translate(-5.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-2" opacity="0.26" stroke-width="1" transform="translate(34.96, 49.64) scale(1, -1) translate(-34.96, -49.64)translate(-0.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group" filter="url(#filter-7)" opacity="0.99" stroke-width="1" transform="translate(49.96, 49.64) scale(1, -1) translate(-49.96, -49.64)translate(14.96, 26.64)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
+            <polyline id="Path" stroke-width="10" points="14.8484848 2.09090909 0 23 14.8484848 43.9090909"></polyline>
+            <polyline id="Path" stroke-width="10" points="55.1515152 2.09090909 70 23 55.1515152 43.9090909"></polyline>
+            <line x1="41.3636364" y1="0" x2="28.6363636" y2="46" id="Path" stroke-width="10"></line>
+        </g>
+    </g>
+</svg>

package/assets/mask-icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="75px" height="76px" viewBox="0 0 75 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>mask-icon</title>
+    <defs>
+        <path d="M0,0 L75,0 L75,75 L0,75 Z" id="path-1"></path>
+    </defs>
+    <g id="mask-icon" stroke="none" fill="none" transform="translate(0, 0.5)" xlink:href="#path-1" fill-rule="evenodd">
+        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+        <path d="M21.5029569,13.8210913 C23.7544208,15.4199569 24.2834562,18.5412658 22.6845906,20.7927297 L10.8200073,37.5 L22.6845906,54.2072703 C24.2834562,56.4587342 23.7544208,59.5800431 21.5029569,61.1789087 C19.251493,62.7777744 16.1301842,62.248739 14.5313185,59.9972751 L0.610863987,40.3950024 C-0.620287996,38.6613394 -0.620287996,36.3386606 0.610863987,34.6049976 L14.5313185,15.0027249 C16.1301842,12.751261 19.251493,12.2222256 21.5029569,13.8210913 Z M60.4686815,15.0027249 L74.389136,34.6049976 C75.620288,36.3386606 75.620288,38.6613394 74.389136,40.3950024 L60.4686815,59.9972751 C58.8698158,62.248739 55.748507,62.7777744 53.4970431,61.1789087 C51.2455792,59.5800431 50.7165438,56.4587342 52.3154094,54.2072703 L64.1799927,37.5 L52.3154094,20.7927297 C50.7165438,18.5412658 51.2455792,15.4199569 53.4970431,13.8210913 C55.748507,12.2222256 58.8698158,12.751261 60.4686815,15.0027249 Z M36.3530424,14.6041933 L48.2848606,57.7291933 C49.0212255,60.3906267 47.4606492,63.1450865 44.7992158,63.8814515 C42.1377824,64.6178164 39.3833226,63.0572401 38.6469576,60.3958067 L26.7151394,17.2708067 C25.9787745,14.6093733 27.5393508,11.8549135 30.2007842,11.1185485 C32.8622176,10.3821836 35.6166774,11.9427599 36.3530424,14.6041933 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/dist/animation/animator.d.ts

@@ -6,7 +6,7 @@
  */
 import { type CursorAtResolver, type CursorOverlay, type SelectorResolver } from "./cursor-overlay.js";
 import type { MagicMove } from "./magic-move.js";
-import type { AnimationOverlay, TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, IntraFrameAnimation } from "./overlay-schema.js";
+import type { AnimationOverlay, TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, ShineOverlay, InteractOverlay, IntraFrameAnimation } from "./overlay-schema.js";
 export interface AnimationFrame {
     /** SVG content for this frame (from dom-to-svg) */
     svgContent: string;
@@ -45,9 +45,47 @@ export interface AnimationFrame {
          * cross-fade (DM-898; see `docs/53-magic-move-transition.md`). It requires
          * the per-frame `magicMove` bridge layer (built caller-side from the
          * element trees); when that's absent it degrades to `crossfade`.
+         *
+         * DM-1524 adds the cross-engine-safe transition/effect expansion (docs/88):
+         * directional pushes `push-right` / `push-up` / `push-down` (the vertical/
+         * horizontal siblings of `push-left`; `push-up` is the alias of `scroll`'s
+         * motion), the `wipe` (linear left→right `clip-path` reveal) and `iris`
+         * (expanding-circle `clip-path` reveal) reveals, `zoom-in` / `zoom-out`
+         * (scale dolly under a crossfade), and `shine` (a crossfade with a swept
+         * gradient highlight over the handoff — the shared `buildShineSweep` helper).
+         *
+         * DM-1547 adds the radial / clock wipes (docs/88): `wipe-radial` (an
+         * expanding-circle reveal — the same geometry family as `iris`, kept as a
+         * named alias so the "radial wipe" vocabulary is complete, mirroring how
+         * `push-up` aliases `scroll`) and `wipe-clock` (an angular "clock hand" sweep
+         * that reveals the incoming frame around the center via an animated
+         * `clip-path: polygon()` with a fixed vertex count — NO animated conic mask,
+         * NO animated filter, so it composites identically on Blink / WebKit / Gecko).
+         *
+         * All express motion in `transform` / `clip-path` / `opacity` / gradients
+         * only — never an animated CSS `filter` (Chromium-only in `<img>`, docs/84).
          */
-        type: "crossfade" | "push-left" | "scroll" | "cut" | "magic-move";
+        type: "crossfade" | "push-left" | "scroll" | "cut" | "magic-move" | "push-right" | "push-up" | "push-down" | "wipe" | "iris" | "zoom-in" | "zoom-out" | "shine" | "wipe-radial" | "wipe-clock";
         duration: number;
+        /**
+         * DM-1550: optional named easing (or a raw CSS easing string) for the
+         * `wipe` / `iris` clip-path reveal and the `zoom-in` / `zoom-out` scale
+         * dolly this transition drives into the NEXT frame. Resolved through the
+         * motion-preset vocabulary (`resolveEasingPreset`) so the sampled
+         * `spring-soft` / `spring-bouncy` `linear(...)` curves — and their visible
+         * overshoot — apply to the reveal / dolly. Ignored by the other transition
+         * types (their motion is fixed). Default: `linear`.
+         */
+        easing?: string;
+        /**
+         * DM-1585: `wipe-clock` only — where the clock hand STARTS, in degrees
+         * clockwise from 12 o'clock (default 0), and whether it sweeps
+         * counterclockwise (default clockwise). Lets a clock wipe open from, say, 3
+         * o'clock (`wipeStartAngle: 90`) or unwind anticlockwise
+         * (`wipeCounterclockwise: true`). Ignored by every other transition type.
+         */
+        wipeStartAngle?: number;
+        wipeCounterclockwise?: boolean;
     };
     /**
      * Magic-move bridge layer for this frame's transition to the next, built by
@@ -69,7 +107,7 @@ export interface AnimationFrame {
      */
     animations?: IntraFrameAnimation[];
 }
-export type { TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, AnimationOverlay, IntraFrameAnimation };
+export type { TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, ShineOverlay, InteractOverlay, AnimationOverlay, IntraFrameAnimation };
 export interface AnimationConfig {
     width: number;
     height: number;