handwritten-highlights/build/index.js

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

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