react-webgl-trails
Version:
A lightweight WebGL-based React component for creating a mouse trail effect.
4 lines (3 loc) • 1.95 kB
JavaScript
;var m=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of B(t))!p.call(e,a)&&a!==o&&m(e,a,{get:()=>t[a],enumerable:!(u=L(t,a))||u.enumerable});return e};var T=e=>x(m({},"__esModule",{value:!0}),e);var C={};P(C,{trails:()=>D});module.exports=T(C);var b=`attribute vec2 pos;
attribute float a;varying float v;void main() {gl_Position=vec4(pos, 0.0, 1.0);v=a;}`;var F=`precision mediump float;
uniform vec3 c;varying float v;void main() {gl_FragColor=vec4(c, v);}`;var D=(e,t=[1,0,0])=>{e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);let o=(r,c)=>{let n=e.createShader(r);return e.shaderSource(n,c),e.compileShader(n),n},u=()=>{let r=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,r),r},a=o(e.VERTEX_SHADER,b),S=o(e.FRAGMENT_SHADER,F),s=e.createProgram();e.attachShader(s,a),e.attachShader(s,S),e.linkProgram(s),e.useProgram(s);let R=(r,c)=>{let n=e.getAttribLocation(s,r);return e.vertexAttribPointer(n,c,e.FLOAT,!1,0,0),e.enableVertexAttribArray(n),n},h=R("pos",2),v=R("a",1),_=u(),E=u();e.uniform3f(e.getUniformLocation(s,"c"),...t);let A=!1,f=[],i=[],d=()=>{A=!0,i=i.map(r=>r/1.1),f=f.filter((r,c)=>i[c]>.001),i=i.filter(r=>r>.01),e.clear(e.COLOR_BUFFER_BIT),e.bindBuffer(e.ARRAY_BUFFER,_),e.bufferData(e.ARRAY_BUFFER,new Float32Array(f),e.STREAM_DRAW),e.vertexAttribPointer(h,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,E),e.bufferData(e.ARRAY_BUFFER,new Float32Array(i),e.STREAM_DRAW),e.vertexAttribPointer(v,1,e.FLOAT,!1,0,0),e.drawArrays(e.LINE_STRIP,0,f.length/2),f.length?requestAnimationFrame(d):A=!1};e.clearColor(0,0,0,0),addEventListener("mousemove",r=>{let c=r.clientX/innerWidth*2-1,n=r.clientY/innerHeight*-2+1;f.unshift(c,n),i.unshift(1),!A&&d()})};0&&(module.exports={trails});