https://webtwizz.com/_next/static/chunks/289.17c46fbcbfc7ec3b.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[289],{289:(e,t,r)=>{r.r(t),r.d(t,{FeaturesHero:()=>w});var n=r(5155),i=r(2115),a=r(5811);let o=(e,t,r)=>Math.max(t,Math.min(r,e)),s=(e,t,r)=>o((e-t)/(r-t),0,1),l=e=>e*e*(3-2*e),d={tree:1,panel:"layers",tabAt:-10,panelAt:-10,colorAt:-10,closeAt:1e9,dragA:4.6,dragB:6.4},c=Object.assign({},d,{colorAt:null}),p=[{id:"layers",label:"Layers",href:"#layers",socket:[48,48,272,892],S:c,at:1.05,chip:"tr",depth:10,wide:{r:[48,48,272,892],off:[-96,-26]}},{id:"panel",label:"Style panel",href:"#visual-editor",socket:[1300,48,300,892],S:c,at:1.15,chip:"tl",depth:12,wide:{r:[1300,48,300,892],off:[96,-18]},narrow:{r:[1300,255,300,372],off:[-920,165]}},{id:"color",label:"Color",href:"#visual-editor",S:d,at:1.35,chip:"tl",depth:22,wide:{r:[1054,531,240,390],off:[-30,-421]},narrow:{r:[1054,531,240,390],off:[-24,-231]}}],u=([e,t,r,n],i=12)=>`M${e+i} ${t}H${e+r-i}A${i} ${i} 0 0 1 ${e+r} ${t+i}V${t+n-i}A${i} ${i} 0 0 1 ${e+r-i} ${t+n}H${e+i}A${i} ${i} 0 0 1 ${e} ${t+n-i}V${t+i}A${i} ${i} 0 0 1 ${e+i} ${t}Z`,h=`path(evenodd, '${u([0,0,1600,940],14)} ${u(p[0].socket,0)} ${u(p[1].socket,0)}')`,f={x:-130,y:-64,w:1860},x={x:320,y:20,w:1010},b="linear-gradient(to bottom, #000 72%, transparent 100%)",m=b+", linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%)",g=(0,i.memo)(function({S:e,t,clip:r}){return(0,n.jsx)("div",{style:{position:"absolute",left:0,top:0,width:1600,height:940,clipPath:r},children:(0,n.jsx)(a.Builder,{a:a.SOL,t:t,S0:e,noCursor:!0})})});function $({label:e,href:t,corner:r,s:i,o:a}){return(0,n.jsx)("a",{href:t,tabIndex:-1,style:Object.assign({position:"absolute",bottom:"100%",marginBottom:6/i,transform:`scale(${1/i})`,opacity:a,pointerEvents:a>.5?"auto":"none",display:"inline-flex",alignItems:"center",gap:6,height:22,padding:"0 8px",borderRadius:6,background:"#1E90FF",color:"#fff",font:"500 12px/1 var(--font-family-sans)",whiteSpace:"nowrap",textDecoration:"none",boxShadow:"0 4px 12px -4px rgba(30,144,255,.55)"},"tr"===r?{right:-1.5/i,transformOrigin:"100% 100%"}:{left:-1.5/i,transformOrigin:"0 100%"}),children:e})}function w(){let[e,t,r]=function(){let[e,t]=(0,i.useState)(0),[r,n]=(0,i.useState)(!1),a=(0,i.useRef)(null),o=(0,i.useRef)(!0);return(0,i.useEffect)(()=>{if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){n(!0),t(3);return}let e,r=performance.now(),i=0,s=n=>{let a=Math.min(.05,Math.max(0,(n-r)/1e3));r=n,o.current&&t(i+=a),e=requestAnimationFrame(s)};e=requestAnimationFrame(s);let l=new IntersectionObserver(([e])=>{o.current=e.isIntersecting},{rootMargin:"80px"});return a.current&&l.observe(a.current),()=>{cancelAnimationFrame(e),l.disconnect()}},[]),[e,a,r]}(),[a,[d,w]]=function(){let e=(0,i.useRef)(null),[t,r]=(0,i.useState)([0,0]);return(0,i.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let n=()=>r([t.clientWidth,t.clientHeight]);n();let i=new ResizeObserver(n);return i.observe(t),()=>i.disconnect()},[]),[e,t]}(),v=function(e){let t=(0,i.useRef)([0,0]),r=(0,i.useRef)([0,0]);return(0,i.useEffect)(()=>{if(!window.matchMedia("(pointer: fine)").matches)return;let r=r=>{let n=e.current&&e.current.getBoundingClientRect();n&&(t.current=[o((r.clientX-n.left)/n.width-.5,-.5,.5),o((r.clientY-n.top)/n.height-.5,-.5,.5)])};return window.addEventListener("pointermove",r,{passive:!0}),()=>window.removeEventListener("pointermove",r)},[e]),r.current=[r.current[0]+(t.current[0]-r.current[0])*.06,r.current[1]+(t.current[1]-r.current[1])*.06],r.current}(a),y=d>0&&d<736,k=y?x:f,M=d?d/k.w:0,S=-k.x*M,j=-k.y*M,A=r?1:l(s(e,.05,.9)),R=Math.max(0,e-2.4)%7,E=l(s(R,0,2.2))*(1-l(s(R,3.5,5.7))),F=r?6.4:Math.round((4.6+1.8000000000000007*E)*30)/30;return(0,n.jsxs)("div",{ref:e=>{a.current=e,t.current=e},className:"relative h-full w-full",style:{opacity:A,WebkitMaskImage:y?m:b,maskImage:y?m:b,WebkitMaskComposite:y?"source-in":void 0,maskComposite:y?"intersect":void 0},children:[M>0&&(0,n.jsxs)("div",{"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:1600,height:940,transformOrigin:"0 0",transform:`translate(${S}px, ${j+(1-A)*28}px) scale(${M})`},children:[(0,n.jsx)("div",{style:{position:"absolute",inset:0,borderRadius:14,boxShadow:"0 70px 140px -40px rgba(20,60,140,.45), 0 30px 60px -30px rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.08)",background:"#fff"}}),(0,n.jsx)(g,{S:c,t:F,clip:h}),p.filter(e=>e.socket).map(t=>{let i=r?1:l(s(e,t.at,t.at+.5)),[a,o,d,c]=t.socket;return(0,n.jsx)("div",{style:{position:"absolute",left:a,top:o,width:d,height:c,opacity:i,background:"#F3F7FC",backgroundImage:"radial-gradient(rgba(30,144,255,.22) 1.4px, transparent 1.4px)",backgroundSize:"16px 16px",boxShadow:"inset 0 0 0 1.5px rgba(30,144,255,.18)"}},t.id+"-socket")})]}),M>0&&p.map((t,i)=>{let a,d=y?t.narrow:t.wide;if(!d)return null;

1let c=r?1:((e,t,r=7.5,n=.62)=>{let i=e-t;if(i<=0)return 0;let a=r*Math.sqrt(1-n*n);return 1-Math.exp(-n*r*i)*(Math.cos(a*i)+n*r/a*Math.sin(a*i))})(e,t.at),p=r?0:Math.min(1,Math.max(0,e-t.at-.6))*Math.sin(.9*e+1.7*i)*5,[h,f,x,b]=d.r,m=y?d.off[0]:d.off[0]*c+v[0]*t.depth*c,w=y?d.off[1]+(1-c)*60+p:d.off[1]*c+v[1]*t.depth*c+p,k=y?o(1.4*c,0,1):1,R=o(c,0,1.2),E=r?1:l(s(e,t.at+.45,t.at+.85));return(0,n.jsx)("div",{style:{position:"absolute",left:0,top:0,width:1600,height:940,transformOrigin:"0 0",transform:`translate(${S}px, ${j+(1-A)*28}px) scale(${M})`,pointerEvents:"none",zIndex:2+i},children:(0,n.jsxs)("div",{style:{position:"absolute",inset:0,transform:`translate(${m}px, ${w}px)`,opacity:k},children:[(0,n.jsx)("div",{"aria-hidden":!0,style:{position:"absolute",left:h,top:f,width:x,height:b,borderRadius:12,boxShadow:`0 ${30*R}px ${70*R}px -${18*R}px rgba(20,60,140,${.42*R}), 0 ${8*R}px ${18*R}px -${8*R}px rgba(15,23,42,${.2*R})`}}),(0,n.jsx)("div",{"aria-hidden":!0,children:(0,n.jsx)(g,{S:t.S,t:"layers"===t.id?4.6:F,clip:(a=d.r,`path('${u(a,12)}')`)})}),(0,n.jsx)("div",{style:{position:"absolute",left:h-5,top:f-5,width:x+10,height:b+10,borderRadius:15,border:`${1.5/M}px solid rgba(30,144,255,${.9*E})`},children:(0,n.jsx)($,{label:t.label,href:t.href,corner:t.chip,s:M,o:E})})]})},t.id)})]})}}}]);