react-webgl-trails/dist/index.js

A lightweight WebGL-based React component for creating a mouse trail effect.

"use client";
"use strict";var R=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var i in t)R(e,i,{get:t[i],enumerable:!0})},H=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of x(t))!P.call(e,n)&&n!==i&&R(e,n,{get:()=>t[n],enumerable:!(o=T(t,n))||o.enumerable});return e};var y=e=>H(R({},"__esModule",{value:!0}),e);var D={};M(D,{MouseTrail:()=>U});module.exports=y(D);var d=require("react");var p=`attribute vec2 pos;
attribute float a;varying float v;void main() {gl_Position=vec4(pos, 0.0, 1.0);v=a;}`;var h=`precision mediump float;
uniform vec3 c;varying float v;void main() {gl_FragColor=vec4(c, v);}`;var E=(e,t=[1,0,0])=>{e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);let i=(r,f)=>{let a=e.createShader(r);return e.shaderSource(a,f),e.compileShader(a),a},o=()=>{let r=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,r),r},n=i(e.VERTEX_SHADER,p),m=i(e.FRAGMENT_SHADER,h),c=e.createProgram();e.attachShader(c,n),e.attachShader(c,m),e.linkProgram(c),e.useProgram(c);let b=(r,f)=>{let a=e.getAttribLocation(c,r);return e.vertexAttribPointer(a,f,e.FLOAT,!1,0,0),e.enableVertexAttribArray(a),a},F=b("pos",2),S=b("a",1),_=o(),B=o();e.uniform3f(e.getUniformLocation(c,"c"),...t);let A=!1,u=[],s=[],v=()=>{A=!0,s=s.map(r=>r/1.1),u=u.filter((r,f)=>s[f]>.001),s=s.filter(r=>r>.01),e.clear(e.COLOR_BUFFER_BIT),e.bindBuffer(e.ARRAY_BUFFER,_),e.bufferData(e.ARRAY_BUFFER,new Float32Array(u),e.STREAM_DRAW),e.vertexAttribPointer(F,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,B),e.bufferData(e.ARRAY_BUFFER,new Float32Array(s),e.STREAM_DRAW),e.vertexAttribPointer(S,1,e.FLOAT,!1,0,0),e.drawArrays(e.LINE_STRIP,0,u.length/2),u.length?requestAnimationFrame(v):A=!1};e.clearColor(0,0,0,0),addEventListener("mousemove",r=>{let f=r.clientX/innerWidth*2-1,a=r.clientY/innerHeight*-2+1;u.unshift(f,a),s.unshift(1),!A&&v()})};var L=require("react/jsx-runtime"),U=({rgb:e,...t})=>{let i=(0,d.useRef)(null);return(0,d.useEffect)(()=>{let o=i.current,n=o==null?void 0:o.getContext("webgl");if(!n||!o)return;let m=()=>{o.width=innerWidth,o.height=innerHeight,n.viewport(0,0,n.drawingBufferWidth,n.drawingBufferHeight)};return m(),E(n,e),addEventListener("resize",m),()=>{removeEventListener("resize",m)}},[e]),(0,L.jsx)("canvas",{style:{pointerEvents:"none",position:"fixed",top:0,left:0},...t,ref:i})};0&&(module.exports={MouseTrail});