https://handzplay.vercel.app/_next/static/chunks/pages/lab/present-769fbbc32f84ccfb.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[799],{28404:function(t,e,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/lab/present",function(){return i(95482)}])},30743:function(t,e,i){"use strict";i.d(e,{Z:function(){return o}});var n=i(85893),r=i(51722);function o(t){var e=t.current,i=function(t){var i=t.text,o=t.index,s=t.background;return(0,n.jsxs)(r.E.div,{style:{width:"100vw",height:"100vh",position:"absolute",top:0,left:0,opacity:o===e?1:0,color:"white",background:s,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",textAlign:"center",zIndex:0},children:[o,(0,n.jsx)("br",{}),i]})};return(0,n.jsx)(r.E.div,{style:{position:"relative",width:"fit-content",height:"fit-content",display:"flex"},children:[{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"},{text:"teest",background:"green"}].map((function(t,e){return(0,n.jsx)(i,{text:t.text,background:t.background,index:e})}))})}},95482:function(t,e,i){"use strict";i.r(e),i.d(e,{default:function(){return h}});var n=i(14924),r=i(85893),o=i(90201),s=(i(19765),i(96746),i(66103),i(89974),i(84285),i(27571)),a=i(67294),l=(i(44278),i(30743),i(51722)),c=i(31331),d=(i(75672),i(78896),i(59201));i(81958);function p(t){var e=t.initTop,i=t.initLeft,n=t.top,o=t.left,s=(t.color,t.pinch),a=void 0!==s&&s,c=t.scale,d=void 0===c?1:c,p={repeat:1/0,repeatType:"reverse",duration:1,ease:"easeInOut",repeatDelay:1},f={hidden:{opacity:0,scale:.7,y:15},visible:function(t){var e=1+.5*t;return{opacity:1,scale:1,y:0,transition:{y:{delay:e,duration:5,repeat:1/0,repeatType:"reverse"},opacity:{delay:e,duration:1.5,type:"spring"},scale:{delay:e,duration:1.5,type:"spring"}}}}},h={right:{d:"M171.931 122.021C157.23 153.741 174.203 168.599 183.608 176.13C190.584 230.643 267.602 291.709 297.723 305.558L373.027 273.164C284.88 248.539 232.096 200.669 216.722 179.812C221.454 173.544 226.603 156.266 209.343 137.299C192.083 118.332 192.728 85.7289 195.208 71.7982C170.067 71.7825 181.5 101.376 171.931 122.021Z"},left:{d:"M137.99 154.39C138.147 189.35 159.822 195.597 171.534 198.423C200.995 244.817 296.653 267.406 329.804 267.157L384.232 205.857C293.969 220.986 225.854 200.054 203.079 187.697C204.702 180.013 202.029 162.183 178.349 152.339C153.5 131.5 128 128.5 108 128.5C101.001 143 117.5 139 137.99 154.39Z"}},u={right:{d:"M155.107 103.111C173.177 117.145 184.481 137.303 195.843 135.724C214.941 141.451 202.918 184.74 192.897 191.473C172.855 204.938 145.44 156.419 140.596 133.186C135.753 109.952 85.6689 80.0295 96.8973 69.5838C108.124 59.1394 132.52 85.5689 155.107 103.111Z"},left:{d:"M114.729 144.412C137.047 149.446 155.84 162.898 165.458 156.644C185.18 153.722 192.674 198.02 186.459 208.37C174.03 229.07 128.609 196.781 114.359 177.802C100.11 158.822 53.0005 178.5 48.5003 162.499C44.0001 146.499 86.8308 138.118 114.729 144.412Z"}},x={right:{d:"M131.131 114.542C151.362 125.227 165.993 143.118 176.909 139.591C211.795 123.67 211.076 186.795 202.376 195.164C184.974 211.904 130.862 168.719 122.06 146.679C113.258 124.638 58.7411 103.861 67.9864 91.6255C77.2305 79.3913 105.842 101.186 131.131 114.542Z"},left:{d:"M97.8743 164.941C120.728 166.026 141.57 176.012 149.956 168.184C174.783 138.958 200.932 196.416 196.608 207.688C187.96 230.231 120.632 214.107 103.305 197.888C85.978 181.669 29.3242 204.503 32.5 189.5C35.6754 174.498 69.3075 163.584 97.8743 164.941Z"}},y={right:{d:"M129.583 136.381C151.006 144.41 158.26 138.182 168.639 133.298C201.889 146 209.456 181.095 201.889 190.501C186.754 209.314 125.17 181.981 113.64 161.236C102.111 140.492 56.4222 134.979 64.0389 121.668C71.6546 108.359 102.803 126.344 129.583 136.381Z"},left:{d:"M105.744 185.371C128.55 183.545 132.473 174.827 139.797 165.998C175.294 163.382 197.045 191.944 194.187 203.673C188.472 227.132 121.109 228.531 101.863 214.644C82.6162 200.757 39.7559 226.286 41.0008 211.001C42.2455 195.717 77.2362 187.654 105.744 185.371Z"}},g={right:{d:"M74.5219 151.106C80.1711 141.234 103.276 154.575 123.141 162.02C129.935 164.566 151.947 162.168 178.489 182.805C214.037 210.443 298.646 300.947 299.5 304C295.595 317.119 282.889 350.96 256.175 332C236.513 318.045 174.71 233.993 170.5 224.5C160.571 202.107 133.066 182.2 113.5 174.5C93.9345 166.8 68.8719 160.98 74.5219 151.106Z"},left:{d:"M74 224.712C74.9233 213.375 89.6503 213.012 110.797 211.319C118.029 210.74 136.941 199.223 169.734 206.639C213.652 216.57 328.682 262.591 330.751 264.992C332.786 278.528 335.649 314.562 303.412 308.738C279.686 304.451 188.044 254.59 180.202 247.781C161.706 231.722 128.35 225.377 107.366 226.712C86.3826 228.047 73.0766 236.05 74 224.712Z"}};return(0,r.jsx)(l.E.div,{style:{width:"fit-contnet",height:"fit-content",position:"absolute",scale:d,originX:0,originY:0},initial:{top:e,left:i},animate:{top:n,left:o},transition:{duration:2,delay:1},children:(0,r.jsxs)(l.E.svg,{width:"402",height:"374",viewBox:"0 0 402 374",fill:"none",xmlns:"http://www.w3.org/2000/svg",initial:"hidden",animate:"visible",variants:f,children:[(0,r.jsxs)(l.E.g,{variants:f,children:[(0,r.jsx)(l.E.path,{id:"thumb",fill:"url(#paint0_linear_2439_226)",variants:h,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"ring",fill:"url(#paint1_linear_2439_226)",variants:y,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"middle",fill:"url(#paint2_linear_2439_226)",variants:x,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"index",fill:"url(#paint3_linear_2439_226)",variants:u,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"pinky",fill:"url(#paint4_linear_2439_226)",variants:g,initial:"left",animate:!1===a?"left":"right",transition:p})]}),(0,r.jsx)(l.E.g,{"clip-path":"url(#bodyClip)",variants:f,children:(0,r.jsx)("rect",{x:"20",y:"20",width:"100%",height:"100%",fill:"url(#paint5_linear_2439_226)"})}),(0,r.jsxs)("defs",{children:[(0,r.jsxs)("clipPath",{id:"bodyClip",children:[(0,r.jsx)(l.E.path,{id:"thumb",variants:h,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"ring",variants:y,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"middle",variants:x,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"index",variants:u,initial:"left",animate:!1===a?"left":"right",transition:p}),(0,r.jsx)(l.E.path,{id:"pinky",variants:g,initial:"left",animate:!1===a?"left":"right",transition:p})]}),(0,r.jsxs)(l.E.linearGradient,{id:"paint0_linear_2439_226",x1:"186",y1:"69",x2:"128.5

153",y2:"136.106",initial:{x1:124,y1:127.5,x2:110.98,y2:197.451},animate:{x1:186,y1:69,x2:128.553,y2:136.106},transition:p,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{"stop-color":"white"}),(0,r.jsx)("stop",{offset:"0.713542","stop-color":"white","stop-opacity":"0.255208"}),(0,r.jsx)("stop",{offset:"1","stop-color":"white","stop-opacity":"0"})]}),(0,r.jsxs)(l.E.linearGradient,{id:"paint1_linear_2439_226",initial:{x1:65.4546,y1:185.619,x2:89.7422,y2:211.186},animate:{x1:93,y1:119.5,x2:104.135,y2:152.96},transition:p,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{"stop-color":"white"}),(0,r.jsx)("stop",{offset:"0.713542","stop-color":"white","stop-opacity":"0.255208"}),(0,r.jsx)("stop",{offset:"1","stop-color":"white","stop-opacity":"0"})]}),(0,r.jsxs)(l.E.linearGradient,{id:"paint2_linear_2439_226",initial:{x1:50.5,y1:166.5,x2:71.9549,y2:190.142},animate:{x1:117.5,y1:101,x2:115.054,y2:128.668},transition:p,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{"stop-color":"white"}),(0,r.jsx)("stop",{offset:"0.713542","stop-color":"white","stop-opacity":"0.255208"}),(0,r.jsx)("stop",{offset:"1","stop-color":"white","stop-opacity":"0"})]}),(0,r.jsxs)(l.E.linearGradient,{id:"paint3_linear_2439_226",initial:{x1:75.5,y1:141,x2:89.2144,y2:169.256},animate:{x1:127.5,y1:74,x2:120.19,y2:103.996},transition:p,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{"stop-color":"white"}),(0,r.jsx)("stop",{offset:"0.713542","stop-color":"white","stop-opacity":"0.255208"}),(0,r.jsx)("stop",{offset:"1","stop-color":"white","stop-opacity":"0"})]}),(0,r.jsxs)(l.E.linearGradient,{id:"paint4_linear_2439_226",initial:{x1:59.0229,y1:219.008,x2:114.629,y2:221.093},animate:{x1:73,y1:147,x2:122.461,y2:172.496},transition:p,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{"stop-color":"white"}),(0,r.jsx)("stop",{offset:"0.713542","stop-color":"white","stop-opacity":"0.255208"}),(0,r.jsx)("stop",{offset:"1","stop-color":"white","stop-opacity":"0"})]}),(0,r.jsxs)(l.E.linearGradient,{id:"paint5_linear_2439_226",initial:{x1:145.153,y1:131.753,x2:253.517,y2:279.293},animate:{x1:162.5,y1:72.0769,x2:328.241,y2:204.981},transition:p,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{"stop-color":"white","stop-opacity":"0.4"}),(0,r.jsx)("stop",{offset:"0.713542","stop-color":"white","stop-opacity":"0.255208"}),(0,r.jsx)("stop",{offset:"1","stop-color":"white","stop-opacity":"0"})]})]})]})})}var f=i(34220);i(41664);function h(){var t=(0,s.Jo)((function(t){return t.handIndicatorType})),e=(0,a.useRef)(null),i=(0,a.useState)(""),h=i[0],u=i[1],x=(0,a.useState)(""),y=x[0],g=x[1],j=(0,a.useState)(!1),w=j[0],b=j[1],v=(0,s.Jo)((function(t){return t.cameraSize})),C=(0,s.Jo)((function(t){return t.currentPoseL})),m=(0,s.Jo)((function(t){return t.currentPoseR})),k=(0,s.jK)((function(t){return t.rules})),E=(0,s.Jo)((function(t){return t.handColor})),_=(0,s.Jo)((function(t){return t.currentActionL})),S=(0,s.Jo)((function(t){return t.currentActionR})),I=(0,s.Jo)((function(t){return t.fingersL})),T=(0,s.Jo)((function(t){return t.fingersR})),D=(0,a.useState)(!0),J=(D[0],D[1],(0,s.Jo)((function(t){return t.cameraFeed}))),R=(0,a.useState)("click"),A=R[0],U=R[1];(0,a.useEffect)((function(){s.Jo.setState({currentTab:"none"}),s.Jo.setState({handIndicatorType:"cursor"})}),[]);var Z=function(t){e.current&&e.current.contentWindow&&(console.log(t),e.current.contentWindow.postMessage({key:t},"*"))},z=(0,a.useState)(""),O=z[0],M=z[1];return(0,a.useEffect)((function(){"left"!==_&&"left"!==S||""!==O||"swipe"!==A?"right"!==_&&"right"!==S||""!==O||"swipe"!==A?s.Jo.setState({handCursorType:["\u25cf",10]}):(Z("ArrowDown"),s.Jo.setState({handCursorType:["\u25cf",24]}),M("left")):(Z("ArrowUp"),s.Jo.setState({handCursorType:["\u25cf",24]}),M("right"))}),[_,S]),(0,a.useEffect)((function(){"left"!==O&&"right"!==O||setTimeout((function(){M("")}),100)}),[O]),(0,a.useEffect)((function(){"pointer"===C||"pointer"===m?s.Jo.setState({handCursorType:["\u27a4",24]}):s.Jo.setState({handCursorType:["\u25cf",10]}),("okay"===m&&(v[0]-T[2])/v[0]*100>50||"okay"===C&&(v[0]-I[2])/v[0]*100>50)&&"click"===A?(Z("ArrowDown"),s.Jo.setState({handCursorType:["\u25cf",24]}),M("left")):("okay"===m&&(v[0]-T[2])/v[0]*100<=50||"okay"===C&&(v[0]-I[2])/v[0]*100<=50)&&"click"===A&&(Z("ArrowUp"),s.Jo.setState({handCursorType:["\u25cf",24]}),M("right"))}),[C,m]),(0,r.jsxs)("div",{style:{width:"100vw",height:"100vh",position:"relative",display:"flex",justifyContent:"center",alignItems:"center"},children:[(0,r.jsx)("div",{style:{fontSize:"2em",color:"black",opacity:.2},children:""!==y&&!1===w&&(0,r.jsx)(f.Z,{font:'"Gainsborough", sans-serif',content:"LOADING...",fontSize:40,delay:0,color:"black",letterSpacing:"1.2rem"})}),(0,r.jsx)("iframe",{src:y,style:{width:"100vw",height:"100vh",outline:"none",border:"none",position:"absolute",top:0,left:0,display:""===y?"none":"block"},id:"targetIframe",ref:e,onLoad:function(){b(!0)}}),(0,r.jsxs)("div",{style:{position:"fixed",background:"yellow",color:"black",display:"none"},children:[I[2]," ",I[3],(0,r.jsx)("br",{}),T[2]," ",T[3],(0,r.jsx)("br",{}),v[0]," ",v[1],(0,r.jsx)("br",{}),(v[0]-T[2])/v[0]*100," ",T[3]/v[1]*100]}),(0,r.jsx)("span",{style:{pointerEvents:"none",position:"absolute",top:0,left:0,width:"100vw",height:"100vh"},children:(0,r.jsx)(o.Z,{handIndicatorType:t,cameraFeed:J,rules:k,handColor:E})}),(0,r.jsxs)("div",{style:{width:"100vw",height:"100vh",justifyContent:"space-between",alignItems:"center",position:"absolute",pointerEvents:"none",display:"flex",flexDirection:"row"},children:[(0,r.jsx)(l.E.div,{style:{width:"30vw",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center"}

1,animate:{opacity:"right"===O?1:0},children:(0,r.jsx)("div",{style:{background:"rgba(0,0,0,0.2)",color:"white",borderRadius:300,width:200,height:200,display:"flex",justifyContent:"center",alignItems:"center",fontSize:80,fontFamily:'"Inter", sans-serif'},children:"\u2190"})}),(0,r.jsx)(l.E.div,{style:{width:"30vw",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center"},animate:{opacity:"left"===O?1:0},children:(0,r.jsx)("div",{style:{background:"rgba(0,0,0,0.2)",color:"white",borderRadius:300,width:200,height:200,display:"flex",justifyContent:"center",alignItems:"center",fontSize:80,fontFamily:'"Inter", sans-serif'},children:"\u2192"})})]}),(0,r.jsx)("div",{style:{width:"100%",height:"100%",display:""===y?"flex":"none",justifyContent:"center",alignItems:"center",position:"absolute",background:"rgba(0,0,0,0.1)",flexDirection:"column"},children:(0,r.jsxs)(l.E.div,{style:{display:"flex",flexDirection:"row",width:900,height:500,gap:0,justifyContent:"center",alignItems:"center"},initial:{y:60,opacity:0},animate:{y:0,opacity:1},transition:{type:"spring",bounce:.1,duration:.6},children:[(0,r.jsxs)("div",{style:(0,n.Z)({background:"white",width:"fit-content",height:"100%",padding:"20px 30px 20px 30px",display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",borderRadius:"10px 0 0 10px",gap:20,fontWeight:500},"width","50%"),children:[(0,r.jsxs)("h1",{style:{color:E,textAlign:"center",lineHeight:1.1},children:["Present with",(0,r.jsx)("br",{}),"gestures"]}),(0,r.jsxs)("div",{style:{textAlign:"center",fontSize:"0.9em"},children:["This is an experimental feature from ",(0,r.jsx)("br",{}),"Handzplay x Interactive Slides, ",(0,r.jsx)("br",{}),"allowing you to control your slides with air-gesture.",(0,r.jsx)("br",{})," ",(0,r.jsx)("br",{}),"It only supports the deck ",(0,r.jsx)("br",{}),"made with the"," ",(0,r.jsx)(l.E.a,{href:"https://interactive-slides.framer.website",target:"_blank",style:{textDecoration:"underline",color:"black"},whileHover:{color:E},children:"Interactive Slides Framer Template"}),".",(0,r.jsx)("br",{})," ",(0,r.jsx)("br",{}),(0,r.jsx)("br",{})]}),(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row",gap:5,width:"100%"},children:[(0,r.jsx)("input",{placeholder:"URL of your presentation",style:{background:"rgba(0,0,0,0.1)",outline:"none",border:"none",textAlign:"center",borderRadius:10,width:"100%",padding:14,fontSize:16},onChange:function(t){u(t.target.value)}}),(0,r.jsx)(l.E.div,{style:{width:"fit-content",height:"fit-content",background:E,color:"white",display:"flex",justifyContent:"center",alignItems:"center",padding:"14px 20px 14px 20px",cursor:"pointer",borderRadius:10,textAlign:"center",fontWeight:500,fontFamily:'"Inter", sans-serif'},whileHover:{background:"#0045AB"},onClick:function(){g(h)},children:"\u2192"})]}),(0,r.jsx)(l.E.div,{style:{background:"transparent",color:E,display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",borderRadius:4,textAlign:"center",fontWeight:500,fontSize:"0.9em",textDecoration:"underline"},onClick:function(){g("https://pdf-sm.framer.website/dev/dev")},children:"Or try the sample"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)("div",{style:{background:(0,c.E9)(E,.8),width:"50%",height:"100%",padding:20,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",borderRadius:"0 10px 10px 0",gap:20,fontWeight:500},children:[(0,r.jsxs)("div",{style:{width:"100%",height:"50%",display:"flex",justifyContent:"center",alignItems:"center",gap:6,flexDirection:"column"},children:[(0,r.jsx)("div",{style:{width:200,height:140,background:(0,c.E9)("#ffffff",.2),border:"2px solid ".concat((0,c.E9)("#ffffff",.5)),borderRadius:10,display:"flex",justifyContent:"center",alignItems:"flex-start"},children:(0,r.jsx)("div",{style:{width:4,height:4,borderRadius:10,background:"white",overflow:"visible",display:"flex",justifyContent:"center",alignItems:"center",marginTop:8},children:(0,r.jsx)("div",{style:{width:6,height:6,borderRadius:10,filter:"blur(4px)",background:"white"}})})}),(0,r.jsx)("div",{style:{width:240,height:8,background:(0,c.E9)("#ffffff",.2),border:"2px s

1olid ".concat((0,c.E9)("#ffffff",.5)),borderRadius:"2px 2px 10px 10px",display:"flex",justifyContent:"center",alignItems:"flex-start"}}),(0,r.jsxs)("div",{style:{position:"relative"},children:[(0,r.jsx)(l.E.div,{style:{width:"fit-content",height:"fit-content",display:"swipe"===A?"block":"none",pointerEvents:"none",originY:1},initial:{x:20,y:-60,rotate:-25},animate:{x:180,y:-10,rotate:20},transition:{repeat:1/0,repeatType:"mirror",repeatDelay:1.3,duration:.7,ease:"easeInOut"},children:(0,r.jsx)(p,{initTop:-150,initLeft:-200,top:-180,left:-200,pinch:!0,color:"white",scale:.6})}),(0,r.jsx)(l.E.div,{style:{width:"fit-content",height:"fit-content",display:"click"===A?"block":"none",pointerEvents:"none"},initial:{x:-140,y:-66},animate:{x:20},transition:{repeat:1/0,repeatType:"mirror",repeatDelay:.3,duration:2,type:"spring",bounce:.1},children:(0,r.jsx)(d.Z,{initTop:-180,initLeft:-200,top:-180,left:-200,pinch:!0,color:"white",scale:.6})})]})]}),(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",textAlign:"center",gap:10,justifyContent:"center",alignItems:"center",fontSize:"0.9em"},children:[(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row",padding:5,background:(0,c.E9)("#ffffff",.2),borderRadius:10,width:"fit-content"},children:[(0,r.jsx)("div",{style:{padding:10,cursor:"pointer",background:"click"===A?"white":"transparent",color:"click"===A?E:"white",borderRadius:5,userSelect:"none",width:60},onClick:function(){U("click")},children:"Click"}),(0,r.jsx)("div",{style:{padding:10,cursor:"pointer",background:"swipe"===A?"white":"transparent",color:"swipe"===A?E:"white",borderRadius:5,userSelect:"none",width:60},onClick:function(){U("swipe")},children:"Swipe"})]}),(0,r.jsx)("span",{style:{letterSpacing:"0.2rem",textTransform:"uppercase",color:"white",fontSize:"0.7em",display:"none"},children:"Gesture Options"})]}),(0,r.jsx)("div",{style:{fontSize:"0.9em",color:"white",textAlign:"center",width:"60%"},children:"swipe"===A?"Move your palm left/right\n in front of the camera":"Do pinch gesture on \nthe r

1ight/left side of the screen"})]})]})})]})}}},function(t){t.O(0,[723,864,713,295,754,974,904,141,706,66,827,215,989,927,774,888,179],(function(){return e=28404,t(t.s=e);var e}));var e=t.O();_N_E=e}]);