@raex-ui/thread-unravel 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    value: number;
+    size: number;
+}
+declare function ThreadUnravel({ value, size }: Props): react_jsx_runtime.JSX.Element;
+
+export { ThreadUnravel };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    value: number;
+    size: number;
+}
+declare function ThreadUnravel({ value, size }: Props): react_jsx_runtime.JSX.Element;
+
+export { ThreadUnravel };

package/dist/index.js

@@ -0,0 +1,96 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ThreadUnravel: () => ThreadUnravel
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/thread-unravel.tsx
+var import_react = require("react");
+var import_framer_motion = require("framer-motion");
+
+// src/digit-paths.ts
+var DIGIT_STROKE_PATHS = {
+  0: "M32,8 L48,8 C54,8 56,14 56,20 L56,76 C56,82 54,88 48,88 L16,88 C10,88 8,82 8,76 L8,20 C8,14 10,8 16,8 L32,8",
+  1: "M20,20 L32,8 L32,88 M22,88 L42,88",
+  2: "M8,20 C8,14 10,8 16,8 L48,8 C54,8 56,14 56,20 L56,40 C56,46 54,48 48,48 L16,48 C10,48 8,54 8,60 L8,76 C8,82 8,88 8,88 L56,88",
+  3: "M8,16 L48,8 C54,8 56,14 56,20 L56,36 C56,42 54,44 48,44 L28,44 L48,44 C54,44 56,50 56,56 L56,76 C56,82 54,88 48,88 L16,88 C10,88 8,82 8,80",
+  4: "M8,8 L8,48 L56,48 M44,8 L44,88",
+  5: "M56,8 L8,8 L8,44 L48,44 C54,44 56,50 56,56 L56,76 C56,82 54,88 48,88 L16,88 C10,88 8,82 8,76",
+  6: "M48,8 L16,8 C10,8 8,14 8,20 L8,76 C8,82 10,88 16,88 L48,88 C54,88 56,82 56,76 L56,52 C56,46 54,44 48,44 L8,44",
+  7: "M8,8 L56,8 L28,88",
+  8: "M32,44 L16,44 C10,44 8,38 8,32 L8,20 C8,14 10,8 16,8 L48,8 C54,8 56,14 56,20 L56,32 C56,38 54,44 48,44 L32,44 L16,44 C10,44 8,50 8,56 L8,76 C8,82 10,88 16,88 L48,88 C54,88 56,82 56,76 L56,56 C56,50 54,44 48,44",
+  9: "M8,76 L48,88 C54,88 56,82 56,76 L56,20 C56,14 54,8 48,8 L16,8 C10,8 8,14 8,20 L8,44 C8,50 10,52 16,52 L56,52"
+};
+
+// src/thread-unravel.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ThreadUnravel({ value, size }) {
+  const width = size;
+  const height = size * 1.5;
+  const [displayPath, setDisplayPath] = (0, import_react.useState)(DIGIT_STROKE_PATHS[value]);
+  const prevValue = (0, import_react.useRef)(value);
+  const progress = (0, import_framer_motion.useMotionValue)(1);
+  const pathRef = (0, import_react.useRef)(null);
+  const [pathLength, setPathLength] = (0, import_react.useState)(300);
+  (0, import_react.useEffect)(() => {
+    if (pathRef.current) {
+      setPathLength(pathRef.current.getTotalLength());
+    }
+  }, [displayPath]);
+  (0, import_react.useEffect)(() => {
+    if (prevValue.current === value) return;
+    prevValue.current = value;
+    (0, import_framer_motion.animate)(progress, 0, {
+      duration: 0.25,
+      ease: "easeIn",
+      onComplete: () => {
+        setDisplayPath(DIGIT_STROKE_PATHS[value]);
+        progress.set(0);
+        (0, import_framer_motion.animate)(progress, 1, {
+          duration: 0.35,
+          ease: "easeOut"
+        });
+      }
+    });
+  }, [value, progress]);
+  const dashOffset = (0, import_framer_motion.useTransform)(progress, [0, 1], [pathLength, 0]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width, height, viewBox: "0 0 64 96", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.path,
+    {
+      ref: pathRef,
+      d: displayPath,
+      fill: "none",
+      stroke: "#38bdf8",
+      strokeWidth: 4,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: pathLength,
+      style: { strokeDashoffset: dashOffset }
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThreadUnravel
+});

package/dist/index.mjs

@@ -0,0 +1,70 @@
+"use client";
+
+// src/thread-unravel.tsx
+import { useEffect, useRef, useState } from "react";
+import { motion, useMotionValue, useTransform, animate } from "framer-motion";
+
+// src/digit-paths.ts
+var DIGIT_STROKE_PATHS = {
+  0: "M32,8 L48,8 C54,8 56,14 56,20 L56,76 C56,82 54,88 48,88 L16,88 C10,88 8,82 8,76 L8,20 C8,14 10,8 16,8 L32,8",
+  1: "M20,20 L32,8 L32,88 M22,88 L42,88",
+  2: "M8,20 C8,14 10,8 16,8 L48,8 C54,8 56,14 56,20 L56,40 C56,46 54,48 48,48 L16,48 C10,48 8,54 8,60 L8,76 C8,82 8,88 8,88 L56,88",
+  3: "M8,16 L48,8 C54,8 56,14 56,20 L56,36 C56,42 54,44 48,44 L28,44 L48,44 C54,44 56,50 56,56 L56,76 C56,82 54,88 48,88 L16,88 C10,88 8,82 8,80",
+  4: "M8,8 L8,48 L56,48 M44,8 L44,88",
+  5: "M56,8 L8,8 L8,44 L48,44 C54,44 56,50 56,56 L56,76 C56,82 54,88 48,88 L16,88 C10,88 8,82 8,76",
+  6: "M48,8 L16,8 C10,8 8,14 8,20 L8,76 C8,82 10,88 16,88 L48,88 C54,88 56,82 56,76 L56,52 C56,46 54,44 48,44 L8,44",
+  7: "M8,8 L56,8 L28,88",
+  8: "M32,44 L16,44 C10,44 8,38 8,32 L8,20 C8,14 10,8 16,8 L48,8 C54,8 56,14 56,20 L56,32 C56,38 54,44 48,44 L32,44 L16,44 C10,44 8,50 8,56 L8,76 C8,82 10,88 16,88 L48,88 C54,88 56,82 56,76 L56,56 C56,50 54,44 48,44",
+  9: "M8,76 L48,88 C54,88 56,82 56,76 L56,20 C56,14 54,8 48,8 L16,8 C10,8 8,14 8,20 L8,44 C8,50 10,52 16,52 L56,52"
+};
+
+// src/thread-unravel.tsx
+import { jsx } from "react/jsx-runtime";
+function ThreadUnravel({ value, size }) {
+  const width = size;
+  const height = size * 1.5;
+  const [displayPath, setDisplayPath] = useState(DIGIT_STROKE_PATHS[value]);
+  const prevValue = useRef(value);
+  const progress = useMotionValue(1);
+  const pathRef = useRef(null);
+  const [pathLength, setPathLength] = useState(300);
+  useEffect(() => {
+    if (pathRef.current) {
+      setPathLength(pathRef.current.getTotalLength());
+    }
+  }, [displayPath]);
+  useEffect(() => {
+    if (prevValue.current === value) return;
+    prevValue.current = value;
+    animate(progress, 0, {
+      duration: 0.25,
+      ease: "easeIn",
+      onComplete: () => {
+        setDisplayPath(DIGIT_STROKE_PATHS[value]);
+        progress.set(0);
+        animate(progress, 1, {
+          duration: 0.35,
+          ease: "easeOut"
+        });
+      }
+    });
+  }, [value, progress]);
+  const dashOffset = useTransform(progress, [0, 1], [pathLength, 0]);
+  return /* @__PURE__ */ jsx("svg", { width, height, viewBox: "0 0 64 96", children: /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      ref: pathRef,
+      d: displayPath,
+      fill: "none",
+      stroke: "#38bdf8",
+      strokeWidth: 4,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: pathLength,
+      style: { strokeDashoffset: dashOffset }
+    }
+  ) });
+}
+export {
+  ThreadUnravel
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@raex-ui/thread-unravel",
+  "version": "0.1.0",
+  "description": "Single continuous stroke path that unravels and restitches to form each digit. Animated digit transition component for React.",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "license": "MIT",
+  "keywords": ["react", "animation", "digit", "transition", "framer-motion", "svg", "thread"],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "framer-motion": ">=10"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5",
+    "react": "^19",
+    "@types/react": "^19"
+  },
+  "scripts": {
+    "build": "tsup"
+  }
+}