@stfrigerio/sito-template 0.1.37 → 0.1.44

package/storybook-static/assets/FloatingLines.stories-B_dxBmBz.js

@@ -0,0 +1,187 @@
+import{r as d,j as se}from"./iframe-2N7rjfXm.js";import{d as g,S as fe,a as de,W as me,e as x,i as ve,q as pe,M as ge,f as xe}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const he={"floating-lines-container":"_floating-lines-container_1a3kk_1"},be=`
+precision highp float;
+
+void main() {
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`,Ce=`
+precision highp float;
+
+uniform float iTime;
+uniform vec3  iResolution;
+uniform float animationSpeed;
+
+uniform bool enableTop;
+uniform bool enableMiddle;
+uniform bool enableBottom;
+
+uniform int topLineCount;
+uniform int middleLineCount;
+uniform int bottomLineCount;
+
+uniform float topLineDistance;
+uniform float middleLineDistance;
+uniform float bottomLineDistance;
+
+uniform vec3 topWavePosition;
+uniform vec3 middleWavePosition;
+uniform vec3 bottomWavePosition;
+
+uniform vec2 iMouse;
+uniform bool interactive;
+uniform float bendRadius;
+uniform float bendStrength;
+uniform float bendInfluence;
+
+uniform bool parallax;
+uniform float parallaxStrength;
+uniform vec2 parallaxOffset;
+
+uniform vec3 lineGradient[8];
+uniform int lineGradientCount;
+
+const vec3 BLACK = vec3(0.0);
+const vec3 PINK  = vec3(233.0, 71.0, 245.0) / 255.0;
+const vec3 BLUE  = vec3(47.0,  75.0, 162.0) / 255.0;
+
+mat2 rotate(float r) {
+  return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+
+vec3 background_color(vec2 uv) {
+  vec3 col = vec3(0.0);
+
+  float y = sin(uv.x - 0.2) * 0.3 - 0.1;
+  float m = uv.y - y;
+
+  col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
+  col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
+  return col * 0.5;
+}
+
+vec3 getLineColor(float t, vec3 baseColor) {
+  if (lineGradientCount <= 0) {
+    return baseColor;
+  }
+
+  vec3 gradientColor;
+  
+  if (lineGradientCount == 1) {
+    gradientColor = lineGradient[0];
+  } else {
+    float clampedT = clamp(t, 0.0, 0.9999);
+    float scaled = clampedT * float(lineGradientCount - 1);
+    int idx = int(floor(scaled));
+    float f = fract(scaled);
+    int idx2 = min(idx + 1, lineGradientCount - 1);
+
+    vec3 c1 = lineGradient[idx];
+    vec3 c2 = lineGradient[idx2];
+    
+    gradientColor = mix(c1, c2, f);
+  }
+  
+  return gradientColor * 0.5;
+}
+
+  float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
+  float time = iTime * animationSpeed;
+
+  float x_offset   = offset;
+  float x_movement = time * 0.1;
+  float amp        = sin(offset + time * 0.2) * 0.3;
+  float y          = sin(uv.x + x_offset + x_movement) * amp;
+
+  if (shouldBend) {
+    vec2 d = screenUv - mouseUv;
+    float influence = exp(-dot(d, d) * bendRadius); // radial falloff around cursor
+    float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
+    y += bendOffset;
+  }
+
+  float m = uv.y - y;
+  return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
+  baseUv.y *= -1.0;
+  
+  if (parallax) {
+    baseUv += parallaxOffset;
+  }
+
+  vec3 col = vec3(0.0);
+
+  vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv);
+
+  vec2 mouseUv = vec2(0.0);
+  if (interactive) {
+    mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
+    mouseUv.y *= -1.0;
+  }
+  
+  if (enableBottom) {
+    for (int i = 0; i < bottomLineCount; ++i) {
+      float fi = float(i);
+      float t = fi / max(float(bottomLineCount - 1), 1.0);
+      vec3 lineCol = getLineColor(t, b);
+      
+      float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
+      vec2 ruv = baseUv * rotate(angle);
+      col += lineCol * wave(
+        ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
+        1.5 + 0.2 * fi,
+        baseUv,
+        mouseUv,
+        interactive
+      ) * 0.2;
+    }
+  }
+
+  if (enableMiddle) {
+    for (int i = 0; i < middleLineCount; ++i) {
+      float fi = float(i);
+      float t = fi / max(float(middleLineCount - 1), 1.0);
+      vec3 lineCol = getLineColor(t, b);
+      
+      float angle = middleWavePosition.z * log(length(baseUv) + 1.0);
+      vec2 ruv = baseUv * rotate(angle);
+      col += lineCol * wave(
+        ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y),
+        2.0 + 0.15 * fi,
+        baseUv,
+        mouseUv,
+        interactive
+      );
+    }
+  }
+
+  if (enableTop) {
+    for (int i = 0; i < topLineCount; ++i) {
+      float fi = float(i);
+      float t = fi / max(float(topLineCount - 1), 1.0);
+      vec3 lineCol = getLineColor(t, b);
+      
+      float angle = topWavePosition.z * log(length(baseUv) + 1.0);
+      vec2 ruv = baseUv * rotate(angle);
+      ruv.x *= -1.0;
+      col += lineCol * wave(
+        ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
+        1.0 + 0.2 * fi,
+        baseUv,
+        mouseUv,
+        interactive
+      ) * 0.1;
+    }
+  }
+
+  fragColor = vec4(col, 1.0);
+}
+
+void main() {
+  vec4 color = vec4(0.0);
+  mainImage(color, gl_FragCoord.xy);
+  gl_FragColor = color;
+}
+`,Y=8;function Le(v){let e=v.trim();e.startsWith("#")&&(e=e.slice(1));let i=255,u=255,n=255;return e.length===3?(i=parseInt(e[0]+e[0],16),u=parseInt(e[1]+e[1],16),n=parseInt(e[2]+e[2],16)):e.length===6&&(i=parseInt(e.slice(0,2),16),u=parseInt(e.slice(2,4),16),n=parseInt(e.slice(4,6),16)),new x(i/255,u/255,n/255)}function Q({linesGradient:v,enabledWaves:e=["top","middle","bottom"],lineCount:i=[6],lineDistance:u=[5],topWavePosition:n,middleWavePosition:r,bottomWavePosition:a={x:2,y:-.7,rotate:-1},animationSpeed:M=1,interactive:h=!0,bendRadius:_=5,bendStrength:S=-.5,mouseDamping:b=.05,parallax:C=!0,parallaxStrength:L=.2,mixBlendMode:Z="screen"}){const V=d.useRef(null),q=d.useRef(new g(-1e3,-1e3)),B=d.useRef(new g(-1e3,-1e3)),w=d.useRef(0),E=d.useRef(0),G=d.useRef(new g(0,0)),O=d.useRef(new g(0,0)),U=o=>{if(typeof i=="number")return i;if(!e.includes(o))return 0;const c=e.indexOf(o);return i[c]??6},I=o=>{if(typeof u=="number")return u;if(!e.includes(o))return .1;const c=e.indexOf(o);return u[c]??.1},P=e.includes("top")?U("top"):0,W=e.includes("middle")?U("middle"):0,ee=e.includes("bottom")?U("bottom"):0,te=e.includes("top")?I("top")*.01:.01,ne=e.includes("middle")?I("middle")*.01:.01,oe=e.includes("bottom")?I("bottom")*.01:.01;return d.useEffect(()=>{const o=V.current;if(!o)return;let c=!0;const D=new fe,T=new de(-1,1,1,-1,0,1);T.position.z=1;const t=new me({antialias:!0,alpha:!1});t.setPixelRatio(Math.min(window.devicePixelRatio||1,2)),t.domElement.style.width="100%",t.domElement.style.height="100%",o.appendChild(t.domElement);const s={iTime:{value:0},iResolution:{value:new x(1,1,1)},animationSpeed:{value:M},enableTop:{value:e.includes("top")},enableMiddle:{value:e.includes("middle")},enableBottom:{value:e.includes("bottom")},topLineCount:{value:P},middleLineCount:{value:W},bottomLineCount:{value:ee},topLineDistance:{value:te},middleLineDistance:{value:ne},bottomLineDistance:{value:oe},topWavePosition:{value:new x((n==null?void 0:n.x)??10,(n==null?void 0:n.y)??.5,(n==null?void 0:n.rotate)??-.4)},middleWavePosition:{value:new x((r==null?void 0:r.x)??5,(r==null?void 0:r.y)??0,(r==null?void 0:r.rotate)??.2)},bottomWavePosition:{value:new x((a==null?void 0:a.x)??2,(a==null?void 0:a.y)??-.7,(a==null?void 0:a.rotate)??.4)},iMouse:{value:new g(-1e3,-1e3)},interactive:{value:h},bendRadius:{value:_},bendStrength:{value:S},bendInfluence:{value:0},parallax:{value:C},parallaxStrength:{value:L},parallaxOffset:{value:new g(0,0)},lineGradient:{value:Array.from({length:Y},()=>new x(1,1,1))},lineGradientCount:{value:0}};if(v&&v.length>0){const m=v.slice(0,Y);s.lineGradientCount.value=m.length,m.forEach((l,p)=>{const f=Le(l);s.lineGradient.value[p].set(f.x,f.y,f.z)})}const z=new ve({uniforms:s,vertexShader:be,fragmentShader:Ce}),A=new pe(2,2),le=new ge(A,z);D.add(le);const re=new xe,k=()=>{if(!c)return;const m=o.clientWidth||1,l=o.clientHeight||1;t.setSize(m,l,!1);const p=t.domElement.width,f=t.domElement.height;s.iResolution.value.set(p,f,1)};k();const y=typeof ResizeObserver<"u"?new ResizeObserver(()=>{c&&k()}):null;y&&y.observe(o);const F=m=>{const l=t.domElement.getBoundingClientRect(),p=m.clientX-l.left,f=m.clientY-l.top,X=t.getPixelRatio();if(q.current.set(p*X,(l.height-f)*X),w.current=1,C){const ae=l.width/2,ie=l.height/2,ue=(p-ae)/l.width,ce=-(f-ie)/l.height;G.current.set(ue*L,ce*L)}},K=()=>{w.current=0};h&&(t.domElement.addEventListener("pointermove",F),t.domElement.addEventListener("pointerleave",K));let N=0;const j=()=>{c&&(s.iTime.value=re.getElapsedTime(),h&&(B.current.lerp(q.current,b),s.iMouse.value.copy(B.current),E.current+=(w.current-E.current)*b,s.bendInfluence.value=E.current),C&&(O.current.lerp(G.current,b),s.parallaxOffset.value.copy(O.current)),t.render(D,T),N=requestAnimationFrame(j))};return j(),()=>{c=!1,cancelAnimationFrame(N),y&&y.disconnect(),h&&(t.domElement.removeEventListener("pointermove",F),t.domElement.removeEventListener("pointerleave",K)),A.dispose(),z.dispose(),t.dispose(),t.forceContextLoss(),t.domElement.parentElement&&t.domElement.parentElement.removeChild(t.domElement)}},[v,e,i,u,n,r,a,M,h,_,S,b,C,L]),se.jsx("div",{ref:V,className:`${he["floating-lines-container"]}`,style:{mixBlendMode:Z}})}Q.__docgenInfo={description:"",methods:[],displayName:"FloatingLines",props:{enabledWaves:{defaultValue:{value:"['top', 'middle', 'bottom']",computed:!1},required:!1},lineCount:{defaultValue:{value:"[6]",computed:!1},required:!1},lineDistance:{defaultValue:{value:"[5]",computed:!1},required:!1},bottomWavePosition:{defaultValue:{value:"{ x: 2.0, y: -0.7, rotate: -1 }",computed:!1},required:!1},animationSpeed:{defaultValue:{value:"1",computed:!1},required:!1},interactive:{defaultValue:{value:"true",computed:!1},required:!1},bendRadius:{defaultValue:{value:"5.0",computed:!1},required:!1},bendStrength:{defaultValue:{value:"-0.5",computed:!1},required:!1},mouseDamping:{defaultValue:{value:"0.05",computed:!1},required:!1},parallax:{defaultValue:{value:"true",computed:!1},required:!1},parallaxStrength:{defaultValue:{value:"0.2",computed:!1},required:!1},mixBlendMode:{defaultValue:{value:"'screen'",computed:!1},required:!1}}};const Ee={title:"ReactBits/Backgrounds/FloatingLines",component:Q,parameters:{layout:"fullscreen"},tags:["autodocs"]},R={};var H,$,J;R.parameters={...R.parameters,docs:{...(H=R.parameters)==null?void 0:H.docs,source:{originalSource:"{}",...(J=($=R.parameters)==null?void 0:$.docs)==null?void 0:J.source}}};const Ue=["Default"];export{R as Default,Ue as __namedExportsOrder,Ee as default};

package/storybook-static/assets/FlowingMenu-Cff-letA.css

@@ -0,0 +1 @@
+._menu-wrap_hu66r_1{width:100%;min-height:100vh;overflow:hidden}._menu_hu66r_1{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0}._menu__item_hu66r_15{flex:1;position:relative;overflow:hidden;text-align:center;border-top:1px solid}._menu__item_hu66r_15:first-child{border-top:none}._menu__item-link_hu66r_27{display:flex;align-items:center;justify-content:center;height:100%;position:relative;cursor:pointer;text-transform:uppercase;text-decoration:none;white-space:nowrap;font-weight:600;font-size:4vh}._menu__item-link_hu66r_27:hover{color:inherit}._menu__item-link_hu66r_27:focus:not(:focus-visible){color:inherit}._marquee_hu66r_49{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100%;pointer-events:none;transform:translate3d(0,101%,0)}._marquee__inner-wrap_hu66r_60{height:100%;width:100%;overflow:hidden}._marquee__inner_hu66r_60{display:flex;align-items:center;position:relative;min-height:100vh;width:fit-content;will-change:transform}._marquee__part_hu66r_75{display:flex;align-items:center;flex-shrink:0}._marquee_hu66r_49 span{white-space:nowrap;text-transform:uppercase;font-weight:400;font-size:4vh;line-height:1;padding:0 1vw}._marquee__img_hu66r_90{width:200px;height:7vh;margin:2em 2vw;padding:1em 0;border-radius:50px;background-size:cover;background-position:50% 50%}

package/storybook-static/assets/FlowingMenu.stories-DdUqXTFx.js

@@ -0,0 +1,27 @@
+import{j as u,r as c}from"./iframe-2N7rjfXm.js";import{g as v}from"./index-C8pce-KX.js";import"./preload-helper-C1FmrZbK.js";const W="_menu_hu66r_1",B="_menu__item_hu66r_15",S="_marquee_hu66r_49",T="_marquee__inner_hu66r_60",I="_marquee__part_hu66r_75",L="_marquee__img_hu66r_90",a={"menu-wrap":"_menu-wrap_hu66r_1",menu:W,menu__item:B,"menu__item-link":"_menu__item-link_hu66r_27",marquee:S,"marquee__inner-wrap":"_marquee__inner-wrap_hu66r_60",marquee__inner:T,marquee__part:I,marquee__img:L};function N({items:q=[],speed:l=15,textColor:f="#fff",bgColor:p="#060010",marqueeBgColor:g="#fff",marqueeTextColor:x="#060010",borderColor:C="#fff"}){return u.jsx("div",{className:`${a["menu-wrap"]}`,style:{backgroundColor:p},children:u.jsx("nav",{className:`${a.menu}`,children:q.map((y,i)=>u.jsx(A,{...y,speed:l,textColor:f,marqueeBgColor:g,marqueeTextColor:x,borderColor:C},i))})})}function A({link:q,text:l,image:f,speed:p,textColor:g,marqueeBgColor:x,marqueeTextColor:C,borderColor:y}){const i=c.useRef(null),m=c.useRef(null),o=c.useRef(null),d=c.useRef(null),[w,$]=c.useState(4),k={duration:.6,ease:"expo"},b=(t,e,r,n)=>{const s=j(t,e,r/2,0),_=j(t,e,r/2,n);return s<_?"top":"bottom"},j=(t,e,r,n)=>{const s=t-r,_=e-n;return s*s+_*_};c.useEffect(()=>{const t=()=>{if(!o.current)return;const e=o.current.querySelector("[data-marquee-part]");if(!e)return;const r=e.offsetWidth,n=window.innerWidth,s=Math.ceil(n/r)+2;$(Math.max(4,s))};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[l,f]),c.useEffect(()=>{const e=setTimeout(()=>{if(!o.current)return;const r=o.current.querySelector("[data-marquee-part]");if(!r)return;const n=r.offsetWidth;n!==0&&(d.current&&d.current.kill(),d.current=v.to(o.current,{x:-n,duration:p,ease:"none",repeat:-1}))},50);return()=>{clearTimeout(e),d.current&&d.current.kill()}},[l,f,w,p]);const D=t=>{if(!i.current||!m.current||!o.current)return;const e=i.current.getBoundingClientRect(),r=t.clientX-e.left,n=t.clientY-e.top,s=b(r,n,e.width,e.height);v.timeline({defaults:k}).set(m.current,{y:s==="top"?"-101%":"101%"},0).set(o.current,{y:s==="top"?"101%":"-101%"},0).to([m.current,o.current],{y:"0%"},0)},V=t=>{if(!i.current||!m.current||!o.current)return;const e=i.current.getBoundingClientRect(),r=t.clientX-e.left,n=t.clientY-e.top,s=b(r,n,e.width,e.height);v.timeline({defaults:k}).to(m.current,{y:s==="top"?"-101%":"101%"},0).to(o.current,{y:s==="top"?"101%":"-101%"},0)};return u.jsxs("div",{className:`${a.menu__item}`,ref:i,style:{borderColor:y},children:[u.jsx("a",{className:`${a["menu__item-link"]}`,href:q,onMouseEnter:D,onMouseLeave:V,style:{color:g},children:l}),u.jsx("div",{className:`${a.marquee}`,ref:m,style:{backgroundColor:x},children:u.jsx("div",{className:`${a["marquee__inner-wrap"]}`,children:u.jsx("div",{className:`${a.marquee__inner}`,ref:o,"aria-hidden":"true",children:[...Array(w)].map((t,e)=>u.jsxs("div",{className:`${a.marquee__part}`,"data-marquee-part":!0,style:{color:C},children:[u.jsx("span",{children:l}),u.jsx("div",{className:`${a.marquee__img}`,style:{backgroundImage:`url(${f})`}})]},e))})})})]})}N.__docgenInfo={description:"",methods:[],displayName:"FlowingMenu",props:{items:{defaultValue:{value:"[]",computed:!1},required:!1},speed:{defaultValue:{value:"15",computed:!1},required:!1},textColor:{defaultValue:{value:"'#fff'",computed:!1},required:!1},bgColor:{defaultValue:{value:"'#060010'",computed:!1},required:!1},marqueeBgColor:{defaultValue:{value:"'#fff'",computed:!1},required:!1},marqueeTextColor:{defaultValue:{value:"'#060010'",computed:!1},required:!1},borderColor:{defaultValue:{value:"'#fff'",computed:!1},required:!1}}};const P={title:"ReactBits/Components/FlowingMenu",component:N,parameters:{layout:"fullscreen"},tags:["autodocs"]},h={args:{items:[{link:"#",text:"Home",image:"https://picsum.photos/seed/a/600/400"},{link:"#",text:"About",image:"https://picsum.photos/seed/b/600/400"},{link:"#",text:"Projects",image:"https://picsum.photos/seed/c/600/400"},{link:"#",text:"Contact",image:"https://picsum.photos/seed/d/600/400"}],speed:15,textColor:"#fff",bgColor:"#060010",marqueeBgColor:"#fff",marqueeTextColor:"#060010",borderColor:"#fff"}};var R,M,E;h.parameters={...h.parameters,docs:{...(R=h.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      link: '#',
+      text: 'Home',
+      image: 'https://picsum.photos/seed/a/600/400'
+    }, {
+      link: '#',
+      text: 'About',
+      image: 'https://picsum.photos/seed/b/600/400'
+    }, {
+      link: '#',
+      text: 'Projects',
+      image: 'https://picsum.photos/seed/c/600/400'
+    }, {
+      link: '#',
+      text: 'Contact',
+      image: 'https://picsum.photos/seed/d/600/400'
+    }],
+    speed: 15,
+    textColor: '#fff',
+    bgColor: '#060010',
+    marqueeBgColor: '#fff',
+    marqueeTextColor: '#060010',
+    borderColor: '#fff'
+  }
+}`,...(E=(M=h.parameters)==null?void 0:M.docs)==null?void 0:E.source}}};const O=["Default"];export{h as Default,O as __namedExportsOrder,P as default};