@stfrigerio/sito-template 0.1.37 → 0.1.39

package/storybook-static/assets/LineWaves.stories-1wQVWsio.js

@@ -0,0 +1,132 @@
+import{r as F,j as D}from"./iframe-Cz1R6gKZ.js";import{R as P,P as Y,M as k}from"./Mesh-CwXV3WjE.js";import{T as z}from"./Triangle-64ffRKNB.js";import"./preload-helper-C1FmrZbK.js";const N={"line-waves-container":"_line-waves-container_hnom3_1"};function p(r){const t=r.replace("#","");return[parseInt(t.slice(0,2),16)/255,parseInt(t.slice(2,4),16)/255,parseInt(t.slice(4,6),16)/255]}const O=`
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`,j=`
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uResolution;
+uniform float uSpeed;
+uniform float uInnerLines;
+uniform float uOuterLines;
+uniform float uWarpIntensity;
+uniform float uRotation;
+uniform float uEdgeFadeWidth;
+uniform float uColorCycleSpeed;
+uniform float uBrightness;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform vec2 uMouse;
+uniform float uMouseInfluence;
+uniform bool uEnableMouse;
+
+#define HALF_PI 1.5707963
+
+float hashF(float n) {
+  return fract(sin(n * 127.1) * 43758.5453123);
+}
+
+float smoothNoise(float x) {
+  float i = floor(x);
+  float f = fract(x);
+  float u = f * f * (3.0 - 2.0 * f);
+  return mix(hashF(i), hashF(i + 1.0), u);
+}
+
+float displaceA(float coord, float t) {
+  float result = sin(coord * 2.123) * 0.2;
+  result += sin(coord * 3.234 + t * 4.345) * 0.1;
+  result += sin(coord * 0.589 + t * 0.934) * 0.5;
+  return result;
+}
+
+float displaceB(float coord, float t) {
+  float result = sin(coord * 1.345) * 0.3;
+  result += sin(coord * 2.734 + t * 3.345) * 0.2;
+  result += sin(coord * 0.189 + t * 0.934) * 0.3;
+  return result;
+}
+
+vec2 rotate2D(vec2 p, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);
+}
+
+void main() {
+  vec2 coords = gl_FragCoord.xy / uResolution.xy;
+  coords = coords * 2.0 - 1.0;
+  coords = rotate2D(coords, uRotation);
+
+  float halfT = uTime * uSpeed * 0.5;
+  float fullT = uTime * uSpeed;
+
+  float mouseWarp = 0.0;
+  if (uEnableMouse) {
+    vec2 mPos = rotate2D(uMouse * 2.0 - 1.0, uRotation);
+    float mDist = length(coords - mPos);
+    mouseWarp = uMouseInfluence * exp(-mDist * mDist * 4.0);
+  }
+
+  float warpAx = coords.x + displaceA(coords.y, halfT) * uWarpIntensity + mouseWarp;
+  float warpAy = coords.y - displaceA(coords.x * cos(fullT) * 1.235, halfT) * uWarpIntensity;
+  float warpBx = coords.x + displaceB(coords.y, halfT) * uWarpIntensity + mouseWarp;
+  float warpBy = coords.y - displaceB(coords.x * sin(fullT) * 1.235, halfT) * uWarpIntensity;
+
+  vec2 fieldA = vec2(warpAx, warpAy);
+  vec2 fieldB = vec2(warpBx, warpBy);
+  vec2 blended = mix(fieldA, fieldB, mix(fieldA, fieldB, 0.5));
+
+  float fadeTop = smoothstep(uEdgeFadeWidth, uEdgeFadeWidth + 0.4, blended.y);
+  float fadeBottom = smoothstep(-uEdgeFadeWidth, -(uEdgeFadeWidth + 0.4), blended.y);
+  float vMask = 1.0 - max(fadeTop, fadeBottom);
+
+  float tileCount = mix(uOuterLines, uInnerLines, vMask);
+  float scaledY = blended.y * tileCount;
+  float nY = smoothNoise(abs(scaledY));
+
+  float ridge = pow(
+    step(abs(nY - blended.x) * 2.0, HALF_PI) * cos(2.0 * (nY - blended.x)),
+    5.0
+  );
+
+  float lines = 0.0;
+  for (float i = 1.0; i < 3.0; i += 1.0) {
+    lines += pow(max(fract(scaledY), fract(-scaledY)), i * 2.0);
+  }
+
+  float pattern = vMask * lines;
+
+  float cycleT = fullT * uColorCycleSpeed;
+  float rChannel = (pattern + lines * ridge) * (cos(blended.y + cycleT * 0.234) * 0.5 + 1.0);
+  float gChannel = (pattern + vMask * ridge) * (sin(blended.x + cycleT * 1.745) * 0.5 + 1.0);
+  float bChannel = (pattern + lines * ridge) * (cos(blended.x + cycleT * 0.534) * 0.5 + 1.0);
+
+  vec3 col = (rChannel * uColor1 + gChannel * uColor2 + bChannel * uColor3) * uBrightness;
+  float alpha = clamp(length(col), 0.0, 1.0);
+
+  gl_FragColor = vec4(col, alpha);
+}
+`;function q({speed:r=.3,innerLineCount:t=32,outerLineCount:h=36,warpIntensity:g=1,rotation:y=-45,edgeFadeWidth:x=0,colorCycleSpeed:C=1,brightness:w=.2,color1:M="#ffffff",color2:I="#ffffff",color3:L="#ffffff",enableMouseInteraction:n=!0,mouseInfluence:T=2}){const d=F.useRef(null);return F.useEffect(()=>{if(!d.current)return;const u=d.current,c=new P({alpha:!0,premultipliedAlpha:!1}),e=c.gl;e.clearColor(0,0,0,0);let o,l=[.5,.5],s=[.5,.5];function W(a){const f=e.canvas.getBoundingClientRect();s=[(a.clientX-f.left)/f.width,1-(a.clientY-f.top)/f.height]}function E(){s=[.5,.5]}function m(){c.setSize(u.offsetWidth,u.offsetHeight),o&&(o.uniforms.uResolution.value=[e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height])}window.addEventListener("resize",m),m();const V=new z(e),_=y*Math.PI/180;o=new Y(e,{vertex:O,fragment:j,uniforms:{uTime:{value:0},uResolution:{value:[e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height]},uSpeed:{value:r},uInnerLines:{value:t},uOuterLines:{value:h},uWarpIntensity:{value:g},uRotation:{value:_},uEdgeFadeWidth:{value:x},uColorCycleSpeed:{value:C},uBrightness:{value:w},uColor1:{value:p(M)},uColor2:{value:p(I)},uColor3:{value:p(L)},uMouse:{value:new Float32Array([.5,.5])},uMouseInfluence:{value:T},uEnableMouse:{value:n}}});const S=new k(e,{geometry:V,program:o});u.appendChild(e.canvas),n&&(e.canvas.addEventListener("mousemove",W),e.canvas.addEventListener("mouseleave",E));let v;function b(a){v=requestAnimationFrame(b),o.uniforms.uTime.value=a*.001,n?(l[0]+=.05*(s[0]-l[0]),l[1]+=.05*(s[1]-l[1]),o.uniforms.uMouse.value[0]=l[0],o.uniforms.uMouse.value[1]=l[1]):(o.uniforms.uMouse.value[0]=.5,o.uniforms.uMouse.value[1]=.5),c.render({scene:S})}return v=requestAnimationFrame(b),()=>{var a;cancelAnimationFrame(v),window.removeEventListener("resize",m),n&&(e.canvas.removeEventListener("mousemove",W),e.canvas.removeEventListener("mouseleave",E)),u.removeChild(e.canvas),(a=e.getExtension("WEBGL_lose_context"))==null||a.loseContext()}},[r,t,h,g,y,x,C,w,M,I,L,n,T]),D.jsx("div",{ref:d,className:`${N["line-waves-container"]}`})}q.__docgenInfo={description:"",methods:[],displayName:"LineWaves",props:{speed:{defaultValue:{value:"0.3",computed:!1},required:!1},innerLineCount:{defaultValue:{value:"32.0",computed:!1},required:!1},outerLineCount:{defaultValue:{value:"36.0",computed:!1},required:!1},warpIntensity:{defaultValue:{value:"1.0",computed:!1},required:!1},rotation:{defaultValue:{value:"-45",computed:!1},required:!1},edgeFadeWidth:{defaultValue:{value:"0.0",computed:!1},required:!1},colorCycleSpeed:{defaultValue:{value:"1.0",computed:!1},required:!1},brightness:{defaultValue:{value:"0.2",computed:!1},required:!1},color1:{defaultValue:{value:"'#ffffff'",computed:!1},required:!1},color2:{defaultValue:{value:"'#ffffff'",computed:!1},required:!1},color3:{defaultValue:{value:"'#ffffff'",computed:!1},required:!1},enableMouseInteraction:{defaultValue:{value:"true",computed:!1},required:!1},mouseInfluence:{defaultValue:{value:"2.0",computed:!1},required:!1}}};const $={title:"ReactBits/Backgrounds/LineWaves",component:q,parameters:{layout:"fullscreen"},tags:["autodocs"]},i={args:{speed:.3,innerLineCount:32,outerLineCount:36,warpIntensity:1,rotation:-45,edgeFadeWidth:0,colorCycleSpeed:1,brightness:.2,color1:"#ffffff",color2:"#ffffff",color3:"#ffffff",enableMouseInteraction:!0,mouseInfluence:2}};var B,A,R;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  args: {
+    speed: 0.3,
+    innerLineCount: 32.0,
+    outerLineCount: 36.0,
+    warpIntensity: 1.0,
+    rotation: -45,
+    edgeFadeWidth: 0.0,
+    colorCycleSpeed: 1.0,
+    brightness: 0.2,
+    color1: '#ffffff',
+    color2: '#ffffff',
+    color3: '#ffffff',
+    enableMouseInteraction: true,
+    mouseInfluence: 2.0
+  }
+}`,...(R=(A=i.parameters)==null?void 0:A.docs)==null?void 0:R.source}}};const J=["Default"];export{i as Default,J as __namedExportsOrder,$ as default};

package/storybook-static/assets/LiquidChrome-C8jkHJD4.css

@@ -0,0 +1 @@
+._liquidChrome-container_19fmq_1{position:relative;width:100%;min-height:100vh}._liquidChrome-container_19fmq_1 canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}

package/storybook-static/assets/LiquidChrome.stories-DjaXtUK6.js

@@ -0,0 +1,60 @@
+import{r as R,j as U}from"./iframe-Cz1R6gKZ.js";import{R as X,P as Y,M as V}from"./Mesh-CwXV3WjE.js";import{T as b}from"./Triangle-64ffRKNB.js";import"./preload-helper-C1FmrZbK.js";const z={"liquidChrome-container":"_liquidChrome-container_19fmq_1"},_=({baseColor:d=[.1,.1,.1],speed:p=.2,amplitude:h=.3,frequencyX:g=3,frequencyY:y=3,interactive:s=!0,...A})=>{const l=R.useRef(null);return R.useEffect(()=>{if(!l.current)return;const n=l.current,c=new X({antialias:!0}),e=c.gl;e.clearColor(1,1,1,1);const L=`
+      attribute vec2 position;
+      attribute vec2 uv;
+      varying vec2 vUv;
+      void main() {
+        vUv = uv;
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `,T=`
+      precision highp float;
+      uniform float uTime;
+      uniform vec3 uResolution;
+      uniform vec3 uBaseColor;
+      uniform float uAmplitude;
+      uniform float uFrequencyX;
+      uniform float uFrequencyY;
+      uniform vec2 uMouse;
+      varying vec2 vUv;
+
+      vec4 renderImage(vec2 uvCoord) {
+          vec2 fragCoord = uvCoord * uResolution.xy;
+          vec2 uv = (2.0 * fragCoord - uResolution.xy) / min(uResolution.x, uResolution.y);
+
+          for (float i = 1.0; i < 10.0; i++){
+              uv.x += uAmplitude / i * cos(i * uFrequencyX * uv.y + uTime + uMouse.x * 3.14159);
+              uv.y += uAmplitude / i * cos(i * uFrequencyY * uv.x + uTime + uMouse.y * 3.14159);
+          }
+
+          vec2 diff = (uvCoord - uMouse);
+          float dist = length(diff);
+          float falloff = exp(-dist * 20.0);
+          float ripple = sin(10.0 * dist - uTime * 2.0) * 0.03;
+          uv += (diff / (dist + 0.0001)) * ripple * falloff;
+
+          vec3 color = uBaseColor / abs(sin(uTime - uv.y - uv.x));
+          return vec4(color, 1.0);
+      }
+
+      void main() {
+          vec4 col = vec4(0.0);
+          int samples = 0;
+          for (int i = -1; i <= 1; i++){
+              for (int j = -1; j <= 1; j++){
+                  vec2 offset = vec2(float(i), float(j)) * (1.0 / min(uResolution.x, uResolution.y));
+                  col += renderImage(vUv + offset);
+                  samples++;
+              }
+          }
+          gl_FragColor = col / float(samples);
+      }
+    `,B=new b(e),r=new Y(e,{vertex:L,fragment:T,uniforms:{uTime:{value:0},uResolution:{value:new Float32Array([e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height])},uBaseColor:{value:new Float32Array(d)},uAmplitude:{value:h},uFrequencyX:{value:g},uFrequencyY:{value:y},uMouse:{value:new Float32Array([0,0])}}}),j=new V(e,{geometry:B,program:r});function f(){c.setSize(n.offsetWidth*1,n.offsetHeight*1);const t=r.uniforms.uResolution.value;t[0]=e.canvas.width,t[1]=e.canvas.height,t[2]=e.canvas.width/e.canvas.height}window.addEventListener("resize",f),f();function q(o){const t=n.getBoundingClientRect(),u=(o.clientX-t.left)/t.width,v=1-(o.clientY-t.top)/t.height,a=r.uniforms.uMouse.value;a[0]=u,a[1]=v}function C(o){if(o.touches.length>0){const t=o.touches[0],u=n.getBoundingClientRect(),v=(t.clientX-u.left)/u.width,a=1-(t.clientY-u.top)/u.height,w=r.uniforms.uMouse.value;w[0]=v,w[1]=a}}s&&(n.addEventListener("mousemove",q),n.addEventListener("touchmove",C));let m;function x(o){m=requestAnimationFrame(x),r.uniforms.uTime.value=o*.001*p,c.render({scene:j})}return m=requestAnimationFrame(x),n.appendChild(e.canvas),()=>{var o;cancelAnimationFrame(m),window.removeEventListener("resize",f),s&&(n.removeEventListener("mousemove",q),n.removeEventListener("touchmove",C)),e.canvas.parentElement&&e.canvas.parentElement.removeChild(e.canvas),(o=e.getExtension("WEBGL_lose_context"))==null||o.loseContext()}},[d,p,h,g,y,s]),U.jsx("div",{ref:l,className:`${z["liquidChrome-container"]}`,...A})};_.__docgenInfo={description:"",methods:[],displayName:"LiquidChrome",props:{baseColor:{defaultValue:{value:"[0.1, 0.1, 0.1]",computed:!1},required:!1},speed:{defaultValue:{value:"0.2",computed:!1},required:!1},amplitude:{defaultValue:{value:"0.3",computed:!1},required:!1},frequencyX:{defaultValue:{value:"3",computed:!1},required:!1},frequencyY:{defaultValue:{value:"3",computed:!1},required:!1},interactive:{defaultValue:{value:"true",computed:!1},required:!1}}};const N={title:"ReactBits/Backgrounds/LiquidChrome",component:_,parameters:{layout:"fullscreen"},tags:["autodocs"]},i={args:{baseColor:[.1,.1,.1],speed:.2,amplitude:.3,frequencyX:3,frequencyY:3,interactive:!0}};var E,F,M;i.parameters={...i.parameters,docs:{...(E=i.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  args: {
+    baseColor: [0.1, 0.1, 0.1],
+    speed: 0.2,
+    amplitude: 0.3,
+    frequencyX: 3,
+    frequencyY: 3,
+    interactive: true
+  }
+}`,...(M=(F=i.parameters)==null?void 0:F.docs)==null?void 0:M.source}}};const W=["Default"];export{i as Default,W as __namedExportsOrder,N as default};

package/storybook-static/assets/LiquidEther-BTKKmNQk.css

@@ -0,0 +1 @@
+._liquid-ether-container_596kf_1{position:relative;overflow:hidden;width:100%;min-height:100vh;touch-action:none}

package/storybook-static/assets/LiquidEther.stories-CBrhorPT.js

@@ -0,0 +1,161 @@
+import{r as d,j as Me}from"./iframe-Cz1R6gKZ.js";import{n as te,a6 as Ee,g as Ae,z as q,a7 as L,d as a,W as Re,f as ke,S as ie,C as se,M as $,q as j,v as I,u as Ve,H as Be,E as qe,k as Le,h as Ie,t as Oe,a8 as Ue,o as He}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const Ge={"liquid-ether-container":"_liquid-ether-container_596kf_1"};function ae({mouseForce:_=20,cursorSize:w=100,isViscous:b=!1,viscous:S=30,iterationsViscous:D=32,iterationsPoisson:T=32,dt:z=.014,BFECC:C=!0,resolution:f=.5,isBounce:F=!1,colors:J=["#5227FF","#FF9FFC","#B19EEF"],style:ue={},className:ce="",autoDemo:M=!0,autoSpeed:E=.5,autoIntensity:A=2.2,takeoverDuration:R=.25,autoResumeDelay:k=1e3,autoRampDuration:V=.6}){const U=d.useRef(null),u=d.useRef(null),H=d.useRef(null),p=d.useRef(null),G=d.useRef(null),K=d.useRef(!0),N=d.useRef(null);return d.useEffect(()=>{if(!U.current)return;function c(s){let e;Array.isArray(s)&&s.length>0?s.length===1?e=[s[0],s[0]]:e=s:e=["#ffffff","#ffffff"];const t=e.length,i=new Uint8Array(t*4);for(let o=0;o<t;o++){const l=new te(e[o]);i[o*4+0]=Math.round(l.r*255),i[o*4+1]=Math.round(l.g*255),i[o*4+2]=Math.round(l.b*255),i[o*4+3]=255}const r=new Ee(i,t,1,Ae);return r.magFilter=q,r.minFilter=q,r.wrapS=L,r.wrapT=L,r.generateMipmaps=!1,r.needsUpdate=!0,r}const m=c(J),X=new Ve(0,0,0,0);class B{constructor(){this.width=0,this.height=0,this.aspect=1,this.pixelRatio=1,this.isMobile=!1,this.breakpoint=768,this.fboWidth=null,this.fboHeight=null,this.time=0,this.delta=0,this.container=null,this.renderer=null,this.clock=null}init(e){this.container=e,this.pixelRatio=Math.min(window.devicePixelRatio||1,2),this.resize(),this.renderer=new Re({antialias:!0,alpha:!0}),this.renderer.autoClear=!1,this.renderer.setClearColor(new te(0),0),this.renderer.setPixelRatio(this.pixelRatio),this.renderer.setSize(this.width,this.height),this.renderer.domElement.style.width="100%",this.renderer.domElement.style.height="100%",this.renderer.domElement.style.display="block",this.clock=new ke,this.clock.start()}resize(){if(!this.container)return;const e=this.container.getBoundingClientRect();this.width=Math.max(1,Math.floor(e.width)),this.height=Math.max(1,Math.floor(e.height)),this.aspect=this.width/this.height,this.renderer&&this.renderer.setSize(this.width,this.height,!1)}update(){this.delta=this.clock.getDelta(),this.time+=this.delta}}const n=new B;class le{constructor(){this.mouseMoved=!1,this.coords=new a,this.coords_old=new a,this.diff=new a,this.timer=null,this.container=null,this.docTarget=null,this.listenerTarget=null,this.isHoverInside=!1,this.hasUserControl=!1,this.isAutoActive=!1,this.autoIntensity=2,this.takeoverActive=!1,this.takeoverStartTime=0,this.takeoverDuration=.25,this.takeoverFrom=new a,this.takeoverTo=new a,this.onInteract=null,this._onMouseMove=this.onDocumentMouseMove.bind(this),this._onTouchStart=this.onDocumentTouchStart.bind(this),this._onTouchMove=this.onDocumentTouchMove.bind(this),this._onTouchEnd=this.onTouchEnd.bind(this),this._onDocumentLeave=this.onDocumentLeave.bind(this)}init(e){this.container=e,this.docTarget=e.ownerDocument||null;const t=this.docTarget&&this.docTarget.defaultView||(typeof window<"u"?window:null);t&&(this.listenerTarget=t,this.listenerTarget.addEventListener("mousemove",this._onMouseMove),this.listenerTarget.addEventListener("touchstart",this._onTouchStart,{passive:!0}),this.listenerTarget.addEventListener("touchmove",this._onTouchMove,{passive:!0}),this.listenerTarget.addEventListener("touchend",this._onTouchEnd),this.docTarget&&this.docTarget.addEventListener("mouseleave",this._onDocumentLeave))}dispose(){this.listenerTarget&&(this.listenerTarget.removeEventListener("mousemove",this._onMouseMove),this.listenerTarget.removeEventListener("touchstart",this._onTouchStart),this.listenerTarget.removeEventListener("touchmove",this._onTouchMove),this.listenerTarget.removeEventListener("touchend",this._onTouchEnd)),this.docTarget&&this.docTarget.removeEventListener("mouseleave",this._onDocumentLeave),this.listenerTarget=null,this.docTarget=null,this.container=null}isPointInside(e,t){if(!this.container)return!1;const i=this.container.getBoundingClientRect();return i.width===0||i.height===0?!1:e>=i.left&&e<=i.right&&t>=i.top&&t<=i.bottom}updateHoverState(e,t){return this.isHoverInside=this.isPointInside(e,t),this.isHoverInside}setCoords(e,t){if(!this.container)return;this.timer&&window.clearTimeout(this.timer);const i=this.container.getBoundingClientRect();if(i.width===0||i.height===0)return;const r=(e-i.left)/i.width,o=(t-i.top)/i.height;this.coords.set(r*2-1,-(o*2-1)),this.mouseMoved=!0,this.timer=window.setTimeout(()=>{this.mouseMoved=!1},100)}setNormalized(e,t){this.coords.set(e,t),this.mouseMoved=!0}onDocumentMouseMove(e){if(this.updateHoverState(e.clientX,e.clientY)){if(this.onInteract&&this.onInteract(),this.isAutoActive&&!this.hasUserControl&&!this.takeoverActive){if(!this.container)return;const t=this.container.getBoundingClientRect();if(t.width===0||t.height===0)return;const i=(e.clientX-t.left)/t.width,r=(e.clientY-t.top)/t.height;this.takeoverFrom.copy(this.coords),this.takeoverTo.set(i*2-1,-(r*2-1)),this.takeoverStartTime=performance.now(),this.takeoverActive=!0,this.hasUserControl=!0,this.isAutoActive=!1;return}this.setCoords(e.clientX,e.clientY),this.hasUserControl=!0}}onDocumentTouchStart(e){if(e.touches.length!==1)return;const t=e.touches[0];this.updateHoverState(t.clientX,t.clientY)&&(this.onInteract&&this.onInteract(),this.setCoords(t.clientX,t.clientY),this.hasUserControl=!0)}onDocumentTouchMove(e){if(e.touches.length!==1)return;const t=e.touches[0];this.updateHoverState(t.clientX,t.clientY)&&(this.onInteract&&this.onInteract(),this.setCoords(t.clientX,t.clientY))}onTouchEnd(){this.isHoverInside=!1}onDocumentLeave(){this.isHoverInside=!1}update(){if(this.takeoverActive){const e=(performance.now()-this.takeoverStartTime)/(this.takeoverDuration*1e3);if(e>=1)this.takeoverActive=!1,this.coords.copy(this.takeoverTo),this.coords_old.copy(this.coords),this.diff.set(0,0);else{const t=e*e*(3-2*e);this.coords.copy(this.takeoverFrom).lerp(this.takeoverTo,t)}}this.diff.subVectors(this.coords,this.coords_old),this.coords_old.copy(this.coords),this.coords_old.x===0&&this.coords_old.y===0&&this.diff.set(0,0),this.isAutoActive&&!this.takeoverActive&&this.diff.multiplyScalar(this.autoIntensity)}}const h=new le;class he{constructor(e,t,i){this.mouse=e,this.manager=t,this.enabled=i.enabled,this.speed=i.speed,this.resumeDelay=i.resumeDelay||3e3,this.rampDurationMs=(i.rampDuration||0)*1e3,this.active=!1,this.current=new a(0,0),this.target=new a,this.lastTime=performance.now(),this.activationTime=0,this.margin=.2,this._tmpDir=new a,this.pickNewTarget()}pickNewTarget(){const e=Math.random;this.target.set((e()*2-1)*(1-this.margin),(e()*2-1)*(1-this.margin))}forceStop(){this.active=!1,this.mouse.isAutoActive=!1}update(){if(!this.enabled)return;const e=performance.now();if(e-this.manager.lastUserInteraction<this.resumeDelay){this.active&&this.forceStop();return}if(this.mouse.isHoverInside){this.active&&this.forceStop();return}if(this.active||(this.active=!0,this.current.copy(this.mouse.coords),this.lastTime=e,this.activationTime=e),!this.active)return;this.mouse.isAutoActive=!0;let i=(e-this.lastTime)/1e3;this.lastTime=e,i>.2&&(i=.016);const r=this._tmpDir.subVectors(this.target,this.current),o=r.length();if(o<.01){this.pickNewTarget();return}r.normalize();let l=1;if(this.rampDurationMs>0){const W=Math.min(1,(e-this.activationTime)/this.rampDurationMs);l=W*W*(3-2*W)}const Y=this.speed*i*l,x=Math.min(Y,o);this.current.addScaledVector(r,x),this.mouse.setNormalized(this.current.x,this.current.y)}}const g=`
+  attribute vec3 position;
+  uniform vec2 px;
+  uniform vec2 boundarySpace;
+  varying vec2 uv;
+  precision highp float;
+  void main(){
+  vec3 pos = position;
+  vec2 scale = 1.0 - boundarySpace * 2.0;
+  pos.xy = pos.xy * scale;
+  uv = vec2(0.5)+(pos.xy)*0.5;
+  gl_Position = vec4(pos, 1.0);
+}
+`,de=`
+  attribute vec3 position;
+  uniform vec2 px;
+  precision highp float;
+  varying vec2 uv;
+  void main(){
+  vec3 pos = position;
+  uv = 0.5 + pos.xy * 0.5;
+  vec2 n = sign(pos.xy);
+  pos.xy = abs(pos.xy) - px * 1.0;
+  pos.xy *= n;
+  gl_Position = vec4(pos, 1.0);
+}
+`,ve=`
+    precision highp float;
+    attribute vec3 position;
+    attribute vec2 uv;
+    uniform vec2 center;
+    uniform vec2 scale;
+    uniform vec2 px;
+    varying vec2 vUv;
+    void main(){
+    vec2 pos = position.xy * scale * 2.0 * px + center;
+    vUv = uv;
+    gl_Position = vec4(pos, 0.0, 1.0);
+}
+`,Q=`
+    precision highp float;
+    uniform sampler2D velocity;
+    uniform float dt;
+    uniform bool isBFECC;
+    uniform vec2 fboSize;
+    uniform vec2 px;
+    varying vec2 uv;
+    void main(){
+    vec2 ratio = max(fboSize.x, fboSize.y) / fboSize;
+    if(isBFECC == false){
+        vec2 vel = texture2D(velocity, uv).xy;
+        vec2 uv2 = uv - vel * dt * ratio;
+        vec2 newVel = texture2D(velocity, uv2).xy;
+        gl_FragColor = vec4(newVel, 0.0, 0.0);
+    } else {
+        vec2 spot_new = uv;
+        vec2 vel_old = texture2D(velocity, uv).xy;
+        vec2 spot_old = spot_new - vel_old * dt * ratio;
+        vec2 vel_new1 = texture2D(velocity, spot_old).xy;
+        vec2 spot_new2 = spot_old + vel_new1 * dt * ratio;
+        vec2 error = spot_new2 - spot_new;
+        vec2 spot_new3 = spot_new - error / 2.0;
+        vec2 vel_2 = texture2D(velocity, spot_new3).xy;
+        vec2 spot_old2 = spot_new3 - vel_2 * dt * ratio;
+        vec2 newVel2 = texture2D(velocity, spot_old2).xy; 
+        gl_FragColor = vec4(newVel2, 0.0, 0.0);
+    }
+}
+`,fe=`
+    precision highp float;
+    uniform sampler2D velocity;
+    uniform sampler2D palette;
+    uniform vec4 bgColor;
+    varying vec2 uv;
+    void main(){
+    vec2 vel = texture2D(velocity, uv).xy;
+    float lenv = clamp(length(vel), 0.0, 1.0);
+    vec3 c = texture2D(palette, vec2(lenv, 0.5)).rgb;
+    vec3 outRGB = mix(bgColor.rgb, c, lenv);
+    float outA = mix(bgColor.a, 1.0, lenv);
+    gl_FragColor = vec4(outRGB, outA);
+}
+`,pe=`
+    precision highp float;
+    uniform sampler2D velocity;
+    uniform float dt;
+    uniform vec2 px;
+    varying vec2 uv;
+    void main(){
+    float x0 = texture2D(velocity, uv-vec2(px.x, 0.0)).x;
+    float x1 = texture2D(velocity, uv+vec2(px.x, 0.0)).x;
+    float y0 = texture2D(velocity, uv-vec2(0.0, px.y)).y;
+    float y1 = texture2D(velocity, uv+vec2(0.0, px.y)).y;
+    float divergence = (x1 - x0 + y1 - y0) / 2.0;
+    gl_FragColor = vec4(divergence / dt);
+}
+`,me=`
+    precision highp float;
+    uniform vec2 force;
+    uniform vec2 center;
+    uniform vec2 scale;
+    uniform vec2 px;
+    varying vec2 vUv;
+    void main(){
+    vec2 circle = (vUv - 0.5) * 2.0;
+    float d = 1.0 - min(length(circle), 1.0);
+    d *= d;
+    gl_FragColor = vec4(force * d, 0.0, 1.0);
+}
+`,ge=`
+    precision highp float;
+    uniform sampler2D pressure;
+    uniform sampler2D divergence;
+    uniform vec2 px;
+    varying vec2 uv;
+    void main(){
+    float p0 = texture2D(pressure, uv + vec2(px.x * 2.0, 0.0)).r;
+    float p1 = texture2D(pressure, uv - vec2(px.x * 2.0, 0.0)).r;
+    float p2 = texture2D(pressure, uv + vec2(0.0, px.y * 2.0)).r;
+    float p3 = texture2D(pressure, uv - vec2(0.0, px.y * 2.0)).r;
+    float div = texture2D(divergence, uv).r;
+    float newP = (p0 + p1 + p2 + p3) / 4.0 - div;
+    gl_FragColor = vec4(newP);
+}
+`,ye=`
+    precision highp float;
+    uniform sampler2D pressure;
+    uniform sampler2D velocity;
+    uniform vec2 px;
+    uniform float dt;
+    varying vec2 uv;
+    void main(){
+    float step = 1.0;
+    float p0 = texture2D(pressure, uv + vec2(px.x * step, 0.0)).r;
+    float p1 = texture2D(pressure, uv - vec2(px.x * step, 0.0)).r;
+    float p2 = texture2D(pressure, uv + vec2(0.0, px.y * step)).r;
+    float p3 = texture2D(pressure, uv - vec2(0.0, px.y * step)).r;
+    vec2 v = texture2D(velocity, uv).xy;
+    vec2 gradP = vec2(p0 - p1, p2 - p3) * 0.5;
+    v = v - gradP * dt;
+    gl_FragColor = vec4(v, 0.0, 1.0);
+}
+`,xe=`
+    precision highp float;
+    uniform sampler2D velocity;
+    uniform sampler2D velocity_new;
+    uniform float v;
+    uniform vec2 px;
+    uniform float dt;
+    varying vec2 uv;
+    void main(){
+    vec2 old = texture2D(velocity, uv).xy;
+    vec2 new0 = texture2D(velocity_new, uv + vec2(px.x * 2.0, 0.0)).xy;
+    vec2 new1 = texture2D(velocity_new, uv - vec2(px.x * 2.0, 0.0)).xy;
+    vec2 new2 = texture2D(velocity_new, uv + vec2(0.0, px.y * 2.0)).xy;
+    vec2 new3 = texture2D(velocity_new, uv - vec2(0.0, px.y * 2.0)).xy;
+    vec2 newv = 4.0 * old + v * dt * (new0 + new1 + new2 + new3);
+    newv /= 4.0 * (1.0 + v * dt);
+    gl_FragColor = vec4(newv, 0.0, 0.0);
+}
+`;class y{constructor(e){var t;this.props=e||{},this.uniforms=(t=this.props.material)==null?void 0:t.uniforms,this.scene=null,this.camera=null,this.material=null,this.geometry=null,this.plane=null}init(){this.scene=new ie,this.camera=new se,this.uniforms&&(this.material=new I(this.props.material),this.geometry=new j(2,2),this.plane=new $(this.geometry,this.material),this.scene.add(this.plane))}update(){n.renderer.setRenderTarget(this.props.output||null),n.renderer.render(this.scene,this.camera),n.renderer.setRenderTarget(null)}}class _e extends y{constructor(e){super({material:{vertexShader:g,fragmentShader:Q,uniforms:{boundarySpace:{value:e.cellScale},px:{value:e.cellScale},fboSize:{value:e.fboSize},velocity:{value:e.src.texture},dt:{value:e.dt},isBFECC:{value:!0}}},output:e.dst}),this.uniforms=this.props.material.uniforms,this.init()}init(){super.init(),this.createBoundary()}createBoundary(){const e=new Ie,t=new Float32Array([-1,-1,0,-1,1,0,-1,1,0,1,1,0,1,1,0,1,-1,0,1,-1,0,-1,-1,0]);e.setAttribute("position",new Oe(t,3));const i=new I({vertexShader:de,fragmentShader:Q,uniforms:this.uniforms});this.line=new Ue(e,i),this.scene.add(this.line)}update({dt:e,isBounce:t,BFECC:i}){this.uniforms.dt.value=e,this.line.visible=t,this.uniforms.isBFECC.value=i,super.update()}}class we extends y{constructor(e){super({output:e.dst}),this.init(e)}init(e){super.init();const t=new j(1,1),i=new I({vertexShader:ve,fragmentShader:me,blending:He,depthWrite:!1,uniforms:{px:{value:e.cellScale},force:{value:new a(0,0)},center:{value:new a(0,0)},scale:{value:new a(e.cursor_size,e.cursor_size)}}});this.mouse=new $(t,i),this.scene.add(this.mouse)}update(e){const t=h.diff.x/2*e.mouse_force,i=h.diff.y/2*e.mouse_force,r=e.cursor_size*e.cellScale.x,o=e.cursor_size*e.cellScale.y,l=Math.min(Math.max(h.coords.x,-1+r+e.cellScale.x*2),1-r-e.cellScale.x*2),Y=Math.min(Math.max(h.coords.y,-1+o+e.cellScale.y*2),1-o-e.cellScale.y*2),x=this.mouse.material.uniforms;x.force.value.set(t,i),x.center.value.set(l,Y),x.scale.value.set(e.cursor_size,e.cursor_size),super.update()}}class be extends y{constructor(e){super({material:{vertexShader:g,fragmentShader:xe,uniforms:{boundarySpace:{value:e.boundarySpace},velocity:{value:e.src.texture},velocity_new:{value:e.dst_.texture},v:{value:e.viscous},px:{value:e.cellScale},dt:{value:e.dt}}},output:e.dst,output0:e.dst_,output1:e.dst}),this.init()}update({viscous:e,iterations:t,dt:i}){let r,o;this.uniforms.v.value=e;for(let l=0;l<t;l++)l%2===0?(r=this.props.output0,o=this.props.output1):(r=this.props.output1,o=this.props.output0),this.uniforms.velocity_new.value=r.texture,this.props.output=o,this.uniforms.dt.value=i,super.update();return o}}class Se extends y{constructor(e){super({material:{vertexShader:g,fragmentShader:pe,uniforms:{boundarySpace:{value:e.boundarySpace},velocity:{value:e.src.texture},px:{value:e.cellScale},dt:{value:e.dt}}},output:e.dst}),this.init()}update({vel:e}){this.uniforms.velocity.value=e.texture,super.update()}}class De extends y{constructor(e){super({material:{vertexShader:g,fragmentShader:ge,uniforms:{boundarySpace:{value:e.boundarySpace},pressure:{value:e.dst_.texture},divergence:{value:e.src.texture},px:{value:e.cellScale}}},output:e.dst,output0:e.dst_,output1:e.dst}),this.init()}update({iterations:e}){let t,i;for(let r=0;r<e;r++)r%2===0?(t=this.props.output0,i=this.props.output1):(t=this.props.output1,i=this.props.output0),this.uniforms.pressure.value=t.texture,this.props.output=i,super.update();return i}}class Te extends y{constructor(e){super({material:{vertexShader:g,fragmentShader:ye,uniforms:{boundarySpace:{value:e.boundarySpace},pressure:{value:e.src_p.texture},velocity:{value:e.src_v.texture},px:{value:e.cellScale},dt:{value:e.dt}}},output:e.dst}),this.init()}update({vel:e,pressure:t}){this.uniforms.velocity.value=e.texture,this.uniforms.pressure.value=t.texture,super.update()}}class ze{constructor(e){this.options={iterations_poisson:32,iterations_viscous:32,mouse_force:20,resolution:.5,cursor_size:100,viscous:30,isBounce:!1,dt:.014,isViscous:!1,BFECC:!0,...e},this.fbos={vel_0:null,vel_1:null,vel_viscous0:null,vel_viscous1:null,div:null,pressure_0:null,pressure_1:null},this.fboSize=new a,this.cellScale=new a,this.boundarySpace=new a,this.init()}init(){this.calcSize(),this.createAllFBO(),this.createShaderPass()}getFloatType(){return/(iPad|iPhone|iPod)/i.test(navigator.userAgent)?Be:qe}createAllFBO(){const t={type:this.getFloatType(),depthBuffer:!1,stencilBuffer:!1,minFilter:q,magFilter:q,wrapS:L,wrapT:L};for(let i in this.fbos)this.fbos[i]=new Le(this.fboSize.x,this.fboSize.y,t)}createShaderPass(){this.advection=new _e({cellScale:this.cellScale,fboSize:this.fboSize,dt:this.options.dt,src:this.fbos.vel_0,dst:this.fbos.vel_1}),this.externalForce=new we({cellScale:this.cellScale,cursor_size:this.options.cursor_size,dst:this.fbos.vel_1}),this.viscous=new be({cellScale:this.cellScale,boundarySpace:this.boundarySpace,viscous:this.options.viscous,src:this.fbos.vel_1,dst:this.fbos.vel_viscous1,dst_:this.fbos.vel_viscous0,dt:this.options.dt}),this.divergence=new Se({cellScale:this.cellScale,boundarySpace:this.boundarySpace,src:this.fbos.vel_viscous0,dst:this.fbos.div,dt:this.options.dt}),this.poisson=new De({cellScale:this.cellScale,boundarySpace:this.boundarySpace,src:this.fbos.div,dst:this.fbos.pressure_1,dst_:this.fbos.pressure_0}),this.pressure=new Te({cellScale:this.cellScale,boundarySpace:this.boundarySpace,src_p:this.fbos.pressure_0,src_v:this.fbos.vel_viscous0,dst:this.fbos.vel_0,dt:this.options.dt})}calcSize(){const e=Math.max(1,Math.round(this.options.resolution*n.width)),t=Math.max(1,Math.round(this.options.resolution*n.height)),i=1/e,r=1/t;this.cellScale.set(i,r),this.fboSize.set(e,t)}resize(){this.calcSize();for(let e in this.fbos)this.fbos[e].setSize(this.fboSize.x,this.fboSize.y)}update(){this.options.isBounce?this.boundarySpace.set(0,0):this.boundarySpace.copy(this.cellScale),this.advection.update({dt:this.options.dt,isBounce:this.options.isBounce,BFECC:this.options.BFECC}),this.externalForce.update({cursor_size:this.options.cursor_size,mouse_force:this.options.mouse_force,cellScale:this.cellScale});let e=this.fbos.vel_1;this.options.isViscous&&(e=this.viscous.update({viscous:this.options.viscous,iterations:this.options.iterations_viscous,dt:this.options.dt})),this.divergence.update({vel:e});const t=this.poisson.update({iterations:this.options.iterations_poisson});this.pressure.update({vel:e,pressure:t})}}class Ce{constructor(){this.init()}init(){this.simulation=new ze,this.scene=new ie,this.camera=new se,this.output=new $(new j(2,2),new I({vertexShader:g,fragmentShader:fe,transparent:!0,depthWrite:!1,uniforms:{velocity:{value:this.simulation.fbos.vel_0.texture},boundarySpace:{value:new a},palette:{value:m},bgColor:{value:X}}})),this.scene.add(this.output)}addScene(e){this.scene.add(e)}resize(){this.simulation.resize()}render(){n.renderer.setRenderTarget(null),n.renderer.render(this.scene,this.camera)}update(){this.simulation.update(),this.render()}}class Fe{constructor(e){this.props=e,n.init(e.$wrapper),h.init(e.$wrapper),h.autoIntensity=e.autoIntensity,h.takeoverDuration=e.takeoverDuration,this.lastUserInteraction=performance.now(),h.onInteract=()=>{this.lastUserInteraction=performance.now(),this.autoDriver&&this.autoDriver.forceStop()},this.autoDriver=new he(h,this,{enabled:e.autoDemo,speed:e.autoSpeed,resumeDelay:e.autoResumeDelay,rampDuration:e.autoRampDuration}),this.init(),this._loop=this.loop.bind(this),this._resize=this.resize.bind(this),window.addEventListener("resize",this._resize),this._onVisibility=()=>{document.hidden?this.pause():K.current&&this.start()},document.addEventListener("visibilitychange",this._onVisibility),this.running=!1}init(){this.props.$wrapper.prepend(n.renderer.domElement),this.output=new Ce}resize(){n.resize(),this.output.resize()}render(){this.autoDriver&&this.autoDriver.update(),h.update(),n.update(),this.output.update()}loop(){this.running&&(this.render(),p.current=requestAnimationFrame(this._loop))}start(){this.running||(this.running=!0,this._loop())}pause(){this.running=!1,p.current&&(cancelAnimationFrame(p.current),p.current=null)}dispose(){try{if(window.removeEventListener("resize",this._resize),document.removeEventListener("visibilitychange",this._onVisibility),h.dispose(),n.renderer){const e=n.renderer.domElement;e&&e.parentNode&&e.parentNode.removeChild(e),n.renderer.dispose(),n.renderer.forceContextLoss()}}catch{}}}const v=U.current;v.style.position=v.style.position||"relative",v.style.overflow=v.style.overflow||"hidden";const Z=new Fe({$wrapper:v,autoDemo:M,autoSpeed:E,autoIntensity:A,takeoverDuration:R,autoResumeDelay:k,autoRampDuration:V});u.current=Z,(()=>{var t;if(!u.current)return;const s=(t=u.current.output)==null?void 0:t.simulation;if(!s)return;const e=s.options.resolution;Object.assign(s.options,{mouse_force:_,cursor_size:w,isViscous:b,viscous:S,iterations_viscous:D,iterations_poisson:T,dt:z,BFECC:C,resolution:f,isBounce:F}),f!==e&&s.resize()})(),Z.start();const P=new IntersectionObserver(s=>{const e=s[0],t=e.isIntersecting&&e.intersectionRatio>0;K.current=t,u.current&&(t&&!document.hidden?u.current.start():u.current.pause())},{threshold:[0,.01,.1]});P.observe(v),G.current=P;const ee=new ResizeObserver(()=>{u.current&&(N.current&&cancelAnimationFrame(N.current),N.current=requestAnimationFrame(()=>{u.current&&u.current.resize()}))});return ee.observe(v),H.current=ee,()=>{if(p.current&&cancelAnimationFrame(p.current),H.current)try{H.current.disconnect()}catch{}if(G.current)try{G.current.disconnect()}catch{}u.current&&u.current.dispose(),u.current=null}},[C,w,z,F,b,T,D,_,f,S,J,M,E,A,R,k,V]),d.useEffect(()=>{var B;const c=u.current;if(!c)return;const m=(B=c.output)==null?void 0:B.simulation;if(!m)return;const X=m.options.resolution;Object.assign(m.options,{mouse_force:_,cursor_size:w,isViscous:b,viscous:S,iterations_viscous:D,iterations_poisson:T,dt:z,BFECC:C,resolution:f,isBounce:F}),c.autoDriver&&(c.autoDriver.enabled=M,c.autoDriver.speed=E,c.autoDriver.resumeDelay=k,c.autoDriver.rampDurationMs=V*1e3,c.autoDriver.mouse&&(c.autoDriver.mouse.autoIntensity=A,c.autoDriver.mouse.takeoverDuration=R)),f!==X&&m.resize()},[_,w,b,S,D,T,z,C,f,F,M,E,A,R,k,V]),Me.jsx("div",{ref:U,className:`${Ge["liquid-ether-container"]} ${ce||""}`,style:ue})}ae.__docgenInfo={description:"",methods:[],displayName:"LiquidEther",props:{mouseForce:{defaultValue:{value:"20",computed:!1},required:!1},cursorSize:{defaultValue:{value:"100",computed:!1},required:!1},isViscous:{defaultValue:{value:"false",computed:!1},required:!1},viscous:{defaultValue:{value:"30",computed:!1},required:!1},iterationsViscous:{defaultValue:{value:"32",computed:!1},required:!1},iterationsPoisson:{defaultValue:{value:"32",computed:!1},required:!1},dt:{defaultValue:{value:"0.014",computed:!1},required:!1},BFECC:{defaultValue:{value:"true",computed:!1},required:!1},resolution:{defaultValue:{value:"0.5",computed:!1},required:!1},isBounce:{defaultValue:{value:"false",computed:!1},required:!1},colors:{defaultValue:{value:"['#5227FF', '#FF9FFC', '#B19EEF']",computed:!1},required:!1},style:{defaultValue:{value:"{}",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},autoDemo:{defaultValue:{value:"true",computed:!1},required:!1},autoSpeed:{defaultValue:{value:"0.5",computed:!1},required:!1},autoIntensity:{defaultValue:{value:"2.2",computed:!1},required:!1},takeoverDuration:{defaultValue:{value:"0.25",computed:!1},required:!1},autoResumeDelay:{defaultValue:{value:"1000",computed:!1},required:!1},autoRampDuration:{defaultValue:{value:"0.6",computed:!1},required:!1}}};const $e={title:"ReactBits/Backgrounds/LiquidEther",component:ae,parameters:{layout:"fullscreen"},tags:["autodocs"]},O={};var re,oe,ne;O.parameters={...O.parameters,docs:{...(re=O.parameters)==null?void 0:re.docs,source:{originalSource:"{}",...(ne=(oe=O.parameters)==null?void 0:oe.docs)==null?void 0:ne.source}}};const je=["Default"];export{O as Default,je as __namedExportsOrder,$e as default};

package/storybook-static/assets/LoadingSpinner-1jvNgxlI.css

@@ -0,0 +1 @@
+._loadingContainer_n9pf7_1{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;background:var(--spinner-background, linear-gradient(135deg, var(--color-background) 0%, var(--color-background-secondary) 100%));border-radius:var(--radius-lg);padding:var(--spacing-xl);overflow:hidden;min-height:200px}._fullScreen_n9pf7_17{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;min-height:100vh;border-radius:0;z-index:9999}._overlay_n9pf7_30{background:rgba(var(--color-background-rgb, 255, 255, 255),.95);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}._loadingContainer_n9pf7_1:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(var(--color-primary-rgb),.1) 50%,transparent 100%);animation:_shimmer_n9pf7_1 3s infinite}@keyframes _shimmer_n9pf7_1{0%{left:-100%}to{left:100%}}._small_n9pf7_58{min-height:120px;padding:var(--spacing-md)}._small_n9pf7_58 ._loadingText_n9pf7_63{font-size:var(--font-size-sm)}._medium_n9pf7_67{min-height:200px;padding:var(--spacing-xl)}._large_n9pf7_72{min-height:300px;padding:var(--spacing-2xl)}._large_n9pf7_72 ._loadingText_n9pf7_63{font-size:var(--font-size-lg)}._dotsSpinner_n9pf7_82{position:relative;width:60px;height:60px;margin-bottom:var(--spacing-lg);filter:drop-shadow(0 4px 8px rgba(var(--color-primary-rgb),.2))}._small_n9pf7_58 ._dotsSpinner_n9pf7_82{width:40px;height:40px}._large_n9pf7_72 ._dotsSpinner_n9pf7_82{width:80px;height:80px}._dot1_n9pf7_100,._dot2_n9pf7_101,._dot3_n9pf7_102{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--spinner-color, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%));box-shadow:0 2px 8px rgba(var(--color-primary-rgb),.3)}._small_n9pf7_58 ._dot1_n9pf7_100,._small_n9pf7_58 ._dot2_n9pf7_101,._small_n9pf7_58 ._dot3_n9pf7_102{width:8px;height:8px}._large_n9pf7_72 ._dot1_n9pf7_100,._large_n9pf7_72 ._dot2_n9pf7_101,._large_n9pf7_72 ._dot3_n9pf7_102{width:16px;height:16px}._dot1_n9pf7_100{top:0;left:50%;transform:translate(-50%);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%)}._dot2_n9pf7_101{bottom:0;left:0;background:linear-gradient(135deg,var(--color-primary-hover) 0%,var(--color-primary) 100%)}._dot3_n9pf7_102{bottom:0;right:0;background:linear-gradient(135deg,var(--color-primary-active) 0%,var(--color-primary-hover) 100%)}._circleSpinner_n9pf7_153{width:50px;height:50px;border:4px solid var(--color-border);border-top:4px solid var(--spinner-color, var(--color-primary));border-radius:50%;margin-bottom:var(--spacing-lg)}._small_n9pf7_58 ._circleSpinner_n9pf7_153{width:30px;height:30px;border-width:2px}._large_n9pf7_72 ._circleSpinner_n9pf7_153{width:70px;height:70px;border-width:6px}._pulseSpinner_n9pf7_175{width:50px;height:50px;background:var(--spinner-color, var(--color-primary));border-radius:50%;margin-bottom:var(--spacing-lg)}._small_n9pf7_58 ._pulseSpinner_n9pf7_175{width:30px;height:30px}._large_n9pf7_72 ._pulseSpinner_n9pf7_175{width:70px;height:70px}._loadingText_n9pf7_63{color:var(--color-text-secondary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin:0;letter-spacing:var(--letter-spacing-wide);text-align:center;max-width:300px;line-height:var(--line-height-relaxed);background:linear-gradient(135deg,var(--color-text-secondary) 0%,var(--color-primary) 50%,var(--color-text-secondary) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:_textGradient_n9pf7_1 4s ease-in-out infinite}@keyframes _textGradient_n9pf7_1{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}._sparkleContainer_n9pf7_226{position:absolute;width:100%;height:100%;pointer-events:none;z-index:1}._sparkle_n9pf7_226{position:absolute;width:3px;height:3px;background:var(--spinner-color, var(--color-primary));border-radius:50%;box-shadow:0 0 6px var(--spinner-color, var(--color-primary)),0 0 12px rgba(var(--color-primary-rgb),.5)}._sparkle_n9pf7_226:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background:linear-gradient(45deg,var(--color-primary-light),var(--color-secondary),var(--color-primary-light));border-radius:50%;z-index:-1;opacity:.3}@media (prefers-reduced-motion: reduce){._loadingContainer_n9pf7_1:before{animation:none}._loadingText_n9pf7_63{animation:none;background:var(--color-text-secondary);-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset}._sparkle_n9pf7_226{display:none}._dotsSpinner_n9pf7_82,._circleSpinner_n9pf7_153,._pulseSpinner_n9pf7_175{animation:none}}[data-theme*=dark] ._loadingContainer_n9pf7_1{background:linear-gradient(135deg,var(--color-background) 0%,var(--color-background-secondary) 100%);box-shadow:inset 0 1px rgba(var(--color-primary-rgb),.1)}[data-theme*=dark] ._dot1_n9pf7_100,[data-theme*=dark] ._dot2_n9pf7_101,[data-theme*=dark] ._dot3_n9pf7_102{box-shadow:0 2px 8px rgba(var(--color-primary-rgb),.4),0 0 16px rgba(var(--color-primary-rgb),.2)}[data-theme*=dark] ._sparkle_n9pf7_226{box-shadow:0 0 8px var(--color-primary),0 0 16px var(--color-primary),0 0 24px rgba(var(--color-primary-rgb),.3)}

package/storybook-static/assets/LoadingSpinner-Cz1P0luX.js

@@ -0,0 +1,49 @@
+import{r as o,j as n}from"./iframe-Cz1R6gKZ.js";import{A as L}from"./index-CIvCfZMj.js";import{m as a}from"./proxy-CAwOFzsk.js";const q="_loadingContainer_n9pf7_1",N="_fullScreen_n9pf7_17",A="_overlay_n9pf7_30",V="_shimmer_n9pf7_1",z="_small_n9pf7_58",M="_loadingText_n9pf7_63",P="_medium_n9pf7_67",O="_large_n9pf7_72",W="_dotsSpinner_n9pf7_82",E="_dot1_n9pf7_100",F="_dot2_n9pf7_101",G="_dot3_n9pf7_102",J="_circleSpinner_n9pf7_153",B="_pulseSpinner_n9pf7_175",D="_textGradient_n9pf7_1",R="_sparkleContainer_n9pf7_226",$="_sparkle_n9pf7_226",e={loadingContainer:q,fullScreen:N,overlay:A,shimmer:V,small:z,loadingText:M,medium:P,large:O,dotsSpinner:W,dot1:E,dot2:F,dot3:G,circleSpinner:J,pulseSpinner:B,textGradient:D,sparkleContainer:R,sparkle:$},U=["Loading your content...","Just a moment please...","Preparing something awesome...","Almost ready...","Working on it...","Just a sec...","Loading with care...","Getting things ready...","Almost there...","Polishing the details..."],X=({message:s,size:g="medium",variant:l="dots",className:y="",showMessage:r=!0,customMessages:_,messageRotationInterval:d=2500,showSparkles:h=!0,fullScreen:v=!1,overlay:S=!1,color:p,backgroundColor:c})=>{const i=_||U,[u,x]=o.useState(0),[m,C]=o.useState(s||i[0]);o.useEffect(()=>{if(!s&&r){const f=setInterval(()=>{x(t=>(t+1)%i.length)},d);return()=>clearInterval(f)}},[s,r,i.length,d]),o.useEffect(()=>{!s&&r&&C(i[u])},[u,s,i,r]);const T=[e.loadingContainer,e[g],e[l],v&&e.fullScreen,S&&e.overlay,y].filter(Boolean).join(" "),I={...p&&{"--spinner-color":p},...c&&{"--spinner-background":c}},b=()=>n.jsxs(a.div,{className:e.dotsSpinner,animate:{rotate:360},transition:{duration:2,repeat:1/0,ease:"linear"},children:[n.jsx(a.div,{className:e.dot1,animate:{scale:[1,1.3,1],y:[0,-6,0]},transition:{duration:1.5,repeat:1/0,ease:"easeInOut",delay:0}}),n.jsx(a.div,{className:e.dot2,animate:{scale:[1,1.3,1],y:[0,-6,0]},transition:{duration:1.5,repeat:1/0,ease:"easeInOut",delay:.5}}),n.jsx(a.div,{className:e.dot3,animate:{scale:[1,1.3,1],y:[0,-6,0]},transition:{duration:1.5,repeat:1/0,ease:"easeInOut",delay:1}})]}),k=()=>n.jsx(a.div,{className:e.circleSpinner,animate:{rotate:360},transition:{duration:1,repeat:1/0,ease:"linear"}}),w=()=>n.jsx(a.div,{className:e.pulseSpinner,animate:{scale:[1,1.2,1],opacity:[1,.7,1]},transition:{duration:1.5,repeat:1/0,ease:"easeInOut"}}),j=()=>{switch(l){case"spinner":return k();case"pulse":return w();case"dots":default:return b()}};return n.jsxs("div",{className:T,style:I,children:[j(),r&&n.jsx(L,{mode:"wait",children:n.jsx(a.p,{className:e.loadingText,initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.4,ease:"easeOut"},children:m},m)}),h&&n.jsx("div",{className:e.sparkleContainer,children:[...Array(4)].map((f,t)=>n.jsx(a.div,{className:e.sparkle,animate:{opacity:[0,1,0],scale:[.5,1,.5],rotate:[0,180,360]},transition:{duration:3,repeat:1/0,delay:t*.75,ease:"easeInOut"},style:{left:`${20+t%2*60}%`,top:`${20+Math.floor(t/2)*60}%`}},t))})]})};X.__docgenInfo={description:`LoadingSpinner Component
+
+@component
+@description
+A highly customizable, animated loading spinner component built with Framer Motion.
+Supports multiple visual variants, sizes, custom messages, and advanced styling options.
+Perfect for indicating loading states across different contexts in your application.
+
+Features:
+- Multiple spinner variants (dots, spinner, pulse)
+- Three size options (small, medium, large)
+- Rotating or static messages
+- Customizable colors and styling
+- Full-screen overlay support
+- Decorative sparkle effects
+- Accessibility support (respects reduced motion preferences)
+- Theme-aware styling
+
+@example
+// Basic usage
+<LoadingSpinner />
+
+@example
+// With custom message and variant
+<LoadingSpinner
+  variant="pulse"
+  message="Saving your changes..."
+  size="large"
+/>
+
+@example
+// Full-screen overlay
+<LoadingSpinner
+  fullScreen
+  overlay
+  message="Loading application..."
+/>
+
+@example
+// Custom messages and styling
+<LoadingSpinner
+  customMessages={['Processing...', 'Almost done...', 'Final touches...']}
+  color="#ff6b6b"
+  backgroundColor="#f8f9fa"
+  showSparkles={false}
+/>
+
+@param {LoadingSpinnerProps} props - The props for the LoadingSpinner component
+@returns {JSX.Element} The rendered LoadingSpinner component`,methods:[],displayName:"LoadingSpinner",props:{message:{required:!1,tsType:{name:"string"},description:"Static message to display. If not provided, will cycle through default messages"},size:{required:!1,tsType:{name:"union",raw:"'small' | 'medium' | 'large'",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'medium'"},{name:"literal",value:"'large'"}]},description:"Size variant of the loading spinner",defaultValue:{value:"'medium'",computed:!1}},variant:{required:!1,tsType:{name:"union",raw:"'dots' | 'spinner' | 'pulse'",elements:[{name:"literal",value:"'dots'"},{name:"literal",value:"'spinner'"},{name:"literal",value:"'pulse'"}]},description:"Visual style variant of the loading spinner",defaultValue:{value:"'dots'",computed:!1}},className:{required:!1,tsType:{name:"string"},description:"Additional CSS class names to apply",defaultValue:{value:"''",computed:!1}},showMessage:{required:!1,tsType:{name:"boolean"},description:"Whether to show the text message below the spinner",defaultValue:{value:"true",computed:!1}},customMessages:{required:!1,tsType:{name:"Array",elements:[{name:"string"}],raw:"string[]"},description:"Custom array of messages to rotate through (only used when message is not provided)"},messageRotationInterval:{required:!1,tsType:{name:"number"},description:"Interval in milliseconds for message rotation (default: 2500ms)",defaultValue:{value:"2500",computed:!1}},showSparkles:{required:!1,tsType:{name:"boolean"},description:"Whether to show decorative sparkle effects",defaultValue:{value:"true",computed:!1}},fullScreen:{required:!1,tsType:{name:"boolean"},description:"Whether to render as a full-screen overlay",defaultValue:{value:"false",computed:!1}},overlay:{required:!1,tsType:{name:"boolean"},description:"Whether to show a backdrop behind the spinner (only with fullScreen)",defaultValue:{value:"false",computed:!1}},color:{required:!1,tsType:{name:"string"},description:"Custom color for the spinner elements (CSS color value)"},backgroundColor:{required:!1,tsType:{name:"string"},description:"Custom background color (CSS color value)"}}};export{X as L};

package/storybook-static/assets/LoadingSpinner.stories-Es0dDszY.js

@@ -0,0 +1,169 @@
+import{L as ue}from"./LoadingSpinner-Cz1P0luX.js";import"./iframe-Cz1R6gKZ.js";import"./preload-helper-C1FmrZbK.js";import"./index-CIvCfZMj.js";import"./proxy-CAwOFzsk.js";import"./MotionConfigContext-C_Ro_xsO.js";const we={title:"Atoms/LoadingSpinner",component:ue,parameters:{layout:"centered",docs:{description:{component:"An animated loading spinner with multiple variants and customizable messages. Features smooth Framer Motion animations and accessibility support."}}},argTypes:{size:{control:{type:"select"},options:["small","medium","large"]},variant:{control:{type:"select"},options:["dots","spinner","pulse"]},message:{control:{type:"text"}},showMessage:{control:{type:"boolean"}},showSparkles:{control:{type:"boolean"}},fullScreen:{control:{type:"boolean"}},overlay:{control:{type:"boolean"}},color:{control:{type:"color"}},backgroundColor:{control:{type:"color"}},messageRotationInterval:{control:{type:"number",min:500,max:1e4,step:500}}}},e={args:{variant:"dots",size:"medium"}},s={args:{variant:"dots",size:"medium",message:"Loading your amazing content..."}},a={args:{variant:"dots",size:"small"}},r={args:{variant:"dots",size:"large"}},n={args:{variant:"spinner",size:"medium"}},o={args:{variant:"pulse",size:"medium"}},t={args:{variant:"spinner",size:"small",message:"Loading..."}},i={args:{variant:"pulse",size:"large",message:"Processing your request..."}},c={args:{variant:"dots",size:"medium",message:"Fetching data from server..."},parameters:{docs:{description:{story:"Example of how the loading spinner might appear when fetching data."}}}},m={args:{variant:"pulse",size:"small",message:"Saving changes..."},parameters:{docs:{description:{story:"Compact loading spinner for save operations."}}}},p={args:{variant:"spinner",size:"large",message:"Uploading files..."},parameters:{docs:{description:{story:"Large loading spinner for file upload operations."}}}},l={args:{variant:"dots",size:"medium",message:"Custom colored loading...",color:"#ff6b6b",backgroundColor:"#f8f9fa"},parameters:{docs:{description:{story:"Loading spinner with custom colors for brand consistency."}}}},d={args:{variant:"pulse",size:"medium",showMessage:!1},parameters:{docs:{description:{story:"Compact spinner without text message."}}}},g={args:{variant:"dots",size:"medium",showSparkles:!1,message:"Clean loading without sparkles..."},parameters:{docs:{description:{story:"Minimal loading spinner without decorative sparkles."}}}},u={args:{variant:"spinner",size:"medium",customMessages:["Processing your request...","Almost ready...","Just a few more seconds...","Finalizing details..."],messageRotationInterval:1500},parameters:{docs:{description:{story:"Loading spinner with custom rotating messages and faster rotation."}}}},v={args:{variant:"dots",size:"large",message:"Loading application...",fullScreen:!0,overlay:!0},parameters:{docs:{description:{story:"Full-screen loading overlay for app initialization or major operations."}}}},S={args:{variant:"spinner",size:"small",showMessage:!1,showSparkles:!1,color:"#6c757d"},parameters:{docs:{description:{story:"Ultra-minimal loading spinner for inline use."}}}};var f,y,z;e.parameters={...e.parameters,docs:{...(f=e.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'medium'
+  }
+}`,...(z=(y=e.parameters)==null?void 0:y.docs)==null?void 0:z.source}}};var h,w,C;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'medium',
+    message: 'Loading your amazing content...'
+  }
+}`,...(C=(w=s.parameters)==null?void 0:w.docs)==null?void 0:C.source}}};var L,M,b;a.parameters={...a.parameters,docs:{...(L=a.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'small'
+  }
+}`,...(b=(M=a.parameters)==null?void 0:M.docs)==null?void 0:b.source}}};var k,x,F;r.parameters={...r.parameters,docs:{...(k=r.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'large'
+  }
+}`,...(F=(x=r.parameters)==null?void 0:x.docs)==null?void 0:F.source}}};var E,P,U;n.parameters={...n.parameters,docs:{...(E=n.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  args: {
+    variant: 'spinner',
+    size: 'medium'
+  }
+}`,...(U=(P=n.parameters)==null?void 0:P.docs)==null?void 0:U.source}}};var q,A,D;o.parameters={...o.parameters,docs:{...(q=o.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  args: {
+    variant: 'pulse',
+    size: 'medium'
+  }
+}`,...(D=(A=o.parameters)==null?void 0:A.docs)==null?void 0:D.source}}};var N,I,O;t.parameters={...t.parameters,docs:{...(N=t.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  args: {
+    variant: 'spinner',
+    size: 'small',
+    message: 'Loading...'
+  }
+}`,...(O=(I=t.parameters)==null?void 0:I.docs)==null?void 0:O.source}}};var R,j,J;i.parameters={...i.parameters,docs:{...(R=i.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    variant: 'pulse',
+    size: 'large',
+    message: 'Processing your request...'
+  }
+}`,...(J=(j=i.parameters)==null?void 0:j.docs)==null?void 0:J.source}}};var W,_,T;c.parameters={...c.parameters,docs:{...(W=c.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'medium',
+    message: 'Fetching data from server...'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of how the loading spinner might appear when fetching data.'
+      }
+    }
+  }
+}`,...(T=(_=c.parameters)==null?void 0:_.docs)==null?void 0:T.source}}};var B,G,H;m.parameters={...m.parameters,docs:{...(B=m.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  args: {
+    variant: 'pulse',
+    size: 'small',
+    message: 'Saving changes...'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact loading spinner for save operations.'
+      }
+    }
+  }
+}`,...(H=(G=m.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};var K,Q,V;p.parameters={...p.parameters,docs:{...(K=p.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  args: {
+    variant: 'spinner',
+    size: 'large',
+    message: 'Uploading files...'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large loading spinner for file upload operations.'
+      }
+    }
+  }
+}`,...(V=(Q=p.parameters)==null?void 0:Q.docs)==null?void 0:V.source}}};var X,Y,Z;l.parameters={...l.parameters,docs:{...(X=l.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'medium',
+    message: 'Custom colored loading...',
+    color: '#ff6b6b',
+    backgroundColor: '#f8f9fa'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading spinner with custom colors for brand consistency.'
+      }
+    }
+  }
+}`,...(Z=(Y=l.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var $,ee,se;d.parameters={...d.parameters,docs:{...($=d.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    variant: 'pulse',
+    size: 'medium',
+    showMessage: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact spinner without text message.'
+      }
+    }
+  }
+}`,...(se=(ee=d.parameters)==null?void 0:ee.docs)==null?void 0:se.source}}};var ae,re,ne;g.parameters={...g.parameters,docs:{...(ae=g.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'medium',
+    showSparkles: false,
+    message: 'Clean loading without sparkles...'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Minimal loading spinner without decorative sparkles.'
+      }
+    }
+  }
+}`,...(ne=(re=g.parameters)==null?void 0:re.docs)==null?void 0:ne.source}}};var oe,te,ie;u.parameters={...u.parameters,docs:{...(oe=u.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  args: {
+    variant: 'spinner',
+    size: 'medium',
+    customMessages: ['Processing your request...', 'Almost ready...', 'Just a few more seconds...', 'Finalizing details...'],
+    messageRotationInterval: 1500
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading spinner with custom rotating messages and faster rotation.'
+      }
+    }
+  }
+}`,...(ie=(te=u.parameters)==null?void 0:te.docs)==null?void 0:ie.source}}};var ce,me,pe;v.parameters={...v.parameters,docs:{...(ce=v.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  args: {
+    variant: 'dots',
+    size: 'large',
+    message: 'Loading application...',
+    fullScreen: true,
+    overlay: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full-screen loading overlay for app initialization or major operations.'
+      }
+    }
+  }
+}`,...(pe=(me=v.parameters)==null?void 0:me.docs)==null?void 0:pe.source}}};var le,de,ge;S.parameters={...S.parameters,docs:{...(le=S.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  args: {
+    variant: 'spinner',
+    size: 'small',
+    showMessage: false,
+    showSparkles: false,
+    color: '#6c757d'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ultra-minimal loading spinner for inline use.'
+      }
+    }
+  }
+}`,...(ge=(de=S.parameters)==null?void 0:de.docs)==null?void 0:ge.source}}};const Ce=["Default","WithCustomMessage","SmallSize","LargeSize","CircleSpinner","PulseSpinner","SmallCircleSpinner","LargePulseSpinner","DataLoadingExample","SaveExample","UploadExample","CustomColors","NoMessage","NoSparkles","CustomMessages","FullScreenOverlay","MinimalSpinner"];export{n as CircleSpinner,l as CustomColors,u as CustomMessages,c as DataLoadingExample,e as Default,v as FullScreenOverlay,i as LargePulseSpinner,r as LargeSize,S as MinimalSpinner,d as NoMessage,g as NoSparkles,o as PulseSpinner,m as SaveExample,t as SmallCircleSpinner,a as SmallSize,p as UploadExample,s as WithCustomMessage,Ce as __namedExportsOrder,we as default};