{"version":3,"sources":["webpack:///./src/components/Tracking/PageMenu.js","webpack:///./src/components/Tracking/BackgroundImageText.js","webpack:///./src/components/Tracking/ImageHeader.js","webpack:///./src/components/Tracking/Tracking.js","webpack:///./src/templates/tracking/index.js"],"names":["PageMenu","memo","screen","className","hidden","scrollTo","useScrollTo","classNames","map","page","index","key","SectionHeading","animate","as","href","kebabCase","onClick","e","preventDefault","id","offset","top","document","getElementById","getBoundingClientRect","window","pageYOffset","innerHeight","threshold","BackgroundImageText","AnimateEntrance","variants","containerVariants","rootMargin","style","minHeight","backgroundColor","h2","textVariants","p","src","alt","autoPlay","loop","muted","ImageHeader","title","body","isMobile","image","useMediaQuery","preload","playsInline","div","dangerouslySetInnerHTML","__html","Tracking","useState","setScreen","menuHidden","setMenuHidden","onChange","inView","PurpleRow","subHeading","WhiteRow","video","HeroShouter","undefined","key_word","key_copy","intersectionObserverEntry","boundingClientRect","W2BSplitImage","ctatext","ctalink","product","source_url","imageAlt","ContactForm","query","PageTracking","pageContext","media","wordpress_id","data","blocks","yoast","featured_media","useConstant","cleanProps","Blocks","currentPage"],"mappings":"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","file":"component---src-templates-tracking-index-js-4fe2f48089534ab47457.js","sourcesContent":["import React, { memo } from 'react'\nimport { number, string } from 'prop-types'\nimport classNames from 'classnames'\nimport useScrollTo from '@/hooks/useScrollTo'\nimport SectionHeading from '@/components/global/SectionHeading'\nimport { kebabCase } from '@/utils'\n\nconst PageMenu = memo(({ screen, className, hidden }) => {\n\tconst scrollTo = useScrollTo()\n\n\tconst onClick = (id, offset = 0) => {\n\t\tconst section = document.getElementById(id)\n\t\tconst { top } = section.getBoundingClientRect()\n\t\tscrollTo(0, top + window.pageYOffset - offset)\n\t}\n\n\tconst pageLinks = [\n\t\t'Unrivalled software',\n\t\t'Simple sensors',\n\t\t'Hand images',\n\t\t'Skeletal tracking',\n\t\t'Interaction Engine',\n\t\t'Real-time interaction'\n\t]\n\n\treturn (\n\t\t<div className={classNames('sticky z-40 h-1/2 top-2/5', className)}>\n\t\t\t<div className=\"w-full xl:site-grid\">\n\t\t\t\t<div className=\"relative col-span-5\">\n\t\t\t\t\t<ol\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t'xl:px-4 transition-all z-40 absolute h-full w-full left-0 text-darkgrey',\n\t\t\t\t\t\t\t{ hidden }\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pageLinks.map((page, index) => (\n\t\t\t\t\t\t\t<li key={page} className=\"mb-4\">\n\t\t\t\t\t\t\t\t<SectionHeading\n\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\t'font-h4-fluid transition-opacity normal-case inline-flex font-museoSans tracking-normal text-darkgrey',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'opacity-100': screen === index + 1,\n\t\t\t\t\t\t\t\t\t\t\t'opacity-40': screen !== index + 1\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tanimate={screen === index + 1}\n\t\t\t\t\t\t\t\t\tas=\"a\"\n\t\t\t\t\t\t\t\t\thref={`#${kebabCase(page)}`}\n\t\t\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\t\t\t\tonClick(kebabCase(page), window.innerHeight / 4)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tthreshold={1}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{index + 1}. {page}\n\t\t\t\t\t\t\t\t</SectionHeading>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ol>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nPageMenu.propTypes = {\n\tscreen: number,\n\tclassName: string\n}\n\nexport default PageMenu\n","/* eslint-disable react/prop-types */\nimport React from 'react'\nimport { motion } from 'framer-motion'\n\nimport AnimateEntrance from '@/utils/AnimateEntrance'\nimport { textVariants, containerVariants } from '@/utils/transitions'\n\nfunction BackgroundImageText({ id }) {\n\treturn (\n\t\t<AnimateEntrance\n\t\t\tvariants={containerVariants}\n\t\t\tid={id}\n\t\t\tthreshold={0.1}\n\t\t\trootMargin=\"-100px 0px\"\n\t\t\tclassName=\"relative lg:items-center pt-16 pb-56 md:pb-32 lg:py-0\"\n\t\t\tstyle={{ minHeight: 500, backgroundColor: '#bebebe' }}\n\t\t>\n\t\t\t<div className=\"relative lg:absolute lg:inset-y-0 lg:left-0 h-full sm:site-grid grid-dense lg:row-1 lg:items-center\">\n\t\t\t\t<div className=\"relative z-10 px-8 bg-transparent sm:pb-20 lg:px-0 sm:column-3/6 md:column-3/6 2xl:column-5/4\">\n\t\t\t\t\t<motion.h2\n\t\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\t\tclassName=\"mb-8 leading-tight text-secondary text-h2-fluid font-museoSansBold\"\n\t\t\t\t\t>\n\t\t\t\t\t\tSimple, but powerful and fast.\n\t\t\t\t\t</motion.h2>\n\t\t\t\t\t<motion.p variants={textVariants} className=\"san-serif\">\n                        The LEDs illuminate your hands with infrared light. You can't see it, but our sensors can. The LEDs pulse in sync with the camera framerate. Every time they do this the cameras send data back to the computer to track your hands. \n\t\t\t\t\t</motion.p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<video\n\t\t\t\tsrc=\"/tracking/Infrared_Diagram___1200x800_v2.mp4\"\n\t\t\t\talt=\"hand\"\n\t\t\t\tautoPlay\n\t\t\t\tloop\n\t\t\t\tmuted\n\t\t\t\tclassName=\"left-0 absolute bottom-4 w-full lg:left-auto lg:right-0 lg:relative lg:ml-auto lg:bottom-0  max-w-tracking\"\n\t\t\t/>\n\t\t</AnimateEntrance>\n\t)\n}\n\nBackgroundImageText.propTypes = {}\n\nexport default BackgroundImageText\n","/* eslint-disable react/no-danger */\nimport React from 'react'\nimport { string } from 'prop-types'\nimport { motion } from 'framer-motion'\nimport useMediaQuery from '@/hooks/useMediaQuery'\nimport AnimateEntrance from '@/utils/AnimateEntrance'\nimport { containerVariants, textVariants } from '@/utils/transitions'\n\nfunction ImageHeader({ id, title, body, image }) {\n\tconst isMobile = useMediaQuery('(max-width: 48em)')\n\n\treturn (\n\t\t<AnimateEntrance\n\t\t\tvariants={containerVariants}\n\t\t\tid={id}\n\t\t\tthreshold={0.1}\n\t\t\trootMargin=\"-100px 0px\"\n\t\t\tclassName=\"relative flex flex-col lg:items-center\"\n\t\t>\n\t\t\t{/* <motion.img\n\t\t\t\tsrc={image}\n\t\t\t\talt=\"\"\n\t\t\t\tloading=\"lazy\"\n\t\t\t\tclassName=\"relative\"\n\t\t\t\tvariants={textVariants}\n\t\t\t/> */}\n\t\t\t<div className=\"relative\">\n\t\t\t\t<video\n\t\t\t\t\tpreload=\"auto\"\n\t\t\t\t\tloop\n\t\t\t\t\tautoPlay\n\t\t\t\t\tplaysInline\n\t\t\t\t\tmuted\n\t\t\t\t\tsrc={ isMobile ? \"/motion/Exploded_Leap_Diagram_MOBILE.mp4\" : \"/motion/Exploded_Leap_Diagram_V02.mp4\"}\n\t\t\t\t\tclassName=\"object-cover w-full h-full\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"max-w-2xl mx-auto text-center contents lg:block\">\n\t\t\t\t<motion.h2\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\tclassName=\"mb-8 leading-tight text-center text-h2-fluid font-museoSansBold text-secondary\"\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</motion.h2>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\tclassName=\"order-last w-11/12 mx-auto md:w-9/12 lg:w-7/12\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: body }}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AnimateEntrance>\n\t)\n}\nImageHeader.propTypes = {\n\tid: string.isRequired,\n\ttitle: string.isRequired,\n\tbody: string.isRequired,\n\timage: string.isRequired\n}\n\nexport default ImageHeader\n","/* eslint-disable react/no-danger */\nimport React, { useState } from 'react'\nimport { InView } from 'react-intersection-observer'\nimport classNames from 'classnames'\nimport PageMenu from './PageMenu'\nimport PurpleRow from '@/components/hiw/PurpleRow'\nimport ContactForm from '@/components/hiw/ContactForm'\nimport { HeroShouter } from '@/components/HeroShouter'\n\nimport BackgroundImageText from './BackgroundImageText'\nimport WhiteRow from '@/components/hiw/WhiteRow'\nimport ImageHeader from './ImageHeader'\nimport W2BSplitImage from '../Where2Buy/W2BSplitImage'\n\nexport const variants = {\n\tinitial: { opacity: 0, y: -250 },\n\treveal: { opacity: 1, y: -250, transition: { duration: 0.75 } },\n\tplace: { opacity: 1, y: 0, transition: { duration: 1.2 } }\n}\n\nfunction Tracking() {\n\tconst [screen, setScreen] = useState(null)\n\tconst [menuHidden, setMenuHidden] = useState(false);\n\tconst whereToBuyImage = {\n\t\tsource_url: \"/LMC/new/lmc_04.jpg\"\n\t}\n\n\tconst handleHideMenu = (inView, intersectionObserverEntry) => {\n\t\tif (inView) {\n\t\t\tsetScreen(null);\n\t\t\tsetMenuHidden(true);\n\t\t} else if (intersectionObserverEntry.boundingClientRect.top > 0) {\n\t\t\tsetScreen(6);\n\t\t\tsetMenuHidden(false);\n\t\t}\n\t}\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"relative\">\n\t\t\t\t<PageMenu\n\t\t\t\t\tclassName={ classNames('hidden 2xl:block') }\n\t\t\t\t\tscreen={ screen }\n\t\t\t\t\thidden={ menuHidden }\n\t\t\t\t/>\n\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-100px 0px\"\n\t\t\t\t\tonChange={ inView => inView && setScreen(1) }\n\t\t\t\t\tclassName=\"relative mb-20\"\n\t\t\t\t\tid=\"how-it-works\"\n\t\t\t\t>\n\t\t\t\t\t<PurpleRow\n\t\t\t\t\t\tid=\"unrivalled-software\"\n\t\t\t\t\t\tsetScreen={ setScreen }\n\t\t\t\t\t\tindex={ 1 }\n\t\t\t\t\t\tsubHeading=\"Unrivalled software\"\n\t\t\t\t\t\ttitle=\" Your hands are intricate and nuanced. Our software is too.\"\n\t\t\t\t\t\tbody=\"<p>Our hand tracking software captures all the subtlety and complexity of natural hand movements.  It’s based on a decade of development and iteration, generations of research in artificial intelligence and the feedback of hundreds of thousands of developers.</p><p>Fast, robust, accurate, and works on almost any computer. </p>\"\n\t\t\t\t\t\timage=\"/tracking/yourhandsvirtual.png\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-100px 0px\"\n\t\t\t\t\tonChange={ inView => inView && setScreen(2) }\n\t\t\t\t\tclassName=\"relative mb-32 wrapper lg:mb-48\"\n\t\t\t\t>\n\t\t\t\t\t<ImageHeader\n\t\t\t\t\t\tid=\"simple-sensors\"\n\t\t\t\t\t\ttitle=\"It starts with a simple sensor that detects your hands. \"\n\t\t\t\t\t\tbody=\"<p>The heart of a hand tracking device is two cameras and some infrared LEDs. Ultraleap’s hand tracking modules the <a href='/product/leap-motion-controller'>Leap Motion Controller</a> and the <a href='/product/stereo-ir-170'>Stereo IR 170 Camera Module</a> work on this principle, as do VR/AR headsets built using <a href='/company/news/press-release/qualcomm-snapdragon-xr2'>Qualcomm’s XR2 reference designs.</a></p>\"\n\t\t\t\t\t\tindex={ 2 }\n\t\t\t\t\t\timage=\"/motion/simple-hardware.png\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tid=\"hand-images\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-100px 0px\"\n\t\t\t\t\tonChange={ inView => inView && setScreen(3) }\n\t\t\t\t\tclassName=\"relative lg:mb-48\"\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageText setScreen={ setScreen } index={ 3 } />\n\t\t\t\t</InView>\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-100px 0px\"\n\t\t\t\t\tonChange={ inView => inView && setScreen(4) }\n\t\t\t\t\tclassName=\"relative mb-32 lg:mb-48\"\n\t\t\t\t>\n\t\t\t\t\t<PurpleRow\n\t\t\t\t\t\tid=\"skeletal-tracking\"\n\t\t\t\t\t\tsetScreen={ setScreen }\n\t\t\t\t\t\tindex={ 4 }\n\t\t\t\t\t\tsubHeading=\"Skeletal tracking\"\n\t\t\t\t\t\ttitle=\"This is just the start. The real magic is in our skeletal tracking.\"\n\t\t\t\t\t\tbody=\"<p>Our software uses the images to generate a virtual model of your hand movements. We model not just your palm or fingertips, but the joints and bones inside your hand. This means we can accurately predict the position of a finger or thumb, even if it’s hidden from view.</p>\"\n\t\t\t\t\t\timage=\"/motion/UltraLeap_Product05342_edit.png\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-100px 0px\"\n\t\t\t\t\tonChange={ inView => inView && setScreen(5) }\n\t\t\t\t\tclassName=\"relative\"\n\t\t\t\t>\n\t\t\t\t\t<WhiteRow\n\t\t\t\t\t\tid=\"interaction-engine\"\n\t\t\t\t\t\tsetScreen={ setScreen }\n\t\t\t\t\t\tindex={ 5 }\n\t\t\t\t\t\tsubHeading=\"Interaction Engine\"\n\t\t\t\t\t\ttitle=\"… and our Interaction Engine.\"\n\t\t\t\t\t\tbody=\"<p>The virtual models of your hand movements are fed into the Ultraleap Interaction Engine. The Interaction Engine provides a unified physical interaction paradigm. Grabbing, swiping, pushing, pinching … they all become as effortless as they are in the real world.</p>\"\n\t\t\t\t\t\tvideo=\"/motion/Leap_Motion_Orion_Edit_V01.mp4\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\n\t\t\t\t<HeroShouter\n\t\t\t\t\tindex={ undefined }\n\t\t\t\t\tclassName=\"py-12 mb-18 md:py-18 xl:py-24 text-secondary lg:mb-48\"\n\t\t\t\t\tkey_word=\"Unparalleled\"\n\t\t\t\t\tkey_copy=\"Real interaction,<br/> real time\"\n\t\t\t\t/>\n\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-50px 0px\"\n\t\t\t\t\tonChange={ inView => inView && setScreen(6) }\n\t\t\t\t\tclassName=\"relative mb-32 lg:mb-48\"\n\t\t\t\t>\n\t\t\t\t\t<PurpleRow\n\t\t\t\t\t\tid=\"real-time-interaction\"\n\t\t\t\t\t\tsetScreen={ setScreen }\n\t\t\t\t\t\tindex={ 6 }\n\t\t\t\t\t\tsubHeading=\"Real-time interaction\"\n\t\t\t\t\t\ttitle=\"The world’s leading hand tracking.  \"\n\t\t\t\t\t\tbody=\"<p>Our software makes digital interaction human.<br />It’s so fast, so smooth, they’re just … <i>your hands.</i></p>\"\n\t\t\t\t\t\tvideo=\"/motion/Cat_Explorer_Edit_V01.mp4\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\t\t\t\t<InView\n\t\t\t\t\tas=\"div\"\n\t\t\t\t\tthreshold={ 0.1 }\n\t\t\t\t\trootMargin=\"-200px 0px\"\n\t\t\t\t\tonChange={ handleHideMenu }\n\t\t\t\t\tclassName=\"relative mb-32 lg:mb-48\"\n\t\t\t\t>\n\t\t\t\t\t<W2BSplitImage\n\t\t\t\t\t\tctatext=\"Buy now\"\n\t\t\t\t\t\tctalink=\"/product/leap-motion-controller/#pricingandlicensing\"\n\t\t\t\t\t\tproduct=\"Leap Motion Controller\"\n\t\t\t\t\t\timage={ whereToBuyImage }\n\t\t\t\t\t\timageAlt=\"Buy our Leap Motion Controller\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\t\t\t</div>\n\t\t\t<InView\n\t\t\t\tas=\"div\"\n\t\t\t\tthreshold={ 0.1 }\n\t\t\t\trootMargin=\"-100px 0px\"\n\t\t\t\tonChange={ inView => inView && setScreen(7) }\n\t\t\t>\n\t\t\t\t<ContactForm />\n\t\t\t</InView>\n\t\t</div>\n\t)\n}\n\n// Tracking.propTypes = {\n// \tproducts: arrayOf(\n// \t\tshape({\n// \t\t\tremainingItems: arrayOf(\n// \t\t\t\tshape({\n// \t\t\t\t\timage: string.isRequired,\n// \t\t\t\t\theader: string.isRequired,\n// \t\t\t\t\tintro: string.isRequired,\n// \t\t\t\t\tctaOneLink: string.isRequired,\n// \t\t\t\t\tctaOneCopy: string.isRequired,\n// \t\t\t\t\tctaTwoLink: string.isRequired,\n// \t\t\t\t\tctaTwoCopy: string.isRequired\n// \t\t\t\t})\n// \t\t\t),\n// \t\t\tfirstItem: shape({\n// \t\t\t\timage: string.isRequired,\n// \t\t\t\theader: string.isRequired,\n// \t\t\t\tintro: string.isRequired,\n// \t\t\t\tctaOneLink: string.isRequired,\n// \t\t\t\tctaOneCopy: string.isRequired,\n// \t\t\t\tctaTwoLink: string.isRequired,\n// \t\t\t\tctaTwoCopy: string.isRequired\n// \t\t\t})\n// \t\t})\n// \t)\n// }\n\nexport default Tracking\n","/* eslint-disable react/prop-types */\nimport React from 'react'\nimport { graphql } from 'gatsby'\nimport SEO from '@/components/Seo'\nimport Tracking from '@/components/Tracking'\nimport Blocks from '@/utils/Blocks'\nimport { cleanProps } from '@/utils'\nimport useConstant from '@/hooks/useConstant'\n\nfunction PageTracking({ \n    pageContext: { media, wordpress_id },\n\tdata: {\n\t\tpage: { blocks, yoast, featured_media }\n\t}\n}) {\n    const data = useConstant(() => cleanProps(blocks, media))\n\n\treturn (\n\t\t<>\n\t\t\t<SEO {...yoast} image={featured_media} />\n\t\t\t<Blocks data={data} media={media} currentPage={wordpress_id} />\n\t\t\t<Tracking />\n\t\t</>\n\t)\n}\n\nexport const query = graphql`\n\tquery TrackingPageQuery($path: String!) {\n\t\tpage: wordpressPage(path: { eq: $path }) {\n\t\t\t...pageQuery\n\t\t}\n\t}\n`\n\nexport default PageTracking\n"],"sourceRoot":""}