(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50916],{16591:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>I});var a=r(29549),t=r(68793),o=r(24299),i=r(48169),n=r(93181),p=r(79397),l=r(67133),c=r(13320),u=r(18495);let d=(0,o.I)("div")({name:"OutputWrapper",class:"o1aqc72v",propsAsIs:!1}),m=(0,o.I)("div")({name:"ControlsWrapper",class:"cinu9fk",propsAsIs:!1}),v=(0,o.I)("div")({name:"SpriteViewport",class:"sqavk2u",propsAsIs:!1}),g=(0,o.I)("div")({name:"ViewportFrame",class:"v188ovg8",propsAsIs:!1}),f=(0,o.I)("img")({name:"BackgroundSprite",class:"bb5o4sg",propsAsIs:!1}),b=(0,o.I)("div")({name:"ForegroundWrapper",class:"f1g7ery9",propsAsIs:!1}),k=(0,o.I)("img")({name:"ForegroundSprite",class:"fwkde2o",propsAsIs:!1}),w=(0,o.I)("div")({name:"GradientFade",class:"g17vbw4x",propsAsIs:!1}),I=function(){let[e,s]=t.useState(500),[r,o]=t.useState(0),I=(0,p.G6)(),x=(0,n.A)();(0,i.A)(()=>{o(e=>(e+1)%29)},1e3===e?null:e);let A=t.useMemo(()=>{let e=-(100*r);return"translateX(".concat(e,"px)")},[r]),h=t.useMemo(()=>{let e=r/28*100;return"".concat(e,"% 0%")},[r]),j=!x&&e>=350;return(0,a.jsx)(c.Ay,{id:"sprite-concept-demo",outputWrapper:d,outputWrapperProps:{as:"light"===I?l.YW:void 0},initialValues:{},renderAltControls:()=>(0,a.jsx)(m,{children:(0,a.jsx)(u.A,{id:"frameDuration",label:"Show each frame for",value:e,setValue:s,handleReset:()=>s(500),min:10,max:1e3,step:5,previewRenderer:e=>1e3===e?"∞ (Paused)":"".concat(e,"ms")})}),children:()=>(0,a.jsxs)(v,{children:[(0,a.jsxs)(g,{children:[(0,a.jsx)(f,{src:"/images/sprites/twitter-like-sprite.webp",alt:"",draggable:!1,style:{transform:A,transitionDuration:j?"".concat(.25*e,"ms"):"0ms"}}),(0,a.jsx)(b,{children:(0,a.jsx)(k,{src:"/images/sprites/twitter-like-sprite.webp",alt:"Current frame of sprite animation",draggable:!1,style:{objectPosition:h,transitionDelay:j?"".concat(.05*e,"ms"):"0ms"}})})]}),(0,a.jsx)(w,{})]})})};r(21863)},21863:e=>{e.exports={o1aqc72v:"o1aqc72v",cinu9fk:"cinu9fk",sqavk2u:"sqavk2u",v188ovg8:"v188ovg8",bb5o4sg:"bb5o4sg",f1g7ery9:"f1g7ery9",fwkde2o:"fwkde2o",g17vbw4x:"g17vbw4x"}}}]);
//# sourceMappingURL=50916.20ea61074128051f.js.map