textimation 0.1.3 → 0.1.5

package/README.md

@@ -13,6 +13,19 @@ bun add textimation
 First, import the styles and the `AnimatedText` component:
 
 - You can use `.textimation-incorrectChar` to style the incorrect characters.
+- You can use `.textimation-correctChar` to style the correct characters.
+
+```css
+.textimation-correctChar {
+	transition: all 0.2s ease-in-out;
+	opacity: 1;
+}
+
+.textimation-incorrectChar {
+	transition: all 0.2s ease-in-out;
+	opacity: 0.2;
+}
+```
 
 ```tsx
 import 'textimation/styles.css';

package/dist/index.d.ts

@@ -1,9 +1,11 @@
+import { ElementType, ReactNode } from "react";
 interface TextimationProps {
 	text: string;
 	animationSpeed?: number;
 	className?: string;
 	keepCorrectChars?: boolean;
-	Comp?: React.ElementType;
+	Comp?: ElementType;
+	type: "random" | "incremental";
 }
-declare function Textimation({ text, animationSpeed, className, keepCorrectChars, Comp }: TextimationProps): React.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 b,useMemo as y,useRef as u,useState as N}from"react";import{useIntersectionObserver as v}from"usehooks-ts";function T(){return"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"[Math.floor(Math.random()*69)]}import{jsx as M,jsxs as k}from"react/jsx-runtime";function H({text:e,animationSpeed:r=50,className:c="",keepCorrectChars:n=!1,Comp:A="span"}){let{isIntersecting:h,ref:C}=v({threshold:0}),[l,m]=N("idle"),f=u(e.replace(/\s/g," ").replace(/\S/g," ").split("")),i=u(null),s=u(""),p=u(null),d=y(()=>{return h||l==="animating"},[h,l]);return b(()=>{if(!d)return;if(e===s.current)return;m("animating");let g=s.current,S=Math.max(g.length,e.length),a=Array.from({length:S},(t,o)=>{if(n&&g[o]===e[o])return-1;if(g.length===0&&e[o]===" ")return 1;return Math.max(5,Math.ceil(Math.random()*20))});function R(){if(a.every((t)=>t<0)){if(f.current=e.split(""),i.current)i.current.textContent=e;s.current=e,m("finished");return}for(let t=0;t<a.length;t++){if(a[t]===-1)continue;a[t]--}if(i.current)O(f.current,a,e),i.current.innerHTML=f.current.map((t,o)=>{if(t===e[o])return`<span>${t}</span>`;else return`<span class="textimation-incorrectChar">${t}</span>`}).join("");p.current=setTimeout(R,r)}return R(),()=>{if(m("idle"),s.current=e,p.current)clearTimeout(p.current)}},[e,r,n,d]),k(A,{ref:C,style:{position:"relative"},className:c,children:[l==="idle"&&M("span",{style:{position:"absolute",inset:0,opacity:0},children:e}),M("span",{ref:i})]})}function O(e,r,c){for(let n=0;n<r.length;n++)switch(r[n]){case-1:break;case 0:e[n]=c[n];break;default:e[n]=T();break}}export{H 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 u=Math.max(n.length,e.length);switch(i){case"incremental":return Array.from({length:u},(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:u},(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:u="span",type:m="random"}){let{isIntersecting:r,ref:L}=_({threshold:0}),[d,g]=v("idle"),f=p(e.replace(/\s/g," ").replace(/\S/g," ").split("")),c=p(null),h=p(""),S=p(null),M=b(()=>{return r||d==="animating"},[r,d]);return N(()=>{if(!M)return;if(e===h.current)return;g("animating");let E=h.current,l=I(e,E,i,m),T=!0;function R(){if(!c.current)return;if(l.every((t)=>t<0)){f.current=e.split(""),c.current.textContent=e,h.current=e,g("finished");return}for(let t=0;t<l.length;t++){if(l[t]===-1)continue;l[t]--}if(D(f.current,l,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],C=f.current[a];if(!C){s.remove();continue}if(s.innerText=C,C===e[a])s.classList.add("textimation-correctChar"),s.classList.remove("textimation-incorrectChar");else s.classList.add("textimation-incorrectChar"),s.classList.remove("textimation-correctChar")}}S.current=setTimeout(R,n)}return R(),()=>{if(g("idle"),h.current=e,S.current)clearTimeout(S.current)}},[m,e,n,i,M]),A(u,{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.3",
+  "version": "0.1.5",
   "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",
+    "@biomejs/biome": "^2.3.8",
+    "@types/bun": "^1.3.4",
+    "@types/react": "^19.2.7",
+    "bumpp": "^10.3.2",
     "bunup": "^0.16.10",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "simple-git-hooks": "^2.13.1",
     "typescript": "^5.9.3"
   },