not-a-spinner 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -301,9 +301,11 @@ function getPhrasesForConfig(messages, locale) {
 function useTextRotation({
   phrases: inputPhrases,
   interval = 3e3,
-  animationDuration = 400
+  animationDuration = 400,
+  manual = false
 }) {
   const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  const [cycleId, setCycleId] = (0, import_react.useState)(0);
   const [isExiting, setIsExiting] = (0, import_react.useState)(false);
   const [isEntering, setIsEntering] = (0, import_react.useState)(false);
   const poolRef = (0, import_react.useRef)(inputPhrases);
@@ -314,10 +316,15 @@ function useTextRotation({
     if (!initializedRef.current) {
       poolRef.current = shufflePhrases(inputPhrases);
       initializedRef.current = true;
-      setCurrentIndex(0);
+      setCycleId((c) => c + 1);
     }
   }, []);
+  const inputChangedRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
+    if (!inputChangedRef.current) {
+      inputChangedRef.current = true;
+      return;
+    }
     poolRef.current = shufflePhrases(inputPhrases);
     setCurrentIndex(0);
   }, [inputPhrases]);
@@ -330,8 +337,20 @@ function useTextRotation({
       poolRef.current = combined;
     }
   }, []);
+  const advancePhrase = (0, import_react.useCallback)(() => {
+    setCurrentIndex((prev) => {
+      const next = prev + 1;
+      if (next >= poolRef.current.length) {
+        poolRef.current = shufflePhrases(poolRef.current);
+        return 0;
+      }
+      return next;
+    });
+    setCycleId((c) => c + 1);
+  }, []);
   (0, import_react.useEffect)(() => {
     mountedRef.current = true;
+    if (manual) return;
     if (poolRef.current.length <= 1) return;
     timerRef.current = setInterval(() => {
       if (!mountedRef.current) return;
@@ -361,14 +380,16 @@ function useTextRotation({
         timerRef.current = null;
       }
     };
-  }, [interval, animationDuration]);
+  }, [interval, animationDuration, manual]);
   const pool = poolRef.current;
   const phrase = pool.length > 0 ? pool[currentIndex % pool.length] : "";
   return {
     currentPhrase: phrase,
     isExiting,
     isEntering,
-    appendPhrases
+    appendPhrases,
+    advancePhrase,
+    cycleId
   };
 }
 
@@ -409,9 +430,10 @@ var NotASpinner = React.forwardRef(
       () => getPhrasesForConfig(messages, locale),
       [messages, locale]
     );
-    const { currentPhrase, isExiting, isEntering, appendPhrases } = useTextRotation({
+    const { currentPhrase, isExiting, isEntering, appendPhrases, advancePhrase, cycleId } = useTextRotation({
       phrases: resolvedPhrases,
-      interval
+      interval,
+      manual: animation === "typewriter"
     });
     React.useEffect(() => {
       if (!fetchPhrase) return;
@@ -445,70 +467,91 @@ var NotASpinner = React.forwardRef(
           ref,
           className: cn(notASpinnerVariants({ size, animation }), className),
           currentPhrase,
+          cycleId,
           interval,
           dots,
+          onEraseComplete: advancePhrase,
           ...props
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,
         className: cn(notASpinnerVariants({ size, animation }), className),
         ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: getAnimationClass(), children: currentPhrase }) }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: getAnimationClass(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: currentPhrase }),
           dots && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-dots", children: "..." })
-        ]
+        ] })
       }
     );
   }
 );
 NotASpinner.displayName = "NotASpinner";
-var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval, dots, ...props }, ref) => {
+var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, cycleId, interval, dots, onEraseComplete, ...props }, ref) => {
   const [displayedChars, setDisplayedChars] = React.useState(0);
+  const [displayedDots, setDisplayedDots] = React.useState(0);
   const [phase, setPhase] = React.useState(
     "typing"
   );
   const phraseRef = React.useRef(currentPhrase);
+  const eraseCalledRef = React.useRef(false);
   React.useEffect(() => {
     phraseRef.current = currentPhrase;
     setDisplayedChars(0);
+    setDisplayedDots(0);
     setPhase("typing");
-  }, [currentPhrase]);
+    eraseCalledRef.current = false;
+  }, [cycleId]);
   React.useEffect(() => {
     const totalChars = phraseRef.current.length;
     if (totalChars === 0) return;
     const typingSpeed = 50;
     const erasingSpeed = 30;
+    const dotsTypingDuration = 3 * typingSpeed;
+    const dotsDismissDuration = 3 * erasingSpeed;
     const typingDuration = totalChars * typingSpeed;
     const erasingDuration = totalChars * erasingSpeed;
-    const holdDuration = Math.max(interval - typingDuration - erasingDuration, 500);
+    const holdDuration = Math.max(interval - typingDuration - dotsTypingDuration - dotsDismissDuration - erasingDuration, 500);
     let timer;
     if (phase === "typing") {
       if (displayedChars < totalChars) {
         timer = setTimeout(() => setDisplayedChars((c) => c + 1), typingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("typing-dots"), 0);
+      }
+    } else if (phase === "typing-dots") {
+      if (displayedDots < 3) {
+        timer = setTimeout(() => setDisplayedDots((d) => d + 1), typingSpeed);
       } else {
         timer = setTimeout(() => setPhase("holding"), 0);
       }
     } else if (phase === "holding") {
-      timer = setTimeout(() => setPhase("erasing"), holdDuration);
+      timer = setTimeout(() => setPhase("erasing-dots"), holdDuration);
+    } else if (phase === "erasing-dots") {
+      if (displayedDots > 0) {
+        timer = setTimeout(() => setDisplayedDots((d) => d - 1), erasingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("erasing"), 0);
+      }
     } else if (phase === "erasing") {
       if (displayedChars > 0) {
         timer = setTimeout(() => setDisplayedChars((c) => c - 1), erasingSpeed);
+      } else if (!eraseCalledRef.current) {
+        eraseCalledRef.current = true;
+        onEraseComplete();
       }
     }
     return () => clearTimeout(timer);
-  }, [phase, displayedChars, interval]);
+  }, [phase, displayedChars, displayedDots, interval, onEraseComplete]);
   const displayedText = phraseRef.current.slice(0, displayedChars);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-      displayedText,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-cursor" })
-    ] }) }),
-    dots && displayedChars > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-dots", children: "..." })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+    displayedText,
+    dots && displayedChars > 0 && displayedDots > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-dots", children: "...".slice(0, displayedDots) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-cursor" })
+  ] }) }) });
 });
 TypewriterRenderer.displayName = "TypewriterRenderer";
 

package/dist/index.d.cts

@@ -24,14 +24,17 @@ interface UseTextRotationOptions {
     phrases: string[];
     interval?: number;
     animationDuration?: number;
+    manual?: boolean;
 }
 interface UseTextRotationReturn {
     currentPhrase: string;
     isExiting: boolean;
     isEntering: boolean;
     appendPhrases: (newPhrases: string[]) => void;
+    advancePhrase: () => void;
+    cycleId: number;
 }
-declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, }: UseTextRotationOptions): UseTextRotationReturn;
+declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, manual, }: UseTextRotationOptions): UseTextRotationReturn;
 
 declare function createAnthropicFetcher(endpoint: string, locale?: string): () => Promise<string>;
 declare function createOpenAIFetcher(endpoint: string, locale?: string): () => Promise<string>;

package/dist/index.d.ts

@@ -24,14 +24,17 @@ interface UseTextRotationOptions {
     phrases: string[];
     interval?: number;
     animationDuration?: number;
+    manual?: boolean;
 }
 interface UseTextRotationReturn {
     currentPhrase: string;
     isExiting: boolean;
     isEntering: boolean;
     appendPhrases: (newPhrases: string[]) => void;
+    advancePhrase: () => void;
+    cycleId: number;
 }
-declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, }: UseTextRotationOptions): UseTextRotationReturn;
+declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, manual, }: UseTextRotationOptions): UseTextRotationReturn;
 
 declare function createAnthropicFetcher(endpoint: string, locale?: string): () => Promise<string>;
 declare function createOpenAIFetcher(endpoint: string, locale?: string): () => Promise<string>;

package/dist/index.mjs

@@ -257,9 +257,11 @@ function getPhrasesForConfig(messages, locale) {
 function useTextRotation({
   phrases: inputPhrases,
   interval = 3e3,
-  animationDuration = 400
+  animationDuration = 400,
+  manual = false
 }) {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [cycleId, setCycleId] = useState(0);
   const [isExiting, setIsExiting] = useState(false);
   const [isEntering, setIsEntering] = useState(false);
   const poolRef = useRef(inputPhrases);
@@ -270,10 +272,15 @@ function useTextRotation({
     if (!initializedRef.current) {
       poolRef.current = shufflePhrases(inputPhrases);
       initializedRef.current = true;
-      setCurrentIndex(0);
+      setCycleId((c) => c + 1);
     }
   }, []);
+  const inputChangedRef = useRef(false);
   useEffect(() => {
+    if (!inputChangedRef.current) {
+      inputChangedRef.current = true;
+      return;
+    }
     poolRef.current = shufflePhrases(inputPhrases);
     setCurrentIndex(0);
   }, [inputPhrases]);
@@ -286,8 +293,20 @@ function useTextRotation({
       poolRef.current = combined;
     }
   }, []);
+  const advancePhrase = useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev + 1;
+      if (next >= poolRef.current.length) {
+        poolRef.current = shufflePhrases(poolRef.current);
+        return 0;
+      }
+      return next;
+    });
+    setCycleId((c) => c + 1);
+  }, []);
   useEffect(() => {
     mountedRef.current = true;
+    if (manual) return;
     if (poolRef.current.length <= 1) return;
     timerRef.current = setInterval(() => {
       if (!mountedRef.current) return;
@@ -317,14 +336,16 @@ function useTextRotation({
         timerRef.current = null;
       }
     };
-  }, [interval, animationDuration]);
+  }, [interval, animationDuration, manual]);
   const pool = poolRef.current;
   const phrase = pool.length > 0 ? pool[currentIndex % pool.length] : "";
   return {
     currentPhrase: phrase,
     isExiting,
     isEntering,
-    appendPhrases
+    appendPhrases,
+    advancePhrase,
+    cycleId
   };
 }
 
@@ -365,9 +386,10 @@ var NotASpinner = React.forwardRef(
       () => getPhrasesForConfig(messages, locale),
       [messages, locale]
     );
-    const { currentPhrase, isExiting, isEntering, appendPhrases } = useTextRotation({
+    const { currentPhrase, isExiting, isEntering, appendPhrases, advancePhrase, cycleId } = useTextRotation({
       phrases: resolvedPhrases,
-      interval
+      interval,
+      manual: animation === "typewriter"
     });
     React.useEffect(() => {
       if (!fetchPhrase) return;
@@ -401,70 +423,91 @@ var NotASpinner = React.forwardRef(
           ref,
           className: cn(notASpinnerVariants({ size, animation }), className),
           currentPhrase,
+          cycleId,
           interval,
           dots,
+          onEraseComplete: advancePhrase,
           ...props
         }
       );
     }
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(notASpinnerVariants({ size, animation }), className),
         ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsx("span", { className: getAnimationClass(), children: currentPhrase }) }),
+        children: /* @__PURE__ */ jsxs("span", { className: getAnimationClass(), children: [
+          /* @__PURE__ */ jsx("span", { children: currentPhrase }),
           dots && /* @__PURE__ */ jsx("span", { className: "nas-dots", children: "..." })
-        ]
+        ] })
       }
     );
   }
 );
 NotASpinner.displayName = "NotASpinner";
-var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval, dots, ...props }, ref) => {
+var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, cycleId, interval, dots, onEraseComplete, ...props }, ref) => {
   const [displayedChars, setDisplayedChars] = React.useState(0);
+  const [displayedDots, setDisplayedDots] = React.useState(0);
   const [phase, setPhase] = React.useState(
     "typing"
   );
   const phraseRef = React.useRef(currentPhrase);
+  const eraseCalledRef = React.useRef(false);
   React.useEffect(() => {
     phraseRef.current = currentPhrase;
     setDisplayedChars(0);
+    setDisplayedDots(0);
     setPhase("typing");
-  }, [currentPhrase]);
+    eraseCalledRef.current = false;
+  }, [cycleId]);
   React.useEffect(() => {
     const totalChars = phraseRef.current.length;
     if (totalChars === 0) return;
     const typingSpeed = 50;
     const erasingSpeed = 30;
+    const dotsTypingDuration = 3 * typingSpeed;
+    const dotsDismissDuration = 3 * erasingSpeed;
     const typingDuration = totalChars * typingSpeed;
     const erasingDuration = totalChars * erasingSpeed;
-    const holdDuration = Math.max(interval - typingDuration - erasingDuration, 500);
+    const holdDuration = Math.max(interval - typingDuration - dotsTypingDuration - dotsDismissDuration - erasingDuration, 500);
     let timer;
     if (phase === "typing") {
       if (displayedChars < totalChars) {
         timer = setTimeout(() => setDisplayedChars((c) => c + 1), typingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("typing-dots"), 0);
+      }
+    } else if (phase === "typing-dots") {
+      if (displayedDots < 3) {
+        timer = setTimeout(() => setDisplayedDots((d) => d + 1), typingSpeed);
       } else {
         timer = setTimeout(() => setPhase("holding"), 0);
       }
     } else if (phase === "holding") {
-      timer = setTimeout(() => setPhase("erasing"), holdDuration);
+      timer = setTimeout(() => setPhase("erasing-dots"), holdDuration);
+    } else if (phase === "erasing-dots") {
+      if (displayedDots > 0) {
+        timer = setTimeout(() => setDisplayedDots((d) => d - 1), erasingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("erasing"), 0);
+      }
     } else if (phase === "erasing") {
       if (displayedChars > 0) {
         timer = setTimeout(() => setDisplayedChars((c) => c - 1), erasingSpeed);
+      } else if (!eraseCalledRef.current) {
+        eraseCalledRef.current = true;
+        onEraseComplete();
       }
     }
     return () => clearTimeout(timer);
-  }, [phase, displayedChars, interval]);
+  }, [phase, displayedChars, displayedDots, interval, onEraseComplete]);
   const displayedText = phraseRef.current.slice(0, displayedChars);
-  return /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsxs("span", { children: [
-      displayedText,
-      /* @__PURE__ */ jsx("span", { className: "nas-cursor" })
-    ] }) }),
-    dots && displayedChars > 0 && /* @__PURE__ */ jsx("span", { className: "nas-dots", children: "..." })
-  ] });
+  return /* @__PURE__ */ jsx("div", { ref, className, ...props, children: /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsxs("span", { children: [
+    displayedText,
+    dots && displayedChars > 0 && displayedDots > 0 && /* @__PURE__ */ jsx("span", { className: "nas-dots", children: "...".slice(0, displayedDots) }),
+    /* @__PURE__ */ jsx("span", { className: "nas-cursor" })
+  ] }) }) });
 });
 TypewriterRenderer.displayName = "TypewriterRenderer";
 

package/dist/styles.css

@@ -79,12 +79,6 @@
 /* Dots */
 .nas-dots {
   margin-left: 2px;
-  animation: nas-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes nas-pulse {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
 }
 
 /* Reduced motion */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-a-spinner",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Because modern AI doesn't spin, it thinks. Replace loading spinners with AI-style rotating thinking phrases.",
   "type": "module",
   "main": "./dist/index.cjs",