craft-library 0.1.2 → 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, 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.
+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';

package/dist/craft.js

@@ -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));

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,6 +1,6 @@
 {
   "name": "craft-library",
-  "version": "0.1.2",
+  "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",