craft-library 0.1.1 → 0.1.3

package/README.md

@@ -44,7 +44,7 @@ import { LikeButton } from 'craft-library';
 
 ## Magnetic icon
 
-A round search button with a brushed-metal rim, for dark backgrounds. Near the cursor the rim acts like metal near a strong magnet: the disc is drawn toward the pointer, the rim creases and trembles, its tip cracks into shards and small voxels fly off to the pointer.
+A round search button with a brushed-metal rim, for dark backgrounds. Near the cursor the rim acts like metal near a strong magnet: the disc is drawn toward the pointer, the rim creases and trembles and, where it is pulled, comes apart in small voxels of metal; its tip cracks into shards and the voxels fly off to the pointer.
 
 ```jsx
 import { MagneticIcon } from 'craft-library';
@@ -63,7 +63,7 @@ import { MagneticIcon } from 'craft-library';
 One script registers three tags. Same pieces, same props as attributes.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/craft-library@0.1/dist/craft.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
 
 <glass-nav active="0"></glass-nav>        <!-- "select" event: e.detail.index -->
 <like-button></like-button>               <!-- "change" event: e.detail.liked -->

package/dist/craft.js

@@ -436,6 +436,7 @@
       var PULL = 15, FALL = 1.1;
       var BODY = 0.3, SHIFT = 0.14;
       var JAG = 0.18;
+      var FRAY = 1.6, CHIPS = 90;
       var DENT = 3.5;
       var RATE = 90, MAXDUST = 90;
       var ROOM = 46;
@@ -476,16 +477,24 @@
         var dt = wrap(t - m.a), d = m.d;
         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);
       }
+      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) * bell(wrap(t - m.a), 0.7);
+      }
       function rimPath(m, now) {
-        var pts = [], strain = clamp((Math.abs(m.d) + 3 * m.heat) / PULL, 0, 1), i, t, r, env, sharp, n, p, a, b, c, e;
+        var pts = [], strain = strainOf(m), i, t, r, env, sharp, fray, n, p, a, b, c, e;
         for (i = 0; i < N; i++) {
           t = i / N * 2 * Math.PI;
           r = radius(m, t);
           env = bell(wrap(t - m.a), 0.6) * strain;
           sharp = env > 0.12;
-          if (sharp && i % 3) continue;
+          fray = sharp ? 0 : clamp((damage(m, t) - 0.15) / 0.85, 0, 1);
+          if (sharp && i % 3 || fray > 0 && i % 2) continue;
           if (sharp) r += 2 * JAG * PULL * env * tremble(i, now);
-          pts.push([m.cx + r * Math.cos(t), m.cy + r * Math.sin(t), sharp]);
+          else if (fray > 0) r += FRAY * fray * (hash(i, 21) - 0.62 + 0.3 * tremble(i + 500, now));
+          pts.push([m.cx + r * Math.cos(t), m.cy + r * Math.sin(t), sharp || fray > 0]);
         }
         n = pts.length;
         p = "M" + n2(pts[0][0]) + " " + n2(pts[0][1]);
@@ -672,9 +681,50 @@
         }
         g.restore();
       }
+      function chips(m, now) {
+        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 = 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;
+          else if (o > 0.6 && !c.gone && t && now - c.at2 > 500 && m.dust.length < MAXDUST) {
+            c.gone = true;
+            c.at2 = now;
+            dx = C + t.x - x;
+            dy = C + t.y - y;
+            l = Math.hypot(dx, dy) || 1;
+            m.dust.push({
+              x,
+              y,
+              vx: dx / l * 10,
+              vy: dy / l * 10,
+              hx: x,
+              hy: y,
+              s: c.s,
+              k: 1,
+              age: 0,
+              life: 0.7 + Math.random() * 0.6,
+              back: false,
+              spin: Math.random() < 0.5 ? -1 : 1,
+              c: Math.random() < 0.35 ? 190 : 255
+            });
+          }
+        });
+      }
       function draw(m, now) {
         var s = m.box.width / 40, dpr = Math.min(2, devicePixelRatio || 1), size = Math.round((40 + 2 * ROOM) * s * dpr), f = crack(m), g = m.g;
         m.rim.setAttribute("d", rimPath(m, now));
+        chips(m, now);
         m.grad.setAttribute("cx", n2(m.cx));
         m.grad.setAttribute("cy", n2(m.cy));
         m.stops[0].setAttribute("offset", (f[0] / 40).toFixed(4));
@@ -741,6 +791,24 @@
         cv.className = "mag-dust";
         cv.setAttribute("aria-hidden", "true");
         el.insertBefore(cv, icon);
+        var mask = svg.querySelector("mask"), holes = [], k, q;
+        for (k = 0; mask && k < CHIPS; k++) {
+          q = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+          q.setAttribute("fill", "#000");
+          q.setAttribute("width", 0);
+          q.setAttribute("height", 0);
+          mask.appendChild(q);
+          holes.push({
+            el: q,
+            a: (k + 0.8 * hash(k, 11)) / CHIPS * 2 * Math.PI,
+            s: 0.9 + 1.5 * hash(k, 12),
+            o: 0.2 + 1.1 * (hash(k, 13) - 0.5),
+            at: 0.08 + 0.72 * hash(k, 14),
+            open: 0,
+            gone: false,
+            at2: -1e9
+          });
+        }
         el.__mag = {
           el,
           rim: svg.querySelector(".mag-rim"),
@@ -750,6 +818,7 @@
           cv,
           g: cv.getContext("2d"),
           dust: [],
+          chips: holes,
           acc: 0,
           pace: 0,
           lp: null,

package/dist/magnet.js

@@ -8,8 +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 tip cracks into shards and voxels break off and fly to the pointer. Let go,
-// and the rim springs back with a wobble while 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 () {
@@ -18,6 +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 = 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)
@@ -45,18 +47,26 @@ 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 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) * 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
+  // 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 = clamp((Math.abs(m.d) + 3 * m.heat) / PULL, 0, 1), i, t, r, env, sharp, n, p, a, b, c, e;
+    var pts = [], strain = strainOf(m), i, t, r, env, sharp, fray, n, p, a, b, c, e;
     for (i = 0; i < N; i++) {
       t = i / N * 2 * Math.PI;
       r = radius(m, t);
       env = bell(wrap(t - m.a), 0.6) * strain;
       sharp = env > 0.12;
-      if (sharp && i % 3) continue;
+      fray = sharp ? 0 : clamp((damage(m, t) - 0.15) / 0.85, 0, 1);
+      if ((sharp && i % 3) || (fray > 0 && i % 2)) continue;
       if (sharp) r += 2 * JAG * PULL * env * tremble(i, now);
-      pts.push([m.cx + r * Math.cos(t), m.cy + r * Math.sin(t), sharp]);
+      else if (fray > 0) r += FRAY * fray * (hash(i, 21) - 0.62 + 0.3 * tremble(i + 500, now));   // each facet keeps its own dent (mostly worn in), and shivers a little
+      pts.push([m.cx + r * Math.cos(t), m.cy + r * Math.sin(t), sharp || fray > 0]);
     }
     n = pts.length;
     p = 'M' + n2(pts[0][0]) + ' ' + n2(pts[0][1]);
@@ -201,9 +211,34 @@ function engine() {
     g.restore();
   }
 
+  // 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, 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 = 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;
+      else if (o > 0.6 && !c.gone && t && now - c.at2 > 500 && m.dust.length < MAXDUST) {
+        c.gone = true; c.at2 = now;
+        dx = C + t.x - x; dy = C + t.y - y; l = Math.hypot(dx, dy) || 1;
+        m.dust.push({ x: x, y: y, vx: dx / l * 10, vy: dy / l * 10, hx: x, hy: y, s: c.s, k: 1, age: 0, life: 0.7 + Math.random() * 0.6,
+          back: false, spin: Math.random() < 0.5 ? -1 : 1, c: Math.random() < 0.35 ? 190 : 255 });
+      }
+    });
+  }
+
   function draw(m, now) {
     var s = m.box.width / 40, dpr = Math.min(2, devicePixelRatio || 1), size = Math.round((40 + 2 * ROOM) * s * dpr), f = crack(m), g = m.g;
     m.rim.setAttribute('d', rimPath(m, now));
+    chips(m, now);
     // the drawn rim gives way at the crack line, where the shards take over
     m.grad.setAttribute('cx', n2(m.cx)); m.grad.setAttribute('cy', n2(m.cy));
     m.stops[0].setAttribute('offset', (f[0] / 40).toFixed(4));
@@ -261,8 +296,18 @@ function engine() {
     cv.className = 'mag-dust';
     cv.setAttribute('aria-hidden', 'true');
     el.insertBefore(cv, icon);
+    // 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++) {
+      q = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      q.setAttribute('fill', '#000'); q.setAttribute('width', 0); q.setAttribute('height', 0);
+      mask.appendChild(q);
+      holes.push({ el: q, a: (k + 0.8 * hash(k, 11)) / CHIPS * 2 * Math.PI, s: 0.9 + 1.5 * hash(k, 12), o: 0.2 + 1.1 * (hash(k, 13) - 0.5),
+        at: 0.08 + 0.72 * hash(k, 14), open: 0, gone: false, at2: -1e9 });
+    }
     el.__mag = { el: el, rim: svg.querySelector('.mag-rim'), grad: svg.querySelector('radialGradient'), stops: svg.querySelectorAll('radialGradient stop'),
-      icon: icon, cv: cv, g: cv.getContext('2d'), dust: [], acc: 0, pace: 0, lp: null, ghost: null,
+      icon: icon, cv: cv, g: cv.getContext('2d'), dust: [], chips: holes, acc: 0, pace: 0, lp: null, ghost: null,
       d: 0, v: 0, a: -Math.PI / 2, heat: 0, cx: C, cy: C, ix: 0, iy: 0, t: null, still: true };
     mags.push(el.__mag);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "craft-library",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart and a magnetic icon, for React or plain HTML",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,7 +27,8 @@
     }
   },
   "devDependencies": {
-    "esbuild": "0.24.0"
+    "esbuild": "0.24.0",
+    "playwright-core": "^1.61.1"
   },
   "scripts": {
     "build": "node build.mjs",