@appletosolutions/reactbits
Version:
A comprehensive collection of beautiful, performant React animation components including bounce effects, click sparks, star borders, scroll-triggered animations, and fade transitions.
1 lines • 381 kB
JavaScript
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import React,{useRef as i,useEffect as r,useState as o,useMemo as a,useLayoutEffect as s,forwardRef as c,useCallback as l,Suspense as u,Children as h,cloneElement as d,isValidElement as m,useImperativeHandle as p}from"react";import f,{gsap as v}from"gsap";import{ScrollTrigger as g}from"gsap/ScrollTrigger";import{SplitText as x}from"gsap/SplitText";import{motion as y,useAnimation as w,useMotionValue as b,AnimatePresence as M,useScroll as P,useVelocity as S,useSpring as C,useTransform as E,useAnimationFrame as z,useInView as _,useMotionValueEvent as T,animate as A}from"framer-motion";import R from"matter-js";import*as I from"three";import{Color as L,Object3D as F,Vector2 as k,MathUtils as D,Vector3 as N,ACESFilmicToneMapping as B,Raycaster as U,Plane as O,Clock as V,InstancedMesh as X,PMREMGenerator as q,SphereGeometry as Y,MeshPhysicalMaterial as $,ShaderChunk as W,PerspectiveCamera as H,Scene as G,WebGLRenderer as j,SRGBColorSpace as Z,AmbientLight as K,PointLight as Q}from"three";import{ScrambleTextPlugin as J}from"gsap/ScrambleTextPlugin";import{Canvas as ee,useThree as te,invalidate as ne,useLoader as ie,useFrame as re}from"@react-three/fiber";import{shaderMaterial as oe,useTrailTexture as ae,useGLTF as se,Environment as ce,ContactShadows as le,useFBX as ue,useProgress as he,Html as de,OrbitControls as me,PerspectiveCamera as pe}from"@react-three/drei";import{Renderer as fe,Transform as ve,Vec3 as ge,Polyline as xe,Color as ye,Camera as we,Triangle as be,Program as Me,Mesh as Pe,Plane as Se,Texture as Ce,Geometry as Ee}from"ogl";import{OBJLoader as ze}from"three-stdlib";import{FiFileText as _e,FiCircle as Te,FiLayers as Ae,FiLayout as Re,FiCode as Ie}from"react-icons/fi";import{Observer as Le}from"gsap/Observer";import{Icon as Fe}from"@chakra-ui/react";import{RiVolumeDownFill as ke,RiVolumeUpFill as De}from"react-icons/ri";import{mat4 as Ne,vec2 as Be,vec3 as Ue,quat as Oe}from"gl-matrix";import{degToRad as Ve}from"three/src/math/MathUtils.js";import{wrapEffect as Xe,EffectComposer as qe}from"@react-three/postprocessing";import{Effect as Ye,EffectComposer as $e,RenderPass as We,EffectPass as He,BloomEffect as Ge,SMAAEffect as je,SMAAPreset as Ze}from"postprocessing";import{InertiaPlugin as Ke}from"gsap/InertiaPlugin";import{RoomEnvironment as Qe}from"three/examples/jsm/environments/RoomEnvironment.js";v.registerPlugin(g,x);const Je=({text:t,className:n="",delay:o=100,duration:a=.6,ease:s="power3.out",splitType:c="chars",from:l={opacity:0,y:40},to:u={opacity:1,y:0},threshold:h=.1,rootMargin:d="-100px",textAlign:m="center",onLetterAnimationComplete:p})=>{const f=i(null);return r(()=>{const e=f.current;if(!e)return;const t="lines"===c;t&&(e.style.position="relative");const n=new x(e,{type:c,absolute:t,linesClass:"split-line"});let i;switch(c){case"lines":i=n.lines;break;case"words":i=n.words;break;case"words, chars":i=[...n.words,...n.chars];break;default:i=n.chars}i.forEach(e=>{e.style.willChange="transform, opacity"});const r=100*(1-h),m=/^(-?\d+)px$/.exec(d),y=m?parseInt(m[1],10):0,w=`top ${r}%${y<0?`-=${Math.abs(y)}px`:`+=${y}px`}`,b=v.timeline({scrollTrigger:{trigger:e,start:w,toggleActions:"play none none none",once:!0},smoothChildTiming:!0,onComplete:p});return b.set(i,{...l,immediateRender:!1,force3D:!0}),b.to(i,{...u,duration:a,ease:s,stagger:o/1e3,force3D:!0}),()=>{b.kill(),g.getAll().forEach(e=>e.kill()),v.killTweensOf(i),n.revert()}},[t,o,a,s,c,l,u,h,d,p]),e("p",{ref:f,className:`split-parent ${n}`,style:{textAlign:m,overflow:"hidden",display:"inline-block",whiteSpace:"normal",wordWrap:"break-word"},children:t})},et=({text:n="",delay:s=200,className:c="",animateBy:l="words",direction:u="top",threshold:h=.1,rootMargin:d="0px",animationFrom:m,animationTo:p,easing:f=e=>e,onAnimationComplete:v,stepDuration:g=.35})=>{const x="words"===l?n.split(" "):n.split(""),[w,b]=o(!1),M=i(null);r(()=>{if(!M.current)return;const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(b(!0),e.unobserve(M.current))},{threshold:h,rootMargin:d});return e.observe(M.current),()=>e.disconnect()},[h,d]);const P=a(()=>"top"===u?{filter:"blur(10px)",opacity:0,y:-50}:{filter:"blur(10px)",opacity:0,y:50},[u]),S=a(()=>[{filter:"blur(5px)",opacity:.5,y:"top"===u?5:-5},{filter:"blur(0px)",opacity:1,y:0}],[u]),C=m??P,E=p??S,z=E.length+1,_=g*(z-1),T=Array.from({length:z},(e,t)=>1===z?0:t/(z-1));return e("p",{ref:M,className:c,style:{display:"flex",flexWrap:"wrap"},children:x.map((e,n)=>{const i=((e,t)=>{const n=new Set([...Object.keys(e),...t.flatMap(e=>Object.keys(e))]),i={};return n.forEach(n=>{i[n]=[e[n],...t.map(e=>e[n])]}),i})(C,E),r={duration:_,times:T,delay:n*s/1e3};return r.ease=f,t(y.span,{initial:C,animate:w?i:C,transition:r,onAnimationComplete:n===x.length-1?v:void 0,style:{display:"inline-block",willChange:"transform, filter, opacity"},children:[" "===e?" ":e,"words"===l&&n<x.length-1&&" "]},n)})})},tt=(e,t,n=!0)=>({from:t,to:t+360,ease:"linear",duration:e,type:"tween",repeat:n?1/0:0}),nt=(e,t)=>({rotate:tt(e,t),scale:{type:"spring",damping:20,stiffness:300}}),it=({text:i,spinDuration:o=20,onHover:a="speedUp",className:s=""})=>{const c=Array.from(i),l=w(),u=b(0);r(()=>{const e=u.get();l.start({rotate:e+360,scale:1,transition:nt(o,e)})},[o,i,a,l]);return t(n,{children:[e("style",{children:".circular-text {\n margin: 0 auto;\n border-radius: 50%;\n width: 200px;\n position: relative;\n height: 200px;\n font-weight: bold;\n color: #fff;\n font-weight: 900;\n text-align: center;\n cursor: pointer;\n transform-origin: 50% 50%;\n -webkit-transform-origin: 50% 50%;\n}\n\n.circular-text span {\n position: absolute;\n display: inline-block;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n font-size: 24px;\n transition: all 0.5s cubic-bezier(0, 0, 0, 1);\n}"}),e(y.div,{className:`circular-text ${s}`,style:{rotate:u},initial:{rotate:0},animate:l,onMouseEnter:()=>{const e=u.get();if(!a)return;let t,n=1;switch(a){case"slowDown":t=nt(2*o,e);break;case"speedUp":t=nt(o/4,e);break;case"pause":t={rotate:{type:"spring",damping:20,stiffness:300},scale:{type:"spring",damping:20,stiffness:300}};break;case"goBonkers":t=nt(o/20,e),n=.8;break;default:t=nt(o,e)}l.start({rotate:e+360,scale:n,transition:t})},onMouseLeave:()=>{const e=u.get();l.start({rotate:e+360,scale:1,transition:nt(o,e)})},children:c.map((t,n)=>{const i=360/c.length*n,r=Math.PI/c.length,o=`rotateZ(${i}deg) translate3d(${r*n}px, ${r*n}px, 0)`;return e("span",{style:{transform:o,WebkitTransform:o},children:t},n)})})]})},rt=({text:i,disabled:r=!1,speed:o=5,className:a=""})=>{const s=`${o}s`;return t(n,{children:[e("style",{children:".shiny-text {\n color: #b5b5b5a4; /* Adjust this color to change intensity/style */\n background: linear-gradient(\n 120deg,\n rgba(255, 255, 255, 0) 40%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n display: inline-block;\n animation: shine 5s linear infinite;\n}\n\n@keyframes shine {\n 0% {\n background-position: 100%;\n }\n 100% {\n background-position: -100%;\n }\n}\n\n.shiny-text.disabled {\n animation: none;\n}\n"}),e("div",{className:`shiny-text ${r?"disabled":""} ${a}`,style:{animationDuration:s},children:i})]})},ot=({text:n="Compressa",fontFamily:a="Compressa VF",fontUrl:s="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2",width:c=!0,weight:l=!0,italic:u=!0,alpha:h=!1,flex:d=!0,stroke:m=!1,scale:p=!1,textColor:f="#FFFFFF",strokeColor:v="#FF0000",className:g="",minFontSize:x=24})=>{const y=i(null),w=i(null),b=i([]),M=i({x:0,y:0}),P=i({x:0,y:0}),[S,C]=o(x),[E,z]=o(1),[_,T]=o(1),A=n.split("");r(()=>{const e=e=>{P.current.x=e.clientX,P.current.y=e.clientY},t=e=>{const t=e.touches[0];P.current.x=t.clientX,P.current.y=t.clientY};if(window.addEventListener("mousemove",e),window.addEventListener("touchmove",t,{passive:!1}),y.current){const{left:e,top:t,width:n,height:i}=y.current.getBoundingClientRect();M.current.x=e+n/2,M.current.y=t+i/2,P.current.x=M.current.x,P.current.y=M.current.y}return()=>{window.removeEventListener("mousemove",e),window.removeEventListener("touchmove",t)}},[]);const R=()=>{if(!y.current||!w.current)return;const{width:e,height:t}=y.current.getBoundingClientRect();let n=e/(A.length/2);n=Math.max(n,x),C(n),z(1),T(1),requestAnimationFrame(()=>{if(!w.current)return;const e=w.current.getBoundingClientRect();if(p&&e.height>0){const n=t/e.height;z(n),T(n)}})};r(()=>(R(),window.addEventListener("resize",R),()=>window.removeEventListener("resize",R)),[p,n]),r(()=>{let e;const t=()=>{if(M.current.x+=(P.current.x-M.current.x)/15,M.current.y+=(P.current.y-M.current.y)/15,w.current){const e=w.current.getBoundingClientRect().width/2;b.current.forEach(t=>{if(!t)return;const n=t.getBoundingClientRect(),i={x:n.x+n.width/2,y:n.y+n.height/2},r=((e,t)=>{const n=t.x-e.x,i=t.y-e.y;return Math.sqrt(n*n+i*i)})(M.current,i),o=(t,n,i)=>{const r=i-Math.abs(i*t/e);return Math.max(n,r+n)},a=c?Math.floor(o(r,5,200)):100,s=l?Math.floor(o(r,100,900)):400,d=u?o(r,0,1).toFixed(2):0,m=h?o(r,0,1).toFixed(2):1;t.style.opacity=m.toString(),t.style.fontVariationSettings=`'wght' ${s}, 'wdth' ${a}, 'ital' ${d}`})}e=requestAnimationFrame(t)};return t(),()=>cancelAnimationFrame(e)},[c,l,u,h,A.length]);const I=[g,d?"flex":"",m?"stroke":""].filter(Boolean).join(" ");return t("div",{ref:y,style:{position:"relative",width:"100%",height:"100%",background:"transparent"},children:[e("style",{children:`\n @font-face {\n font-family: '${a}';\n src: url('${s}');\n font-style: normal;\n }\n\n .flex {\n display: flex;\n justify-content: space-between;\n }\n\n .stroke span {\n position: relative;\n color: ${f};\n }\n .stroke span::after {\n content: attr(data-char);\n position: absolute;\n left: 0;\n top: 0;\n color: transparent;\n z-index: -1;\n -webkit-text-stroke-width: 3px;\n -webkit-text-stroke-color: ${v};\n }\n\n .text-pressure-title {\n color: ${f};\n }\n `}),e("h1",{ref:w,className:`text-pressure-title ${I}`,style:{fontFamily:a,textTransform:"uppercase",fontSize:S,lineHeight:_,transform:`scale(1, ${E})`,transformOrigin:"center top",margin:0,textAlign:"center",userSelect:"none",whiteSpace:"nowrap",fontWeight:100,width:"100%"},children:A.map((t,n)=>e("span",{ref:e=>{b.current[n]=e},"data-char":t,style:{display:"inline-block",color:m?void 0:f},children:t},n))})]})},at=({children:t,fontSize:n="clamp(2rem, 8vw, 8rem)",fontWeight:o=900,fontFamily:a="inherit",color:s="#fff",enableHover:c=!0,baseIntensity:l=.18,hoverIntensity:u=.5})=>{const h=i(null);return r(()=>{let e,i=!1;const r=h.current;if(!r)return;return(async()=>{if(document.fonts?.ready&&await document.fonts.ready,i)return;const h=r.getContext("2d");if(!h)return;const d="inherit"===a?window.getComputedStyle(r).fontFamily||"sans-serif":a,m="number"==typeof n?`${n}px`:n;let p;if("number"==typeof n)p=n;else{const e=document.createElement("span");e.style.fontSize=n,document.body.appendChild(e);const t=window.getComputedStyle(e).fontSize;p=parseFloat(t),document.body.removeChild(e)}const f=React.Children.toArray(t).join(""),v=document.createElement("canvas"),g=v.getContext("2d");if(!g)return;g.font=`${o} ${m} ${d}`,g.textBaseline="alphabetic";const x=g.measureText(f),y=x.actualBoundingBoxLeft??0,w=x.actualBoundingBoxRight??x.width,b=x.actualBoundingBoxAscent??p,M=x.actualBoundingBoxDescent??.2*p,P=Math.ceil(y+w),S=Math.ceil(b+M),C=P+10;v.width=C,v.height=S;g.font=`${o} ${m} ${d}`,g.textBaseline="alphabetic",g.fillStyle=s,g.fillText(f,5-y,b);r.width=C+100,r.height=S+0,h.translate(50,0);const E=55+P,z=0+S;let _=!1;const T=()=>{if(i)return;h.clearRect(-30,-30,C+60,S+60);const t=_?u:l;for(let e=0;e<S;e++){const n=Math.floor(t*(Math.random()-.5)*30);h.drawImage(v,0,e,C,1,n,e,C,1)}e=window.requestAnimationFrame(T)};T();const A=(e,t)=>e>=55&&e<=E&&t>=0&&t<=z,R=e=>{if(!c)return;const t=r.getBoundingClientRect(),n=e.clientX-t.left,i=e.clientY-t.top;_=A(n,i)},I=()=>{_=!1},L=e=>{if(!c)return;e.preventDefault();const t=r.getBoundingClientRect(),n=e.touches[0],i=n.clientX-t.left,o=n.clientY-t.top;_=A(i,o)},F=()=>{_=!1};c&&(r.addEventListener("mousemove",R),r.addEventListener("mouseleave",I),r.addEventListener("touchmove",L,{passive:!1}),r.addEventListener("touchend",F));r.cleanupFuzzyText=()=>{window.cancelAnimationFrame(e),c&&(r.removeEventListener("mousemove",R),r.removeEventListener("mouseleave",I),r.removeEventListener("touchmove",L),r.removeEventListener("touchend",F))}})(),()=>{i=!0,window.cancelAnimationFrame(e),r&&r.cleanupFuzzyText&&r.cleanupFuzzyText()}},[t,n,o,a,s,c,l,u]),e("canvas",{ref:h})};function st({children:i,className:r="",colors:o=["#40ffaa","#4079ff","#40ffaa","#4079ff","#40ffaa"],animationSpeed:a=8,showBorder:s=!1}){const c={backgroundImage:`linear-gradient(to right, ${o.join(", ")})`,animationDuration:`${a}s`};return t(n,{children:[e("style",{children:'.animated-gradient-text {\n position: relative;\n margin: 0 auto;\n display: flex;\n max-width: fit-content;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-radius: 1.25rem;\n font-weight: 500;\n backdrop-filter: blur(10px);\n transition: box-shadow 0.5s ease-out;\n overflow: hidden;\n cursor: pointer;\n}\n\n.gradient-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-size: 300% 100%;\n animation: gradient linear infinite;\n border-radius: inherit;\n z-index: 0;\n pointer-events: none;\n}\n\n.gradient-overlay::before {\n content: "";\n position: absolute;\n left: 0;\n top: 0;\n border-radius: inherit;\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #060010;\n z-index: -1;\n}\n\n@keyframes gradient {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}\n\n.text-content {\n display: inline-block;\n position: relative;\n z-index: 2;\n background-size: 300% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n animation: gradient linear infinite;\n}'}),t("div",{className:`animated-gradient-text ${r}`,children:[s&&e("div",{className:"gradient-overlay",style:c}),e("div",{className:"text-content",style:c,children:i})]})]})}const ct=({text:a="",highlightWords:s=[],highlightClass:c="highlighted",trigger:l="auto",backgroundColor:u="transparent",wireframes:h=!1,gravity:d=1,mouseConstraintStiffness:m=.2,fontSize:p="1rem"})=>{const f=i(null),v=i(null),g=i(null),[x,y]=o(!1);r(()=>{if(!v.current)return;const e=a.split(" ").map(e=>`<span class="word ${s.some(t=>e.startsWith(t))?c:""}">${e}</span>`).join(" ");v.current.innerHTML=e},[a,s,c]),r(()=>{if("auto"!==l){if("scroll"===l&&f.current){const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(y(!0),e.disconnect())},{threshold:.1});return e.observe(f.current),()=>e.disconnect()}}else y(!0)},[l]),r(()=>{if(!x)return;const{Engine:e,Render:t,World:n,Bodies:i,Runner:r,Mouse:o,MouseConstraint:a}=R;if(!f.current||!g.current||!v.current)return;const s=f.current.getBoundingClientRect(),c=s.width,l=s.height;if(c<=0||l<=0)return;const p=e.create();p.world.gravity.y=d;const y=t.create({element:g.current,engine:p,options:{width:c,height:l,background:u,wireframes:h}}),w={isStatic:!0,render:{fillStyle:"transparent"}},b=i.rectangle(c/2,l+25,c,50,w),M=i.rectangle(-25,l/2,50,l,w),P=i.rectangle(c+25,l/2,50,l,w),S=i.rectangle(c/2,-25,c,50,w),C=v.current.querySelectorAll(".word"),E=Array.from(C).map(e=>{const t=e.getBoundingClientRect(),n=t.left-s.left+t.width/2,r=t.top-s.top+t.height/2,o=i.rectangle(n,r,t.width,t.height,{render:{fillStyle:"transparent"},restitution:.8,frictionAir:.01,friction:.2});return R.Body.setVelocity(o,{x:5*(Math.random()-.5),y:0}),R.Body.setAngularVelocity(o,.05*(Math.random()-.5)),{elem:e,body:o}});E.forEach(({elem:e,body:t})=>{e.style.position="absolute",e.style.left=t.position.x-t.bounds.max.x+t.bounds.min.x/2+"px",e.style.top=t.position.y-t.bounds.max.y+t.bounds.min.y/2+"px",e.style.transform="none"});const z=o.create(f.current),_=a.create(p,{mouse:z,constraint:{stiffness:m,render:{visible:!1}}});y.mouse=z,n.add(p.world,[b,M,P,S,_,...E.map(e=>e.body)]);const T=r.create();r.run(T,p),t.run(y);const A=()=>{E.forEach(({body:e,elem:t})=>{const{x:n,y:i}=e.position;t.style.left=`${n}px`,t.style.top=`${i}px`,t.style.transform=`translate(-50%, -50%) rotate(${e.angle}rad)`}),R.Engine.update(p),requestAnimationFrame(A)};return A(),()=>{t.stop(y),r.stop(T),y.canvas&&g.current&&g.current.removeChild(y.canvas),n.clear(p.world,!1),e.clear(p)}},[x,d,h,u,m]);const w=()=>{x||"click"!==l&&"hover"!==l||y(!0)};return t(n,{children:[e("style",{children:".falling-text-container {\n position: relative;\n z-index: 1;\n width: 100%;\n height: 100%;\n cursor: pointer;\n text-align: center;\n padding-top: 2em;\n}\n\n.falling-text-target {\n display: inline-block;\n}\n\n.word {\n display: inline-block;\n margin: 0 2px;\n user-select: none;\n}\n\n.highlighted {\n color: cyan;\n font-weight: bold;\n}\n\n.falling-text-canvas {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n}\n"}),t("div",{ref:f,className:"falling-text-container",onClick:"click"===l?w:void 0,onMouseEnter:"hover"===l?w:void 0,style:{position:"relative",overflow:"hidden"},children:[e("div",{ref:v,className:"falling-text-target",style:{fontSize:p,lineHeight:1.4}}),e("div",{ref:g,className:"falling-text-canvas"})]})]})},lt=({text:a="⚛️",delay:s=.01,spacing:c=100,followMouseDirection:l=!0,randomFloat:u=!0,exitDuration:h=.5,removalInterval:d=30,maxPoints:m=5})=>{const[p,f]=o([]),v=i(null),g=i(Date.now()),x=i(0),w=e=>{if(!v.current)return;const t=v.current.getBoundingClientRect(),n=e.clientX-t.left,i=e.clientY-t.top;f(e=>{let t=[...e];if(0===t.length)t.push({id:x.current++,x:n,y:i,angle:0,...u&&{randomX:10*Math.random()-5,randomY:10*Math.random()-5,randomRotate:10*Math.random()-5}});else{const e=t[t.length-1],r=n-e.x,o=i-e.y,a=Math.sqrt(r*r+o*o);if(a>=c){let n=180*Math.atan2(o,r)/Math.PI;n>90?n-=180:n<-90&&(n+=180);const i=l?n:0,s=Math.floor(a/c);for(let n=1;n<=s;n++){const s=c*n/a,l=e.x+r*s,h=e.y+o*s;t.push({id:x.current++,x:l,y:h,angle:i,...u&&{randomX:10*Math.random()-5,randomY:10*Math.random()-5,randomRotate:10*Math.random()-5}})}}}return t.length>m&&(t=t.slice(t.length-m)),t}),g.current=Date.now()};return r(()=>{const e=v.current;if(e)return e.addEventListener("mousemove",w),()=>e.removeEventListener("mousemove",w)},[]),r(()=>{const e=setInterval(()=>{Date.now()-g.current>100&&f(e=>e.length>0?e.slice(1):e)},d);return()=>clearInterval(e)},[d]),t(n,{children:[e("style",{children:".text-cursor-container {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.text-cursor-inner {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n\n.text-cursor-item {\n position: absolute;\n user-select: none;\n white-space: nowrap;\n font-size: 1.875rem;\n}\n"}),e("div",{ref:v,className:"text-cursor-container",children:e("div",{className:"text-cursor-inner",children:e(M,{children:p.map(t=>e(y.div,{initial:{opacity:0,scale:1,x:0,y:0,rotate:t.angle},animate:{opacity:1,scale:1,x:u?[0,t.randomX||0,0]:0,y:u?[0,t.randomY||0,0]:0,rotate:u?[t.angle,t.angle+(t.randomRotate||0),t.angle]:t.angle},exit:{opacity:0,scale:0},transition:{opacity:{duration:h,ease:"easeOut",delay:s},...u&&{x:{duration:2,ease:"easeInOut",repeat:1/0,repeatType:"mirror"},y:{duration:2,ease:"easeInOut",repeat:1/0,repeatType:"mirror"},rotate:{duration:2,ease:"easeInOut",repeat:1/0,repeatType:"mirror"}}},className:"text-cursor-item",style:{left:t.x,top:t.y},children:a},t.id))})})})]})},ut={wrapper:{display:"inline-block",whiteSpace:"pre-wrap"},srOnly:{position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",border:0}};function ht({text:n,speed:a=50,maxIterations:s=10,sequential:c=!1,revealDirection:l="start",useOriginalCharsOnly:u=!1,characters:h="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+",className:d="",parentClassName:m="",encryptedClassName:p="",animateOn:f="hover",...v}){const[g,x]=o(n),[w,b]=o(!1),[M,P]=o(!1),[S,C]=o(new Set),[E,z]=o(!1),_=i(null);r(()=>{let e,t=0;const i=u?Array.from(new Set(n.split(""))).filter(e=>" "!==e):h.split(""),r=(e,t)=>{if(u){const n=e.split("").map((e,n)=>({char:e,isSpace:" "===e,index:n,isRevealed:t.has(n)})),i=n.filter(e=>!e.isSpace&&!e.isRevealed).map(e=>e.char);for(let e=i.length-1;e>0;e--){const t=Math.floor(Math.random()*(e+1));[i[e],i[t]]=[i[t],i[e]]}let r=0;return n.map(t=>t.isSpace?" ":t.isRevealed?e[t.index]:i[r++]).join("")}return e.split("").map((n,r)=>" "===n?" ":t.has(r)?e[r]:i[Math.floor(Math.random()*i.length)]).join("")};return w?(P(!0),e=setInterval(()=>{C(i=>{if(c){if(i.size<n.length){const e=(e=>{const t=n.length;switch(l){case"start":default:return e.size;case"end":return t-1-e.size;case"center":{const n=Math.floor(t/2),i=Math.floor(e.size/2),r=e.size%2==0?n+i:n-i-1;if(r>=0&&r<t&&!e.has(r))return r;for(let n=0;n<t;n++)if(!e.has(n))return n;return 0}}})(i),t=new Set(i);return t.add(e),x(r(n,t)),t}return clearInterval(e),P(!1),i}return x(r(n,i)),t++,t>=s&&(clearInterval(e),P(!1),x(n)),i})},a)):(x(n),C(new Set),P(!1)),()=>{e&&clearInterval(e)}},[w,n,a,s,c,l,h,u]),r(()=>{if("view"!==f)return;const e=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!E&&(b(!0),z(!0))})},{root:null,rootMargin:"0px",threshold:.1}),t=_.current;return t&&e.observe(t),()=>{t&&e.unobserve(t)}},[f,E]);const T="hover"===f?{onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1)}:{};return t(y.span,{className:m,ref:_,style:ut.wrapper,...T,...v,children:[e("span",{style:ut.srOnly,children:g}),e("span",{"aria-hidden":"true",children:g.split("").map((t,n)=>{const i=S.has(n)||!M||!w;return e("span",{className:i?d:p,children:t},n)})})]})}const dt=({sentence:a="True Focus",manualMode:s=!1,blurAmount:c=5,borderColor:l="green",glowColor:u="rgba(0, 255, 0, 0.6)",animationDuration:h=.5,pauseBetweenAnimations:d=1})=>{const m=a.split(" "),[p,f]=o(0),[v,g]=o(null),x=i(null),w=i([]),[b,M]=o({x:0,y:0,width:0,height:0});r(()=>{if(!s){const e=setInterval(()=>{f(e=>(e+1)%m.length)},1e3*(h+d));return()=>clearInterval(e)}},[s,h,d,m.length]),r(()=>{if(null===p||-1===p)return;if(!w.current[p]||!x.current)return;const e=x.current.getBoundingClientRect(),t=w.current[p].getBoundingClientRect();M({x:t.left-e.left,y:t.top-e.top,width:t.width,height:t.height})},[p,m.length]);const P=()=>{s&&f(v??0)};return t(n,{children:[e("style",{children:".focus-container {\n position: relative;\n display: flex;\n gap: 1em;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.focus-word {\n position: relative;\n font-size: 3rem;\n font-weight: 900;\n cursor: pointer;\n transition:\n filter 0.3s ease,\n color 0.3s ease;\n}\n\n.focus-word.active {\n filter: blur(0);\n}\n\n.focus-frame {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n box-sizing: content-box;\n border: none;\n}\n\n.corner {\n position: absolute;\n width: 1rem;\n height: 1rem;\n border: 3px solid var(--border-color, #fff);\n filter: drop-shadow(0px 0px 4px var(--border-color, #fff));\n border-radius: 3px;\n transition: none;\n}\n\n.top-left {\n top: -10px;\n left: -10px;\n border-right: none;\n border-bottom: none;\n}\n\n.top-right {\n top: -10px;\n right: -10px;\n border-left: none;\n border-bottom: none;\n}\n\n.bottom-left {\n bottom: -10px;\n left: -10px;\n border-right: none;\n border-top: none;\n}\n\n.bottom-right {\n bottom: -10px;\n right: -10px;\n border-left: none;\n border-top: none;\n}\n"}),t("div",{className:"focus-container",ref:x,children:[m.map((t,n)=>{const i=n===p;return e("span",{ref:e=>{e&&(w.current[n]=e)},className:`focus-word ${s?"manual":""} ${i&&!s?"active":""}`,style:{filter:i?"blur(0px)":`blur(${c}px)`,transition:`filter ${h}s ease`,"--border-color":l,"--glow-color":u},onMouseEnter:()=>(e=>{s&&(g(e),f(e))})(n),onMouseLeave:P,children:t},n)}),t(y.div,{className:"focus-frame",animate:{x:b.x,y:b.y,width:b.width,height:b.height,opacity:p>=0?1:0},transition:{duration:h},style:{"--border-color":l,"--glow-color":u},children:[e("span",{className:"corner top-left"}),e("span",{className:"corner top-right"}),e("span",{className:"corner bottom-left"}),e("span",{className:"corner bottom-right"})]})]})]})};v.registerPlugin(g);const mt=({children:o,scrollContainerRef:s,containerClassName:c="",textClassName:l="",animationDuration:u=1,ease:h="back.inOut(2)",scrollStart:d="center bottom+=50%",scrollEnd:m="bottom bottom-=40%",stagger:p=.03})=>{const f=i(null),g=a(()=>("string"==typeof o?o:"").split("").map((t,n)=>e("span",{className:"char",children:" "===t?" ":t},n)),[o]);return r(()=>{const e=f.current;if(!e)return;const t=s&&s.current?s.current:window,n=e.querySelectorAll(".char");v.fromTo(n,{willChange:"opacity, transform",opacity:0,yPercent:120,scaleY:2.3,scaleX:.7,transformOrigin:"50% 0%"},{duration:u,ease:h,opacity:1,yPercent:0,scaleY:1,scaleX:1,stagger:p,scrollTrigger:{trigger:e,scroller:t,start:d,end:m,scrub:!0}})},[s,u,h,d,m,p]),t(n,{children:[e("style",{children:".scroll-float {\n overflow: hidden;\n}\n\n.scroll-float-text {\n display: inline-block;\n font-size: clamp(1.6rem, 8vw, 10rem);\n font-weight: 900;\n text-align: center;\n line-height: 1.5;\n}\n\n.char {\n display: inline-block;\n}"}),e("h2",{ref:f,className:`scroll-float ${c}`,children:e("span",{className:`scroll-float-text ${l}`,children:g})})]})};v.registerPlugin(g);const pt=({children:o,scrollContainerRef:s,enableBlur:c=!0,baseOpacity:l=.1,baseRotation:u=3,blurStrength:h=4,containerClassName:d="",textClassName:m="",rotationEnd:p="bottom bottom",wordAnimationEnd:f="bottom bottom"})=>{const x=i(null),y=a(()=>("string"==typeof o?o:"").split(/(\s+)/).map((t,n)=>t.match(/^\s+$/)?t:e("span",{className:"word",children:t},n)),[o]);return r(()=>{const e=x.current;if(!e)return;const t=s&&s.current?s.current:window;v.fromTo(e,{transformOrigin:"0% 50%",rotate:u},{ease:"none",rotate:0,scrollTrigger:{trigger:e,scroller:t,start:"top bottom",end:p,scrub:!0}});const n=e.querySelectorAll(".word");return v.fromTo(n,{opacity:l,willChange:"opacity"},{ease:"none",opacity:1,stagger:.05,scrollTrigger:{trigger:e,scroller:t,start:"top bottom-=20%",end:f,scrub:!0}}),c&&v.fromTo(n,{filter:`blur(${h}px)`},{ease:"none",filter:"blur(0px)",stagger:.05,scrollTrigger:{trigger:e,scroller:t,start:"top bottom-=20%",end:f,scrub:!0}}),()=>{g.getAll().forEach(e=>e.kill())}},[s,c,u,l,p,f,h]),t(n,{children:[e("style",{children:".scroll-reveal {\n margin: 20px 0;\n}\n\n.scroll-reveal-text {\n font-size: clamp(1.6rem, 4vw, 3rem);\n line-height: 1.5;\n font-weight: 600;\n}\n\n.word {\n display: inline-block;\n}"}),e("h2",{ref:x,className:`scroll-reveal ${d}`,children:e("p",{className:`scroll-reveal-text ${m}`,children:y})})]})};function ft(e,t,n,i,r){return(e-t)/(n-t)*(r-i)+i}const vt="undefined"!=typeof window?window.devicePixelRatio:1;class gt{constructor(e,{fontSize:t,fontFamily:n,charset:i,invert:r}={}){this.width=0,this.height=0,this.center={x:0,y:0},this.mouse={x:0,y:0},this.cols=0,this.rows=0,this.renderer=e,this.domElement=document.createElement("div"),this.domElement.style.position="absolute",this.domElement.style.top="0",this.domElement.style.left="0",this.domElement.style.width="100%",this.domElement.style.height="100%",this.pre=document.createElement("pre"),this.domElement.appendChild(this.pre),this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.domElement.appendChild(this.canvas),this.deg=0,this.invert=r??!0,this.fontSize=t??12,this.fontFamily=n??"'Courier New', monospace",this.charset=i??" .'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$",this.context&&(this.context.imageSmoothingEnabled=!1,this.context.imageSmoothingEnabled=!1),this.onMouseMove=this.onMouseMove.bind(this),document.addEventListener("mousemove",this.onMouseMove)}setSize(e,t){this.width=e,this.height=t,this.renderer.setSize(e,t),this.reset(),this.center={x:e/2,y:t/2},this.mouse={x:this.center.x,y:this.center.y}}reset(){if(this.context){this.context.font=`${this.fontSize}px ${this.fontFamily}`;const e=this.context.measureText("A").width;this.cols=Math.floor(this.width/(this.fontSize*(e/this.fontSize))),this.rows=Math.floor(this.height/this.fontSize),this.canvas.width=this.cols,this.canvas.height=this.rows,this.pre.style.fontFamily=this.fontFamily,this.pre.style.fontSize=`${this.fontSize}px`,this.pre.style.margin="0",this.pre.style.padding="0",this.pre.style.lineHeight="1em",this.pre.style.position="absolute",this.pre.style.left="50%",this.pre.style.top="50%",this.pre.style.transform="translate(-50%, -50%)",this.pre.style.zIndex="9",this.pre.style.backgroundAttachment="fixed",this.pre.style.mixBlendMode="difference"}}render(e,t){this.renderer.render(e,t);const n=this.canvas.width,i=this.canvas.height;this.context&&(this.context.clearRect(0,0,n,i),this.context.drawImage(this.renderer.domElement,0,0,n,i),this.asciify(this.context,n,i),this.hue())}onMouseMove(e){this.mouse={x:e.clientX*vt,y:e.clientY*vt}}get dx(){return this.mouse.x-this.center.x}get dy(){return this.mouse.y-this.center.y}hue(){const e=180*Math.atan2(this.dy,this.dx)/Math.PI;this.deg+=.075*(e-this.deg),this.domElement.style.filter=`hue-rotate(${this.deg.toFixed(1)}deg)`}asciify(e,t,n){const i=e.getImageData(0,0,t,n).data;let r="";for(let e=0;e<n;e++){for(let n=0;n<t;n++){const o=4*n+4*e*t,[a,s,c,l]=[i[o],i[o+1],i[o+2],i[o+3]];if(0===l){r+=" ";continue}let u=(.3*a+.6*s+.1*c)/255,h=Math.floor((1-u)*(this.charset.length-1));this.invert&&(h=this.charset.length-h-1),r+=this.charset[h]}r+="\n"}this.pre.innerHTML=r}dispose(){document.removeEventListener("mousemove",this.onMouseMove)}}class xt{constructor(e,{fontSize:t=200,fontFamily:n="Arial",color:i="#fdf9f3"}={}){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.txt=e,this.fontSize=t,this.fontFamily=n,this.color=i,this.font=`600 ${this.fontSize}px ${this.fontFamily}`}resize(){if(this.context){this.context.font=this.font;const e=this.context.measureText(this.txt),t=Math.ceil(e.width)+20,n=Math.ceil(e.actualBoundingBoxAscent+e.actualBoundingBoxDescent)+20;this.canvas.width=t,this.canvas.height=n}}render(){if(this.context){this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=this.color,this.context.font=this.font;const e=10+this.context.measureText(this.txt).actualBoundingBoxAscent;this.context.fillText(this.txt,10,e)}}get width(){return this.canvas.width}get height(){return this.canvas.height}get texture(){return this.canvas}}class yt{constructor({text:e,asciiFontSize:t,textFontSize:n,textColor:i,planeBaseHeight:r,enableWaves:o},a,s,c){this.center={x:0,y:0},this.animationFrameId=0,this.textString=e,this.asciiFontSize=t,this.textFontSize=n,this.textColor=i,this.planeBaseHeight=r,this.container=a,this.width=s,this.height=c,this.enableWaves=o,this.camera=new I.PerspectiveCamera(45,this.width/this.height,1,1e3),this.camera.position.z=30,this.scene=new I.Scene,this.mouse={x:0,y:0},this.onMouseMove=this.onMouseMove.bind(this),this.setMesh(),this.setRenderer()}setMesh(){this.textCanvas=new xt(this.textString,{fontSize:this.textFontSize,fontFamily:"IBM Plex Mono",color:this.textColor}),this.textCanvas.resize(),this.textCanvas.render(),this.texture=new I.CanvasTexture(this.textCanvas.texture),this.texture.minFilter=I.NearestFilter;const e=this.textCanvas.width/this.textCanvas.height,t=this.planeBaseHeight,n=t*e,i=t;this.geometry=new I.PlaneGeometry(n,i,36,36),this.material=new I.ShaderMaterial({vertexShader:"\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n",fragmentShader:"\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n",transparent:!0,uniforms:{uTime:{value:0},mouse:{value:1},uTexture:{value:this.texture},uEnableWaves:{value:this.enableWaves?1:0}}}),this.mesh=new I.Mesh(this.geometry,this.material),this.scene.add(this.mesh)}setRenderer(){this.renderer=new I.WebGLRenderer({antialias:!1,alpha:!0}),this.renderer.setPixelRatio(1),this.renderer.setClearColor(0,0),this.filter=new gt(this.renderer,{fontFamily:"IBM Plex Mono",fontSize:this.asciiFontSize,invert:!0}),this.container.appendChild(this.filter.domElement),this.setSize(this.width,this.height),this.container.addEventListener("mousemove",this.onMouseMove),this.container.addEventListener("touchmove",this.onMouseMove)}setSize(e,t){this.width=e,this.height=t,this.camera.aspect=e/t,this.camera.updateProjectionMatrix(),this.filter.setSize(e,t),this.center={x:e/2,y:t/2}}load(){this.animate()}onMouseMove(e){const t=e.touches?e.touches[0]:e,n=this.container.getBoundingClientRect(),i=t.clientX-n.left,r=t.clientY-n.top;this.mouse={x:i,y:r}}animate(){const e=()=>{this.animationFrameId=requestAnimationFrame(e),this.render()};e()}render(){const e=.001*(new Date).getTime();this.textCanvas.render(),this.texture.needsUpdate=!0,this.mesh.material.uniforms.uTime.value=Math.sin(e),this.updateRotation(),this.filter.render(this.scene,this.camera)}updateRotation(){const e=ft(this.mouse.y,0,this.height,.5,-.5),t=ft(this.mouse.x,0,this.width,-.5,.5);this.mesh.rotation.x+=.05*(e-this.mesh.rotation.x),this.mesh.rotation.y+=.05*(t-this.mesh.rotation.y)}clear(){this.scene.traverse(e=>{const t=e;t.isMesh&&([t.material].flat().forEach(e=>{e.dispose(),Object.keys(e).forEach(t=>{const n=e[t];n&&"object"==typeof n&&"dispose"in n&&"function"==typeof n.dispose&&n.dispose()})}),t.geometry.dispose())}),this.scene.clear()}dispose(){cancelAnimationFrame(this.animationFrameId),this.filter.dispose(),this.container.removeChild(this.filter.domElement),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("touchmove",this.onMouseMove),this.clear(),this.renderer.dispose()}}function wt({text:t="David!",asciiFontSize:n=8,textFontSize:o=200,textColor:a="#fdf9f3",planeBaseHeight:s=8,enableWaves:c=!0}){const l=i(null),u=i(null);return r(()=>{if(!l.current)return;const{width:e,height:i}=l.current.getBoundingClientRect();u.current=new yt({text:t,asciiFontSize:n,textFontSize:o,textColor:a,planeBaseHeight:s,enableWaves:c},l.current,e,i),u.current.load();const r=new ResizeObserver(e=>{if(!e[0])return;const{width:t,height:n}=e[0].contentRect;u.current?.setSize(t,n)});return r.observe(l.current),()=>{r.disconnect(),u.current?.dispose()}},[t,n,o,a,s,c]),e("div",{ref:l,style:{position:"absolute",width:"100%",height:"100%"},children:e("style",{children:"\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n body {\n margin: 0;\n padding: 0;\n }\n\n canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n "})})}v.registerPlugin(x,J);const bt=({radius:o=100,duration:a=1.2,speed:s=.5,scrambleChars:c=".:",className:l="",style:u={},children:h})=>{const d=i(null),m=i([]);return r(()=>{if(!d.current)return;const e=x.create(d.current.querySelector("p"),{type:"chars",charsClass:"char"});m.current=e.chars,m.current.forEach(e=>{v.set(e,{display:"inline-block",attr:{"data-content":e.innerHTML}})});const t=e=>{m.current.forEach(t=>{const{left:n,top:i,width:r,height:l}=t.getBoundingClientRect(),u=e.clientX-(n+r/2),h=e.clientY-(i+l/2),d=Math.hypot(u,h);d<o&&v.to(t,{overwrite:!0,duration:a*(1-d/o),scrambleText:{text:t.dataset.content||"",chars:c,speed:s},ease:"none"})})},n=d.current;return n.addEventListener("pointermove",t),()=>{n.removeEventListener("pointermove",t),e.revert()}},[o,a,s,c]),t(n,{children:[e("style",{children:".text-block {\n margin: 7vw;\n max-width: 800px;\n font-family: monospace;\n font-size: clamp(14px, 4vw, 32px);\n color: #fff;\n}\n\n.char {\n will-change: transform;\n display: inline-block;\n}\n"}),e("div",{ref:d,className:`text-block ${l}`,style:u,children:e("p",{children:h})})]})},Mt=({children:i,speed:r=.5,enableShadows:o=!0,enableOnHover:a=!1,className:s=""})=>{const c={"--after-duration":3*r+"s","--before-duration":2*r+"s","--after-shadow":o?"-5px 0 red":"none","--before-shadow":o?"5px 0 cyan":"none"},l=a?"enable-on-hover":"";return t(n,{children:[e("style",{children:".glitch {\n color: #fff;\n font-size: clamp(2rem, 10vw, 8rem);\n white-space: nowrap;\n font-weight: 900;\n position: relative;\n margin: 0 auto;\n user-select: none;\n cursor: pointer;\n}\n\n.glitch::after,\n.glitch::before {\n content: attr(data-text);\n position: absolute;\n top: 0;\n color: #fff;\n background-color: #060010;\n overflow: hidden;\n clip-path: inset(0 0 0 0);\n}\n\n.glitch:not(.enable-on-hover)::after {\n left: 10px;\n text-shadow: var(--after-shadow, -10px 0 red);\n animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;\n}\n.glitch:not(.enable-on-hover)::before {\n left: -10px;\n text-shadow: var(--before-shadow, 10px 0 cyan);\n animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;\n}\n\n.glitch.enable-on-hover::after,\n.glitch.enable-on-hover::before {\n content: '';\n opacity: 0;\n animation: none;\n}\n\n.glitch.enable-on-hover:hover::after {\n content: attr(data-text);\n opacity: 1;\n left: 10px;\n text-shadow: var(--after-shadow, -10px 0 red);\n animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;\n}\n.glitch.enable-on-hover:hover::before {\n content: attr(data-text);\n opacity: 1;\n left: -10px;\n text-shadow: var(--before-shadow, 10px 0 cyan);\n animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;\n}\n\n@keyframes animate-glitch {\n 0% { clip-path: inset(20% 0 50% 0); }\n 5% { clip-path: inset(10% 0 60% 0); }\n 10% { clip-path: inset(15% 0 55% 0); }\n 15% { clip-path: inset(25% 0 35% 0); }\n 20% { clip-path: inset(30% 0 40% 0); }\n 25% { clip-path: inset(40% 0 20% 0); }\n 30% { clip-path: inset(10% 0 60% 0); }\n 35% { clip-path: inset(15% 0 55% 0); }\n 40% { clip-path: inset(25% 0 35% 0); }\n 45% { clip-path: inset(30% 0 40% 0); }\n 50% { clip-path: inset(20% 0 50% 0); }\n 55% { clip-path: inset(10% 0 60% 0); }\n 60% { clip-path: inset(15% 0 55% 0); }\n 65% { clip-path: inset(25% 0 35% 0); }\n 70% { clip-path: inset(30% 0 40% 0); }\n 75% { clip-path: inset(40% 0 20% 0); }\n 80% { clip-path: inset(20% 0 50% 0); }\n 85% { clip-path: inset(10% 0 60% 0); }\n 90% { clip-path: inset(15% 0 55% 0); }\n 95% { clip-path: inset(25% 0 35% 0); }\n 100% { clip-path: inset(30% 0 40% 0); }\n}\n"}),e("div",{className:`glitch ${l} ${s}`,style:c,"data-text":i,children:i})]})};const Pt=({scrollContainerRef:r,texts:a=[],velocity:c=100,className:l="",damping:u=50,stiffness:h=400,numCopies:d=6,velocityMapping:m={input:[0,1e3],output:[0,5]},parallaxClassName:p="parallax",scrollerClassName:f="scroller",parallaxStyle:v,scrollerStyle:g})=>{function x({children:t,baseVelocity:n=c,scrollContainerRef:r,className:a="",damping:l,stiffness:u,numCopies:h,velocityMapping:d,parallaxClassName:m,scrollerClassName:p,parallaxStyle:f,scrollerStyle:v}){const g=b(0),x=r?{container:r}:{},{scrollY:w}=P(x),M=S(w),_=C(M,{damping:l??50,stiffness:u??400}),T=E(_,d?.input||[0,1e3],d?.output||[0,5],{clamp:!1}),A=i(null),R=function(e){const[t,n]=o(0);return s(()=>{function t(){e.current&&n(e.current.offsetWidth)}return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[e]),t}(A);const I=E(g,e=>0===R?"0px":`${function(e,t,n){const i=t-e;return((n-e)%i+i)%i+e}(-R,0,e)}px`),L=i(1);z((e,t)=>{let i=L.current*n*(t/1e3);T.get()<0?L.current=-1:T.get()>0&&(L.current=1),i+=L.current*i*T.get(),g.set(g.get()+i)});const F=[];for(let n=0;n<h;n++)F.push(e("span",{className:a,ref:0===n?A:null,children:t},n));return e("div",{className:m,style:f,children:e(y.div,{className:p,style:{x:I,...v},children:F})})}return t(n,{children:[e("style",{children:".parallax {\n position: relative;\n overflow: hidden;\n}\n\n.scroller {\n display: flex;\n white-space: nowrap;\n text-align: center;\n font-family: sans-serif;\n font-size: 2.25rem;\n font-weight: bold;\n letter-spacing: -0.02em;\n filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));\n}\n\n.scroller span {\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .scroller {\n font-size: 5rem;\n line-height: 5rem;\n }\n}"}),e("section",{children:a.map((e,n)=>t(x,{className:l,baseVelocity:n%2!=0?-c:c,scrollContainerRef:r,damping:u,stiffness:h,numCopies:d,velocityMapping:m,parallaxClassName:p,scrollerClassName:f,parallaxStyle:v,scrollerStyle:g,children:[e," "]},n))})]})};const St=c((o,s)=>{const{label:c,fromFontVariationSettings:l,toFontVariationSettings:u,containerRef:h,radius:d=50,falloff:m="linear",className:p="",onClick:f,style:v,...g}=o,x=i([]),w=i([]),b=function(e){const t=i({x:0,y:0});return r(()=>{const n=(n,i)=>{if(e?.current){const r=e.current.getBoundingClientRect();t.current={x:n-r.left,y:i-r.top}}else t.current={x:n,y:i}},i=e=>n(e.clientX,e.clientY),r=e=>{const t=e.touches[0];n(t.clientX,t.clientY)};return window.addEventListener("mousemove",i),window.addEventListener("touchmove",r),()=>{window.removeEventListener("mousemove",i),window.removeEventListener("touchmove",r)}},[e]),t}(h),M=i({x:null,y:null}),P=a(()=>{const e=e=>new Map(e.split(",").map(e=>e.trim()).map(e=>{const[t,n]=e.split(" ");return[t.replace(/['"]/g,""),parseFloat(n)]})),t=e(l),n=e(u);return Array.from(t.entries()).map(([e,t])=>({axis:e,fromValue:t,toValue:n.get(e)??t}))},[l,u]);var S;r(()=>{let e;const t=()=>{S(),e=requestAnimationFrame(t)};return e=requestAnimationFrame(t),()=>cancelAnimationFrame(e)},[S=()=>{if(!h?.current)return;const{x:e,y:t}=b.current;if(M.current.x===e&&M.current.y===t)return;M.current={x:e,y:t};const n=h.current.getBoundingClientRect();x.current.forEach((e,t)=>{if(!e)return;const i=e.getBoundingClientRect(),r=i.left+i.width/2-n.left,o=i.top+i.height/2-n.top,a=(s=b.current.x,c=b.current.y,u=r,h=o,Math.sqrt((u-s)**2+(h-c)**2));var s,c,u,h;if(a>=d)return void(e.style.fontVariationSettings=l);const p=(e=>{const t=Math.min(Math.max(1-e/d,0),1);switch(m){case"exponential":return t**2;case"gaussian":return Math.exp(-((e/(d/2))**2)/2);default:return t}})(a),f=P.map(({axis:e,fromValue:t,toValue:n})=>`'${e}' ${t+(n-t)*p}`).join(", ");w.current[t]=f,e.style.fontVariationSettings=f})}]);const C=c.split(" ");let E=0;return t(n,{children:[e("style",{children:'@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");\n\n.variable-proximity {\n font-family: "Roboto Flex", sans-serif;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n'}),t("span",{ref:s,className:`${p} variable-proximity`,onClick:f,style:{display:"inline",...v},...g,children:[C.map((n,i)=>t("span",{style:{display:"inline-block",whiteSpace:"nowrap"},children:[n.split("").map(t=>{const n=E++;return e(y.span,{ref:e=>{x.current[n]=e},style:{display:"inline-block",fontVariationSettings:w.current[n]},"aria-hidden":"true",children:t},n)}),i<C.length-1&&e("span",{style:{display:"inline-block"},children:" "})]},i)),e("span",{className:"sr-only",children:c})]})]})});function Ct({to:t,from:n=0,direction:o="up",delay:a=0,duration:s=2,className:c="",startWhen:l=!0,separator:u="",onStart:h,onEnd:d}){const m=i(null),p=b("down"===o?t:n),f=C(p,{damping:20+1/s*40,stiffness:1/s*100}),v=_(m,{once:!0,margin:"0px"});return r(()=>{m.current&&(m.current.textContent=String("down"===o?t:n))},[n,t,o]),r(()=>{if(v&&l){"function"==typeof h&&h();const e=setTimeout(()=>{p.set("down"===o?n:t)},1e3*a),i=setTimeout(()=>{"function"==typeof d&&d()},1e3*a+1e3*s);return()=>{clearTimeout(e),clearTimeout(i)}}},[v,l,p,o,n,t,a,h,d,s]),r(()=>{const e=f.on("change",e=>{if(m.current){const t={useGrouping:!!u,minimumFractionDigits:0,maximumFractionDigits:0},n=Intl.NumberFormat("en-US",t).format(Number(e.toFixed(0)));m.current.textContent=u?n.replace(/,/g,u):n}});return()=>e()},[f,u]),e("span",{className:`${c}`,ref:m})}St.displayName="VariableProximity";const Et=({children:n})=>t("div",{style:{animation:"bounce 2s infinite"},children:[e("style",{children:"\n @keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-20px);\n }\n }\n "}),n]}),zt=({as:i,className:r="",color:o="white",speed:a="6s",children:s,...c})=>{const l=i||"button";return t(n,{children:[e("style",{children:"\n .star-border-container {\n display: inline-block;\n padding: 1px 0;\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n }\n \n .border-gradient-bottom {\n position: absolute;\n width: 300%;\n height: 50%;\n opacity: 0.7;\n bottom: -11px;\n right: -250%;\n border-radius: 50%;\n animation: star-movement-bottom linear infinite alternate;\n z-index: 0;\n }\n \n .border-gradient-top {\n position: absolute;\n opacity: 0.7;\n width: 300%;\n height: 50%;\n top: -10px;\n left: -250%;\n border-radius: 50%;\n animation: star-movement-top linear infinite alternate;\n z-index: 0;\n }\n \n .inner-content {\n position: relative;\n border: 1px solid #222;\n background: #000;\n color: white;\n font-size: 16px;\n text-align: center;\n padding: 16px 26px;\n border-radius: 20px;\n z-index: 1;\n }\n \n @keyframes star-movement-bottom {\n 0% {\n transform: translate(0%, 0%);\n opacity: 1;\n }\n 100% {\n transform: translate(-100%, 0%);\n opacity: 0;\n }\n }\n \n @keyframes star-movement-top {\n 0% {\n transform: translate(0%, 0%);\n opacity: 1;\n }\n 100% {\n transform: translate(100%, 0%);\n opacity: 0;\n }\n }\n "}),React.createElement(l,{className:`star-border-container ${r}`,...c},e("div",{className:"border-gradient-bottom",style:{background:`radial-gradient(circle, ${o}, transparent 10%)`,animationDuration:a}}),e("div",{className:"border-gradient-top",style:{background:`radial-gradient(circle, ${o}, transparent 10%)`,animationDuration:a}}),e("div",{className:"inner-content",children:s}))]})},_t=({sparkColor:n="#fff",sparkSize:o=10,sparkRadius:a=15,sparkCount:s=8,duration:c=400,easing:u="ease-out",extraScale:h=1,children:d})=>{const m=i(null),p=i([]),f=i(null);r(()=>{const e=m.current;if(!e)return;const t=e.parentElement;if(!t)return;let n;const i=()=>{const{width:n,height:i}=t.getBoundingClientRect();e.width===n&&e.height===i||(e.width=n,e.height=i)},r=new ResizeObserver(()=>{clearTimeout(n),n=setTimeout(i,100)});return r.observe(t),i(),()=>{r.disconnect(),clearTimeout(n)}},[]);const v=l(e=>{switch(u){case"linear":return e;case"ease-in":return e*e;case"ease-in-out":return e<.5?2*e*e:(4-2*e)*e-1;default:return e*(2-e)}},[u]);r(()=>{const e=m.current;if(!e)return;const t=e.getContext("2d");if(!t)return;let i;const r=s=>{f.current||(f.current=s),t?.clearRect(0,0,e.width,e.height),p.current=p.current.filter(e=>{const i=s-e.startTime;if(i>=c)return!1;const r=v(i/c),l=r*a*h,u=o*(1-r),d=e.x+l*Math.cos(e.angle),m=e.y+l*Math.sin(e.angle),