craft-library 0.2.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # Craft Library
 
-Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon and an iridescent 3D card. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for the card, and it loads only when a card is on the page.
+Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, and two "thinking" indicators, the Magic sphere and the Sweep. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for the two 3D pieces, and it loads only when one of them is on the page.
 
 ```bash
 npm install craft-library
@@ -80,9 +80,48 @@ import { IridescentCard } from 'craft-library';
 
 It is WebGL (three.js 0.169, which comes with the package and loads the first time a card mounts), so one card per screen is best. It is made for a dark background; black is best. The Visa mark is a trademark of Visa Inc., there to show a card: pass your own `logo` for anything real.
 
+## Glass piggy bank
+
+A congratulations moment in 3D, made for a phone screen: a frosted glass piggy bank hops in from the right with a full turn, lands on its hind feet, nearly tips over and clacks back down, rocking like the rigid glass it is. Coins pop into the air above it and drop in through the slot; each one knocks the glass, and its eyes close a little more until they curve, happy. It plays the first time it comes into view; a tap plays it again.
+
+```jsx
+import { PiggyBank } from 'craft-library';
+
+<PiggyBank height={560} onDone={() => console.log('saved!')} />
+```
+
+| Prop | | |
+|---|---|---|
+| `height` | `number \| string` | The box the moment fills: 100% wide (at least 280px) and this tall. Default `560`. |
+| `autoplay` | `boolean` | `false` waits instead of playing when it comes into view. Default `true`. |
+| `replay` | `any` | Change it (a counter, say) to play the moment again. |
+| `interactive` | `boolean` | `false` turns off tap-to-replay and the drag that turns it once it is still. Default `true`. |
+| `onDone` | `() => void` | After each play, when its eyes open again. |
+| `label` | `string` | The accessible name. |
+
+It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. It is made for a dark background; black is best.
+
+## Magic sphere and Sweep
+
+Two "thinking" indicators for the wait while an answer is being written: a ball of dots, drawn on a canvas, with the word beside it. The **Magic sphere** is a Rubik's cube on a ball, one grey tone per face: its slices turn and scramble the pieces, retrace their steps until every piece is home, and the ball lights up for a moment while a light passes through the word. In the **Sweep**, a wave crosses a dotted globe from left to right, lifting the dots it passes, runs on through the word at the same speed, and rests.
+
+```jsx
+import { MagicSphere, SweepSphere } from 'craft-library';
+
+{isThinking && <MagicSphere />}
+{isThinking && <SweepSphere label="Searching" />}
+```
+
+| Prop | | |
+|---|---|---|
+| `label` | `string` | The word beside the ball. Default `"Thinking"`; `""` shows the ball alone (still announced as "Thinking"). |
+| `size` | `number \| string` | The ball, px or any CSS length. Default `32`. Under 64px it draws more, finer dots, made to sit beside text; larger, it shows the full detail. |
+
+Both are made for a dark background: the dots and the word are light. On a light one, set `--thinking-ink` (the dots and the light in the word) and `--thinking-dim` (the word at rest) on it or a parent. The element is a `role="status"`.
+
 ## Plain HTML
 
-One script registers four tags. Same pieces, same props as attributes.
+One script registers seven tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -91,12 +130,15 @@ One script registers four tags. Same pieces, same props as attributes.
 <like-button></like-button>               <!-- "change" event: e.detail.liked -->
 <magnetic-icon size="40"></magnetic-icon>
 <iridescent-card></iridescent-card>       <!-- "cardturn" event: e.detail.face; 100% wide, 480px tall unless you size it -->
+<piggy-bank></piggy-bank>                 <!-- "piggydone" event after each play; el.play() replays; 100% wide, 560px tall unless you size it -->
+<magic-sphere></magic-sphere>             <!-- label="Thinking" (default; label="" for the ball alone), size="32" -->
+<sweep-sphere></sweep-sphere>
 ```
 
 With a bundler and no React: `import 'craft-library/elements'`.
 
 ## Motion and access
 
-Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still and the card swaps faces with a fade, with no entrance and no breathing.
+Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank is a labelled image. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still, the card swaps faces with a fade, with no entrance and no breathing, the piggy bank stays in place while the coins appear inside it and its eyes close, and the thinking balls hold still and only breathe.
 
 MIT · [Craft Library](https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR)

package/dist/cdn.js

@@ -1,4 +1,4 @@
-// the one-file build for a <script> tag: registers the four tags and exposes the mount functions (the card's 3D scene
-// is fetched from next to this file the first time a card is mounted)
-import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
+// the one-file build for a <script> tag: registers the seven tags and exposes the mount functions (the 3D pieces' scenes
+// are fetched from next to this file the first time one is mounted)
+import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card> */
+/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -1355,6 +1355,426 @@
     };
   }
 
+  // src/piggy-load-cdn.js
+  var me2 = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base2 = me2 ? me2.slice(0, me2.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadPiggy = () => import(base2 + "piggy.cdn.js");
+
+  // dist/piggy-mount.js
+  var LABEL2 = "A glass piggy bank hops in, coins drop in through its slot and it closes its eyes, happy.";
+  function mountPiggyBank(host, o = {}) {
+    let pig = null, gone = false, wantPlay = false;
+    const opts = { label: o.label || LABEL2 };
+    if (o.autoplay === false) opts.autoplay = false;
+    if (o.interactive === false) opts.interactive = false;
+    const done2 = () => {
+      if (o.onDone) o.onDone();
+    };
+    host.addEventListener("piggydone", done2);
+    const ready = loadPiggy().then((m) => {
+      if (gone) return null;
+      pig = m.mountPiggy(host, opts);
+      if (wantPlay) pig.play();
+      return pig.ready.then(() => pig);
+    });
+    return {
+      ready,
+      play: () => {
+        if (pig) pig.play();
+        else wantPlay = true;
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("piggydone", done2);
+        if (pig) pig.destroy();
+        pig = null;
+      }
+    };
+  }
+
+  // dist/thinking.js
+  var CSS4 = `/* Thinking orbs \xB7 Craft Library, by Sara Lobo
+   A ball of dots and the word beside it, for the wait while an answer is being written. thinking.js draws the ball
+   and, for the Sweep, carries the ball's wave on through the word. Made for dark backgrounds: on a light one, set
+   --thinking-ink (the dots and the light in the word) and --thinking-dim (the word at rest). */
+
+.thinking {
+  --thinking-size: 32px;
+  --thinking-ink: #EDEDED;
+  --thinking-dim: #8A8A8A;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  vertical-align: middle;
+}
+/* the ball: drawn by thinking.js at this size. Under 64px it uses more, finer dots, made to sit beside text */
+.thinking-orb {
+  display: block;
+  flex: none;
+  width: var(--thinking-size);
+  height: var(--thinking-size);
+}
+/* the word: a light passes through it, left to right, on a loop */
+.thinking-label {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
+  font-size: 14px;
+  line-height: normal;
+  letter-spacing: -.005em;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: linear-gradient(90deg, var(--thinking-dim) 0 35%, var(--thinking-ink) 50%, var(--thinking-dim) 65% 100%);
+  background-size: 250% 100%;
+  animation: thinking-shine 2.6s linear infinite;
+}
+@keyframes thinking-shine {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+/* the Sweep's word is lit by the ball's own wave: thinking.js moves --thinking-x across it */
+.thinking[data-kind="sweep"] .thinking-label {
+  --thinking-x: -999px;
+  background-image: linear-gradient(90deg, var(--thinking-dim) calc(var(--thinking-x) - 26px), var(--thinking-ink) var(--thinking-x), var(--thinking-dim) calc(var(--thinking-x) + 26px));
+  background-size: auto;
+  animation: none;
+}
+
+/* less motion: the ball holds still and only breathes; the word stays plain */
+@media (prefers-reduced-motion: reduce) {
+  .thinking-label {
+    animation: none;
+    background: none;
+    color: var(--thinking-dim);
+  }
+}
+`;
+  var api4;
+  function engine4() {
+    if (api4) return api4;
+    const window2 = {};
+    (function() {
+      var TAU = Math.PI * 2, SMALL = 64;
+      var SPEED = 85, REST = 0.55, HALO = 26;
+      var reduce = matchMedia("(prefers-reduced-motion: reduce)");
+      var all = [], running = false, last = 0;
+      function clamp01(x) {
+        return x < 0 ? 0 : x > 1 ? 1 : x;
+      }
+      function smooth(a, b, x) {
+        var t = clamp01((x - a) / (b - a));
+        return t * t * (3 - 2 * t);
+      }
+      function ease(t) {
+        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+      }
+      function painter() {
+        var LEVELS = 16, d = [], n = [];
+        for (var i = 0; i < LEVELS; i++) {
+          d.push([]);
+          n.push(0);
+        }
+        return {
+          gain: 1,
+          dot: function(x, y, r, a) {
+            a *= this.gain;
+            if (a <= 0.02) return;
+            var b = Math.min(LEVELS - 1, a * LEVELS | 0), arr = d[b], k = n[b];
+            arr[k] = x;
+            arr[k + 1] = y;
+            arr[k + 2] = r;
+            n[b] = k + 3;
+          },
+          flush: function(c, ink) {
+            c.fillStyle = ink;
+            for (var b = 0; b < LEVELS; b++) {
+              if (!n[b]) continue;
+              var arr = d[b];
+              c.globalAlpha = (b + 1) / LEVELS;
+              c.beginPath();
+              for (var i2 = 0; i2 < n[b]; i2 += 3) {
+                c.moveTo(arr[i2] + arr[i2 + 2], arr[i2 + 1]);
+                c.arc(arr[i2], arr[i2 + 1], arr[i2 + 2], 0, TAU);
+              }
+              c.fill();
+              n[b] = 0;
+            }
+            c.globalAlpha = 1;
+          }
+        };
+      }
+      var CAM = 3.2, LX = -0.42, LY = -0.62, LZ = -0.66;
+      function view(yaw, pitch) {
+        return { cy: Math.cos(yaw), sy: Math.sin(yaw), cp: Math.cos(pitch), sp: Math.sin(pitch) };
+      }
+      function turn(V, x, y, z, o) {
+        var x1 = x * V.cy - z * V.sy, z1 = x * V.sy + z * V.cy;
+        o[0] = x1;
+        o[1] = y * V.cp - z1 * V.sp;
+        o[2] = y * V.sp + z1 * V.cp;
+      }
+      function persp(x, y, z, o) {
+        var f = CAM / (CAM + z);
+        o[3] = x * f;
+        o[4] = y * f;
+        o[5] = f;
+      }
+      function lit(nx, ny, nz) {
+        return (0.32 + 0.68 * Math.max(0, nx * LX + ny * LY + nz * LZ)) * (0.07 + 0.93 * smooth(0.28, -0.3, nz));
+      }
+      var TONES = [1, 0.5, 0.78, 0.3, 0.62, 0.18];
+      function spin(q, axis, cs, sn) {
+        var b = (axis + 1) % 3, c = (axis + 2) % 3, qb = q[b], qc = q[c];
+        q[b] = qb * cs - qc * sn;
+        q[c] = qb * sn + qc * cs;
+      }
+      function sphere(small) {
+        var per = small ? 2 : 4, COUNT = 5, SLOT = 0.5, DUR = 0.42, HOLD = 1.1, R0 = 0.8, D = [], v = [0, 0, 0], o = [0, 0, 0, 0, 0, 0];
+        for (var a = 0; a < 3; a++) for (var sg = 1; sg >= -1; sg -= 2) {
+          var s = TONES[a * 2 + (sg > 0 ? 0 : 1)], b = (a + 1) % 3, c = (a + 2) % 3;
+          for (var su = -1; su <= 1; su++) for (var sv = -1; sv <= 1; sv++) for (var j = 0; j < per; j++) for (var k = 0; k < per; k++) {
+            var pos = [0, 0, 0], cub = [0, 0, 0];
+            pos[a] = sg;
+            cub[a] = sg;
+            cub[b] = su;
+            cub[c] = sv;
+            pos[b] = su * 2 / 3 + ((j + 0.5) / per * 2 - 1) * 0.26;
+            pos[c] = sv * 2 / 3 + ((k + 0.5) / per * 2 - 1) * 0.26;
+            D.push({ pos, cub, s });
+          }
+        }
+        var t = 0, seq = [], mi = 0, mt = 0;
+        function plan() {
+          var sc = [], prev = -1;
+          while (sc.length < COUNT) {
+            var axis = Math.random() * 3 | 0, layer = (Math.random() * 3 | 0) - 1, key = axis * 3 + layer + 1;
+            if (key === prev) continue;
+            prev = key;
+            sc.push({ axis, layer, dir: Math.random() < 0.5 ? -1 : 1 });
+          }
+          seq = sc.concat(sc.slice().reverse().map(function(m) {
+            return { axis: m.axis, layer: m.layer, dir: -m.dir };
+          }));
+        }
+        plan();
+        return {
+          time: function() {
+            return t;
+          },
+          step: function(dt) {
+            t += dt;
+            mt += dt;
+            if (mi < seq.length) {
+              if (mt >= SLOT) {
+                var m = seq[mi];
+                D.forEach(function(d) {
+                  if (d.cub[m.axis] === m.layer) {
+                    spin(d.pos, m.axis, 0, m.dir);
+                    spin(d.cub, m.axis, 0, m.dir);
+                  }
+                });
+                mi++;
+                mt -= SLOT;
+              }
+            } else if (mt >= HOLD) {
+              plan();
+              mi = 0;
+              mt -= HOLD;
+            }
+          },
+          draw: function(p, u) {
+            var V = view(0.72 + 0.2 * Math.sin(t * TAU / 15), 0.5 + 0.07 * Math.sin(t * TAU / 21));
+            var m = mi < seq.length ? seq[mi] : null;
+            var th = m ? m.dir * Math.PI / 2 * ease(clamp01(mt / DUR)) : 0, cs = Math.cos(th), sn = Math.sin(th);
+            var glow = m ? 0 : Math.sin(Math.PI * clamp01(mt / HOLD)), rb = R0 * (1 + 0.03 * glow);
+            for (var i = 0; i < D.length; i++) {
+              var d = D[i];
+              v[0] = d.pos[0];
+              v[1] = d.pos[1];
+              v[2] = d.pos[2];
+              if (m && d.cub[m.axis] === m.layer) spin(v, m.axis, cs, sn);
+              var k2 = rb / Math.hypot(v[0], v[1], v[2]);
+              turn(V, v[0] * k2, v[1] * k2, v[2] * k2, o);
+              var shade = lit(o[0] / rb, o[1] / rb, o[2] / rb);
+              persp(o[0], o[1], o[2], o);
+              p.dot(u.cx + o[3] * u.R, u.cy + o[4] * u.R, u.rad((small ? 0.5 : 1.05) * o[5]), shade * (0.25 + 0.75 * (d.s + (1 - d.s) * 0.6 * glow)));
+            }
+          }
+        };
+      }
+      function sweep(small, front) {
+        var LAT = small ? 11 : 15, dens = small ? 26 : 40, R0 = 0.74, W = small ? 0.28 : 0.24, D = [], o = [0, 0, 0, 0, 0, 0];
+        for (var a = 1; a < LAT; a++) {
+          var lat = Math.PI * a / LAT, y = -Math.cos(lat), r = Math.sin(lat), n = Math.max(5, Math.round(r * dens));
+          for (var b = 0; b < n; b++) {
+            var th = TAU * b / n + a * 0.37;
+            D.push([Math.cos(th) * r, y, Math.sin(th) * r]);
+          }
+        }
+        front = front || function(t2) {
+          return -1.3 + 2.6 * (t2 % 1.75) / 1.2;
+        };
+        var t = 0;
+        return {
+          time: function() {
+            return t;
+          },
+          step: function(dt) {
+            t += dt;
+          },
+          draw: function(p, u) {
+            var V = view(0.35 * Math.sin(t * TAU / 17), 0.3 + 0.07 * Math.sin(t * TAU / 23)), f = front(t);
+            for (var i = 0; i < D.length; i++) {
+              turn(V, D[i][0], D[i][1], D[i][2], o);
+              var nx = o[0], ny = o[1], nz = o[2], q = (nx * R0 - f) / W, w = Math.exp(-q * q), rho = R0 * (1 + 0.17 * w);
+              persp(nx * rho, ny * rho, nz * rho, o);
+              p.dot(u.cx + o[3] * u.R, u.cy + o[4] * u.R, u.rad((small ? 0.45 + 0.25 * w : 0.95 + 0.6 * w) * o[5]), lit(nx, ny, nz) * (0.75 + 0.25 * w) + 0.55 * w * smooth(0.3, -0.3, nz));
+            }
+          }
+        };
+      }
+      function rowX(r, t) {
+        return r.x0 + SPEED * (t % ((r.x1 - r.x0) / SPEED + REST));
+      }
+      function size(I) {
+        var cw = I.cv.clientWidth, ch = I.cv.clientHeight;
+        if (!cw || !ch) return;
+        var small = Math.min(cw, ch) < SMALL, dpr = Math.min(devicePixelRatio || 1, small ? 3 : 2);
+        var w = Math.round(cw * dpr), h = Math.round(ch * dpr);
+        if (I.cv.width !== w || I.cv.height !== h) {
+          I.cv.width = w;
+          I.cv.height = h;
+        }
+        var R = Math.min(w, h) * 0.44, k = small ? dpr : R / 80, minR = (small ? 0.4 : 0.5) * dpr;
+        I.w = w;
+        I.h = h;
+        I.u = { cx: w / 2, cy: h / 2, R, rad: function(d) {
+          return Math.max(minR, d * k);
+        } };
+        I.ink = getComputedStyle(I.el).getPropertyValue("--thinking-ink").trim() || "#EDEDED";
+        if (I.small !== small) {
+          I.small = small;
+          I.sim = I.kind === "sweep" ? sweep(small, I.row && function(t) {
+            return (rowX(I.row, t) - I.row.cx) / I.row.R;
+          }) : sphere(small);
+          if (reduce.matches) for (var i = 0; i < 150; i++) I.sim.step(1 / 60);
+        }
+        if (I.row) {
+          var L = I.label;
+          I.row.cx = I.cv.offsetLeft + I.cv.offsetWidth / 2 - L.offsetLeft;
+          I.row.R = R / dpr;
+          I.row.x0 = I.row.cx - 1.3 * I.row.R;
+          I.row.x1 = L.offsetWidth + HALO + 4;
+        }
+      }
+      function frame(now) {
+        if (!all.length) {
+          running = false;
+          return;
+        }
+        requestAnimationFrame(frame);
+        var dt = Math.min(1 / 30, Math.max(0, (now - last) / 1e3));
+        last = now;
+        if (document.hidden) return;
+        for (var i = 0; i < all.length; i++) {
+          var I = all[i];
+          if (!I.seen || !I.u) continue;
+          if (reduce.matches) I.calm += dt;
+          else I.sim.step(dt);
+          I.ctx.clearRect(0, 0, I.w, I.h);
+          I.p.gain = (I.small ? 1.35 : 1) * (reduce.matches ? 0.72 + 0.28 * Math.sin(I.calm * TAU / 3.2) : 1);
+          I.sim.draw(I.p, I.u);
+          I.p.flush(I.ctx, I.ink);
+          if (I.row && !reduce.matches) I.label.style.setProperty("--thinking-x", rowX(I.row, I.sim.time()).toFixed(1) + "px");
+        }
+      }
+      function thinking(el) {
+        if (el.__thinking) return el.__thinking;
+        var cv = el.querySelector(".thinking-orb");
+        if (!cv) {
+          cv = document.createElement("canvas");
+          cv.className = "thinking-orb";
+          cv.setAttribute("aria-hidden", "true");
+          el.insertBefore(cv, el.firstChild);
+        }
+        var label = el.querySelector(".thinking-label"), kind = el.getAttribute("data-kind") === "sweep" ? "sweep" : "sphere";
+        var I = {
+          el,
+          cv,
+          ctx: cv.getContext("2d"),
+          label,
+          kind,
+          row: kind === "sweep" && label ? { cx: 0, R: 1, x0: 0, x1: 1 } : null,
+          sim: null,
+          small: null,
+          u: null,
+          w: 0,
+          h: 0,
+          ink: "",
+          seen: true,
+          calm: 0,
+          p: painter()
+        };
+        I.ro = new ResizeObserver(function() {
+          size(I);
+        });
+        I.ro.observe(cv);
+        if (label) I.ro.observe(label);
+        I.io = new IntersectionObserver(function(es) {
+          I.seen = es[es.length - 1].isIntersecting;
+        });
+        I.io.observe(el);
+        size(I);
+        all.push(I);
+        if (!running) {
+          running = true;
+          last = performance.now();
+          requestAnimationFrame(frame);
+        }
+        return el.__thinking = {
+          destroy: function() {
+            I.ro.disconnect();
+            I.io.disconnect();
+            all.splice(all.indexOf(I), 1);
+            I.ctx.clearRect(0, 0, I.w, I.h);
+            if (label) label.style.removeProperty("--thinking-x");
+            el.__thinking = null;
+          }
+        };
+      }
+      function scan() {
+        Array.prototype.forEach.call(document.querySelectorAll(".thinking"), thinking);
+      }
+      if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", scan);
+      else scan();
+      window2.thinking = thinking;
+    })();
+    return api4 = window2;
+  }
+  function mountThinking(host, o = {}) {
+    css("craft-thinking", CSS4);
+    const T = engine4();
+    const kind = o.kind === "sweep" ? "sweep" : "sphere";
+    const label = o.label == null || o.label === true ? "Thinking" : o.label === false ? "" : String(o.label);
+    host.innerHTML = '<span class="thinking" data-kind="' + kind + '" role="status"><canvas class="thinking-orb" aria-hidden="true"></canvas>' + (label ? '<span class="thinking-label"></span>' : "") + "</span>";
+    const el = host.firstChild;
+    if (label) el.lastChild.textContent = label;
+    else el.setAttribute("aria-label", "Thinking");
+    if (o.size) el.style.setProperty("--thinking-size", typeof o.size === "number" ? o.size + "px" : String(o.size));
+    const m = T.thinking(el);
+    return { element: el, destroy() {
+      m.destroy();
+      host.innerHTML = "";
+    } };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1401,7 +1821,27 @@
     entrance: el.getAttribute("entrance") === "false" ? false : void 0,
     label: el.getAttribute("label") || void 0
   }));
+  define("piggy-bank", (el, o) => {
+    css("craft-piggy-host", ":where(piggy-bank){display:block;position:relative;width:100%;min-width:280px;height:560px}");
+    const m = mountPiggyBank(el, o);
+    el.play = m.play;
+    return m;
+  }, (el) => ({
+    autoplay: el.getAttribute("autoplay") === "false" ? false : void 0,
+    interactive: el.getAttribute("interactive") === "false" ? false : void 0,
+    label: el.getAttribute("label") || void 0
+  }));
+  var thinkingTag = (kind) => (el, o) => {
+    css("craft-thinking-host", "magic-sphere,sweep-sphere{display:inline-block;vertical-align:middle}");
+    return mountThinking(el, { ...o, kind });
+  };
+  var thinkingOptions = (el) => ({
+    size: el.getAttribute("size") ? isNaN(el.getAttribute("size")) ? el.getAttribute("size") : +el.getAttribute("size") : void 0,
+    label: el.hasAttribute("label") ? el.getAttribute("label") : void 0
+  });
+  define("magic-sphere", thinkingTag("sphere"), thinkingOptions);
+  define("sweep-sphere", thinkingTag("sweep"), thinkingOptions);
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };
 })();

package/dist/elements.js

@@ -1,9 +1,12 @@
-// <glass-nav>, <like-button>, <magnetic-icon> and <iridescent-card>: the pieces as HTML tags, for pages without React.
-// They render into the page itself (no shadow root), so the glass can blend with what is behind it.
+// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere> and <sweep-sphere>: the
+// pieces as HTML tags, for pages without React. They render into the page itself (no shadow root), so the glass can
+// blend with what is behind it.
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
 import { mountIridescentCard } from './card-mount.js';
+import { mountPiggyBank } from './piggy-mount.js';
+import { mountThinking } from './thinking.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -51,4 +54,30 @@ define('iridescent-card', (el, o) => {
   label: el.getAttribute('label') || undefined
 }));
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
+// the piggy bank fills the tag: a block, 100% wide (at least 280px) and 560px tall unless the page sizes it. It plays
+// the first time it comes into view; each play ends with a "piggydone" event. el.play() plays it again.
+define('piggy-bank', (el, o) => {
+  css('craft-piggy-host', ':where(piggy-bank){display:block;position:relative;width:100%;min-width:280px;height:560px}');
+  const m = mountPiggyBank(el, o);
+  el.play = m.play;
+  return m;
+}, (el) => ({
+  autoplay: el.getAttribute('autoplay') === 'false' ? false : undefined,
+  interactive: el.getAttribute('interactive') === 'false' ? false : undefined,
+  label: el.getAttribute('label') || undefined
+}));
+
+// the thinking indicators: inline, beside text. size="32" (px) or any CSS length; label="Thinking" by default,
+// label="" for the ball alone
+const thinkingTag = (kind) => (el, o) => {
+  css('craft-thinking-host', 'magic-sphere,sweep-sphere{display:inline-block;vertical-align:middle}');
+  return mountThinking(el, { ...o, kind });
+};
+const thinkingOptions = (el) => ({
+  size: el.getAttribute('size') ? (isNaN(el.getAttribute('size')) ? el.getAttribute('size') : +el.getAttribute('size')) : undefined,
+  label: el.hasAttribute('label') ? el.getAttribute('label') : undefined
+});
+define('magic-sphere', thinkingTag('sphere'), thinkingOptions);
+define('sweep-sphere', thinkingTag('sweep'), thinkingOptions);
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };

package/dist/index.js

@@ -5,6 +5,8 @@ import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
 import { mountIridescentCard } from './card-mount.js';
+import { mountPiggyBank } from './piggy-mount.js';
+import { mountThinking } from './thinking.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -54,4 +56,35 @@ export function IridescentCard({ height = 480, size, name, number, expiry, cvv,
   return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 300, height, ...style } });
 }
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
+// The piggy bank fills the box it renders (100% wide and `height` tall, 560px by default; it is made for a phone screen)
+// and plays its moment the first time it comes into view; a tap plays it again. replay: change it (a counter) to play
+// it again from code. It loads its 3D scene (three.js) the first time it mounts. onDone reports the end of each play.
+export function PiggyBank({ height = 560, autoplay, interactive, replay, label, onDone, className, style }) {
+  const host = useRef(null), pig = useRef(null), last = useRef(replay), done = useLatest(onDone);
+  useEffect(() => {
+    const m = pig.current = mountPiggyBank(host.current, { autoplay, interactive, label, onDone: () => done.current && done.current() });
+    return () => { m.destroy(); pig.current = null; };
+  }, [autoplay, interactive, label]);
+  useEffect(() => { if (last.current === replay) return; last.current = replay; if (pig.current) pig.current.play(); }, [replay]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 280, height, ...style } });
+}
+
+// The Magic sphere and the Sweep: a "thinking" indicator, a ball of dots with the word beside it. size: the ball, px or
+// any CSS length (32 by default; under 64px it draws finer, denser dots made to sit beside text). label: the word
+// ("Thinking" by default; '' for the ball alone). The host keeps its line height, so the word is never clipped.
+function thinkingComponent(kind, name) {
+  function Thinking({ size, label, className, style }) {
+    const host = useRef(null);
+    useEffect(() => {
+      const m = mountThinking(host.current, { kind, size, label });
+      return () => m.destroy();
+    }, [size, label]);
+    return createElement('span', { ref: host, className, style: { display: 'inline-block', verticalAlign: 'middle', ...style } });
+  }
+  Thinking.displayName = name;
+  return Thinking;
+}
+export const MagicSphere = thinkingComponent('sphere', 'MagicSphere');
+export const SweepSphere = thinkingComponent('sweep', 'SweepSphere');
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };

package/dist/piggy-load.js

@@ -0,0 +1,2 @@
+// where the piggy bank comes from: for bundlers, the package's piggy.js (it imports the `three` dependency)
+export const loadPiggy = () => import('./piggy.js');

package/dist/piggy-mount.js

@@ -0,0 +1,27 @@
+// Glass piggy bank: the mount around the library's piggy.js. piggy.js, and three.js with it, loads only when a piggy
+// bank is mounted, so the other pieces stay light.
+import { loadPiggy } from './piggy-load.js';
+
+const LABEL = 'A glass piggy bank hops in, coins drop in through its slot and it closes its eyes, happy.';
+
+// host: the element the moment fills (give it a size). o: { autoplay (false: wait for play()), interactive (false: no
+// tap to replay, no drag), label, onDone() after each play }
+export function mountPiggyBank(host, o = {}) {
+  let pig = null, gone = false, wantPlay = false;
+  const opts = { label: o.label || LABEL };
+  if (o.autoplay === false) opts.autoplay = false;
+  if (o.interactive === false) opts.interactive = false;
+  const done = () => { if (o.onDone) o.onDone(); };
+  host.addEventListener('piggydone', done);
+  const ready = loadPiggy().then((m) => {
+    if (gone) return null;
+    pig = m.mountPiggy(host, opts);
+    if (wantPlay) pig.play();
+    return pig.ready.then(() => pig);
+  });
+  return {
+    ready,
+    play: () => { if (pig) pig.play(); else wantPlay = true; },
+    destroy() { gone = true; host.removeEventListener('piggydone', done); if (pig) pig.destroy(); pig = null; }
+  };
+}