craft-library 0.1.2 → 0.2.0

package/dist/cdn.js

@@ -1,3 +1,4 @@
-// the one-file build for a <script> tag: registers the three tags and exposes the mount functions
-import { mountLike, mountMagnet, mountGlassNav } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };
+// 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 };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon · <glass-nav>, <like-button>, <magnetic-icon> */
+/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -436,7 +436,7 @@
       var PULL = 15, FALL = 1.1;
       var BODY = 0.3, SHIFT = 0.14;
       var JAG = 0.18;
-      var FRAY = 2.6, CHIPS = 64;
+      var FRAY = 1.6, CHIPS = 90;
       var DENT = 3.5;
       var RATE = 90, MAXDUST = 90;
       var ROOM = 46;
@@ -481,7 +481,7 @@
         return clamp((Math.abs(m.d) + 3 * m.heat) / PULL, 0, 1);
       }
       function damage(m, t) {
-        return clamp((Math.abs(m.d) + 3 * m.heat) / 9, 0, 1) * (0.5 + 0.5 * bell(wrap(t - m.a), 1.3));
+        return clamp((Math.abs(m.d) + 3 * m.heat) / 9, 0, 1) * bell(wrap(t - m.a), 0.7);
       }
       function rimPath(m, now) {
         var pts = [], strain = strainOf(m), i, t, r, env, sharp, fray, n, p, a, b, c, e;
@@ -682,14 +682,14 @@
         g.restore();
       }
       function chips(m, now) {
-        var t = m.t;
+        var t = m.t, f = crack(m)[0];
         m.chips.forEach(function(c, k) {
           var o = clamp((damage(m, c.a) + 0.08 * tremble(300 + k, now) - c.at) / 0.12, 0, 1), z, r, x, y, dx, dy, l;
           if (o < 0.02) o = 0;
           if (!o && !c.open) return;
           c.open = o;
           z = c.s * o;
-          r = radius(m, c.a) + c.o;
+          r = Math.min(radius(m, c.a), f) + c.o;
           x = m.cx + r * Math.cos(c.a);
           y = m.cy + r * Math.sin(c.a);
           c.el.setAttribute("x", n2(x - z / 2));
@@ -1309,6 +1309,52 @@
     };
   }
 
+  // src/card-load-cdn.js
+  var me = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base = me ? me.slice(0, me.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadCard = () => import(base + "card.cdn.js");
+
+  // dist/card-mount.js
+  var LABEL = "Credit card. Press to turn it over and see the back.";
+  var KEYS = ["name", "number", "expiry", "cvv", "logo", "size", "entrance", "interactive"];
+  function mountIridescentCard(host, o = {}) {
+    let card = null, gone = false;
+    const opts = { label: o.label || LABEL };
+    for (const k of KEYS) if (o[k] !== void 0 && o[k] !== null) opts[k] = o[k];
+    if (typeof opts.number === "string") opts.number = opts.number.trim().split(/\s+/);
+    const turned = (e) => {
+      if (o.onTurn) o.onTurn(e.detail.face);
+    };
+    host.addEventListener("cardturn", turned);
+    const ready = loadCard().then((m) => {
+      if (gone) return null;
+      if (!opts.logo && m.LOGO) opts.logo = m.LOGO;
+      card = m.mountCard(host, opts);
+      return card.ready.then(() => card);
+    });
+    return {
+      ready,
+      turn: (dir) => {
+        if (card) card.turn(dir);
+      },
+      show: (face) => {
+        if (card) card.show(face);
+      },
+      play: () => {
+        if (card) card.play();
+      },
+      get face() {
+        return card ? card.face : "front";
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("cardturn", turned);
+        if (card) card.destroy();
+        card = null;
+      }
+    };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1342,7 +1388,20 @@
       send(el, "select", { index });
     }
   }));
+  define("iridescent-card", (el, o) => {
+    css("craft-card-host", ":where(iridescent-card){display:block;position:relative;width:100%;min-width:300px;height:480px}");
+    return mountIridescentCard(el, o);
+  }, (el) => ({
+    name: el.getAttribute("name") || void 0,
+    number: el.getAttribute("number") || void 0,
+    expiry: el.getAttribute("expiry") || void 0,
+    cvv: el.getAttribute("cvv") || void 0,
+    logo: el.getAttribute("logo") || void 0,
+    size: el.getAttribute("size") ? +el.getAttribute("size") : void 0,
+    entrance: el.getAttribute("entrance") === "false" ? false : void 0,
+    label: el.getAttribute("label") || void 0
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
 })();

package/dist/elements.js

@@ -1,8 +1,9 @@
-// <glass-nav>, <like-button> and <magnetic-icon>: the pieces as HTML tags, for pages without React.
+// <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.
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
+import { mountIridescentCard } from './card-mount.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -33,4 +34,21 @@ define('glass-nav', mountGlassNav, (el) => ({
   onSelect: (index) => { el.setAttribute('active', index); send(el, 'select', { index }); }
 }));
 
-export { mountLike, mountMagnet, mountGlassNav };
+// the card fills the tag: a block, 100% wide (at least 300px, so a shrink-to-fit parent can't fold it) and 480px tall
+// unless the page sizes it (zero specificity, so any rule wins). Each turn bubbles up from inside as a "cardturn"
+// event, with e.detail.face.
+define('iridescent-card', (el, o) => {
+  css('craft-card-host', ':where(iridescent-card){display:block;position:relative;width:100%;min-width:300px;height:480px}');
+  return mountIridescentCard(el, o);
+}, (el) => ({
+  name: el.getAttribute('name') || undefined,
+  number: el.getAttribute('number') || undefined,
+  expiry: el.getAttribute('expiry') || undefined,
+  cvv: el.getAttribute('cvv') || undefined,
+  logo: el.getAttribute('logo') || undefined,
+  size: el.getAttribute('size') ? +el.getAttribute('size') : undefined,
+  entrance: el.getAttribute('entrance') === 'false' ? false : undefined,
+  label: el.getAttribute('label') || undefined
+}));
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };

package/dist/index.js

@@ -4,6 +4,7 @@ import { createElement, useEffect, useRef } from 'react';
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
+import { mountIridescentCard } from './card-mount.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -40,4 +41,17 @@ export function GlassNav({ active = 2, labels, label, onSelect, className, style
   return createElement('span', { ref: host, className, style });
 }
 
-export { mountLike, mountMagnet, mountGlassNav };
+// The card fills the box it renders (100% wide and `height` tall, 480px by default) and sits centred in it. The box
+// keeps at least 300px of width, so a parent that shrinks to its content (a centring flex row) can't fold it to nothing.
+// It loads its 3D scene (three.js) the first time it mounts. onTurn reports each turn with the face now showing.
+export function IridescentCard({ height = 480, size, name, number, expiry, cvv, logo, entrance, label, onTurn, className, style }) {
+  const host = useRef(null), turn = useLatest(onTurn);
+  const num = Array.isArray(number) ? number.join(' ') : number;
+  useEffect(() => {
+    const m = mountIridescentCard(host.current, { size, name, number: num, expiry, cvv, logo, entrance, label, onTurn: (f) => turn.current && turn.current(f) });
+    return () => m.destroy();
+  }, [size, name, num, expiry, cvv, logo, entrance, label]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 300, height, ...style } });
+}
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };

package/dist/magnet.js

@@ -8,9 +8,9 @@ function engine() {
   const window = {};
 // Magnetic icon · Craft Library, by Sara Lobo
 // Every .mag on the page reads the pointer and its rim follows it while it is near: the disc is drawn toward it, the
-// strained rim creases and trembles, the rest of the ring frays out of round and loses voxels, the tip cracks into
-// shards, and the voxels fly to the pointer. Let go, and the rim springs back with a wobble, closing up as the loose
-// voxels return to it. Pairs with magnet.css.
+// strained rim creases, trembles and comes apart where it is pulled, the tip cracks into shards, and voxels fly to
+// the pointer. Let go, and the rim springs back with a wobble, closing up as the loose voxels return to it. Pairs with
+// magnet.css.
 // Buttons added later: magnetize(root). To steer one without a mouse (a demo, a tour): magnetPoint(button, x, y) with
 // a point on screen, and magnetPoint(button, null) to hand it back to the pointer.
 (function () {
@@ -19,7 +19,7 @@ function engine() {
   var PULL = 15, FALL = 1.1;       // the furthest the rim reaches out, and how fast the pull drops with distance
   var BODY = 0.3, SHIFT = 0.14;    // how much of the disc goes with the tip, and how far the disc itself is drawn
   var JAG = 0.18;                  // how deep the strained rim creases
-  var FRAY = 2.6, CHIPS = 64;      // how far the rest of the ring frays out of round, and how many voxels can fall out of it
+  var FRAY = 1.6, CHIPS = 90;      // how far the pulled stretch of the rim frays, and how many voxels can fall out of the ring
   var DENT = 3.5;                  // the furthest the rim is drawn in while the pointer is over the button
   var RATE = 90, MAXDUST = 90;     // voxels shed per second at full pull, and at most at once
   var ROOM = 46;                   // room for the shards and voxels on every side of the button (matches .mag-dust)
@@ -47,14 +47,14 @@ function engine() {
     return R + (d > 0 ? d * (spike(dt, width(m)) + BODY * bell(dt, 1)) : d * bell(dt, 0.7)) - 0.12 * d * bell(wrap(dt - Math.PI), 1.3);
   }
 
-  // how hard the field strains the metal (0 at rest, 1 at a full pull), and how worn the ring is at angle t: wear
-  // builds faster than the strain, so a middling pull already marks the whole ring; it is worst toward the pull, but
-  // the far side gives too, so the ring reads as coming apart, not only its tip
+  // how hard the field strains the metal (0 at rest, 1 at a full pull), and how worn the rim is at angle t: only where
+  // the magnet pulls, beside the shards, fading out within about a quarter turn either side; the rest of the ring
+  // stays whole. Wear builds faster than the strain, so a middling pull already marks it
   function strainOf(m) { return clamp((Math.abs(m.d) + 3 * m.heat) / PULL, 0, 1); }
-  function damage(m, t) { return clamp((Math.abs(m.d) + 3 * m.heat) / 9, 0, 1) * (0.5 + 0.5 * bell(wrap(t - m.a), 1.3)); }
+  function damage(m, t) { return clamp((Math.abs(m.d) + 3 * m.heat) / 9, 0, 1) * bell(wrap(t - m.a), 0.7); }
 
   // the rim as one closed curve: smooth where it is calm (Catmull-Rom turned into cubic Béziers), creased into straight,
-  // trembling facets where the magnet strains it, and frayed out of round, in short crooked facets, around the rest
+  // trembling facets where the magnet strains it, and frayed into short crooked facets on either side of them
   function rimPath(m, now) {
     var pts = [], strain = strainOf(m), i, t, r, env, sharp, fray, n, p, a, b, c, e;
     for (i = 0; i < N; i++) {
@@ -211,17 +211,18 @@ function engine() {
     g.restore();
   }
 
-  // the voxels falling out of the ring: holes in the rim's mask, each opening once the metal is broken enough where it
-  // sits (and flickering at the edge of breaking). The piece that falls out flies to the magnet; as the ring heals,
-  // the holes close again
+  // the voxels falling out of the rim where it's pulled: holes in the rim's mask, each opening once the metal is worn
+  // enough where it sits (and flickering at the edge of breaking), always on the rim you can see: past the crack line,
+  // where the shards take over, that's the crack line itself. The piece that falls out flies to the magnet; as the
+  // rim heals, the holes close again
   function chips(m, now) {
-    var t = m.t;
+    var t = m.t, f = crack(m)[0];
     m.chips.forEach(function (c, k) {
       var o = clamp((damage(m, c.a) + 0.08 * tremble(300 + k, now) - c.at) / 0.12, 0, 1), z, r, x, y, dx, dy, l;
       if (o < 0.02) o = 0;                                  // closed means fully closed: no sliver left in the mask
       if (!o && !c.open) return;
       c.open = o;
-      z = c.s * o; r = radius(m, c.a) + c.o; x = m.cx + r * Math.cos(c.a); y = m.cy + r * Math.sin(c.a);
+      z = c.s * o; r = Math.min(radius(m, c.a), f) + c.o; x = m.cx + r * Math.cos(c.a); y = m.cy + r * Math.sin(c.a);
       c.el.setAttribute('x', n2(x - z / 2)); c.el.setAttribute('y', n2(y - z / 2));
       c.el.setAttribute('width', n2(z)); c.el.setAttribute('height', n2(z));
       if (o < 0.2) c.gone = false;
@@ -295,7 +296,7 @@ function engine() {
     cv.className = 'mag-dust';
     cv.setAttribute('aria-hidden', 'true');
     el.insertBefore(cv, icon);
-    // the voxels that can fall out of the ring: squares in the rim's mask, closed until the metal strains (see chips()).
+    // the voxels that can fall out of the rim: squares in its mask, closed until the metal wears (see chips()).
     // Each sits at its own spot round the ring, mostly biting the rim from outside, and gives way at its own strain
     var mask = svg.querySelector('mask'), holes = [], k, q;
     for (k = 0; mask && k < CHIPS; k++) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "craft-library",
-  "version": "0.1.2",
-  "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart and a magnetic icon, for React or plain HTML",
+  "version": "0.2.0",
+  "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart, a magnetic icon and an iridescent 3D card, for React or plain HTML",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -41,9 +41,15 @@
     "animation",
     "micro-interaction",
     "navbar",
-    "like-button"
+    "like-button",
+    "3d",
+    "three",
+    "credit-card"
   ],
   "author": "Sara Lobo",
   "license": "MIT",
-  "homepage": "https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR"
+  "homepage": "https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR",
+  "dependencies": {
+    "three": "0.169.0"
+  }
 }