(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[46830],{58504:(e,s,a)=>{"use strict";a.d(s,{A:()=>i});var r=a(87687);a(52751);var t=a(31928);let n={straight1:"/images/arrow-straight-1.png",straight2:"/images/arrow-straight-2.png",straight3:"/images/arrow-straight-3.png",diagonal1:"/images/arrow-diagonal-1.png",diagonal2:"/images/arrow-diagonal-2.png",diagonal3:"/images/arrow-diagonal-3.png"},l=(0,t.I)("img")({name:"Elem",class:"edwpcny",propsAsIs:!1}),i=e=>{let{type:s,variant:a=1,width:t,rotation:i,...p}=e,c=n["".concat(s).concat(a)];return(0,r.jsx)(l,{alt:"",src:c,style:{width:t},...p})};a(37039)},69495:(e,s,a)=>{"use strict";a.d(s,{A:()=>c});var r=a(87687),t=a(52751),n=a(31928),l=a(22559);let i=t.forwardRef(function(e,s){let{value:a,onChange:t,handleSize:n=16,trackSize:i=3,backgroundColor:c="var(--color-background)",handleColor:o="var(--color-gray-900)",handleFocusColor:u=l.PV,style:d={},...h}=e;return(0,r.jsx)(p,{ref:s,style:{...d,"--handle-color":o,"--handle-focus-color":u,"--background-color":c,"--base-handle-size":n+"px","--track-size":i+"px"},type:"range",value:a,onChange:e=>{"function"==typeof t&&t(Number(e.target.value))},...h})}),p=(0,n.I)("input")({name:"Input",class:"i1i8zjy7",propsAsIs:!1}),c=i;a(42379)},46830:(e,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>R});var r=a(87687),t=a(52751),n=a(31928);let l=(0,a(2651).A)("Square",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]]);var i=a(53740),p=a(68852),c=a(99460),o=a(58504),u=a(69495),d=a(19901),h=a(42432),g=a(38356);let x=(0,n.I)("div")({name:"Wrapper",class:"w1pxw81l",propsAsIs:!1}),m=t.memo(function(e){let{size:s,offset:a,opacity:t,shape:n}=e;return(0,r.jsx)(x,{style:{"--offset":"".concat(a,"px"),"--opacity":t,"--size":"".concat(s,"px"),"--radius":"circle"===n?"50%":"4px"}})});a(46442);let j=t.memo(function(e){let{isRunning:s,setIsRunning:a,sampleRate:t,highlightedIndex:n,setHighlightedIndex:p,showSampleRateControl:c,setSampleRate:o,renderClickHelper:x,setRenderClickHelper:m,showPlayground:j,setTimingFunction:f,setShape:y,ghostOpacity:k,setGhostOpacity:q}=e,S=s?l:i.A;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(I,{children:[(0,r.jsx)(w,{children:(0,r.jsxs)(A,{children:[(0,r.jsx)(z,{children:"Timeline"}),(0,r.jsx)(u.A,{disabled:s,min:0,max:t-1,value:n,onChange:p})]})}),(0,r.jsx)(d.A,{size:24}),c&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(w,{children:(0,r.jsxs)(A,{children:[(0,r.jsx)(z,{children:"FPS"}),(0,r.jsx)(u.A,{disabled:s,min:5,max:60,value:t,onChange:e=>{o(e),p(e-1)}})]})}),(0,r.jsx)(d.A,{size:24})]}),(0,r.jsxs)(v,{onClick:()=>{a(e=>!e),x&&m(!1)},children:[(0,r.jsx)(S,{size:24}),(0,r.jsx)(h.A,{children:"Run animation"})]})]}),j&&(0,r.jsxs)(b,{children:[(0,r.jsxs)(A,{children:[(0,r.jsx)(z,{children:"Timing Function"}),(0,r.jsx)(C,{onChange:e=>{f(e.target.value)},children:Object.keys(g.T).filter(e=>!g.T[e].secret).map(e=>{let s=g.T[e].label||e;return(0,r.jsx)("option",{value:e,children:s},e)})})]}),(0,r.jsx)(d.A,{size:24}),(0,r.jsxs)(A,{children:[(0,r.jsx)(z,{children:"Shape"}),(0,r.jsxs)(C,{onChange:e=>y(e.target.value),children:[(0,r.jsx)("option",{value:"circle",children:"Circle"}),(0,r.jsx)("option",{value:"square",children:"Square"})]})]}),(0,r.jsx)(d.A,{size:24}),(0,r.jsx)(w,{children:(0,r.jsxs)(A,{children:[(0,r.jsx)(z,{children:"Ghost Opacity"}),(0,r.jsx)(u.A,{min:0,max:1,step:.01,value:k,onChange:q})]})})]})]})}),f=(0,n.I)("div")({name:"Wrapper",class:"w18817n1",propsAsIs:!1}),y=(0,n.I)("div")({name:"BoxWrapper",class:"bx3yifj",propsAsIs:!1}),I=(0,n.I)("div")({name:"ActionsWrapper",class:"a4sz43",propsAsIs:!1}),b=(0,n.I)("div")({name:"BonusActions",class:"b1p8ed6n",propsAsIs:!1}),w=(0,n.I)("div")({name:"ScrubberWrapper",class:"s1atogh",propsAsIs:!1}),v=(0,n.I)("button")({name:"PlayButton",class:"pac6ecd",propsAsIs:!1}),A=(0,n.I)("label")({name:"Label",class:"lhnl58s",propsAsIs:!1}),z=(0,n.I)("span")({name:"LabelText",class:"l4os4n2",propsAsIs:!1}),k=(0,n.I)("div")({name:"Indicator",class:"i1bvlplz",propsAsIs:!1}),q=(0,n.I)("div")({name:"ArrowWrapper",class:"a1mfgr2g",propsAsIs:!1}),S=(0,n.I)("p")({name:"IndicatorText",class:"i9qy2fq",propsAsIs:!1}),C=(0,n.I)("select")({name:"Select",class:"s1q6f2cp",propsAsIs:!1}),R=function(e){let{showClickHelper:s,showSampleRateControl:a,showPlayground:n,boxSize:l=50,initialTimingFunction:i="linear",initialSampleRate:u=60,initialGhostOpacity:h=.2}=e,[x,I]=t.useState(s),[b,w]=t.useState(!1),[v,A]=t.useState(0),[z,C]=t.useState(u),[R,T]=t.useState(h),[F,W]=t.useState(i),[B,E]=t.useState("circle"),O=t.useRef(!1),P=t.useRef(null),_=(0,c.A)(P),H=t.useRef(0);return t.useEffect(()=>{if(!O.current){O.current=!0;return}if(!b){A(z-1);return}A(e=>e===z-1?0:e);let e=window.setInterval(()=>{A(e=>(e===z-2&&w(!1),e+1))},60/z*16.6666);return()=>{window.clearInterval(e)}},[b,z]),t.useEffect(()=>{b||(H.current=v)},[v,b]),(0,r.jsxs)(f,{ref:P,style:{marginBottom:s&&128},children:[(0,r.jsx)(y,{style:{height:l,marginRight:l},children:(0,p.y1)(z).map(e=>{let s;if(!_)return null;let a=e===v,t=_.width-l,n=e/(z-1);s="linear"===F?n:(0,p.p6)(n,...g.T[F].p1,...g.T[F].p2);let i=a?1:e<v?R:0;return(0,r.jsx)(m,{size:l,offset:s*t,opacity:i,shape:B},e)})}),(0,r.jsx)(j,{isRunning:b,setIsRunning:w,sampleRate:z,highlightedIndex:b?H.current:v,setHighlightedIndex:A,showSampleRateControl:a,setSampleRate:C,renderClickHelper:x,setRenderClickHelper:I,showPlayground:n,setTimingFunction:W,setShape:E,ghostOpacity:R,setGhostOpacity:T}),s&&(0,r.jsxs)(k,{style:{opacity:x?1:0},children:[(0,r.jsx)(S,{children:"Click me!"}),(0,r.jsx)(d.A,{size:8}),(0,r.jsx)(q,{children:(0,r.jsx)(o.A,{type:"diagonal",variant:2,width:50})})]})]})};a(40012)},38356:(e,s,a)=>{"use strict";a.d(s,{T:()=>r});let r={linear:{p1:[.5,.5],p2:[.5,.5]},ease:{p1:[.25,.1],p2:[.25,1]},"ease-in":{p1:[.42,0],p2:[1,1]},"ease-out":{p1:[0,0],p2:[.58,1]},"ease-in-out":{p1:[.42,0],p2:[.58,1]},"ease-mega":{label:"ease (supercharged)",p1:[.44,.21],p2:[0,1]},"ease-in-mega":{label:"ease-in (supercharged)",p1:[.75,0],p2:[1,1]},"ease-out-mega":{label:"ease-out (supercharged)",p1:[.215,.61],p2:[.355,1]},"ease-in-out-mega":{label:"ease-in-out (supercharged)",p1:[.645,.045],p2:[.355,1]},overshot:{label:"overshot",p1:[.325,0],p2:[.7,1.25]},"3d-button-equilibrium":{label:"3D Button, equilibrium",p1:[.3,.7],p2:[.4,1],secret:!0},"3d-button-springy":{label:"3D button, springy",p1:[.3,.7],p2:[.4,1.25],secret:!0}}},37039:e=>{e.exports={edwpcny:"edwpcny"}},42379:e=>{e.exports={i1i8zjy7:"i1i8zjy7",i6el1g6:"i6el1g6",wcnkszl:"wcnkszl",shfe3ke:"shfe3ke"}},46442:e=>{e.exports={w1pxw81l:"w1pxw81l",wcnkszl:"wcnkszl"}},40012:e=>{e.exports={w18817n1:"w18817n1",bx3yifj:"bx3yifj",a4sz43:"a4sz43",b1p8ed6n:"b1p8ed6n",s1atogh:"s1atogh",pac6ecd:"pac6ecd",lhnl58s:"lhnl58s",l4os4n2:"l4os4n2",i1bvlplz:"i1bvlplz",a1mfgr2g:"a1mfgr2g","arrowFloat-a1mfgr2g":"arrowFloat-a1mfgr2g",i9qy2fq:"i9qy2fq","textFloat-i9qy2fq":"textFloat-i9qy2fq",s1q6f2cp:"s1q6f2cp"}}}]);
//# sourceMappingURL=46830.9e484430620d08b8.js.map