react-mouse-trails
Version:
A lightweight WebGL-based React component for creating a mouse trail effect.
4 lines (3 loc) • 1.46 kB
JavaScript
var m=`attribute vec2 pos;
attribute float a;varying float v;void main() {gl_Position=vec4(pos, 0.0, 1.0);v=a;}`;var R=`precision mediump float;
uniform vec3 c;varying float v;void main() {gl_FragColor=vec4(c, v);}`;var T=(e,d=[1,0,0])=>{e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);let s=(r,o)=>{let t=e.createShader(r);return e.shaderSource(t,o),e.compileShader(t),t},f=()=>{let r=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,r),r},b=s(e.VERTEX_SHADER,m),F=s(e.FRAGMENT_SHADER,R),a=e.createProgram();e.attachShader(a,b),e.attachShader(a,F),e.linkProgram(a),e.useProgram(a);let u=(r,o)=>{let t=e.getAttribLocation(a,r);return e.vertexAttribPointer(t,o,e.FLOAT,!1,0,0),e.enableVertexAttribArray(t),t},S=u("pos",2),h=u("a",1),v=f(),_=f();e.uniform3f(e.getUniformLocation(a,"c"),...d);let c=!1,i=[],n=[],A=()=>{c=!0,n=n.map(r=>r/1.1),i=i.filter((r,o)=>n[o]>.001),n=n.filter(r=>r>.01),e.clear(e.COLOR_BUFFER_BIT),e.bindBuffer(e.ARRAY_BUFFER,v),e.bufferData(e.ARRAY_BUFFER,new Float32Array(i),e.STREAM_DRAW),e.vertexAttribPointer(S,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,_),e.bufferData(e.ARRAY_BUFFER,new Float32Array(n),e.STREAM_DRAW),e.vertexAttribPointer(h,1,e.FLOAT,!1,0,0),e.drawArrays(e.LINE_STRIP,0,i.length/2),i.length?requestAnimationFrame(A):c=!1};e.clearColor(0,0,0,0),addEventListener("mousemove",r=>{let o=r.clientX/innerWidth*2-1,t=r.clientY/innerHeight*-2+1;i.unshift(o,t),n.unshift(1),!c&&A()})};export{T as a};