handwritten-highlights/build/index.mjs

Beautiful & animated text highliter for your Next/React project. Enhance your text with colorful visuals and animations that resembles real writing.

"use client";
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{createContext as i,useRef as n,useEffect as r,useMemo as h,useContext as a,useId as l,useState as o}from"react";const s=i(null),c=({children:t})=>{const i=n(new Set);return r(()=>{const e=()=>{for(const e of i.current??[])e()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),e(s.Provider,{value:{registerCallback:e=>(i.current.add(e),()=>i.current.delete(e))},children:t})};const d=e("defs",{children:t("filter",{id:"highlightFilter",x:"0",y:"0",width:"100%",height:"100%",children:[e("feTurbulence",{type:"fractalNoise",baseFrequency:"0.02",numOctaves:"2",result:"noise",seed:"1"}),e("feDisplacementMap",{in:"SourceGraphic",in2:"noise",scale:"7"})]})}),u=e("defs",{children:t("filter",{id:"highlightFilter",x:"0",y:"0",width:"100%",height:"100%",children:[e("feTurbulence",{type:"fractalNoise",baseFrequency:"0.1 0.05",numOctaves:"5",result:"noise",seed:"2"}),e("feDisplacementMap",{in:"SourceGraphic",in2:"noise",scale:"10",xChannelSelector:"R",yChannelSelector:"G"})]})}),g=t("defs",{children:[t("filter",{id:"highlightFilter",x:"-20%",y:"-20%",width:"140%",height:"140%",children:[e("feTurbulence",{type:"fractalNoise",baseFrequency:"0.01 0.05",numOctaves:"1",result:"turbulence"}),e("feDisplacementMap",{in:"SourceGraphic",in2:"turbulence",scale:"3"})]}),e("clipPath",{id:"highlightShape",children:e("path",{d:"M0,14 C10,5 40,5 60,8 C75,10 90,5 100,6 L100,20 L0,20 Z"})})]}),f=({children:i,highlightVariant:c="2",highlightColor:f="hsla(120, 60%, 50%, 0.3)",animationDirection:p="left",animationDuration:m=400,animationOffset:w=0,animationEffect:y="none"})=>{const v=a(s),k=`highlight-${l().replace(/:/g,"-")}`,{variantComponent:b}=function(e){const t=h(()=>"random"===e?(Math.floor(3*Math.random())+1).toString():e,[e]);return{variantComponent:h(()=>{switch(t){case"1":return d;case"2":return u;case"3":return g;default:return null}},[t])}}(c),C=n(null),[M,S]=o();return r(()=>{if(!v)return;const e=()=>{if(!C.current)return;const e=Array.from(C.current.getClientRects());S(e)};e();const t=v.registerCallback(e);return()=>{t()}},[v]),t("span",{ref:C,className:k,style:{position:"relative"},children:[i,M?.map((i,n)=>t("svg",{viewBox:`0 0 100 ${i.height}`,preserveAspectRatio:"none",style:{pointerEvents:"none",position:"absolute",top:-(M[0].top-i.top),left:-(M[0].left-i.left),width:i.width,height:i.height,zIndex:1},xmlns:"http://www.w3.org/2000/svg",children:[b,e("rect",{x:"0",y:"0",width:"none"!=y?0:100,height:"20",fill:f,clipPath:"url(#highlightShape)",filter:"url(#highlightFilter)",children:"none"!=y&&e("animate",{attributeName:"width",values:"left"==p?"0;100":"100;0",dur:`${m}ms`,begin:w*(n+1)+m*(n>0?1:0)+"ms",repeatCount:"1",...$[y],fill:"freeze"})})]},n))]})};const p=e=>`M0 ${e.height-1}Q1.966 ${e.height+1} 8.533 ${e.height-1} T${e.width/3-1} ${e.height-1.2} ${e.width/2+10} ${e.height-1} ${e.width-e.width/5} ${e.height-2} ${e.width-5} ${e.height} ${e.width} ${e.height+2}`,m=e=>`M0 ${e.height+4} ${e.width/2} ${e.height} ${e.width+4} ${e.height-.65} ${e.width/9} ${e.height+1} ${e.width/6} ${e.height+2} ${e.width+5} ${e.height+3}`,w=({children:i,highlightVariant:c="2",highlightColor:d="hsla(120, 60%, 50%, 0.5)",animationDirection:u="left",animationDuration:g=400,animationOffset:f=0,animationEffect:w="none"})=>{const y=a(s),v=`highlight-${l().replace(/:/g,"-")}`,{variantPath:k}=function(e){const t=h(()=>"random"===e?(Math.floor(3*Math.random())+1).toString():e,[e]);return{variantPath:h(()=>{switch(t){case"1":default:return p;case"2":return m}},[t])}}(c),b=n(null),[C,M]=o();return r(()=>{if(!y)return;const e=()=>{if(!b.current)return;const e=Array.from(b.current.getClientRects());M(e)};e();const t=y.registerCallback(e);return()=>{t()}},[y]),t("span",{ref:b,className:v,style:{position:"relative"},children:[i,C?.map((t,i)=>e("svg",{viewBox:`0 0 ${t.width} ${t.height+4}`,preserveAspectRatio:"none",style:{pointerEvents:"none",position:"absolute",top:2-(C[0].top-t.top),left:-(C[0].left-t.left),width:t.width,height:t.height,zIndex:1},xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:k(t),fill:"transparent",stroke:d,strokeWidth:"1",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:3*t.width,strokeDashoffset:"none"!==w?3*t.width:0,children:"none"!=w&&e("animate",{attributeName:"stroke-dashoffset",from:"left"===u?3*t.width:0,to:"left"===u?0:3*t.width,dur:`${g}ms`,begin:f*(i+1)+g*(i>0?1:0)+"ms",repeatCount:"1",...$[w],fill:"freeze"})})},i))]})},$={none:{},ease:{keyTimes:"0;1",keySplines:"0.42 0 0.58 1",calcMode:"spline"},"ease-in":{keyTimes:"0;1",keySplines:"0.42 0 1 1",calcMode:"spline"},"ease-out":{keyTimes:"0;1",keySplines:"0 0 0.58 1",calcMode:"spline"},"ease-in-out":{keyTimes:"0;1",keySplines:"0.42 0 0.58 1",calcMode:"spline"}};export{$ as AnimationSpline,f as HighlightMarker,c as HighlightProvider,w as HighlightUnderline};
//# sourceMappingURL=index.mjs.map