@blur-ui/mesh-gradient
Version:
The Mesh Gradient component for React
387 lines (297 loc) • 29.1 kB
JavaScript
"use client";
var D=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var $=(h,o)=>{for(var a in o)D(h,a,{get:o[a],enumerable:!0})},j=(h,o,a,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let u of V(o))!q.call(h,u)&&u!==a&&D(h,u,{get:()=>o[u],enumerable:!(c=I(o,u))||c.enumerable});return h};var k=h=>j(D({},"__esModule",{value:!0}),h);var Y={};$(Y,{Gradient:()=>L,GradientColors:()=>w,MeshGradient:()=>E});module.exports=k(Y);var R=require("react");var P=require("@blur-ui/react-utils"),S=require("react");var f=require("react"),M=require("react-intersection-observer");function H(h){return[(h>>16&255)/255,(h>>8&255)/255,(255&h)/255]}["SCREEN","LINEAR_LIGHT"].reduce((h,o,a)=>Object.assign(h,{[o]:a}),{});var _=class{constructor(o,a,c,u=!1){let l=this,x=document.location.search.toLowerCase().indexOf("debug=webgl")!==-1;l.canvas=o,l.gl=l.canvas.getContext("webgl",{antialias:!0}),l.meshes=[];let s=l.gl;a&&c&&this.setSize(a,c),l.lastDebugMsg,l.debug=u&&x?function(r){let n=new Date;n-l.lastDebugMsg>1e3&&console.log("---"),console.log(n.toLocaleTimeString()+Array(Math.max(0,32-r.length)).join(" ")+r+": ",...Array.from(arguments).slice(1)),l.lastDebugMsg=n}:()=>{},Object.defineProperties(l,{Material:{enumerable:!1,value:class{constructor(r,n,e={}){let t=this;function d(C,p){let g=s.createShader(C);return s.shaderSource(g,p),s.compileShader(g),s.getShaderParameter(g,s.COMPILE_STATUS),g}function b(C,p){return Object.entries(C).map(([g,y])=>y?y.getDeclaration(g,p):"").filter(Boolean).join(`
`)}t.uniforms=e,t.uniformInstances=[];let v=`
precision highp float;
`;t.vertexSource=`
${v}
attribute vec4 position;
attribute vec2 uv;
attribute vec2 uvNorm;
${b(l.commonUniforms,"vertex")}
${b(e,"vertex")}
${r}
`,t.Source=`
${v}
${b(l.commonUniforms,"fragment")}
${b(e,"fragment")}
${n}
`,t.vertexShader=d(s.VERTEX_SHADER,t.vertexSource),t.fragmentShader=d(s.FRAGMENT_SHADER,t.Source),t.program=s.createProgram(),s.attachShader(t.program,t.vertexShader),s.attachShader(t.program,t.fragmentShader),s.linkProgram(t.program),s.getProgramParameter(t.program,s.LINK_STATUS),s.useProgram(t.program),t.attachUniforms(void 0,l.commonUniforms),t.attachUniforms(void 0,t.uniforms)}attachUniforms(r,n){let e=this;r===void 0?Object.entries(n).forEach(([t,d])=>{e.attachUniforms(t,d)}):n.type=="array"?n.value.forEach((t,d)=>e.attachUniforms(`${r}[${d}]`,t)):n.type=="struct"?Object.entries(n.value).forEach(([t,d])=>e.attachUniforms(`${r}.${t}`,d)):e.uniformInstances.push({uniform:n,location:s.getUniformLocation(e.program,r)})}}},Uniform:{enumerable:!1,value:class{constructor(r){this.type="float",Object.assign(this,r),this.typeFn={float:"1f",int:"1i",vec2:"2fv",vec3:"3fv",vec4:"4fv",mat4:"Matrix4fv"}[this.type]||"1f",this.update()}update(r){this.value!==void 0&&s[`uniform${this.typeFn}`](r,this.typeFn.indexOf("Matrix")===0?this.transpose:this.value,this.typeFn.indexOf("Matrix")===0?this.value:null)}getDeclaration(r,n,e){let t=this;if(t.excludeFrom!==n){if(t.type==="array")return!t.value||!t.value.length||!t.value[0]?"":t.value[0].getDeclaration(r,n,t.value.length)+`
const int ${r}_length = ${t.value.length};`;if(t.type==="struct"){let d=r.replace("u_","");return d=d.charAt(0).toUpperCase()+d.slice(1),`uniform struct ${d}
{
`+Object.entries(t.value).map(([b,v])=>v.getDeclaration(b,n).replace(/^uniform/,"")).join("")+`
} ${r}${e>0?`[${e}]`:""};`}return`uniform ${t.type} ${r}${e>0?`[${e}]`:""};`}return""}}},PlaneGeometry:{enumerable:!1,value:class{constructor(r,n,e,t,d){s.createBuffer(),this.attributes={position:new l.Attribute({target:s.ARRAY_BUFFER,size:3}),uv:new l.Attribute({target:s.ARRAY_BUFFER,size:2}),uvNorm:new l.Attribute({target:s.ARRAY_BUFFER,size:2}),index:new l.Attribute({target:s.ELEMENT_ARRAY_BUFFER,size:3,type:s.UNSIGNED_SHORT})},this.setTopology(e,t),this.setSize(r,n,d)}setTopology(r=1,n=1){let e=this;e.xSegCount=r,e.ySegCount=n,e.vertexCount=(e.xSegCount+1)*(e.ySegCount+1),e.quadCount=e.xSegCount*e.ySegCount*2,e.attributes.uv.values=new Float32Array(2*e.vertexCount),e.attributes.uvNorm.values=new Float32Array(2*e.vertexCount),e.attributes.index.values=new Uint16Array(3*e.quadCount);for(let t=0;t<=e.ySegCount;t++)for(let d=0;d<=e.xSegCount;d++){let b=t*(e.xSegCount+1)+d;if(e.attributes.uv.values[2*b]=d/e.xSegCount,e.attributes.uv.values[2*b+1]=1-t/e.ySegCount,e.attributes.uvNorm.values[2*b]=d/e.xSegCount*2-1,e.attributes.uvNorm.values[2*b+1]=1-t/e.ySegCount*2,d<e.xSegCount&&t<e.ySegCount){let v=t*e.xSegCount+d;e.attributes.index.values[6*v]=b,e.attributes.index.values[6*v+1]=b+1+e.xSegCount,e.attributes.index.values[6*v+2]=b+1,e.attributes.index.values[6*v+3]=b+1,e.attributes.index.values[6*v+4]=b+1+e.xSegCount,e.attributes.index.values[6*v+5]=b+2+e.xSegCount}}e.attributes.uv.update(),e.attributes.uvNorm.update(),e.attributes.index.update()}setSize(r=1,n=1,e="xz"){let t=this;t.width=r,t.height=n,t.orientation=e,t.attributes.position.values&&t.attributes.position.values.length===3*t.vertexCount||(t.attributes.position.values=new Float32Array(3*t.vertexCount));let d=r/-2,b=n/-2,v=r/t.xSegCount,C=n/t.ySegCount;for(let p=0;p<=t.ySegCount;p++){let g=b+p*C;for(let y=0;y<=t.xSegCount;y++){let m=d+y*v,A=p*(t.xSegCount+1)+y;t.attributes.position.values[3*A+"xyz".indexOf(e[0])]=m,t.attributes.position.values[3*A+"xyz".indexOf(e[1])]=-g}}t.attributes.position.update()}}},Mesh:{enumerable:!1,value:class{constructor(r,n){let e=this;e.geometry=r,e.material=n,e.wireframe=!1,e.attributeInstances=[],Object.entries(e.geometry.attributes).forEach(([t,d])=>{e.attributeInstances.push({attribute:d,location:d.attach(t,e.material.program)})}),l.meshes.push(e)}draw(){s.useProgram(this.material.program),this.material.uniformInstances.forEach(({uniform:r,location:n})=>r.update(n)),this.attributeInstances.forEach(({attribute:r,location:n})=>r.use(n)),s.drawElements(this.wireframe?s.LINES:s.TRIANGLES,this.geometry.attributes.index.values.length,s.UNSIGNED_SHORT,0)}remove(){l.meshes=l.meshes.filter(r=>r!=this)}}},Attribute:{enumerable:!1,value:class{constructor(r){this.type=s.FLOAT,this.normalized=!1,this.buffer=s.createBuffer(),Object.assign(this,r),this.update()}update(){this.values!==void 0&&(s.bindBuffer(this.target,this.buffer),s.bufferData(this.target,this.values,s.STATIC_DRAW))}attach(r,n){let e=s.getAttribLocation(n,r);return this.target===s.ARRAY_BUFFER&&(s.enableVertexAttribArray(e),s.vertexAttribPointer(e,this.size,this.type,this.normalized,0,0)),e}use(r){s.bindBuffer(this.target,this.buffer),this.target===s.ARRAY_BUFFER&&(s.enableVertexAttribArray(r),s.vertexAttribPointer(r,this.size,this.type,this.normalized,0,0))}}}});let F=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];l.commonUniforms={projectionMatrix:new l.Uniform({type:"mat4",value:F}),modelViewMatrix:new l.Uniform({type:"mat4",value:F}),resolution:new l.Uniform({type:"vec2",value:[1,1]}),aspectRatio:new l.Uniform({type:"float",value:1})}}setSize(o=640,a=480){this.width=o,this.height=a,this.canvas.width=o,this.canvas.height=a,this.gl.viewport(0,0,o,a),this.commonUniforms.resolution.value=[o,a],this.commonUniforms.aspectRatio.value=o/a}setOrthographicCamera(o=0,a=0,c=0,u=-2e3,l=2e3){this.commonUniforms.projectionMatrix.value=[2/this.width,0,0,0,0,2/this.height,0,0,0,0,2/(u-l),0,o,a,c,1]}render(){this.gl.clearColor(0,0,0,0),this.gl.clearDepth(1),this.meshes.forEach(o=>o.draw())}};function i(h,o,a){return o in h?Object.defineProperty(h,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):h[o]=a,h}var L=class{constructor({seed:o=5,width:a=0,height:c=600}){i(this,"el",void 0),i(this,"frame",0),i(this,"cssVarRetries",0),i(this,"maxCssVarRetries",200),i(this,"angle",0),i(this,"isLoadedClass",!1),i(this,"isScrolling",!1),i(this,"scrollingTimeout",void 0),i(this,"scrollingRefreshDelay",200),i(this,"isIntersecting",!1),i(this,"shaderFiles",void 0),i(this,"vertexShader",void 0),i(this,"sectionColors",void 0),i(this,"computedCanvasStyle",void 0),i(this,"conf",void 0),i(this,"uniforms",void 0),i(this,"t",1253106),i(this,"last",0),i(this,"width",void 0),i(this,"minWidth",1111),i(this,"height",c),i(this,"xSegCount",void 0),i(this,"ySegCount",void 0),i(this,"mesh",void 0),i(this,"material",void 0),i(this,"geometry",void 0),i(this,"minigl",void 0),i(this,"scrollObserver",void 0),i(this,"amp",320),i(this,"seed",o),i(this,"freqX",14e-5),i(this,"freqY",29e-5),i(this,"freqDelta",1e-5),i(this,"activeColors",[1,1,1,1]),i(this,"isMetaKey",!1),i(this,"isGradientLegendVisible",!1),i(this,"isMouseDown",!1),i(this,"handleScroll",()=>{clearTimeout(this.scrollingTimeout),this.scrollingTimeout=setTimeout(this.handleScrollEnd,this.scrollingRefreshDelay),this.isGradientLegendVisible&&this.hideGradientLegend(),this.conf.playing&&(this.isScrolling=!0,this.pause())}),i(this,"handleScrollEnd",()=>{this.isScrolling=!1,this.isIntersecting&&this.play()}),i(this,"resize",()=>{this.width=a||window.innerWidth,this.minigl.setSize(this.width,this.height),this.minigl.setOrthographicCamera(),this.xSegCount=Math.ceil(this.width*this.conf.density[0]),this.ySegCount=Math.ceil(this.height*this.conf.density[1]),this.mesh.geometry.setTopology(this.xSegCount,this.ySegCount),this.mesh.geometry.setSize(this.width,this.height),this.mesh.material.uniforms.u_shadow_power.value=this.width<600?5:6}),i(this,"handleMouseDown",u=>{this.isGradientLegendVisible&&(this.isMetaKey=u.metaKey,this.isMouseDown=!0,this.conf.playing===!1&&requestAnimationFrame(this.animate))}),i(this,"handleMouseUp",()=>{this.isMouseDown=!1}),i(this,"animate",u=>{var l;if(!this.shouldSkipFrame(u)||this.isMouseDown){if(this.t+=Math.min(u-this.last,1e3/15),this.last=u,this.isMouseDown){let x=160;this.isMetaKey&&(x=-160),this.t+=x}this!=null&&this.mesh&&((l=this==null?void 0:this.mesh)!=null&&l.material)&&(this.mesh.material.uniforms.u_time.value=this.t,this.minigl.render())}if(this.last!==0&&this.isStatic)return this.minigl.render(),void this.disconnect();this.frame+=1,(this.conf.playing||this.isMouseDown)&&requestAnimationFrame(this.animate)}),i(this,"addIsLoadedClass",()=>{!this.isLoadedClass&&(this.isLoadedClass=!0,this.el.classList.add("isLoaded"),setTimeout(()=>{this.el.parentElement.classList.add("isLoaded")},3e3))}),i(this,"pause",()=>{this.conf.playing=!1}),i(this,"play",()=>{requestAnimationFrame(this.animate),this.conf.playing=!0}),i(this,"initGradient",u=>(this.el=document.querySelector(u),this.el&&this.connect(),this))}async connect(){this.shaderFiles={vertex:`varying vec3 v_color;
void main() {
float time = u_time * u_global.noiseSpeed;
vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq;
vec2 st = 1. - uvNorm.xy;
//
// Tilting the plane
//
// Front-to-back tilt
float tilt = resolution.y / 2.0 * uvNorm.y;
// Left-to-right angle
float incline = resolution.x * uvNorm.x / 2.0 * u_vertDeform.incline;
// Up-down shift to offset incline
float offset = resolution.x / 2.0 * u_vertDeform.incline * mix(u_vertDeform.offsetBottom, u_vertDeform.offsetTop, uv.y);
//
// Vertex noise
//
float noise = snoise(vec3(
noiseCoord.x * u_vertDeform.noiseFreq.x + time * u_vertDeform.noiseFlow,
noiseCoord.y * u_vertDeform.noiseFreq.y,
time * u_vertDeform.noiseSpeed + u_vertDeform.noiseSeed
)) * u_vertDeform.noiseAmp;
// Fade noise to zero at edges
noise *= 1.0 - pow(abs(uvNorm.y), 2.0);
// Clamp to 0
noise = max(0.0, noise);
vec3 pos = vec3(
position.x,
position.y + tilt + incline + noise - offset,
position.z
);
//
// Vertex color, to be passed to fragment shader
//
if (u_active_colors[0] == 1.) {
v_color = u_baseColor;
}
for (int i = 0; i < u_waveLayers_length; i++) {
if (u_active_colors[i + 1] == 1.) {
WaveLayers layer = u_waveLayers[i];
float noise = smoothstep(
layer.noiseFloor,
layer.noiseCeil,
snoise(vec3(
noiseCoord.x * layer.noiseFreq.x + time * layer.noiseFlow,
noiseCoord.y * layer.noiseFreq.y,
time * layer.noiseSpeed + layer.noiseSeed
)) / 2.0 + 0.5
);
v_color = blendNormal(v_color, layer.color, pow(noise, 4.));
}
}
//
// Finish
//
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}`,noise:`//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : stegu
// Lastmod : 20110822 (ijm)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise
// https://github.com/stegu/webgl-noise
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v)
{
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}`,blend:`//
// https://github.com/jamieowen/glsl-blend
//
// Normal
vec3 blendNormal(vec3 base, vec3 blend) {
return blend;
}
vec3 blendNormal(vec3 base, vec3 blend, float opacity) {
return (blendNormal(base, blend) * opacity + base * (1.0 - opacity));
}
// Screen
float blendScreen(float base, float blend) {
return 1.0-((1.0-base)*(1.0-blend));
}
vec3 blendScreen(vec3 base, vec3 blend) {
return vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));
}
vec3 blendScreen(vec3 base, vec3 blend, float opacity) {
return (blendScreen(base, blend) * opacity + base * (1.0 - opacity));
}
// Multiply
vec3 blendMultiply(vec3 base, vec3 blend) {
return base*blend;
}
vec3 blendMultiply(vec3 base, vec3 blend, float opacity) {
return (blendMultiply(base, blend) * opacity + base * (1.0 - opacity));
}
// Overlay
float blendOverlay(float base, float blend) {
return base<0.5?(2.0*base*blend):(1.0-2.0*(1.0-base)*(1.0-blend));
}
vec3 blendOverlay(vec3 base, vec3 blend) {
return vec3(blendOverlay(base.r,blend.r),blendOverlay(base.g,blend.g),blendOverlay(base.b,blend.b));
}
vec3 blendOverlay(vec3 base, vec3 blend, float opacity) {
return (blendOverlay(base, blend) * opacity + base * (1.0 - opacity));
}
// Hard light
vec3 blendHardLight(vec3 base, vec3 blend) {
return blendOverlay(blend,base);
}
vec3 blendHardLight(vec3 base, vec3 blend, float opacity) {
return (blendHardLight(base, blend) * opacity + base * (1.0 - opacity));
}
// Soft light
float blendSoftLight(float base, float blend) {
return (blend<0.5)?(2.0*base*blend+base*base*(1.0-2.0*blend)):(sqrt(base)*(2.0*blend-1.0)+2.0*base*(1.0-blend));
}
vec3 blendSoftLight(vec3 base, vec3 blend) {
return vec3(blendSoftLight(base.r,blend.r),blendSoftLight(base.g,blend.g),blendSoftLight(base.b,blend.b));
}
vec3 blendSoftLight(vec3 base, vec3 blend, float opacity) {
return (blendSoftLight(base, blend) * opacity + base * (1.0 - opacity));
}
// Color dodge
float blendColorDodge(float base, float blend) {
return (blend==1.0)?blend:min(base/(1.0-blend),1.0);
}
vec3 blendColorDodge(vec3 base, vec3 blend) {
return vec3(blendColorDodge(base.r,blend.r),blendColorDodge(base.g,blend.g),blendColorDodge(base.b,blend.b));
}
vec3 blendColorDodge(vec3 base, vec3 blend, float opacity) {
return (blendColorDodge(base, blend) * opacity + base * (1.0 - opacity));
}
// Color burn
float blendColorBurn(float base, float blend) {
return (blend==0.0)?blend:max((1.0-((1.0-base)/blend)),0.0);
}
vec3 blendColorBurn(vec3 base, vec3 blend) {
return vec3(blendColorBurn(base.r,blend.r),blendColorBurn(base.g,blend.g),blendColorBurn(base.b,blend.b));
}
vec3 blendColorBurn(vec3 base, vec3 blend, float opacity) {
return (blendColorBurn(base, blend) * opacity + base * (1.0 - opacity));
}
// Vivid Light
float blendVividLight(float base, float blend) {
return (blend<0.5)?blendColorBurn(base,(2.0*blend)):blendColorDodge(base,(2.0*(blend-0.5)));
}
vec3 blendVividLight(vec3 base, vec3 blend) {
return vec3(blendVividLight(base.r,blend.r),blendVividLight(base.g,blend.g),blendVividLight(base.b,blend.b));
}
vec3 blendVividLight(vec3 base, vec3 blend, float opacity) {
return (blendVividLight(base, blend) * opacity + base * (1.0 - opacity));
}
// Lighten
float blendLighten(float base, float blend) {
return max(blend,base);
}
vec3 blendLighten(vec3 base, vec3 blend) {
return vec3(blendLighten(base.r,blend.r),blendLighten(base.g,blend.g),blendLighten(base.b,blend.b));
}
vec3 blendLighten(vec3 base, vec3 blend, float opacity) {
return (blendLighten(base, blend) * opacity + base * (1.0 - opacity));
}
// Linear burn
float blendLinearBurn(float base, float blend) {
// Note : Same implementation as BlendSubtractf
return max(base+blend-1.0,0.0);
}
vec3 blendLinearBurn(vec3 base, vec3 blend) {
// Note : Same implementation as BlendSubtract
return max(base+blend-vec3(1.0),vec3(0.0));
}
vec3 blendLinearBurn(vec3 base, vec3 blend, float opacity) {
return (blendLinearBurn(base, blend) * opacity + base * (1.0 - opacity));
}
// Linear dodge
float blendLinearDodge(float base, float blend) {
// Note : Same implementation as BlendAddf
return min(base+blend,1.0);
}
vec3 blendLinearDodge(vec3 base, vec3 blend) {
// Note : Same implementation as BlendAdd
return min(base+blend,vec3(1.0));
}
vec3 blendLinearDodge(vec3 base, vec3 blend, float opacity) {
return (blendLinearDodge(base, blend) * opacity + base * (1.0 - opacity));
}
// Linear light
float blendLinearLight(float base, float blend) {
return blend<0.5?blendLinearBurn(base,(2.0*blend)):blendLinearDodge(base,(2.0*(blend-0.5)));
}
vec3 blendLinearLight(vec3 base, vec3 blend) {
return vec3(blendLinearLight(base.r,blend.r),blendLinearLight(base.g,blend.g),blendLinearLight(base.b,blend.b));
}
vec3 blendLinearLight(vec3 base, vec3 blend, float opacity) {
return (blendLinearLight(base, blend) * opacity + base * (1.0 - opacity));
}`,fragment:`varying vec3 v_color;
void main() {
vec3 color = v_color;
if (u_darken_top == 1.0) {
vec2 st = gl_FragCoord.xy/resolution.xy;
color.g -= pow(st.y + sin(-12.0) * st.x, u_shadow_power) * 0.4;
}
gl_FragColor = vec4(color, 1.0);
}`},this.conf={presetName:"",wireframe:!1,density:[.06,.16],zoom:1,rotation:0,playing:!0},document.querySelectorAll("canvas").length<1?console.log("DID NOT LOAD HERO STRIPE CANVAS"):(this.minigl=new _(this.el,null,null,!0),requestAnimationFrame(()=>{this.el&&(this.computedCanvasStyle=getComputedStyle(this.el),this.waitForCssVars())}))}disconnect(){this.scrollObserver&&(window.removeEventListener("scroll",this.handleScroll),window.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp),window.removeEventListener("keydown",this.handleKeyDown),this.scrollObserver.disconnect()),window.removeEventListener("resize",this.resize)}initMaterial(){var o,a;this.uniforms={u_time:new this.minigl.Uniform({value:0}),u_shadow_power:new this.minigl.Uniform({value:5}),u_darken_top:new this.minigl.Uniform({value:((a=(o=this==null?void 0:this.el)==null?void 0:o.dataset)==null?void 0:a.jsDarkenTop)===""?1:0}),u_active_colors:new this.minigl.Uniform({value:this.activeColors,type:"vec4"}),u_global:new this.minigl.Uniform({value:{noiseFreq:new this.minigl.Uniform({value:[this.freqX,this.freqY],type:"vec2"}),noiseSpeed:new this.minigl.Uniform({value:5e-6})},type:"struct"}),u_vertDeform:new this.minigl.Uniform({value:{incline:new this.minigl.Uniform({value:Math.sin(this.angle)/Math.cos(this.angle)}),offsetTop:new this.minigl.Uniform({value:-.5}),offsetBottom:new this.minigl.Uniform({value:-.5}),noiseFreq:new this.minigl.Uniform({value:[3,4],type:"vec2"}),noiseAmp:new this.minigl.Uniform({value:this.amp}),noiseSpeed:new this.minigl.Uniform({value:10}),noiseFlow:new this.minigl.Uniform({value:3}),noiseSeed:new this.minigl.Uniform({value:this.seed})},type:"struct",excludeFrom:"fragment"}),u_baseColor:new this.minigl.Uniform({value:this.sectionColors[0],type:"vec3",excludeFrom:"fragment"}),u_waveLayers:new this.minigl.Uniform({value:[],excludeFrom:"fragment",type:"array"})};for(let c=1;c<this.sectionColors.length;c+=1)this.uniforms.u_waveLayers.value.push(new this.minigl.Uniform({value:{color:new this.minigl.Uniform({value:this.sectionColors[c],type:"vec3"}),noiseFreq:new this.minigl.Uniform({value:[2+c/this.sectionColors.length,3+c/this.sectionColors.length],type:"vec2"}),noiseSpeed:new this.minigl.Uniform({value:11+.3*c}),noiseFlow:new this.minigl.Uniform({value:6.5+.3*c}),noiseSeed:new this.minigl.Uniform({value:this.seed+10*c}),noiseFloor:new this.minigl.Uniform({value:.1}),noiseCeil:new this.minigl.Uniform({value:.63+.07*c})},type:"struct"}));return this.vertexShader=[this.shaderFiles.noise,this.shaderFiles.blend,this.shaderFiles.vertex].join(`
`),new this.minigl.Material(this.vertexShader,this.shaderFiles.fragment,this.uniforms)}initMesh(){this.material=this.initMaterial(),this.geometry=new this.minigl.PlaneGeometry,this.mesh=new this.minigl.Mesh(this.geometry,this.material)}shouldSkipFrame(){return!!window.document.hidden||!this.conf.playing||this.frame%2==0||void 0}updateFrequency(o){this.freqX+=o,this.freqY+=o}toggleColor(o){this.activeColors[o]=this.activeColors[o]===0?1:0}showGradientLegend(){this.width>this.minWidth&&(this.isGradientLegendVisible=!0,document.body.classList.add("isGradientLegendVisible"))}hideGradientLegend(){this.isGradientLegendVisible=!1,document.body.classList.remove("isGradientLegendVisible")}init(){this.initGradientColors(),this.initMesh(),this.resize(),requestAnimationFrame(this.animate),window.addEventListener("resize",this.resize)}waitForCssVars(){if(this.computedCanvasStyle&&this.computedCanvasStyle.getPropertyValue("--gradient-color-1").indexOf("#")!==-1)this.init(),this.addIsLoadedClass();else{if(this.cssVarRetries+=1,this.cssVarRetries>this.maxCssVarRetries)return this.sectionColors=[16711680,16711680,16711935,65280,255],void this.init();requestAnimationFrame(()=>this.waitForCssVars())}}initGradientColors(){this.sectionColors=["--gradient-color-1","--gradient-color-2","--gradient-color-3","--gradient-color-4"].map(o=>{let a=this.computedCanvasStyle.getPropertyValue(o).trim();return a.length===4&&(a=`#${a.substr(1).split("").map(u=>u+u).join("")}`),a&&`0x${a.substr(1)}`}).filter(Boolean).map(H)}};var w={green:{color1:"#043D5D",color2:"#032E46",color3:"#23B684",color4:"#0F595E"},peach:{color1:"#FE6860",color2:"#FE8A71",color3:"#D9BBAE",color4:"#F3C9BF"},sky:{color1:"#c3e4ff",color2:"#6ec3f4",color3:"#eae2ff",color4:"#b9beff"},purple:{color1:"#ba53df",color2:"#7948ea",color3:"#6b03b0",color4:"#210368"},yellow:{color1:"#ffa061",color2:"#ffc370",color3:"#d9ceaf",color4:"#f2ecbf"},lime:{color1:"#d5ff61",color2:"#b0ff70",color3:"#d0d9af",color4:"#dbf2bf"},sunrise:{color1:"#8a519a",color2:"#6101c1",color3:"#e24097",color4:"#f3121d"},oceanic:{color1:"#005377",color2:"#00A8E8",color3:"#FFFFFF",color4:"#00A8E8"},twilight:{color1:"#2c3e50",color2:"#4ca1af",color3:"#c94b4b",color4:"#e96443"},forest:{color1:"#0B486B",color2:"#F56217",color3:"#5BC0BE",color4:"#6FB98F"},ember:{color1:"#FF4E50",color2:"#F9D423",color3:"#EDE574",color4:"#E1F5C4"},sunset:{color1:"#ff7e5f",color2:"#feb47b",color3:"#ff9a8b",color4:"#ff6a88"},midnight:{color1:"#2c3e50",color2:"#4ca1af",color3:"#c94b4b",color4:"#e96443"},coral:{color1:"#ff6f61",color2:"#d7263d",color3:"#3f88c5",color4:"#1b1b2f"},lavender:{color1:"#c3aed6",color2:"#a28fd0",color3:"#8668c7",color4:"#654ba5"},mint:{color1:"#3eb489",color2:"#3eb489",color3:"#38ef7d",color4:"#11998e"},dusk:{color1:"#141e30",color2:"#243b55",color3:"#302b63",color4:"#0f0c29"},aurora:{color1:"#00c6ff",color2:"#0072ff",color3:"#00b09b",color4:"#96c93d"},berry:{color1:"#ff6f91",color2:"#ff9671",color3:"#ffc75f",color4:"#f9f871"},teal:{color1:"#008080",color2:"#00b3b3",color3:"#00cccc",color4:"#33ffff"},sunsetBlaze:{color1:"#FF7E5F",color2:"#FD3A69",color3:"#FF6A88",color4:"#FF99AC"},oceanDream:{color1:"#00B4DB",color2:"#0083B0",color3:"#00C6FF",color4:"#0072FF"},twilightPurple:{color1:"#5D3FD3",color2:"#A389D4",color3:"#C5B0E3",color4:"#D9B3FF"},forestMystic:{color1:"#1B512D",color2:"#77B1A9",color3:"#B5EAEA",color4:"#E3FDFD"},auroraBorealis:{color1:"#00F260",color2:"#0575E6",color3:"#2AF598",color4:"#3A7BD5"},desertSunset:{color1:"#FFA17F",color2:"#00223E",color3:"#FC4A1A",color4:"#F7B733"},emeraldGlow:{color1:"#0F2027",color2:"#203A43",color3:"#2C5364",color4:"#4CA1AF"},rubySunrise:{color1:"#FF512F",color2:"#DD2476",color3:"#FF6A88",color4:"#FF99AC"}};var U=({domRef:h,canvasId:o,animationDuration:a,theme:c,colors:u,seed:l,isPaused:x,darken:s,width:F,height:r})=>{let n=(0,f.useRef)(null),{ref:e,inView:t}=(0,M.useInView)({threshold:0}),[d,b]=(0,f.useState)(!1),v=(0,f.useCallback)(m=>{h.current=m,e(m)},[e]),C=(0,f.useCallback)(()=>{b(!1)},[]),p=(0,f.useCallback)(m=>{b(!0),setTimeout(()=>{var A;(A=n.current)==null||A.initGradient(`#${o}`),m()},a)},[a,n,o]),g=(0,f.useCallback)(()=>{p(()=>{requestAnimationFrame(()=>{C()})})},[p,C]);(0,f.useEffect)(()=>{if(!n.current){let m=new L({seed:l,width:F,height:r});m.initGradient(`#${o}`),n.current=m}},[]),(0,f.useEffect)(()=>{n.current&&(x||!t?n.current.pause():!x&&t&&n.current.play())},[n.current,x,t]),(0,f.useEffect)(()=>{if(n.current&&h.current){let m=h.current;s?(m==null||m.setAttribute("data-js-darken-top",""),g()):(m==null||m.removeAttribute("data-js-darken-top"),g())}},[s,h==null?void 0:h.current,n.current]),(0,f.useEffect)(()=>{n!=null&&n.current&&g()},[c,u,n]);let y=(0,f.useMemo)(()=>u?{"--gradient-color-1":u.color1,"--gradient-color-2":u.color2,"--gradient-color-3":u.color3,"--gradient-color-4":u.color4}:{"--gradient-color-1":w[c].color1,"--gradient-color-2":w[c].color2,"--gradient-color-3":w[c].color3,"--gradient-color-4":w[c].color4},[u,c]);return{setRefs:v,colorVars:y,isFading:d}};var T=150,z=5,G=1,B="twilightPurple";var O=h=>{let{ref:o,style:a,animationDuration:c=T,theme:u=B,opacity:l=G,seed:x=z,isPaused:s=!1,darken:F=!1,colors:r,width:n=0,height:e=600,...t}=h,d=(0,P.useObjectRef)(o),b=(0,S.useId)().replace(/[:]/g,""),v=(0,S.useMemo)(()=>`gradient-canvas-${b}`,[]),{setRefs:C,colorVars:p,isFading:g}=U({domRef:d,canvasId:v,animationDuration:c,theme:u,colors:r,seed:x,isPaused:s,darken:F,width:n,height:e}),y=(0,S.useMemo)(()=>({...a,...p,opacity:g?0:l,transition:`opacity ${c}ms linear`}),[a,p,l,g,c]),m=(0,S.useCallback)(()=>({...t,id:v,style:y}),[t,v,y]);return{setRefs:C,buildCanvasProps:m}};var N=require("react/jsx-runtime"),E=(0,R.forwardRef)((h,o)=>{let{setRefs:a,buildCanvasProps:c}=O({...h,ref:o});return(0,N.jsx)("canvas",{ref:a,...c()})});E.displayName="MeshGradient";0&&(module.exports={Gradient,GradientColors,MeshGradient});