@crievo/omni 0.1.3 → 0.1.5

package/studio/web/components/bencho/OneTimeCode.tsx

@@ -0,0 +1,374 @@
+/* Small cells and a caret. Digits rise into their cells; a right code draws the cells together until they fuse into one
+   capsule that says so, and a wrong one sends a shiver down the row and drains the digits out.
+   Ported from bencho.dev (MIT).
+
+   Cells and field are one: six real inputs break paste, autofill from the notification, backspace and screen readers,
+   so there is one invisible input over the row and the cells are drawn underneath it.
+   The merge is the goo's: the cells sit under a blur-and-threshold filter, far enough apart that it never bridges them.
+   Verifying slides them to the middle while a capsule grows out of the same point; as they close, the filter joins
+   them and what is left is one shape. Nobody draws the in-between, the filter decides when two things are close enough
+   to be one.
+   `answer` is a prop because a code nobody can know is not a demonstration: Accept and Reject are the two things the
+   component does with a full row. */
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Check } from "../icons";
+
+/* The goo: feGaussianBlur + feColorMatrix. The matrix multiplies alpha by `cut` and subtracts half of it, so alpha
+   below 0.5 lands on zero and everything above 0.536 is fully opaque; that hard edge fuses nearby shapes into one blob.
+   It must never touch text: glyph antialiasing lives below 0.5, so type under it loses its edges. The id comes from
+   useId (colons stripped, not legal in a url(#...) reference) because duplicate SVG ids collide instead of scoping. */
+function useGoo(blur = 7, cut = 28) {
+  const id = `bn-goo-${useId().replace(/:/g, "")}`;
+  const goo = (
+    <svg className="bn-liq-defs" aria-hidden="true" focusable="false">
+      <defs>
+        <filter id={id} x="-50%" y="-50%" width="200%" height="200%" colorInterpolationFilters="sRGB">
+          <feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="smear" />
+          <feColorMatrix
+            in="smear"
+            type="matrix"
+            values={`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${cut} ${-(cut / 2)}`}
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+  return { id, url: `url(#${id})`, goo };
+}
+
+/* Read once: a preference, not a live input. */
+const stillness = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/* how long a cell takes to swell and settle when a digit lands */
+const POP_MS = 260;
+const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v));
+const mix = (a: number, b: number, t: number) => a + (b - a) * t;
+const smooth = (a: number, b: number, v: number) => {
+  const u = clamp((v - a) / (b - a), 0, 1);
+  return u * u * (3 - 2 * u);
+};
+
+/* a cell, and the air between two */
+const W = 36;
+const H = 44;
+const G = 7;
+/* the capsule a right code becomes */
+const CAP = 128;
+/* The merge is a spring, not a tween: a spring a little under critical lets the capsule run past its size and come
+   back, stretching long and thin on the way out and settling round, which is what makes the fuse read as liquid rather
+   than as boxes sliding. Per frame at 60Hz, from a stiffness and a damping ratio. */
+const MERGE = (() => {
+  const k = 0.075;
+  const zeta = 0.42;
+  return { k, d: 1 - 2 * zeta * Math.sqrt(k) };
+})();
+const SHAKE_MS = 620;
+
+type Phase = "type" | "check" | "ok" | "no";
+
+export function OneTimeCode({
+  /* how many digits, 4 or 6 */
+  length = 4,
+  /* what a full row gets back */
+  answer = "Accept",
+  /* the cells' corner, px; the capsule wears the same one */
+  corner = 12,
+}: {
+  length?: number;
+  answer?: string;
+  corner?: number;
+} = {}) {
+  const n = length === 4 ? 4 : 6;
+  const r = clamp(corner, 0, H / 2);
+  const rowW = n * W + (n - 1) * G;
+  const still = stillness();
+
+  const [code, setCode] = useState("");
+  const [phase, setPhase] = useState<Phase>("type");
+  const [focus, setFocus] = useState(false);
+  const input = useRef<HTMLInputElement | null>(null);
+
+  /* moving parts, read by the loop */
+  const caret = useRef({ x: W / 2, v: 0 });
+  /* when each cell last took a digit, for the little swell */
+  const popAt = useRef<number[]>([]);
+  const merge = useRef({ m: 0, v: 0, to: 0 });
+  const shook = useRef(0);
+  const timers = useRef<number[]>([]);
+  const raf = useRef(0);
+  const [, setTick] = useState(0);
+  const live = useRef({ code, n });
+  live.current = { code, n };
+
+  const later = (fn: () => void, ms: number) => {
+    timers.current.push(window.setTimeout(fn, ms));
+  };
+
+  /* The one loop: runs while something moves and stops itself after, so a row nobody is typing into costs nothing. */
+  const wake = () => {
+    if (raf.current) return;
+    let prev = 0;
+    const tick = (t: number) => {
+      const dt = prev ? clamp((t - prev) / 16.67, 0, 2.5) : 1;
+      prev = t;
+      let busy = false;
+      const { code: c, n: count } = live.current;
+
+      /* the caret, on a spring with a little give */
+      const target = Math.min(c.length, count - 1) * (W + G) + W / 2;
+      const k = caret.current;
+      if (still) {
+        k.x = target;
+        k.v = 0;
+      } else {
+        k.v += (target - k.x) * 0.2 * dt;
+        k.v *= 0.62 ** dt;
+        k.x += k.v * dt;
+        if (Math.abs(target - k.x) < 0.05 && Math.abs(k.v) < 0.05) {
+          k.x = target;
+          k.v = 0;
+        } else busy = true;
+      }
+
+      /* the merge, sprung */
+      const mg = merge.current;
+      if (mg.m !== mg.to || mg.v !== 0) {
+        if (still) {
+          mg.m = mg.to;
+          mg.v = 0;
+        } else {
+          mg.v += (mg.to - mg.m) * MERGE.k * dt;
+          mg.v *= MERGE.d ** dt;
+          mg.m += mg.v * dt;
+          if (Math.abs(mg.to - mg.m) < 0.0008 && Math.abs(mg.v) < 0.0008) {
+            mg.m = mg.to;
+            mg.v = 0;
+          } else busy = true;
+        }
+      }
+
+      if (t - shook.current < SHAKE_MS + 200) busy = true;
+
+      setTick(x => x + 1);
+      /* a cell still swelling from a digit keeps the loop alive */
+      if (popAt.current.some(at => t - at < POP_MS)) busy = true;
+      raf.current = busy ? requestAnimationFrame(tick) : 0;
+    };
+    raf.current = requestAnimationFrame(tick);
+  };
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(raf.current);
+      raf.current = 0;
+      for (const id of timers.current) window.clearTimeout(id);
+    },
+    [],
+  );
+  // biome-ignore lint/correctness/useExhaustiveDependencies: wake is a closure over refs; it reruns on these three only
+  useEffect(() => {
+    wake();
+  }, [code, n, phase]);
+
+  const fuse = (to: 0 | 1) => {
+    merge.current = { ...merge.current, to };
+    wake();
+  };
+
+  /* a row that has been answered, and a length knob moving under it, both start over */
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only a change of length resets the row
+  useEffect(() => {
+    setCode("");
+    setPhase("type");
+    merge.current = { m: 0, v: 0, to: 0 };
+  }, [n]);
+
+  const onChange = (raw: string) => {
+    if (phase !== "type") return;
+    const next = raw.replace(/\D/g, "").slice(0, n);
+    /* each new digit swells its cell; a paste runs along the row */
+    if (!still && next.length > code.length) {
+      const t0 = performance.now();
+      for (let i = code.length; i < next.length; i++) popAt.current[i] = t0 + (i - code.length) * 45;
+      wake();
+    }
+    setCode(next);
+    if (next.length < n) return;
+    /* full: a beat of checking, then the answer */
+    setPhase("check");
+    later(
+      () => {
+        if (answer !== "Reject") {
+          setPhase("ok");
+          fuse(1);
+          input.current?.blur();
+        } else {
+          setPhase("no");
+          shook.current = performance.now();
+          wake();
+          later(
+            () => {
+              setCode("");
+              setPhase("type");
+            },
+            SHAKE_MS + n * 45 + 160,
+          );
+        }
+      },
+      still ? 0 : 420,
+    );
+  };
+
+  /* pressing the capsule splits it back into empty cells */
+  const reopen = () => {
+    if (phase !== "ok") return;
+    setCode("");
+    setPhase("type");
+    fuse(0);
+    input.current?.focus();
+  };
+
+  /* where everything is this frame */
+  const now = performance.now();
+  /* the raw spring runs past 0 and 1; the cells' travel is clamped to it, and only the capsule is allowed to take the
+     overshoot, as a stretch */
+  const raw = merge.current.m;
+  const m = clamp(raw, 0, 1);
+  const em = m;
+  const home = (i: number) => i * (W + G);
+  const mid = (rowW - W) / 2;
+  const since = now - shook.current;
+  const shaking = phase === "no" && since < SHAKE_MS && !still;
+  const shake = (i: number) =>
+    shaking ? 5 * Math.exp(-since / 190) * Math.sin((since / 1000) * Math.PI * 2 * 10 + i * 0.55) : 0;
+  const cellX = (i: number) => mix(home(i), mid, em) + shake(i);
+  /* a digit arriving: the cell that takes it swells a touch and settles, up and back on one half-sine, four per cent
+     at the top. An acknowledgement, not an event. */
+  const pop = (i: number) => {
+    const at = popAt.current[i];
+    if (at === undefined) return 1;
+    const u = (now - at) / POP_MS;
+    return u > 0 && u < 1 ? 1 + 0.04 * Math.sin(Math.PI * u) : 1;
+  };
+  /* checking: a soft wave of breath through the cells */
+  const breath = (i: number) => {
+    if (phase !== "check" || still) return pop(i);
+    const u = ((now % 900) / 900) * (n + 2) - i;
+    return 1 - 0.07 * (u > 0 && u < 2 ? Math.sin((u / 2) * Math.PI) : 0);
+  };
+  const over = raw - 1;
+  /* long and thin past its size, round again as it settles: width and height trade, so it reads as one soft thing */
+  const capW = CAP * smooth(0.3, 1, m) * (1 + Math.max(-0.12, over) * 0.9);
+  const capSy = 1 - Math.max(-0.12, over) * 0.55;
+  /* cells round off into the capsule's pill as they close in, so the two shapes agree by the time the goo joins them */
+  const cellR = mix(r, H / 2, smooth(0.15, 0.7, m));
+  const typing = phase === "type" && focus;
+
+  const { url, goo } = useGoo(3, 24);
+
+  return (
+    <div className="bn-otp" data-phase={phase}>
+      <div className="bn-otp-row" style={{ width: rowW, height: H }}>
+        {/* the cells and the capsule: one colour, under the filter */}
+        <div className="bn-otp-goo" aria-hidden="true" style={{ filter: still ? undefined : url }}>
+          {Array.from({ length: n }, (_, i) => (
+            <span
+              // biome-ignore lint/suspicious/noArrayIndexKey: the cells are positional and never reorder
+              key={i}
+              className="bn-otp-cell"
+              style={{
+                width: W,
+                borderRadius: cellR,
+                transform: `translateX(${cellX(i).toFixed(2)}px) scale(${breath(i).toFixed(3)})`,
+              }}
+            />
+          ))}
+          {capW > 0.5 && (
+            <span
+              className="bn-otp-cell"
+              /* always a full pill: the capsule is a result, not a cell, and wears the rounded shape whatever the
+                 Corner knob says the cells are */
+              style={{
+                width: capW,
+                borderRadius: H / 2,
+                transform: `translateX(${((rowW - capW) / 2).toFixed(2)}px) scaleY(${capSy.toFixed(3)})`,
+              }}
+            />
+          )}
+        </div>
+
+        {/* the digits; an empty cell is just the cell */}
+        {Array.from({ length: n }, (_, i) => {
+          const d = code[i];
+          const x = cellX(i);
+          /* a wrong code drains right to left */
+          const out = phase === "no" && !still ? smooth(0, 1, (since - 300 - (n - 1 - i) * 45) / 220) : 0;
+          return (
+            <span
+              // biome-ignore lint/suspicious/noArrayIndexKey: the slots are positional and never reorder
+              key={i}
+              className="bn-otp-slot"
+              style={{
+                width: W,
+                transform: `translateX(${x.toFixed(2)}px)`,
+                opacity: 1 - smooth(0, 0.45, m),
+              }}
+            >
+              {d && (
+                <span
+                  key={`${i}-${d}`}
+                  className="bn-otp-digit"
+                  style={{ translate: `0 ${(out * 8).toFixed(2)}px`, opacity: 1 - out }}
+                >
+                  {d}
+                </span>
+              )}
+            </span>
+          );
+        })}
+
+        {/* the caret, stretched by its own speed */}
+        <i
+          className="bn-otp-caret"
+          /* not until the cells have come apart again, or it stands in an empty slot the capsule is still on */
+          data-on={typing && code.length < n && m < 0.08}
+          style={{
+            transform: `translateX(${(caret.current.x - 1).toFixed(2)}px) scaleX(${(1 + Math.min(5, Math.abs(caret.current.v) * 0.9)).toFixed(3)})`,
+          }}
+        />
+
+        {/* what the capsule says */}
+        <span
+          className="bn-otp-ok"
+          style={{ opacity: smooth(0.72, 1, m), scale: `${mix(0.92, 1, smooth(0.72, 1, m))}` }}
+        >
+          <Check size={14} weight="bold" aria-hidden="true" />
+          Verificado
+        </span>
+
+        <input
+          ref={input}
+          className="bn-otp-field"
+          value={code}
+          onChange={e => onChange(e.target.value)}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          onPointerDown={e => {
+            if (phase === "ok") {
+              e.preventDefault();
+              reopen();
+            }
+          }}
+          inputMode="numeric"
+          autoComplete="one-time-code"
+          maxLength={n}
+          aria-label={phase === "ok" ? "Verificado. Toque para digitar outro código" : `Código de ${n} dígitos`}
+          spellCheck={false}
+        />
+      </div>
+      {goo}
+    </div>
+  );
+}