retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 2 kB
JavaScript
import{forwardRef as e,useRef as t,useState as r,useEffect as o}from"react";import{jsx as i}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as s}from"../../utils/classNames.js";import{getColorGradientOptions as n}from"../../utils/getColorGradients.js";import{TrailingStar as l}from"./trails.js";const a=e(((e,a)=>{let{id:c,className:m,particleSize:u=5,particleColor:d="rainbow",offset:h={x:0,y:0},sx:v}=e;const f=h.y,x=h.x,p=t(null),[g,b]=r([]),y=t({x:0,y:0});return o((()=>{const e=e=>{var t;const r=null===(t=p.current)||void 0===t?void 0:t.getBoundingClientRect();r&&(y.current={x:e.clientX-r.left,y:e.clientY-r.top})},t=e=>{const t=Math.floor(1500*Math.random())+1e3;setTimeout((()=>{b((t=>t.map(((t,r)=>r===e?Object.assign(Object.assign({},t),{visible:!1}):t))))}),t)},r=setInterval((()=>{const e=n(d),r=e[Math.floor(Math.random()*e.length)],o=Math.floor(Math.random()*u)+u/2;b((e=>{const i=(e=>{for(let t=0;t<e.length;t++)if(!e[t].visible)return t;return-1})(e);if(-1!==i)e[i]={x:y.current.x-o/2+x,y:y.current.y-o/2+f,size:o,color:r,visible:!0},t(i);else if(e.length<50){const i=[...e,{x:y.current.x-o/2+x,y:y.current.y-o/2+f,size:o,color:r,visible:!0}];return t(i.length-1),i}return e}))}),50),o=setInterval((()=>{const e=Math.random()>.5;b((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(o)}}),[d,u]),i("div",Object.assign({id:c,sx:v,className:s("mouse-trail-root",m),ref:p,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none",zIndex:9999}},{children:g.map(((e,t)=>i(l,{$top:e.y,$left:e.x,$width:e.size,$height:e.size,$color:e.color,$visible:e.visible},`retro-mouse-trail-star-${t}`)))}),void 0)}));a.displayName="MouseTrail";export{a as MouseTrail};