hys-ui 0.4.0 → 0.6.0

package/dist/components/HysAnimatedNumber/animation/paths.js

@@ -0,0 +1,165 @@
+import { clamp as g, mix as u } from "./paint.js";
+const d = [
+  [
+    [0, -0.39],
+    [0.18, -0.35],
+    [0.25, -0.18],
+    [0.25, 0.2],
+    [0.16, 0.38],
+    [0, 0.42],
+    [-0.18, 0.36],
+    [-0.25, 0.17],
+    [-0.25, -0.19],
+    [-0.16, -0.35],
+    [0, -0.39]
+  ],
+  [
+    [-0.17, -0.25],
+    [0.04, -0.39],
+    [0.04, 0.39],
+    [-0.19, 0.39],
+    [0.23, 0.39]
+  ],
+  [
+    [-0.22, -0.24],
+    [-0.14, -0.36],
+    [0.04, -0.39],
+    [0.22, -0.3],
+    [0.23, -0.16],
+    [0.12, -0.01],
+    [-0.22, 0.33],
+    [-0.23, 0.39],
+    [0.24, 0.39]
+  ],
+  [
+    [-0.22, -0.33],
+    [0.06, -0.39],
+    [0.23, -0.29],
+    [0.22, -0.15],
+    [0.05, -0.02],
+    [-0.05, 0],
+    [0.17, 0.03],
+    [0.25, 0.16],
+    [0.22, 0.32],
+    [0.05, 0.41],
+    [-0.18, 0.36],
+    [-0.25, 0.27]
+  ],
+  [
+    [0.16, 0.41],
+    [0.16, -0.39],
+    [-0.26, 0.15],
+    [0.27, 0.15]
+  ],
+  [
+    [0.23, -0.39],
+    [-0.2, -0.39],
+    [-0.22, -0.02],
+    [0.04, -0.06],
+    [0.21, 0.03],
+    [0.25, 0.2],
+    [0.19, 0.36],
+    [0, 0.42],
+    [-0.2, 0.34],
+    [-0.24, 0.23]
+  ],
+  [
+    [0.21, -0.37],
+    [0.01, -0.4],
+    [-0.17, -0.25],
+    [-0.24, -0.02],
+    [-0.24, 0.24],
+    [-0.13, 0.38],
+    [0.04, 0.42],
+    [0.21, 0.32],
+    [0.24, 0.16],
+    [0.16, 0.01],
+    [-0.02, -0.05],
+    [-0.23, 0.05]
+  ],
+  [
+    [-0.25, -0.39],
+    [0.25, -0.39],
+    [0.09, -0.14],
+    [-0.03, 0.12],
+    [-0.11, 0.41]
+  ],
+  [
+    [0, -0.02],
+    [-0.21, -0.16],
+    [-0.21, -0.29],
+    [-0.06, -0.39],
+    [0.12, -0.37],
+    [0.23, -0.24],
+    [0.16, -0.1],
+    [0, -0.02],
+    [-0.2, 0.09],
+    [-0.25, 0.26],
+    [-0.12, 0.39],
+    [0.1, 0.4],
+    [0.24, 0.29],
+    [0.24, 0.13],
+    [0, -0.02]
+  ],
+  [
+    [0.24, -0.06],
+    [0.13, 0.05],
+    [-0.06, 0.05],
+    [-0.22, -0.04],
+    [-0.24, -0.22],
+    [-0.15, -0.36],
+    [0.04, -0.4],
+    [0.2, -0.31],
+    [0.24, -0.13],
+    [0.22, 0.15],
+    [0.11, 0.35],
+    [-0.08, 0.42],
+    [-0.2, 0.34]
+  ]
+];
+function x(n) {
+  const l = [0];
+  for (let t = 1; t < n.length; t++)
+    l.push(
+      l[t - 1] + Math.hypot(n[t][0] - n[t - 1][0], n[t][1] - n[t - 1][1])
+    );
+  let r = 1;
+  return Array.from({ length: 35 }, (t, e) => {
+    const c = l[l.length - 1] * e / 34;
+    for (; c > l[r] && r < n.length - 1; ) r++;
+    const i = (c - l[r - 1]) / (l[r] - l[r - 1]);
+    return [
+      u(n[r - 1][0], n[r][0], i),
+      u(n[r - 1][1], n[r][1], i)
+    ];
+  });
+}
+const m = d.map(x);
+function P(n) {
+  return m[n] ?? m[0];
+}
+function v(n, l, r = 1, t = {}) {
+  if (r <= 0) return;
+  const { ctx: e, size: c, color: i } = n, h = Math.min(
+    l.length,
+    Math.ceil(g(r) * (l.length - 1)) + 1
+  );
+  e.save(), e.strokeStyle = e.fillStyle = t.color ?? i, e.lineWidth = (t.width ?? 0.11) * c, e.lineCap = e.lineJoin = "round", e.globalAlpha *= t.alpha ?? 1, e.beginPath(), e.moveTo(l[0][0] * c, l[0][1] * c);
+  for (let o = 1; o < h; o++) {
+    const [a, f] = l[o];
+    if (t.smooth && o + 1 < h) {
+      const s = l[o + 1];
+      e.quadraticCurveTo(
+        a * c,
+        f * c,
+        (a + s[0]) * c / 2,
+        (f + s[1]) * c / 2
+      );
+    } else e.lineTo(a * c, f * c);
+  }
+  t.close && e.closePath(), t.fill ? e.fill() : e.stroke(), e.restore();
+}
+export {
+  P as digitPath,
+  v as tracePath
+};

package/dist/components/HysAnimatedNumber/animation/physics.js

@@ -0,0 +1,66 @@
+import { glyph as y, smooth as g, wave as r } from "./paint.js";
+function b(a) {
+  return a < 1 / 2.75 ? 7.5625 * a ** 2 : a < 2 / 2.75 ? 7.5625 * (a - 1.5 / 2.75) ** 2 + 0.75 : a < 2.5 / 2.75 ? 7.5625 * (a - 2.25 / 2.75) ** 2 + 0.9375 : 7.5625 * (a - 2.625 / 2.75) ** 2 + 0.984375;
+}
+function p(a, e) {
+  const { p: t, strength: n, from: l, to: M, index: i } = a, h = 1 - t, s = Math.sin(2 * Math.PI * (a.plan.cycles ?? 3) * t) * h * n, o = r(t) * n, x = (Math.exp(-(((t - 0.3) * 12) ** 2)) + 0.55 * Math.exp(-(((t - 0.47) * 15) ** 2))) * n, c = [
+    { y: -(1 - t ** 2) * 0.82 * n },
+    { y: -(1 - t ** 3) * 0.98 * n, angle: -0.2 * h * n },
+    {
+      y: -(1 - b(t)) * 0.86 * n,
+      sx: 1 + 0.15 * s,
+      sy: 1 - 0.16 * s
+    },
+    { sy: 1 + s * 0.66, sx: 1 - s * 0.23 },
+    { sx: 1 + s * 0.48, sy: 1 - s * 0.48 },
+    {
+      x: s * 0.14,
+      sx: 1 + s * 0.28,
+      sy: 1 - s * 0.25,
+      angle: 0.12 * s
+    },
+    { sx: 1 + 0.35 * o, sy: 1 - 0.34 * o, y: 0.15 * o },
+    {
+      x: 0.24 * s,
+      y: 0.13 * Math.abs(s),
+      angle: 0.9 * s
+    },
+    { x: 0.28 * s, angle: 0.3 * s },
+    { x: -(h ** 3) * 0.95 * n, blur: 0.05 * h },
+    {
+      x: h ** 2 * 0.55 * n - s * 0.2,
+      sx: 1 + Math.abs(s) * 0.16
+    },
+    { y: Math.sin(t * Math.PI * 4 - i * 0.72) * 0.36 * o },
+    {
+      sx: 1 + 0.24 * Math.abs(s),
+      sy: 1 + 0.24 * Math.abs(s)
+    },
+    { sx: 1 + 0.25 * o, sy: 1 + 0.25 * o, alpha: 0.7 + 0.3 * t },
+    { sx: 1 + 0.25 * x, sy: 1 + 0.25 * x, glow: 0.16 * x },
+    {
+      x: 0.11 * Math.sin(18 * Math.PI * t) * o,
+      y: 0.08 * Math.cos(24 * Math.PI * t) * o
+    },
+    {
+      x: 0.12 * s,
+      sy: 1 - 0.34 * Math.abs(s),
+      glow: 0.22 * h * n
+    },
+    {
+      y: -Math.sin(Math.PI * g(t)) * 0.76 * n + h * 0.14,
+      x: -0.42 * h,
+      angle: -0.46 * h
+    },
+    {
+      angle: h * Math.PI * 2,
+      sx: 0.25 + 0.75 * t + 0.23 * o,
+      sy: 0.25 + 0.75 * t + 0.23 * o
+    },
+    { y: s * 0.38, x: h * 0.65 * n, angle: s * 0.42 }
+  ];
+  y(a, l, { alpha: h ** 3 }), y(a, M, { alpha: Math.min(1, t * 4 + 0.2), ...c[e] });
+}
+export {
+  p as paintPhysics
+};

package/dist/components/HysAnimatedNumber/animation/render.js

@@ -0,0 +1,89 @@
+import { glyph as e, wave as p } from "./paint.js";
+import { paintRoll as i } from "./rolling.js";
+import { paintSpatial as o } from "./spatial.js";
+import { paintMorph as d } from "./morph.js";
+import { paintReveal as c } from "./reveal.js";
+import { paintPhysics as s } from "./physics.js";
+import { paintParticles as y } from "./particles.js";
+import { paintDigital as l } from "./digital.js";
+import { paintSpecial as b, paintSequence as w, paintData as v } from "./scenarios.js";
+const S = {
+  rolling: i,
+  spatial: o,
+  morph: d,
+  reveal: c,
+  physics: s,
+  particles: y,
+  digital: l,
+  data: v,
+  sequence: w,
+  special: b
+};
+function j(t) {
+  const { plan: a, digit: n, from: u, to: h, p: r, strength: g } = t;
+  if (a.entry) {
+    S[a.entry.category](t, a.entry.variant);
+    return;
+  }
+  switch (a.effect) {
+    case "odometer":
+      i(t, 19);
+      return;
+    case "wheel":
+      i(t, 6);
+      return;
+    case "slot":
+      i(t, 10);
+      return;
+    case "random":
+      l(t, 9);
+      return;
+    case "scramble":
+      l(t, 6);
+      return;
+    case "flip":
+      o(t, 14);
+      return;
+    case "appear":
+      c(t, 0);
+      return;
+    case "disappear":
+      e(t, u, { alpha: 1 - r, y: -0.3 * r }), e(t, h, { alpha: r });
+      return;
+    case "fade":
+      e(t, u, { alpha: 1 - r }), e(t, h, { alpha: r });
+      return;
+    case "scale":
+      o(t, 10);
+      return;
+    case "bounce":
+      s(t, 2);
+      return;
+    case "spring":
+      s(t, 3);
+      return;
+    case "slide":
+      c(t, 7);
+      return;
+    case "blur":
+      e(t, n, { blur: (1 - r) * 0.16 * g });
+      return;
+    case "flash":
+      e(t, n, { alpha: 1 - 0.3 * p(r) });
+      return;
+    case "highlight":
+      e(t, n, { glow: 0.22 * p(r), color: t.accent });
+      return;
+    case "gradient":
+      e(t, n, {
+        color: r < 0.5 ? t.accent : t.color,
+        glow: 0.1 * p(r)
+      });
+      return;
+    default:
+      e(t, n);
+  }
+}
+export {
+  j as paintNumberAnimation
+};

package/dist/components/HysAnimatedNumber/animation/reveal.js

@@ -0,0 +1,125 @@
+import { glyph as r, noise as T, clamp as g, rectangle as b, smooth as R, localProgress as k } from "./paint.js";
+import { tracePath as v, digitPath as z } from "./paths.js";
+function j(c, h) {
+  const { p: u, from: d, to: i, index: P, count: w, size: n, width: x, strength: p, ctx: s } = c, t = x / n * 0.54;
+  let e = R(u);
+  [0, 10, 18, 19].includes(h) && (e = k(e, P, w, h === 10 ? 0.8 : 0.58)), r(c, d, { alpha: (1 - u) ** 2 * 0.55 });
+  const o = (l, a, y, M, I = () => r(c, i)) => b(c, l, a, y, M, I);
+  switch (h) {
+    case 0:
+      r(c, i, { alpha: e, y: (1 - e) * 0.18 });
+      return;
+    case 1: {
+      s.save(), s.beginPath(), s.ellipse(0, 0, t * e * 1.5 * n, 0.85 * e * n, 0, 0, 2 * Math.PI), s.clip(), r(c, i), s.restore();
+      return;
+    }
+    case 2:
+      o(-t, -0.6, t * 2 * e, 1.2);
+      return;
+    case 3:
+      o(-t, -0.6, t * 2, 1.2 * e), o(
+        -t,
+        -0.6 + e * 1.2,
+        t * 2,
+        0.05,
+        () => r(c, i, { color: c.accent, glow: 0.11 })
+      );
+      return;
+    case 4: {
+      s.save(), s.beginPath(), s.moveTo(-t * n, -0.62 * n), s.lineTo((-t + t * 4 * e) * n, -0.62 * n), s.lineTo((-t + t * 4 * e - t * 0.8) * n, 0.62 * n), s.lineTo(-t * n, 0.62 * n), s.clip(), r(c, i), s.restore();
+      return;
+    }
+    case 5:
+      o(-t * e, -0.6, 2 * t * e, 1.2);
+      return;
+    case 6:
+      o(-t, -0.6, t * e, 1.2), o(t * (1 - e), -0.6, t * e, 1.2);
+      return;
+    case 7:
+      o(
+        -t,
+        -0.6,
+        t * 2,
+        1.2,
+        () => r(c, i, { y: (1 - e) * p })
+      );
+      return;
+    case 8:
+      o(
+        -t,
+        -0.6,
+        t * 2,
+        1.2,
+        () => r(c, i, { y: (e - 1) * p })
+      );
+      return;
+    case 9:
+      for (let l = 0; l < 5; l++) o(-t, -0.6 + l * 0.24, t * 2, 0.24 * e);
+      return;
+    case 10:
+      e > 0.25 && r(c, i);
+      return;
+    case 11:
+    case 12:
+      v(c, z(c.toIndex), e, {
+        smooth: h === 11,
+        width: h === 11 ? 0.085 : 0.065,
+        color: c.accent
+      }), r(c, i, { alpha: g((e - 0.78) / 0.22) });
+      return;
+    case 13:
+      r(c, i, { stroke: 0.02 }), o(-t, 0.6 - e * 1.2, t * 2, e * 1.2);
+      return;
+    case 14:
+      o(-t, 0.6 - e * 1.2, t * 2, e * 1.2);
+      return;
+    case 15:
+      for (let l = 0; l < 12; l++) {
+        const a = g(
+          e + 0.13 * Math.sin(l / 2 + u * 10) * Math.sin(u * Math.PI)
+        );
+        o(-t + l * t / 6, 0.6 - a * 1.2, t / 6 + 5e-3, a * 1.2);
+      }
+      return;
+    case 16:
+      r(c, i, { alpha: 0.55 + e * 0.45 }), o(
+        -t + 2 * t * e,
+        -0.6,
+        0.09,
+        1.2,
+        () => r(c, i, { color: c.accent, glow: 0.2 })
+      );
+      return;
+    case 17:
+      o(-t, -0.6, e * t * 2, 1.2), s.save(), s.globalAlpha *= Math.sin(Math.PI * u) * 0.52, s.fillStyle = c.accent, s.fillRect(
+        (-t + t * 2 * e) * n,
+        -0.6 * n,
+        0.022 * n,
+        1.2 * n
+      ), s.restore();
+      return;
+    case 18:
+      for (let l = 0; l < 6; l++) {
+        const a = (T(c.seed, l) - 0.5) * (1 - e) * p;
+        o(
+          -t,
+          -0.6 + l * 0.2,
+          t * 2,
+          0.2,
+          () => r(c, i, { x: a, alpha: e })
+        );
+      }
+      return;
+    default:
+      o(
+        -t,
+        -0.6,
+        t * 2 * e,
+        1.2,
+        () => r(c, i, { y: 0.4 * (1 - e), alpha: e })
+      );
+  }
+}
+export {
+  j as paintReveal
+};

package/dist/components/HysAnimatedNumber/animation/rolling.js

@@ -0,0 +1,66 @@
+import { rectangle as W, glyph as z, noise as j, rollingGlyph as k, smooth as h, localProgress as P, clamp as q, wave as B } from "./paint.js";
+function F(c, t) {
+  const { p: o, index: n, count: a, fromIndex: p, toIndex: I, ctx: s, size: M, width: r, strength: A } = c, f = I < p ? -1 : 1, G = ((I - p) * f + 10) % 10, R = [
+    h(o),
+    o,
+    h(o),
+    P(o, n, a, 0.34),
+    o,
+    1 - (1 - o) ** 4,
+    o ** 3,
+    1 - (1 - o) ** 3,
+    1 - (1 - o) ** 2 * Math.cos(o * Math.PI * 1.8),
+    1 - Math.exp(-5 * o) * Math.cos(o * Math.PI * 5) * (1 - o),
+    o,
+    (Math.floor(o * 3) + h(o * 3 % 1)) / 3,
+    Math.floor(o * 8) / 8,
+    Math.floor(o * 5) / 5,
+    o ** (0.65 + n / Math.max(1, a - 1) * 1.45),
+    h(o),
+    P(o, n % 2, 2, 0.36),
+    P(o, n, a, 0.42),
+    h(o),
+    o
+  ][t] ?? o;
+  let x = (Math.round(
+    c.plan.cycles ?? (t === 10 ? 4 : [12, 13, 19].includes(t) ? 0 : 1)
+  ) * 10 + G) * f * R;
+  t === 13 && (x = Math.trunc(x / 2) * 2);
+  const y = Math.floor(x), w = x - y, g = t === 18 ? h(q((w - 0.65) / 0.35)) : w, d = c.axis === "horizontal" || t === 2, S = d ? r / M : 0.88, T = (l) => (l - g) * S, b = (l) => {
+    const e = T(l), i = t === 0 || t === 1, u = i ? Math.max(0.18, Math.cos((l - g) * 1.22)) : 1;
+    z(c, k(c, p + y + l), {
+      x: d ? e : t === 4 ? Math.sin(e * 4 + o * 10) * 0.22 * B(o) * A : 0,
+      y: d ? 0 : e,
+      sx: d ? u : 1,
+      sy: d ? 1 : u,
+      angle: t === 1 ? e * 0.45 : t === 4 ? e * 0.55 : 0,
+      alpha: i ? 0.45 + 0.55 * u : 1,
+      blur: t === 5 ? 0.045 * (1 - o) : 0
+    });
+  };
+  if (t === 1) {
+    s.save(), s.rotate(o * Math.PI * 2), s.strokeStyle = c.accent, s.globalAlpha *= 0.38, s.lineWidth = 0.035 * M, s.beginPath();
+    for (let l = 0; l <= 32; l++) {
+      const e = l / 32 * 2 * Math.PI, i = M * (l % 4 < 2 ? 0.56 : 0.47);
+      s.lineTo(Math.cos(e) * i, Math.sin(e) * i);
+    }
+    s.closePath(), s.stroke(), s.restore();
+  }
+  W(
+    c,
+    -r / M * 0.52,
+    -0.55,
+    r / M * 1.04,
+    1.1,
+    () => {
+      b(0), [12, 13].includes(t) || b(1);
+    }
+  ), (t === 19 || t === 18 || t === 11) && z(c, k(c, p + y), {
+    color: c.accent,
+    alpha: 0.7 * (t === 19 ? (1 - g) ** 8 : g ** 6),
+    glow: 0.07 + 0.02 * j(c.seed, n)
+  });
+}
+export {
+  F as paintRoll
+};