@cos-design/ripple-water 3.5.2 → 3.5.3

package/dist/index.cjs

@@ -1 +1,93 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./index.css');var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("@cos-design/shared"),u=require("react/jsx-runtime");var d={rippleWater:`cos-rippleWater-wsinI`,canvas:`cos-canvas-XOdSF`,hint:`cos-hint-0JH5D`},f=({width:e=800,height:t=500,color:n=`#38bdf8`})=>{let r=(0,c.useRef)(null),i=(0,c.useRef)([]),a=(0,c.useRef)(0),o=(0,c.useCallback)((n,a)=>{let o=r.current;if(!o)return;let s=o.getBoundingClientRect(),c=n-s.left,l=a-s.top,u=Math.max(e,t)*.45;i.current.push({x:c,y:l,radius:0,maxRadius:u,alpha:.7})},[t,e]);return(0,c.useEffect)(()=>{let e=r.current;if(!e)return;let t=e=>o(e.clientX,e.clientY),n=e=>{let t=e.touches[0];t&&o(t.clientX,t.clientY)};return e.addEventListener(`click`,t),e.addEventListener(`touchstart`,n,{passive:!0}),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`touchstart`,n)}},[o]),(0,c.useEffect)(()=>{let o=r.current;if(!o)return;let s=window.devicePixelRatio||1;o.width=e*s,o.height=t*s;let c=o.getContext(`2d`);if(!c)return;c.setTransform(s,0,0,s,0,0);let u=document.hidden,d=(0,l.bindVisibilityPause)(e=>{u=e}),f=()=>{if(a.current=requestAnimationFrame(f),u)return;c.fillStyle=`#0c1929`,c.fillRect(0,0,e,t);let r=c.createLinearGradient(0,0,0,t);r.addColorStop(0,`#0f2744`),r.addColorStop(1,`#061018`),c.fillStyle=r,c.fillRect(0,0,e,t),i.current=i.current.filter(e=>(e.radius+=2.5,e.alpha-=.012,e.alpha<=0?!1:(c.beginPath(),c.arc(e.x,e.y,e.radius,0,Math.PI*2),c.strokeStyle=n,c.globalAlpha=e.alpha*(1-e.radius/e.maxRadius),c.lineWidth=2,c.stroke(),e.radius>8&&(c.beginPath(),c.arc(e.x,e.y,e.radius*.6,0,Math.PI*2),c.strokeStyle=n,c.globalAlpha=e.alpha*.4,c.lineWidth=1,c.stroke()),c.globalAlpha=1,!0)))};return f(),()=>{cancelAnimationFrame(a.current),d()}},[n,t,e]),(0,u.jsxs)(`div`,{className:d.rippleWater,style:{width:e,height:t},children:[(0,u.jsx)(`canvas`,{ref:r,className:d.canvas,style:{width:e,height:t}}),(0,u.jsx)(`span`,{className:d.hint,children:`点击水面产生涟漪`})]})};exports.RippleWater=f,exports.default=f;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./index.css');var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("@cos-design/shared"),u=require("react/jsx-runtime");var d={rippleWater:`cos-rippleWater-wsinI`,canvas:`cos-canvas-XOdSF`,hint:`cos-hint-0JH5D`},f=`
+attribute vec2 a_pos;
+varying vec2 v_uv;
+void main() {
+  v_uv = a_pos * 0.5 + 0.5;
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}
+`,p=`
+precision highp float;
+
+uniform float u_time;
+uniform vec2 u_res;
+uniform vec3 u_tint;
+uniform vec3 u_from;
+uniform vec3 u_to;
+uniform sampler2D u_height;
+uniform vec2 u_sim;
+uniform float u_waveAmp;
+uniform float u_waveSpeed;
+uniform float u_shimmer;
+uniform float u_reflection;
+
+varying vec2 v_uv;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float ambientH(vec2 p, float t) {
+  float h = 0.0;
+  h += sin(p.x * 3.2 + t * 1.3) * cos(p.y * 2.4 - t * 0.9) * 0.45;
+  h += sin(p.x * 6.8 - t * 1.7 + p.y * 1.1) * 0.22;
+  h += sin(p.x * 12.0 + p.y * 9.0 + t * 2.4) * 0.08;
+  h += sin(p.x * 1.4 + p.y * 1.8 + t * 0.55) * 0.35;
+  return h;
+}
+
+float sampleHeight(vec2 uv) {
+  float rip = texture2D(u_height, uv).r * 2.0 - 1.0;
+  vec2 p = uv * vec2(u_res.x / u_res.y, 1.0) * 2.8;
+  float amb = ambientH(p, u_time * u_waveSpeed) * 0.035 * u_waveAmp;
+  return rip * 0.55 + amb;
+}
+
+vec3 calcNormal(vec2 uv) {
+  vec2 e = vec2(1.5 / u_sim.x, 1.5 / u_sim.y);
+  float hL = sampleHeight(uv - vec2(e.x, 0.0));
+  float hR = sampleHeight(uv + vec2(e.x, 0.0));
+  float hD = sampleHeight(uv - vec2(0.0, e.y));
+  float hU = sampleHeight(uv + vec2(0.0, e.y));
+  return normalize(vec3((hL - hR) * 14.0, (hD - hU) * 14.0, 1.0));
+}
+
+void main() {
+  vec2 uv = v_uv;
+  vec3 n = calcNormal(uv);
+  float h = sampleHeight(uv);
+
+  vec3 V = normalize(vec3(0.0, 0.25, 1.0));
+  vec3 L = normalize(vec3(0.45, 0.75, 0.55));
+
+  float ndotl = max(dot(n, L), 0.0);
+  float fresnel = pow(1.0 - max(dot(n, V), 0.0), 3.2);
+
+  float g = clamp((uv.x + (1.0 - uv.y)) * 0.5, 0.0, 1.0);
+  vec3 water = mix(u_from, u_to, g);
+  water = mix(water, u_from, clamp(h * 1.8 + ndotl * 0.12, 0.0, 0.28));
+  water *= 0.92 + n.y * 0.1;
+
+  vec3 sky = mix(u_from * 1.15, vec3(0.85, 0.92, 1.0), 0.45);
+  vec3 reflectCol = mix(sky, vec3(0.9, 0.95, 1.0), pow(max(n.y, 0.0), 2.0));
+  water = mix(water, reflectCol, fresnel * u_reflection);
+
+  vec3 H = normalize(L + V);
+  float spec = pow(max(dot(n, H), 0.0), 180.0);
+  float glitter = pow(max(dot(n, H), 0.0), 48.0);
+  float sparkThresh = step(0.992, glitter) * glitter;
+  vec3 sparkle = u_tint * (spec * 1.8 + sparkThresh * 2.5) * u_shimmer
+    + vec3(1.0) * sparkThresh * 0.8 * u_shimmer;
+
+  float softSpec = pow(max(dot(n, H), 0.0), 16.0) * 0.22 * u_shimmer;
+  water += u_tint * softSpec + sparkle;
+
+  float crest = smoothstep(0.02, 0.12, abs(h)) * fresnel;
+  water += mix(u_tint, vec3(1.0), 0.4) * crest * 0.35;
+
+  float vig = smoothstep(1.15, 0.35, length((uv - 0.5) * vec2(1.1, 1.0)));
+  water *= 0.88 + 0.12 * vig;
+  water += (hash(uv * u_res + u_time) - 0.5) * 0.015;
+
+  gl_FragColor = vec4(water, 1.0);
+}
+`,m=e=>{let t=e.replace(`#`,``),n=t.length===3?t.split(``).map(e=>e+e).join(``):t,r=Number.parseInt(n,16);return Number.isNaN(r)?[.22,.74,.97]:[(r>>16&255)/255,(r>>8&255)/255,(r&255)/255]},h=(e,t,n)=>{let r=e.createShader(t);return r?(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)?r:(e.deleteShader(r),null)):null},g=(e,t,n)=>{let r=h(e,e.VERTEX_SHADER,t),i=h(e,e.FRAGMENT_SHADER,n);if(!r||!i)return null;let a=e.createProgram();return a?(e.attachShader(a,r),e.attachShader(a,i),e.linkProgram(a),e.deleteShader(r),e.deleteShader(i),e.getProgramParameter(a,e.LINK_STATUS)?a:(e.deleteProgram(a),null)):null},_=192,v=({width:e=800,height:t=500,fromColor:n=`#52ade3`,toColor:r=`#013565`,color:i=`#a8d8f5`,waveAmplitude:a=1,waveSpeed:o=1,shimmer:s=1,reflection:h=.38,rippleStrength:v=1,rippleRadius:y=6,damping:b=.985,spread:x=.5,interactive:S=!0,showHint:C=!0,hint:w=`点击水面产生涟漪`})=>{let T=(0,c.useRef)(null),E=(0,c.useRef)(0),D=(0,c.useRef)(null),O=(0,c.useRef)({fromColor:n,toColor:r,color:i,waveAmplitude:a,waveSpeed:o,shimmer:s,reflection:h,rippleStrength:v,rippleRadius:y,damping:b,spread:x,interactive:S});(0,c.useEffect)(()=>{O.current={fromColor:n,toColor:r,color:i,waveAmplitude:a,waveSpeed:o,shimmer:s,reflection:h,rippleStrength:v,rippleRadius:y,damping:b,spread:x,interactive:S}},[n,r,i,a,o,s,h,v,y,b,x,S]);let k=(0,c.useCallback)((e,t)=>{if(!O.current.interactive)return;let n=T.current;if(!n)return;let r=n.getBoundingClientRect();D.current={x:(e-r.left)/r.width,y:1-(t-r.top)/r.height,strength:O.current.rippleStrength}},[]);return(0,c.useEffect)(()=>{let e=T.current;if(!e)return;let t=e=>k(e.clientX,e.clientY),n=e=>{let t=e.touches[0];t&&k(t.clientX,t.clientY)};return e.addEventListener(`click`,t),e.addEventListener(`touchstart`,n,{passive:!0}),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`touchstart`,n)}},[k]),(0,c.useEffect)(()=>{let n=T.current;if(!n)return;let r=Math.min(window.devicePixelRatio||1,2);n.width=Math.floor(e*r),n.height=Math.floor(t*r);let i=n.getContext(`webgl`,{alpha:!1,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!1});if(!i)return;let a=g(i,f,p);if(!a)return;let o=i.createBuffer();i.bindBuffer(i.ARRAY_BUFFER,o),i.bufferData(i.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),i.STATIC_DRAW);let s=i.getAttribLocation(a,`a_pos`),c=i.getUniformLocation(a,`u_time`),u=i.getUniformLocation(a,`u_res`),d=i.getUniformLocation(a,`u_tint`),h=i.getUniformLocation(a,`u_from`),v=i.getUniformLocation(a,`u_to`),y=i.getUniformLocation(a,`u_height`),b=i.getUniformLocation(a,`u_sim`),x=i.getUniformLocation(a,`u_waveAmp`),S=i.getUniformLocation(a,`u_waveSpeed`),C=i.getUniformLocation(a,`u_shimmer`),w=i.getUniformLocation(a,`u_reflection`),k=_*_,A=new Float32Array(k),j=new Float32Array(k),M=new Float32Array(k),N=i.createTexture();i.bindTexture(i.TEXTURE_2D,N),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,i.LINEAR),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,i.CLAMP_TO_EDGE);let P=new Uint8Array(k*4),F=()=>{for(let e=0;e<k;e++){let t=Math.max(0,Math.min(255,Math.floor((j[e]*.5+.5)*255))),n=e*4;P[n]=t,P[n+1]=t,P[n+2]=t,P[n+3]=255}i.bindTexture(i.TEXTURE_2D,N),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,_,_,0,i.RGBA,i.UNSIGNED_BYTE,P)},I=(e,t,n,r)=>{let i=e*(_-1),a=t*(_-1),o=(0,l.clamp)(r,2,12);for(let e=-o-1;e<=o+1;e++)for(let t=-o-1;t<=o+1;t++){let r=Math.round(i+t),s=Math.round(a+e);if(r<=0||r>=_-1||s<=0||s>=_-1)continue;let c=Math.sqrt(t*t+e*e),l=Math.exp(-c*c*.55)*-.35,u=Math.exp(-((c-o*.55)**2)*.9);j[s*_+r]+=n*(l+u*1.1)}},L=(e,t)=>{let n=(0,l.clamp)(e,.9,.999),r=(0,l.clamp)(t,.3,.7);for(let e=0;e<2;e++){for(let e=1;e<_-1;e++){let t=e*_;for(let e=1;e<_-1;e++){let i=t+e,a=j[i-1]+j[i+1]+j[i-_]+j[i+_];M[i]=(a*r-A[i])*n,M[i]>1.5?M[i]=1.5:M[i]<-1.5&&(M[i]=-1.5)}}let e=A;A=j,j=M,M=e,M.fill(0)}},R=document.hidden,z=(0,l.bindVisibilityPause)(e=>{R=e}),B=performance.now();F();let V=e=>{if(E.current=requestAnimationFrame(V),R)return;let t=O.current;if(D.current){let e=D.current,n=(0,l.clamp)(e.strength,0,3),r=t.rippleRadius;I(e.x,e.y,n,r),I(e.x+.004,e.y-.003,n*.35,r),D.current=null}L(t.damping,t.spread),F();let r=m(t.color),f=m(t.fromColor),p=m(t.toColor);i.viewport(0,0,n.width,n.height),i.useProgram(a),i.bindBuffer(i.ARRAY_BUFFER,o),i.enableVertexAttribArray(s),i.vertexAttribPointer(s,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,N),i.uniform1i(y,0),i.uniform1f(c,(e-B)/1e3),i.uniform2f(u,n.width,n.height),i.uniform3f(d,r[0],r[1],r[2]),i.uniform3f(h,f[0],f[1],f[2]),i.uniform3f(v,p[0],p[1],p[2]),i.uniform2f(b,_,_),i.uniform1f(x,(0,l.clamp)(t.waveAmplitude,0,2)),i.uniform1f(S,(0,l.clamp)(t.waveSpeed,0,3)),i.uniform1f(C,(0,l.clamp)(t.shimmer,0,2)),i.uniform1f(w,(0,l.clamp)(t.reflection,0,1)),i.drawArrays(i.TRIANGLE_STRIP,0,4)};return E.current=requestAnimationFrame(V),()=>{cancelAnimationFrame(E.current),z(),i.deleteTexture(N),i.deleteBuffer(o),i.deleteProgram(a)}},[t,e]),(0,u.jsxs)(`div`,{className:d.rippleWater,style:{width:e,height:t},children:[(0,u.jsx)(`canvas`,{ref:T,className:d.canvas,style:{width:e,height:t,cursor:S?`pointer`:`default`}}),C?(0,u.jsx)(`span`,{className:d.hint,children:w}):null]})};exports.RippleWater=v,exports.default=v;

package/dist/index.js

@@ -1,74 +1,186 @@
 import { useCallback as e, useEffect as t, useRef as n } from "react";
-import { bindVisibilityPause as r } from "@cos-design/shared";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import './index.css';var o = {
+import { bindVisibilityPause as r, clamp as i } from "@cos-design/shared";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import './index.css';var s = {
 	rippleWater: "cos-rippleWater-wsinI",
 	canvas: "cos-canvas-XOdSF",
 	hint: "cos-hint-0JH5D"
-}, s = ({ width: s = 800, height: c = 500, color: l = "#38bdf8" }) => {
-	let u = n(null), d = n([]), f = n(0), p = e((e, t) => {
-		let n = u.current;
+}, c = "\nattribute vec2 a_pos;\nvarying vec2 v_uv;\nvoid main() {\n  v_uv = a_pos * 0.5 + 0.5;\n  gl_Position = vec4(a_pos, 0.0, 1.0);\n}\n", l = "\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_res;\nuniform vec3 u_tint;\nuniform vec3 u_from;\nuniform vec3 u_to;\nuniform sampler2D u_height;\nuniform vec2 u_sim;\nuniform float u_waveAmp;\nuniform float u_waveSpeed;\nuniform float u_shimmer;\nuniform float u_reflection;\n\nvarying vec2 v_uv;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\n}\n\nfloat ambientH(vec2 p, float t) {\n  float h = 0.0;\n  h += sin(p.x * 3.2 + t * 1.3) * cos(p.y * 2.4 - t * 0.9) * 0.45;\n  h += sin(p.x * 6.8 - t * 1.7 + p.y * 1.1) * 0.22;\n  h += sin(p.x * 12.0 + p.y * 9.0 + t * 2.4) * 0.08;\n  h += sin(p.x * 1.4 + p.y * 1.8 + t * 0.55) * 0.35;\n  return h;\n}\n\nfloat sampleHeight(vec2 uv) {\n  float rip = texture2D(u_height, uv).r * 2.0 - 1.0;\n  vec2 p = uv * vec2(u_res.x / u_res.y, 1.0) * 2.8;\n  float amb = ambientH(p, u_time * u_waveSpeed) * 0.035 * u_waveAmp;\n  return rip * 0.55 + amb;\n}\n\nvec3 calcNormal(vec2 uv) {\n  vec2 e = vec2(1.5 / u_sim.x, 1.5 / u_sim.y);\n  float hL = sampleHeight(uv - vec2(e.x, 0.0));\n  float hR = sampleHeight(uv + vec2(e.x, 0.0));\n  float hD = sampleHeight(uv - vec2(0.0, e.y));\n  float hU = sampleHeight(uv + vec2(0.0, e.y));\n  return normalize(vec3((hL - hR) * 14.0, (hD - hU) * 14.0, 1.0));\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  vec3 n = calcNormal(uv);\n  float h = sampleHeight(uv);\n\n  vec3 V = normalize(vec3(0.0, 0.25, 1.0));\n  vec3 L = normalize(vec3(0.45, 0.75, 0.55));\n\n  float ndotl = max(dot(n, L), 0.0);\n  float fresnel = pow(1.0 - max(dot(n, V), 0.0), 3.2);\n\n  float g = clamp((uv.x + (1.0 - uv.y)) * 0.5, 0.0, 1.0);\n  vec3 water = mix(u_from, u_to, g);\n  water = mix(water, u_from, clamp(h * 1.8 + ndotl * 0.12, 0.0, 0.28));\n  water *= 0.92 + n.y * 0.1;\n\n  vec3 sky = mix(u_from * 1.15, vec3(0.85, 0.92, 1.0), 0.45);\n  vec3 reflectCol = mix(sky, vec3(0.9, 0.95, 1.0), pow(max(n.y, 0.0), 2.0));\n  water = mix(water, reflectCol, fresnel * u_reflection);\n\n  vec3 H = normalize(L + V);\n  float spec = pow(max(dot(n, H), 0.0), 180.0);\n  float glitter = pow(max(dot(n, H), 0.0), 48.0);\n  float sparkThresh = step(0.992, glitter) * glitter;\n  vec3 sparkle = u_tint * (spec * 1.8 + sparkThresh * 2.5) * u_shimmer\n    + vec3(1.0) * sparkThresh * 0.8 * u_shimmer;\n\n  float softSpec = pow(max(dot(n, H), 0.0), 16.0) * 0.22 * u_shimmer;\n  water += u_tint * softSpec + sparkle;\n\n  float crest = smoothstep(0.02, 0.12, abs(h)) * fresnel;\n  water += mix(u_tint, vec3(1.0), 0.4) * crest * 0.35;\n\n  float vig = smoothstep(1.15, 0.35, length((uv - 0.5) * vec2(1.1, 1.0)));\n  water *= 0.88 + 0.12 * vig;\n  water += (hash(uv * u_res + u_time) - 0.5) * 0.015;\n\n  gl_FragColor = vec4(water, 1.0);\n}\n", u = (e) => {
+	let t = e.replace("#", ""), n = t.length === 3 ? t.split("").map((e) => e + e).join("") : t, r = Number.parseInt(n, 16);
+	return Number.isNaN(r) ? [
+		.22,
+		.74,
+		.97
+	] : [
+		(r >> 16 & 255) / 255,
+		(r >> 8 & 255) / 255,
+		(r & 255) / 255
+	];
+}, d = (e, t, n) => {
+	let r = e.createShader(t);
+	return r ? (e.shaderSource(r, n), e.compileShader(r), e.getShaderParameter(r, e.COMPILE_STATUS) ? r : (e.deleteShader(r), null)) : null;
+}, f = (e, t, n) => {
+	let r = d(e, e.VERTEX_SHADER, t), i = d(e, e.FRAGMENT_SHADER, n);
+	if (!r || !i) return null;
+	let a = e.createProgram();
+	return a ? (e.attachShader(a, r), e.attachShader(a, i), e.linkProgram(a), e.deleteShader(r), e.deleteShader(i), e.getProgramParameter(a, e.LINK_STATUS) ? a : (e.deleteProgram(a), null)) : null;
+}, p = 192, m = ({ width: d = 800, height: m = 500, fromColor: h = "#52ade3", toColor: g = "#013565", color: _ = "#a8d8f5", waveAmplitude: v = 1, waveSpeed: y = 1, shimmer: b = 1, reflection: x = .38, rippleStrength: S = 1, rippleRadius: C = 6, damping: w = .985, spread: T = .5, interactive: E = !0, showHint: D = !0, hint: O = "点击水面产生涟漪" }) => {
+	let k = n(null), A = n(0), j = n(null), M = n({
+		fromColor: h,
+		toColor: g,
+		color: _,
+		waveAmplitude: v,
+		waveSpeed: y,
+		shimmer: b,
+		reflection: x,
+		rippleStrength: S,
+		rippleRadius: C,
+		damping: w,
+		spread: T,
+		interactive: E
+	});
+	t(() => {
+		M.current = {
+			fromColor: h,
+			toColor: g,
+			color: _,
+			waveAmplitude: v,
+			waveSpeed: y,
+			shimmer: b,
+			reflection: x,
+			rippleStrength: S,
+			rippleRadius: C,
+			damping: w,
+			spread: T,
+			interactive: E
+		};
+	}, [
+		h,
+		g,
+		_,
+		v,
+		y,
+		b,
+		x,
+		S,
+		C,
+		w,
+		T,
+		E
+	]);
+	let N = e((e, t) => {
+		if (!M.current.interactive) return;
+		let n = k.current;
 		if (!n) return;
-		let r = n.getBoundingClientRect(), i = e - r.left, a = t - r.top, o = Math.max(s, c) * .45;
-		d.current.push({
-			x: i,
-			y: a,
-			radius: 0,
-			maxRadius: o,
-			alpha: .7
-		});
-	}, [c, s]);
+		let r = n.getBoundingClientRect();
+		j.current = {
+			x: (e - r.left) / r.width,
+			y: 1 - (t - r.top) / r.height,
+			strength: M.current.rippleStrength
+		};
+	}, []);
 	return t(() => {
-		let e = u.current;
+		let e = k.current;
 		if (!e) return;
-		let t = (e) => p(e.clientX, e.clientY), n = (e) => {
+		let t = (e) => N(e.clientX, e.clientY), n = (e) => {
 			let t = e.touches[0];
-			t && p(t.clientX, t.clientY);
+			t && N(t.clientX, t.clientY);
 		};
 		return e.addEventListener("click", t), e.addEventListener("touchstart", n, { passive: !0 }), () => {
 			e.removeEventListener("click", t), e.removeEventListener("touchstart", n);
 		};
-	}, [p]), t(() => {
-		let e = u.current;
+	}, [N]), t(() => {
+		let e = k.current;
 		if (!e) return;
-		let t = window.devicePixelRatio || 1;
-		e.width = s * t, e.height = c * t;
-		let n = e.getContext("2d");
+		let t = Math.min(window.devicePixelRatio || 1, 2);
+		e.width = Math.floor(d * t), e.height = Math.floor(m * t);
+		let n = e.getContext("webgl", {
+			alpha: !1,
+			antialias: !1,
+			depth: !1,
+			stencil: !1,
+			premultipliedAlpha: !1
+		});
 		if (!n) return;
-		n.setTransform(t, 0, 0, t, 0, 0);
-		let i = document.hidden, a = r((e) => {
-			i = e;
-		}), o = () => {
-			if (f.current = requestAnimationFrame(o), i) return;
-			n.fillStyle = "#0c1929", n.fillRect(0, 0, s, c);
-			let e = n.createLinearGradient(0, 0, 0, c);
-			e.addColorStop(0, "#0f2744"), e.addColorStop(1, "#061018"), n.fillStyle = e, n.fillRect(0, 0, s, c), d.current = d.current.filter((e) => (e.radius += 2.5, e.alpha -= .012, e.alpha <= 0 ? !1 : (n.beginPath(), n.arc(e.x, e.y, e.radius, 0, Math.PI * 2), n.strokeStyle = l, n.globalAlpha = e.alpha * (1 - e.radius / e.maxRadius), n.lineWidth = 2, n.stroke(), e.radius > 8 && (n.beginPath(), n.arc(e.x, e.y, e.radius * .6, 0, Math.PI * 2), n.strokeStyle = l, n.globalAlpha = e.alpha * .4, n.lineWidth = 1, n.stroke()), n.globalAlpha = 1, !0)));
+		let a = f(n, c, l);
+		if (!a) return;
+		let o = n.createBuffer();
+		n.bindBuffer(n.ARRAY_BUFFER, o), n.bufferData(n.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			1,
+			1
+		]), n.STATIC_DRAW);
+		let s = n.getAttribLocation(a, "a_pos"), h = n.getUniformLocation(a, "u_time"), g = n.getUniformLocation(a, "u_res"), _ = n.getUniformLocation(a, "u_tint"), v = n.getUniformLocation(a, "u_from"), y = n.getUniformLocation(a, "u_to"), b = n.getUniformLocation(a, "u_height"), x = n.getUniformLocation(a, "u_sim"), S = n.getUniformLocation(a, "u_waveAmp"), C = n.getUniformLocation(a, "u_waveSpeed"), w = n.getUniformLocation(a, "u_shimmer"), T = n.getUniformLocation(a, "u_reflection"), E = p * p, D = new Float32Array(E), O = new Float32Array(E), N = new Float32Array(E), P = n.createTexture();
+		n.bindTexture(n.TEXTURE_2D, P), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE);
+		let F = new Uint8Array(E * 4), I = () => {
+			for (let e = 0; e < E; e++) {
+				let t = Math.max(0, Math.min(255, Math.floor((O[e] * .5 + .5) * 255))), n = e * 4;
+				F[n] = t, F[n + 1] = t, F[n + 2] = t, F[n + 3] = 255;
+			}
+			n.bindTexture(n.TEXTURE_2D, P), n.texImage2D(n.TEXTURE_2D, 0, n.RGBA, p, p, 0, n.RGBA, n.UNSIGNED_BYTE, F);
+		}, L = (e, t, n, r) => {
+			let a = e * (p - 1), o = t * (p - 1), s = i(r, 2, 12);
+			for (let e = -s - 1; e <= s + 1; e++) for (let t = -s - 1; t <= s + 1; t++) {
+				let r = Math.round(a + t), i = Math.round(o + e);
+				if (r <= 0 || r >= p - 1 || i <= 0 || i >= p - 1) continue;
+				let c = Math.sqrt(t * t + e * e), l = Math.exp(-c * c * .55) * -.35, u = Math.exp(-((c - s * .55) ** 2) * .9);
+				O[i * p + r] += n * (l + u * 1.1);
+			}
+		}, R = (e, t) => {
+			let n = i(e, .9, .999), r = i(t, .3, .7);
+			for (let e = 0; e < 2; e++) {
+				for (let e = 1; e < p - 1; e++) {
+					let t = e * p;
+					for (let e = 1; e < p - 1; e++) {
+						let i = t + e, a = O[i - 1] + O[i + 1] + O[i - p] + O[i + p];
+						N[i] = (a * r - D[i]) * n, N[i] > 1.5 ? N[i] = 1.5 : N[i] < -1.5 && (N[i] = -1.5);
+					}
+				}
+				let e = D;
+				D = O, O = N, N = e, N.fill(0);
+			}
+		}, z = document.hidden, B = r((e) => {
+			z = e;
+		}), V = performance.now();
+		I();
+		let H = (t) => {
+			if (A.current = requestAnimationFrame(H), z) return;
+			let r = M.current;
+			if (j.current) {
+				let e = j.current, t = i(e.strength, 0, 3), n = r.rippleRadius;
+				L(e.x, e.y, t, n), L(e.x + .004, e.y - .003, t * .35, n), j.current = null;
+			}
+			R(r.damping, r.spread), I();
+			let c = u(r.color), l = u(r.fromColor), d = u(r.toColor);
+			n.viewport(0, 0, e.width, e.height), n.useProgram(a), n.bindBuffer(n.ARRAY_BUFFER, o), n.enableVertexAttribArray(s), n.vertexAttribPointer(s, 2, n.FLOAT, !1, 0, 0), n.activeTexture(n.TEXTURE0), n.bindTexture(n.TEXTURE_2D, P), n.uniform1i(b, 0), n.uniform1f(h, (t - V) / 1e3), n.uniform2f(g, e.width, e.height), n.uniform3f(_, c[0], c[1], c[2]), n.uniform3f(v, l[0], l[1], l[2]), n.uniform3f(y, d[0], d[1], d[2]), n.uniform2f(x, p, p), n.uniform1f(S, i(r.waveAmplitude, 0, 2)), n.uniform1f(C, i(r.waveSpeed, 0, 3)), n.uniform1f(w, i(r.shimmer, 0, 2)), n.uniform1f(T, i(r.reflection, 0, 1)), n.drawArrays(n.TRIANGLE_STRIP, 0, 4);
 		};
-		return o(), () => {
-			cancelAnimationFrame(f.current), a();
+		return A.current = requestAnimationFrame(H), () => {
+			cancelAnimationFrame(A.current), B(), n.deleteTexture(P), n.deleteBuffer(o), n.deleteProgram(a);
 		};
-	}, [
-		l,
-		c,
-		s
-	]), /* @__PURE__ */ a("div", {
-		className: o.rippleWater,
+	}, [m, d]), /* @__PURE__ */ o("div", {
+		className: s.rippleWater,
 		style: {
-			width: s,
-			height: c
+			width: d,
+			height: m
 		},
-		children: [/* @__PURE__ */ i("canvas", {
-			ref: u,
-			className: o.canvas,
+		children: [/* @__PURE__ */ a("canvas", {
+			ref: k,
+			className: s.canvas,
 			style: {
-				width: s,
-				height: c
+				width: d,
+				height: m,
+				cursor: E ? "pointer" : "default"
 			}
-		}), /* @__PURE__ */ i("span", {
-			className: o.hint,
-			children: "点击水面产生涟漪"
-		})]
+		}), D ? /* @__PURE__ */ a("span", {
+			className: s.hint,
+			children: O
+		}) : null]
 	});
 };
 //#endregion
-export { s as RippleWater, s as default };
+export { m as RippleWater, m as default };

package/dist/src/components/rippleWater/index.d.ts

@@ -2,8 +2,34 @@ import { default as React } from 'react';
 export interface RippleWaterProps {
     width?: number;
     height?: number;
-    /** 涟漪颜色 */
+    /** 水面渐变浅端（左上） */
+    fromColor?: string;
+    /** 水面渐变深端（右下） */
+    toColor?: string;
+    /** 涟漪高光色 */
     color?: string;
+    /** 环境波浪强度 0~2，默认 1 */
+    waveAmplitude?: number;
+    /** 环境波浪速度 0~3，默认 1 */
+    waveSpeed?: number;
+    /** 波光闪烁强度 0~2，默认 1 */
+    shimmer?: number;
+    /** 水面反射强度 0~1，默认 0.38 */
+    reflection?: number;
+    /** 点击涟漪力度 0~3，默认 1 */
+    rippleStrength?: number;
+    /** 涟漪落点半径（仿真格点 2~12），默认 6 */
+    rippleRadius?: number;
+    /** 涟漪衰减 0.9~0.999，越大越持久，默认 0.985 */
+    damping?: number;
+    /** 涟漪传播速度 0.3~0.7，默认 0.5 */
+    spread?: number;
+    /** 是否响应点击/触摸产生涟漪，默认 true */
+    interactive?: boolean;
+    /** 是否显示底部提示，默认 true */
+    showHint?: boolean;
+    /** 底部提示文案 */
+    hint?: string;
 }
 declare const RippleWater: React.FC<RippleWaterProps>;
 export default RippleWater;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cos-design/ripple-water",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "description": "RippleWater component from cos-design",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -52,6 +52,6 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@cos-design/shared": "3.5.2"
+    "@cos-design/shared": "3.5.3"
   }
 }