textimation 0.1.4 → 0.1.6

package/dist/index.d.ts

@@ -5,6 +5,7 @@ interface TextimationProps {
 	className?: string;
 	keepCorrectChars?: boolean;
 	Comp?: ElementType;
+	type: "random" | "incremental";
 }
-declare function Textimation({ text, animationSpeed, className, keepCorrectChars, Comp }: TextimationProps): ReactNode;
+declare function Textimation({ text, animationSpeed, className, keepCorrectChars, Comp, type }: TextimationProps): ReactNode;
 export { Textimation };

package/dist/index.js

@@ -1,2 +1,2 @@
-import{useEffect as N,useMemo as b,useRef as u,useState as v}from"react";import{useIntersectionObserver as x}from"usehooks-ts";function M(){return"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"[Math.floor(Math.random()*69)]}import{jsx as y,jsxs as P}from"react/jsx-runtime";var H={position:"relative"},_={position:"absolute",inset:0,opacity:0};function I({text:e,animationSpeed:a=50,className:m="",keepCorrectChars:n=!1,Comp:A="span"}){let{isIntersecting:T,ref:L}=x({threshold:0}),[f,p]=v("idle"),c=u(e.replace(/\s/g," ").replace(/\S/g," ").split("")),o=u(null),l=u(""),h=u(null),C=b(()=>{return T||f==="animating"},[T,f]);return N(()=>{if(!C)return;if(e===l.current)return;p("animating");let d=l.current,E=Math.max(d.length,e.length),s=Array.from({length:E},(t,r)=>{if(n&&d[r]===e[r])return-1;if(d.length===0&&e[r]===" ")return 1;return Math.max(5,Math.ceil(Math.random()*20))}),S=!0;function R(){if(!o.current)return;if(s.every((t)=>t<0)){c.current=e.split(""),o.current.textContent=e,l.current=e,p("finished");return}for(let t=0;t<s.length;t++){if(s[t]===-1)continue;s[t]--}if(O(c.current,s,e),S)S=!1,o.current.innerHTML=c.current.map((t,r)=>{if(t===void 0)return"";else if(t===e[r])return`<span class="textimation-correctChar">${t}</span>`;else return`<span class="textimation-incorrectChar">${t}</span>`}).join("");else{let t=o.current.children;for(let r=0;r<t.length;r++){let i=t[r],g=c.current[r];if(!g){i.remove();continue}if(i.innerText=g,g===e[r])i.classList.add("textimation-correctChar"),i.classList.remove("textimation-incorrectChar");else i.classList.add("textimation-incorrectChar"),i.classList.remove("textimation-correctChar")}}h.current=setTimeout(R,a)}return R(),()=>{if(p("idle"),l.current=e,h.current)clearTimeout(h.current)}},[e,a,n,C]),P(A,{ref:L,style:H,className:m,children:[f==="idle"&&y("span",{style:_,children:e}),y("span",{ref:o})]})}function O(e,a,m){for(let n=0;n<a.length;n++)switch(a[n]){case-1:break;case 0:e[n]=m[n];break;default:e[n]=M();break}}export{I as Textimation};
+import{useEffect as N,useMemo as b,useRef as p,useState as v}from"react";import{useIntersectionObserver as _}from"usehooks-ts";function y(){return"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"[Math.floor(Math.random()*69)]}import{jsx as A}from"react/jsx-runtime";var H={position:"relative"},P={opacity:0};function I(e,n,o,i){let l=Math.max(n.length,e.length);switch(i){case"incremental":return Array.from({length:l},(m,r)=>{if(o&&n[r]===e[r])return-1;if(n.length===0&&e[r]===" ")return 1;if(n.length>0&&e[r]===void 0)return Math.max(8,Math.ceil(Math.random()*20));return Math.ceil(Math.random()*3+r/2)});default:return Array.from({length:l},(m,r)=>{if(o&&n[r]===e[r])return-1;if(n.length===0&&e[r]===" ")return 1;return Math.max(8,Math.ceil(Math.random()*20))})}}function O({text:e,animationSpeed:n=50,className:o="",keepCorrectChars:i=!1,Comp:l="span",type:m="random"}){let{isIntersecting:r,ref:L}=_({threshold:0}),[d,C]=v("idle"),f=p(e.replace(/\s/g," ").replace(/\S/g," ").split("")),c=p(null),h=p(""),g=p(null),M=b(()=>{return r||d==="animating"},[r,d]);return N(()=>{if(!M)return;if(e===h.current)return;C("animating");let E=h.current,u=I(e,E,i,m),T=!0;function R(){if(!c.current)return;if(u.every((t)=>t<0)){f.current=e.split(""),c.current.textContent=e,h.current=e,C("finished");return}for(let t=0;t<u.length;t++){if(u[t]===-1)continue;u[t]--}if(D(f.current,u,e),T)T=!1,c.current.innerHTML=f.current.map((t,a)=>{if(t===void 0)return"";else if(t===e[a])return`<span class="textimation-correctChar">${t}</span>`;else return`<span class="textimation-incorrectChar">${t}</span>`}).join("");else{let t=c.current.children;for(let a=0;a<t.length;a++){let s=t[a],S=f.current[a];if(!S){s.remove();continue}if(s.innerText=S,S===e[a])s.classList.add("textimation-correctChar"),s.classList.remove("textimation-incorrectChar");else s.classList.add("textimation-incorrectChar"),s.classList.remove("textimation-correctChar")}}g.current=setTimeout(R,n)}return R(),()=>{if(h.current=e,g.current)clearTimeout(g.current)}},[m,e,n,i,M]),A(l,{ref:L,style:H,className:o,children:A("span",{ref:c,style:d==="idle"?P:void 0,children:e})})}function D(e,n,o){for(let i=0;i<n.length;i++)switch(n[i]){case-1:break;case 0:e[i]=o[i];break;default:e[i]=y();break}}export{O as Textimation};
 // built with love

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textimation",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Animated Text",
   "homepage": "https://github.com/TheeKia/textimation#readme",
   "bugs": {
@@ -27,13 +27,13 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.7",
-    "@types/bun": "^1.3.3",
-    "@types/react": "^19.2.6",
-    "bumpp": "^10.3.1",
-    "bunup": "^0.16.10",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "@biomejs/biome": "^2.3.10",
+    "@types/bun": "^1.3.5",
+    "@types/react": "^19.2.7",
+    "bumpp": "^10.3.2",
+    "bunup": "^0.16.11",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "simple-git-hooks": "^2.13.1",
     "typescript": "^5.9.3"
   },