retro-react/dist/cjs/components/mousetrail/MouseTrail.js

A React component library for building retro-style websites

"use strict";var e=require("react"),t=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),r=require("../../utils/classNames.js"),s=require("../../utils/getColorGradients.js"),i=require("./trails.js");const o=e.forwardRef(((o,n)=>{let{id:a,className:l,particleSize:c=5,particleColor:u="rainbow",offset:d={x:0,y:0},sx:m}=o;const h=d.y,v=d.x,f=e.useRef(null),[x,g]=e.useState([]),b=e.useRef({x:0,y:0});return e.useEffect((()=>{const e=e=>{var t;const r=null===(t=f.current)||void 0===t?void 0:t.getBoundingClientRect();r&&(b.current={x:e.clientX-r.left,y:e.clientY-r.top})},t=e=>{const t=Math.floor(1500*Math.random())+1e3;setTimeout((()=>{g((t=>t.map(((t,r)=>r===e?Object.assign(Object.assign({},t),{visible:!1}):t))))}),t)},r=setInterval((()=>{const e=s.getColorGradientOptions(u),r=e[Math.floor(Math.random()*e.length)],i=Math.floor(Math.random()*c)+c/2;g((e=>{const s=(e=>{for(let t=0;t<e.length;t++)if(!e[t].visible)return t;return-1})(e);if(-1!==s)e[s]={x:b.current.x-i/2+v,y:b.current.y-i/2+h,size:i,color:r,visible:!0},t(s);else if(e.length<50){const s=[...e,{x:b.current.x-i/2+v,y:b.current.y-i/2+h,size:i,color:r,visible:!0}];return t(s.length-1),s}return e}))}),50),i=setInterval((()=>{const e=Math.random()>.5;g((t=>t.map((t=>Object.assign(Object.assign({},t),{y:t.y+1+3*Math.random(),x:t.x+2*(Math.random()-.5),size:e?Math.max(0,t.size-.1):t.size})))))}),20);return window.addEventListener("mousemove",e),()=>{window.removeEventListener("mousemove",e),clearInterval(r),clearInterval(i)}}),[u,c]),t.jsx("div",Object.assign({id:a,sx:m,className:r.classNames("mouse-trail-root",l),ref:f,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none",zIndex:9999}},{children:x.map(((e,r)=>t.jsx(i.TrailingStar,{$top:e.y,$left:e.x,$width:e.size,$height:e.size,$color:e.color,$visible:e.visible},`retro-mouse-trail-star-${r}`)))}),void 0)}));o.displayName="MouseTrail",exports.MouseTrail=o;