snowfallreact
Version:
A React package for creating highly customizable snowfall effects. Perfect for adding a touch of winter magic to your web applications. Compatible with Next.js and ideal for enhancing the user interface with dynamic, seasonal visuals. Easy to integrate an
3 lines (2 loc) • 1.65 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),i=(t=e)&&"object"==typeof t&&"default"in t?t.default:t;exports.Snowfall=function(t){var n=t.imageSrc,h=t.windSpeed,r=void 0===h?0:h,s=t.windDirection,a=void 0===s?0:s,o=t.particleCount,d=void 0===o?17:o,u=e.useRef(null);return e.useEffect((function(){var t=u.current;if(t){var e=t.getContext("2d");if(e){var i=[],h=new Image;h.src=n,t.width=window.innerWidth,t.height=window.innerHeight;for(var s=a*Math.PI/180,o=function(){function i(){this.x=Math.random()*t.width,this.y=Math.random()*t.height,this.speed=1*Math.random()+1,this.size=70*Math.random()+5,this.rotation=360*Math.random(),this.rotationSpeed=2*(Math.random()-.5),this.xSpeed=r*Math.cos(s),this.ySpeed=r*Math.sin(s)}var n=i.prototype;return n.update=function(){this.y+=this.speed+this.ySpeed,this.x+=this.xSpeed,this.rotation+=this.rotationSpeed,this.y>t.height&&(this.y=-this.size,this.x=Math.random()*t.width),this.x>t.width?this.x=0:this.x<0&&(this.x=t.width)},n.draw=function(){e.save(),e.translate(this.x,this.y),e.rotate(this.rotation*Math.PI/180),e.drawImage(h,-this.size/2,-this.size/2,this.size,this.size),e.restore()},i}(),c=0;c<d;c++)i.push(new o);h.onload=function n(){e.clearRect(0,0,t.width,t.height),i.forEach((function(t){t.update(),t.draw()})),requestAnimationFrame(n)};var w=function(){t&&(t.width=window.innerWidth,t.height=window.innerHeight)};return window.addEventListener("resize",w),function(){window.removeEventListener("resize",w)}}}}),[n,r,a,d]),i.createElement("canvas",{ref:u,style:{display:"block"}})};
//# sourceMappingURL=snowfallreact.cjs.production.min.js.map