craft-library 0.1.1 → 0.1.2

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, the whole ring frays out of round and loses 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 = 2.6, CHIPS = 64;
       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) * (0.5 + 0.5 * bell(wrap(t - m.a), 1.3));
+      }
       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;
+        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;
+          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 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.
 // 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 = 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 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 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
+  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)); }
+
   // 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 out of round, in short crooked facets, around the rest
   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,33 @@ 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
+  function chips(m, now) {
+    var t = m.t;
+    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);
+      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 +295,18 @@ 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()).
+    // 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.2",
   "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",