craft-library 0.2.0 → 0.3.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 and a glass piggy bank. 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,30 @@ 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.
+
 ## Plain HTML
 
-One script registers four tags. Same pieces, same props as attributes.
+One script registers five tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -91,12 +112,13 @@ 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 -->
 ```
 
 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, and the piggy bank stays in place while the coins appear inside it and its eyes close.
 
 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 five 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 } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };

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 · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -1355,6 +1355,43 @@
     };
   }
 
+  // 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/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1401,7 +1438,17 @@
     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
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };
 })();

package/dist/elements.js

@@ -1,9 +1,10 @@
-// <glass-nav>, <like-button>, <magnetic-icon> and <iridescent-card>: the pieces as HTML tags, for pages without React.
+// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card> and <piggy-bank>: 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 { css } from './style.js';
 
 function define(name, mount, options) {
@@ -51,4 +52,17 @@ 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
+}));
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };

package/dist/index.js

@@ -5,6 +5,7 @@ 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';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -54,4 +55,17 @@ 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 } });
+}
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };

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; }
+  };
+}