retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 906 B
JavaScript
;var e=require("react"),t=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js");const i=i=>{let{numStars:r=100,speed:n=1,size:s=2,starColor:l="white",style:a}=i;const h=e.useRef(null);return e.useEffect((()=>{const e=h.current;if(!e)return;const t=e.getContext("2d");if(!t)return;e.width=e.clientWidth,e.height=e.clientHeight;const i=Array.from({length:r},(()=>({x:Math.random()*e.width,y:Math.random()*e.height,velocity:(Math.random()+.5)*n})));let a;const o=()=>{t.fillStyle="black",t.fillRect(0,0,e.width,e.height),i.forEach((i=>{t.fillStyle=l,t.fillRect(i.x,i.y,s,s),i.y+=i.velocity,i.y>e.height&&(i.y=0,i.x=Math.random()*e.width)})),a=requestAnimationFrame(o)};return o(),()=>{cancelAnimationFrame(a)}}),[h,r,n,s,l]),t.jsx("canvas",{ref:h,style:Object.assign({width:"100%",height:"100%"},a)},void 0)};i.displayName="StarField",exports.StarField=i;