https://www.olegfrolov.design/_next/static/chunks/pages/spatialcomputing-d07ae2abe7e7ee97.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[331],{2798:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/spatialcomputing",function(){return i(5523)}])},9876:function(e,t,i){"use strict";i.d(t,{Z:function(){return d}});var o=i(5893),n=i(7784),r=i.n(n);i(7294);var a=i(8352),s=i.n(a);let l=()=>(0,o.jsxs)("nav",{className:s().socialLinks,children:[(0,o.jsx)("a",{href:"https://dribbble.com/Volorf",target:"_blank",rel:"noopener noreferrer",children:"Dribbble"}),(0,o.jsx)("a",{href:"https://github.com/Volorf",target:"_blank",rel:"noopener noreferrer",children:"Github"}),(0,o.jsx)("a",{href:"https://www.instagram.com/olegdesignfrolov/",target:"_blank",rel:"noopener noreferrer",children:"Instagram"}),(0,o.jsx)("a",{href:"https://www.linkedin.com/in/olegfrolovdesign",target:"_blank",rel:"noopener noreferrer",children:"Linkedin"})]}),c=()=>(0,o.jsxs)("footer",{className:r().footer,children:[(0,o.jsxs)("p",{children:["\xa9 ",new Date().getFullYear(),(0,o.jsx)("br",{}),"Oleg Frolov.",(0,o.jsx)("br",{}),"Made with Love, Figma and React.js"]}),(0,o.jsx)(l,{}),(0,o.jsx)("div",{}),(0,o.jsx)("div",{})]});var d=c},6735:function(e,t,i){"use strict";i.d(t,{Z:function(){return s}});var o=i(5893),n=i(9008),r=i.n(n);let a="https://olegfrolov.design";function s(e){let{title:t,description:i,path:n="",image:s}=e,l=a+n,c=a+(s||"/images/og/home.jpg");return(0,o.jsxs)(r(),{children:[(0,o.jsx)("title",{children:t}),(0,o.jsx)("meta",{name:"description",content:i}),(0,o.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}),(0,o.jsx)("link",{rel:"icon",href:"/favicon.ico"}),(0,o.jsx)("link",{rel:"canonical",href:l}),(0,o.jsx)("meta",{property:"og:type",content:"website"}),(0,o.jsx)("meta",{property:"og:site_name",content:"Oleg Frolov"}),(0,o.jsx)("meta",{property:"og:title",content:t}),(0,o.jsx)("meta",{property:"og:description",content:i}),(0,o.jsx)("meta",{property:"og:url",content:l}),(0,o.jsx)("meta",{property:"og:image",content:c}),(0,o.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,o.jsx)("meta",{name:"twitter:creator",content:"@Volorf"}),(0,o.jsx)("meta",{name:"twitter:title",content:t}),(0,o.jsx)("meta",{name:"twitter:description",content:i}),(0,o.jsx)("meta",{name:"twitter:image",content:c})]})}},48:function(e,t,i){"use strict";i.d(t,{Z:function(){return u}});var o=i(5893),n=i(8206),r=i.n(n);function a(e){let{children:t}=e;return(0,o.jsx)("nav",{className:r().menuGroup,children:t})}var s=i(9197),l=i.n(s),c=i(1664),d=i.n(c);let p=e=>{let{children:t}=e;return(0,o.jsxs)("section",{className:l().welcomeGroup,children:[(0,o.jsxs)(a,{children:[(0,o.jsx)(d(),{href:"/",children:"Experiments"}),(0,o.jsx)(d(),{href:"/spatialcomputing",children:"spatial"}),(0,o.jsx)(d(),{href:"/works",children:"Works"})]}),(0,o.jsxs)(a,{children:[(0,o.jsx)(d(),{href:"/talks",children:"Publications"}),(0,o.jsx)(d(),{target:"_blank",href:"https://www.figma.com/@volorf",title:"Oleg Frolov on Figma Community",children:"Tools"}),(0,o.jsx)(d(),{target:"_blank",href:"https://medium.com/@olegfrolov",title:"Oleg Frolov on Medium",children:"Blog"})]}),(0,o.jsx)("div",{className:l().welcomeMessage,children:(0,o.jsx)("h1",{children:t})})]})};var u=p},5677:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){let i=r.default,n={loading:e=>{let{error:t,isLoading:i,pastDelay:o}=e;return null}};e instanceof Promise?n.loader=()=>e:"function"==typeof e?n.loader=e:"object"==typeof e&&(n=o({},n,e)),n=o({},n,t);let l=n.loader,c=()=>null!=l?l().then(a):Promise.resolve(a(()=>null));return(n.loadableGenerated&&(n=o({},n,n.loadableGenerated),delete n.loadableGenerated),"boolean"!=typeof n.ssr||n.ssr)?i(o({},n,{loader:c})):(delete n.webpack,delete n.modules,s(i,n))},t.noSSR=s;var o=i(6495).Z,n=i(2648).Z,r=(n(i(7294)),n(i(8976)));function a(e){return{default:(null==e?void 0:e.default)||e}}function s(e,t){return delete t.webpack,delete t.modules,e(t)}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esMo

1dule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},2254:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LoadableContext=void 0;var o=(0,i(2648).Z)(i(7294));let n=o.default.createContext(null);t.LoadableContext=n},8976:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=i(6495).Z,n=(0,i(2648).Z)(i(7294)),r=i(2254);let a=[],s=[],l=!1;function c(e){let t=e(),i={loading:!0,loaded:null,error:null};return i.promise=t.then(e=>(i.loading=!1,i.loaded=e,e)).catch(e=>{throw i.loading=!1,i.error=e,e}),i}class d{promise(){return this._res.promise}retry(){this._clearTimeouts(),this._res=this._loadFn(this._opts.loader),this._state={pastDelay:!1,timedOut:!1};let{_res:e,_opts:t}=this;e.loading&&("number"==typeof t.delay&&(0===t.delay?this._state.pastDelay=!0:this._delay=setTimeout(()=>{this._update({pastDelay:!0})},t.delay)),"number"==typeof t.timeout&&(this._timeout=setTimeout(()=>{this._update({timedOut:!0})},t.timeout))),this._res.promise.then(()=>{this._update({}),this._clearTimeouts()}).catch(e=>{this._update({}),this._clearTimeouts()}),this._update({})}_update(e){this._state=o({},this._state,{error:this._res.error,loaded:this._res.loaded,loading:this._res.loading},e),this._callbacks.forEach(e=>e())}_clearTimeouts(){clearTimeout(this._delay),clearTimeout(this._timeout)}getCurrentValue(){return this._state}subscribe(e){return this._callbacks.add(e),()=>{this._callbacks.delete(e)}}constructor(e,t){this._loadFn=e,this._opts=t,this._callbacks=new Set,this._delay=null,this._timeout=null,this.retry()}}function p(e){return function(e,t){let i=Object.assign({loader:null,loading:null,delay:200,timeout:null,webpack:null,modules:null},t),o=null;function a(){if(!o){let t=new d(e,i);o={getCurrentValue:t.getCurrentValue.bind(t),subscribe:t.subscribe.bind(t),retry:t.retry.bind(t),promise:t.promise.bind(t)}}return o.promise()}if(!l){let e=i.webpack?i.webpack():i.modules;e&&s.push(t=>{for(let i of e)if(-1!==t.indexOf(i))return a()})}function c(e,t){!function(){a();let e=n.default.useContext(r.LoadableContext);e&&Array.isArray(i.modules)&&i.modules.forEach(t=>{e(t)})}();let s=n.default.useSyncExternalStore(o.subscribe,o.getCurrentValue,o.getCurrentValue);return n.default.useImperativeHandle(t,()=>({retry:o.retry}),[]),n.default.useMemo(()=>{var t;return s.loading||s.error?n.default.createElement(i.loading,{isLoading:s.loading,pastDelay:s.pastDelay,timedOut:s.timedOut,error:s.error,retry:o.retry}):s.loaded?n.default.createElement((t=s.loaded)&&t.default?t.default:t,e):null},[e,s])}return c.preload=()=>a(),c.displayName="LoadableComponent",n.default.forwardRef(c)}(c,e)}function u(e,t){let i=[];for(;e.length;){let o=e.pop();i.push(o(t))}return Promise.all(i).then(()=>{if(e.length)return u(e,t)})}p.preloadAll=()=>new Promise((e,t)=>{u(a).then(e,t)}),p.preloadReady=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return new Promise(t=>{let i=()=>(l=!0,t());u(s,e).then(i,i)})},window.__NEXT_PRELOADREADY=p.preloadReady,t.default=p},5523:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return k}});var o=i(5893),n=i(6735),r=i(48),a=i(9876),s=i(7294),l=i(4894),c=i.n(l),d=i(5152),p=i.n(d);let u=p()(()=>i.e(4).then(i.bind(i,2004)),{loadableGenerated:{webpack:()=>[2004]},ssr:!1});function m(e){let t=.1*e.index,[i,n]=(0,s.useState)(!1);return(0,o.jsxs)("div",{className:c().petProjectGroup+" showCardWithDelay",style:{animationDelay:t+"s"},children:[(0,o.jsx)("div",{className:c().petProjectCoverWrap+(i?"":" skeleton"),children:(0,o.jsx)("a",{className:c().petProjectCover,href:e.link,target:"_blank",rel:"noopener noreferrer",title:e.linkTitle,children:(0,o.jsx)("div",{style:{opacity:i?1:0,transition:"opacity 0.3s ease",width:"100%",height:"100%"},children:(0,o.jsx)(u,{playsinline:!0,muted:!0,url:e.videoLink,playing:!0,loop:!0,width:"100%",height:"100%",onReady:()=>n(!0)})})})}),(0,o.jsx)("div",{className:"baseSpacer"}),(0,o.jsx)("h1",{children:e.title}),(0,o.jsx)("p",{children:e.desc})]})}var h=i(1769),f=i.n(h),g=JSON.parse('[{"videoLink":"../images/petProjects/videos/voxel_creation_1080x720_3Kb.mp4","title":"Voxel Creation Interaction","linkTitle":"Voxel Creation Interaction","desc":"Exploring voxel creation interaction for my voxel editor, BoxelXR.","link":"https://www.linkedin.com/posts/olegfrolovdesign_xrdesign-spatialcomputing-voxel-activity-7393585951362686976-XbGd","linkName":"LinkedIn"},{"videoLink":"../images/petProjects/videos/stepper_visionos_1080x720_opt.mp4","title":"Spatial Stepper","linkTitle":"Spatial Stepper for Vision OS","desc":"Exploring stepper interaction for Apple\'s Vision OS with SwiftUI on Vision Pro.","link":"https://www.linkedin.com/posts/olegfrolovdesign_handtracking-directmanipulation-spatialcomputing-activity-7218948352812462080-ZBfb","linkName":"LinkedIn"},{"videoLink":"../images/petProjects/videos/finger_depth_menu_opt.mp4","title":"Finger Depth Menu","linkTitle":"Finger Depth Menu","desc":"Leveraging depth demention to spatially arange elements for a navigation interaction pattern.","link":"https://github.com/Volorf/xr-prototypes#depth-finger-menu","linkName":"GitHub"},{"videoLink":"../images/petProjects/videos/vr_arrow_pointers_1080x720_opt.mp4","title":"Spatial Arrow Pointers","linkTitle":"Spatial Arrow Pointers","desc":"People used to use a mouse arrow for decades. Is worth to try it in XR too?","link":"https://dribbble.com/shots/14480968-VR-Arrow-Pointer","linkName":"Dribbble"}

1,{"videoLink":"../images/petProjects/videos/xr_slider_1080x720_opt.mp4","title":"XR Slider","linkTitle":"XR Slider","desc":"Slider interaction based on direct manipulation principles. Hand tracking. Oculus Interaction SDK.","link":"https://twitter.com/Volorf/status/1517056735147663361","linkName":"Twitter"},{"videoLink":"../images/petProjects/videos/178_spatial_circular_menu.mp4","title":"Circular Menu","linkTitle":"Spatial Circular Menu for BoxelXR","desc":"Circular menu is spawned in front of a user once the index pinch is triggered.","link":"https://github.com/Volorf/xr-prototypes","linkName":"GitHub"},{"videoLink":"../images/petProjects/videos/fingertip_menu_1080x720_opt.mp4","title":"Fingertip Based Menu","linkTitle":"Fingers Based Menu for Oculus Quest with hand tracking","desc":"Prototyped a finger based menu interaction for XR Operating System with Unity and XR Interaction Toolkit.","link":"https://twitter.com/Volorf/status/1716749423366021136","linkName":"Twitter"},{"videoLink":"../images/petProjects/videos/mimimazing_window_1080x720_opt.mp4","title":"Minimizing UI Panel","linkTitle":"Minimizing UI Panel","desc":"Experimented with minimizing UI Panels in 3D space using hand-tracking and placing them on the user\'s body.","link":"https://www.linkedin.com/posts/oleg-frolov-6a6a4752_ux-ui-uidesign-activity-7079021385691324417-p22G","linkName":"LinkedIn"},{"videoLink":"../images/petProjects/videos/xr_finger_toolbar_1080x720_opt.mp4","title":"Spatial Finger Toolbar for BoxelXR","linkTitle":"Spatial Finger Toolbar for BoxelXR","desc":"In this iteration, the toolbal remains stationary in space once you start pinching.","link":"https://twitter.com/Volorf/status/1735582979370459333","linkName":"Twitter"},{"videoLink":"../images/petProjects/videos/notifications_1080x720_opt.mp4","title":"Simple XR Notifications","linkTitle":"Simple XR Notifications for Unity3D","desc":"Git Unity3D package for simple and easy to use notifications for XR applications.","link":"https://github.com/Volorf/VR-Notifications","linkName":"GitHub"},{"videoLink":"../images/petProjects/videos/hand_menu_1080x720_opt.mp4","title":"XR Palm Menu","linkTitle":"XR Palm Menu","desc":"Hand menu interaction experiment. Appears when you look at your hand. Disappears when you look away.","link":"https://twitter.com/Volorf/status/1709136040752038090","linkName":"Twitter"},{"videoLink":"../images/petProjects/videos/paper_vs_gems_1080x720_opt.mp4","title":"Paper VS Corona","linkTitle":"Paper VS Microbes. VR game for Oculus Quest","desc":"It\'s a VR game where you became a bunch of atoms to fight against evil microbes to save the world.","link":"https://github.com/Volorf/VR-Games","linkName":"GitHub"},{"videoLink":"../images/petProjects/videos/xr_color_picker_1080x720_opt.mp4","title":"XR Color Picker","linkTitle":"XR Color Picker for BoxelXR","desc":"Controller-based color picker for a VR voxel graphics editor to make the creation experience fast and seamless.","link":"https://www.meta.com/en-gb/experiences/5815420721867244/","linkName":"App Lab"},{"videoLink":"../images/petProjects/videos/menu_interaction_boxelxr_1080x720_opt.mp4","title":"Menu Interaction","linkTitle":"Spatial Menu Interaction for BoxelXR","desc":"Quick access menu on the left controller. Natural and easy to use.","link":"https://www.meta.com/en-gb/experiences/5815420721867244/","linkName":"Twitter"},{"videoLink":"../images/petProjects/videos/keypad_eye_tracking_1080x720_opt.mp4","title":"Keypad with Eye Tracking","linkTitle":"Keypad with Eye Tracking","desc":"An app to explore Apple\'s Visio OS features with SwiftUI inside the Xcode simulator.","link":"https://twitter.com/Volorf/status/1731634904905986057","linkName":"Twitter"},{"videoLink":"../images/petProjects/videos/spatial_bouncing_dvds_1080x720_opt.mp4","title":"Spatial Bouncing DVDs experience","linkTitle":"Spatial Bouncing DVDs experience","desc":"Everything you love about the Bouncing DVD Logo experience but in Mixed Reality.","link":"https://twitter.com/Volorf/status/1738205388284043436","linkName":"Twitter"}]');let _=()=>(0,o.jsx)("div",{className:f().petProjectsGroup,name:"pet_projects",children:(0,o.jsx)("div",{className:f().petProjectsCardGroup,children:g.map((e,t)=>(0,o.jsx)(m,{index:t,...e},t))})});function k(){return(0,o.jsxs)("main",{children:[(0,o.jsx)(n.Z,{title:"Spatial Computing — Oleg Frolov",description:"Spatial computing prototypes and XR interaction experiments: hand-tracking menus, eye-tracking keypads, and spatial UI patterns for Quest and Vision Pro.",path:"/spatialcomputing",image:"/images/og/spatial.jpg"}),(0,o.jsxs)(r.Z,{children:["In his spare time, ",(0,o.jsx)("abbr",{title:"product designer | ux/ui designer | xr prototyper | creative coder",children:"Oleg"})," likes learning about new tools and technology by making apps and ",(0,o.jsx)("abbr",{title:"A prototype is worth a thousand images",children:"prototypes"}),"."]}),(0,o.jsx)("div",{className:"spacerVerticalLarge hideThisBlock"}),(0,o.jsx)(_,{}),(0,o.jsx)(a.Z,{})]})}}

1,7784:function(e){e.exports={footer:"footer_footer__GaW5f"}},4894:function(e){e.exports={petProjectCoverWrap:"petProject_petProjectCoverWrap__WBfdo",petProjectGroup:"petProject_petProjectGroup__ngauC",petProjectCover:"petProject_petProjectCover__iGt7y"}},1769:function(e){e.exports={petProjectsCardGroup:"petProjects_petProjectsCardGroup__DkRsd",petProjectsGroup:"petProjects_petProjectsGroup__hEkV7"}},8206:function(e){e.exports={menuGroup:"menu_menuGroup__NE1GY"}},8352:function(e){e.exports={socialLinks:"sociallinks_socialLinks__3ZXcj"}},9197:function(e){e.exports={welcomeGroup:"welcome_welcomeGroup__oLF17",welcomeMessage:"welcome_welcomeMessage__bSSaL",hideThisBlock:"welcome_hideThisBlock__WjKuI"}},5152:function(e,t,i){e.exports=i(5677)}},function(e){e.O(0,[996,774,888,179],function(){return e(e.s=2798)}),_N_E=e.O()}]);