react-text-particles
Version:
Create visually stunning text particles with React Text Particles and let your imagination run wild!
3 lines (2 loc) • 3.73 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,i=require("react"),e=(t=i)&&"object"==typeof t&&"default"in t?t.default:t,o=require("react-p5-wrapper"),r=function(){function t(t,i,e,o,r,a,n){void 0===n&&(n=0),this.p5=t,this.config=i,this.colorSet=e,this.baseSize=a,this.index=n,this.spawn=this.p5.createVector(o,r),this.init()}var i=t.prototype;return i.init=function(){var t;this.size=this.baseSize*this.p5.random(.5,1.5),this.start=this.p5.millis(),this.position=this.spawn.copy(),this.velocity=this.p5.createVector(0,0),this.acceleration=this.p5.createVector(0,0),this.duration=(null==(t=this.config)?void 0:t.lifeSpan)*this.p5.random(.2,1.2),this.drag=this.p5.random(.9,1),this.addForce(this.p5.createVector(this.p5.random(this.p5.TWO_PI),this.p5.random(10))),this.color=this.p5.random(this.colorSet)},i.display=function(){var t,i=this.p5.millis()-this.start,e=1;i<.1*this.duration?e=this.p5.map(i,0,.1*this.duration,0,1):i>.5*this.duration&&(e=this.p5.map(i,.5*this.duration,this.duration,1,0)),this.p5.fill(this.color),this.p5.circle(this.position.x,this.position.y,this.size*e*this.p5.map(this.velocity.mag(),0,null==(t=this.config)?void 0:t.topSpeed,.5,1.2))},i.update=function(){var t;this.velocity.add(this.acceleration),this.velocity.limit(null==(t=this.config)?void 0:t.topSpeed),this.velocity.mult(this.drag),this.position.add(this.velocity.copy().mult(1/this.p5._targetFrameRate)),this.acceleration.mult(0),(this.position.y>this.p5.height||this.p5.millis()-this.start>this.duration)&&this.init()},i.addForce=function(t){this.acceleration.add(t)},t}(),a=function(t){var i,e,o,a=[],n=[],s=[];function h(i){return t.floor(t.max(t.width,t.height)/t.min(i,t.min(t.width,t.height)))}t.setup=function(){var l,c,d,p,u,f;o&&(t.createCanvas(null==(l=o)||null==(l=l.canvas)?void 0:l.width,null==(c=o)||null==(c=c.canvas)?void 0:c.height),t.colorMode(t.HSL,100),t.frameRate(60),t.noStroke(),e=t.createVector(t.radians(null==(u=o)||null==(u=u.gravity)?void 0:u.direction),null==(f=o)||null==(f=f.gravity)?void 0:f.force),t.clear(),t.fill(0),t.textSize(null==(d=o)?void 0:d.textSize),t.textAlign(t.CENTER,t.CENTER),t.textStyle(t.BOLD),t.text(null==(p=o)?void 0:p.text,t.width/2,t.height/2),a=function(){for(var i=[],e=h(160),a=0,n=0;n<t.width;n+=e)for(var l=0;l<t.height;l+=e)t.get(n+e/2,l+e/2)[3]>.5&&(i.push(new r(t,o,s,n+e/2,l+e/2,3*e,a)),a++);return i}(),n=function(){for(var e=[],o=i=h(20),r=0,a=0;a<t.width;a+=o)for(var n=0;n<t.height;n+=o){r++;var s=t.noise(r)*t.TWO_PI;e[a+"-"+n]=s}return e}(),t.clear())},t.updateWithProps=function(i){i.config&&(o=i.config),i.colorSet&&(s=i.colorSet),t.setup()},t.draw=function(){var r;o&&(t.background((null==(r=o)||null==(r=r.canvas)?void 0:r.bg)||"white"),a.forEach((function(r){var a,s;r.addForce(e),r.addForce(t.createVector(n[Math.floor(r.position.x/i)*i+"-"+Math.floor(r.position.y/i)*i]+(null==(a=o)?void 0:a.flowOffset),null==(s=o)?void 0:s.flow)),r.update(),r.display()})))}},n=function(t){var r=i.useMemo((function(){return i.useState({colorSet:void 0===(p=(e=t).colorSet)?["#fbbf24","#e91e63","#60a5fa","#673ab7","#65a30d"]:p,config:{text:void 0===(o=e.text)?"Halil Atilla":o,textSize:void 0===(r=e.textSize)?160:r,flow:void 0===(n=e.flow)?.3:n,topSpeed:void 0===(s=e.topSpeed)?100:s,lifeSpan:void 0===(h=e.lifeSpan)?2e3:h,flowOffset:void 0===(l=e.flowOffset)?0:l,gravity:void 0===(c=e.gravity)?{direction:90,force:0}:c,canvas:void 0===(d=e.canvas)?{width:880,height:300,bg:"#161c1e"}:d},sketch:a})[0];var e,o,r,n,s,h,l,c,d,p}),[t]);return e.createElement(o.ReactP5Wrapper,{sketch:r.sketch,config:r.config,colorSet:r.colorSet})},s=e.memo(n);exports.TextParticles=n,exports.default=s;
//# sourceMappingURL=react-text-particles.cjs.production.min.js.map