{"version":3,"sources":["webpack:///./src/components/hiw/Hero.js","webpack:///./src/components/hiw/PageMenu.js","webpack:///./src/components/hiw/TempScroller.js","webpack:///./src/components/hiw/Section.js","webpack:///./src/templates/technology/HowItWorks.js","webpack:///./src/templates/haptics/index.js","webpack:///./src/icons/down-arrow.svg","webpack:///./src/types/index.js"],"names":["AnimateIcon","motion","custom","IconWrapper","Hero","AnimateEntrance","variants","containerVariants","threshold","className","src","alt","loading","h2","textVariants","p","div","as","onClick","e","preventDefault","elm","document","getElementById","top","getBoundingClientRect","window","scroll","pageYOffset","behavior","href","wrapperClassName","icon","DownArrow","PageMenu","memo","screen","scrollTo","useScrollTo","classNames","map","page","index","key","SectionHeading","animate","kebabCase","id","offset","innerHeight","TempScroller","rootMargin","style","backgroundColor","preload","loop","autoPlay","playsInline","muted","Section","title","subHeading","body","onAnimationComplete","RichText","content","initial","opacity","y","reveal","transition","duration","place","HowItWorks","useState","setScreen","useContext","StickyNavContext","isStickyNav","setStickyNav","setAnimate","hasAnimateDone","setAnimateDone","isMobile","useMediaQuery","useEffect","onChange","inView","width","left","block","hidden","HeroShouter","key_word","key_copy","PurpleRow","image","WhiteRow","ContactForm","query","Haptics","pageContext","media","wordpress_id","data","blocks","yoast","featured_media","useConstant","cleanProps","Blocks","currentPage","React","props","createElement","defaultProps","module","exports","default","shape","string","isRequired","number","arrayOf","attrs","name","oneOfType","object","featured_image_url","nodes","department","categories","url","entries","category","path","prev","bool","next"],"mappings":"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","file":"component---src-templates-haptics-index-js-dad50de90c2bd5343d0c.js","sourcesContent":["import React from 'react'\n// import { number, func } from 'prop-types'\nimport { motion } from 'framer-motion'\nimport IconWrapper from '@/utils/IconWrapper'\nimport DownArrow from '@/icons/down-arrow.svg'\nimport AnimateEntrance from '@/utils/AnimateEntrance'\nimport { containerVariants, textVariants } from '@/utils/transitions'\n\nconst AnimateIcon = motion.custom(IconWrapper)\n\nexport default function Hero() {\n\tconst onClick = e => {\n\t\te.preventDefault()\n\n\t\tconst elm = document.getElementById('how-works-continue')\n\n\t\tif (elm) {\n\t\t\tconst { top } = elm.getBoundingClientRect()\n\n\t\t\twindow.scroll({\n\t\t\t\ttop: top + window.pageYOffset - 100,\n\t\t\t\tbehavior: 'smooth'\n\t\t\t})\n\t\t}\n\t}\n\n\treturn (\n\t\t<AnimateEntrance\n\t\t\tvariants={containerVariants}\n\t\t\tthreshold={0.5}\n\t\t\tclassName=\"relative flex flex-col items-center justify-center md:py-24 lg:pb-0 md:min-h-page\"\n\t\t>\n\t\t\t<img\n\t\t\t\tsrc=\"/haptics/HIW/hero-hand.png\"\n\t\t\t\talt=\"\"\n\t\t\t\tclassName=\"absolute top-0 bottom-0 my-auto left-1/2 -x-25\"\n\t\t\t\tloading=\"lazy\"\n\t\t\t/>\n\t\t\t<div className=\"relative z-10 flex flex-col items-center justify-center w-full max-w-xl px-8 py-24 mx-auto xl:max-w-4xl\">\n\t\t\t\t<motion.h2\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\tclassName=\"mb-4 leading-tight text-center text-white text-h1-fluid font-museoSansBold\"\n\t\t\t\t>\n\t\t\t\t\tTurning ultrasound into virtual touch\n\t\t\t\t</motion.h2>\n\t\t\t\t<motion.p\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\tclassName=\"hidden mb-4 text-lg text-center text-white lg:block lg:mb-8\"\n\t\t\t\t>\n\t\t\t\t\tHere’s how it works.\n\t\t\t\t</motion.p>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\tclassName=\"w-1 h-24 mb-4 bg-white lg:mb-8\"\n\t\t\t\t/>\n\t\t\t\t<AnimateIcon\n\t\t\t\t\tas=\"a\"\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\thref=\"#how-works-continue\"\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\twrapperClassName=\"text-white w-12\"\n\t\t\t\t\ticon={DownArrow}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AnimateEntrance>\n\t)\n}\n\n// Hero.propTypes = {\n// \tsetScreen: func.isRequired,\n// \tindex: number\n// }\n","import React, { memo } from 'react'\nimport { number, bool, 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 }) => {\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'Ultrasound speaker',\n\t\t'Array',\n\t\t'Algorithms',\n\t\t'The focal point',\n\t\t'Pressure point',\n\t\t'Virtual touch'\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{\n\t\t\t\t\t\t\t\t'opacity-0':\n\t\t\t\t\t\t\t\t\tscreen < 1 || screen > 6 || typeof screen === 'undefined'\n\t\t\t\t\t\t\t}\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\tinView: bool,\n\tclassName: string\n}\n\nexport default PageMenu\n","/* eslint-disable react/no-danger */\nimport React from 'react'\nimport { string } from 'prop-types'\nimport AnimateEntrance from '@/utils/AnimateEntrance'\nimport { containerVariants } from '@/utils/transitions'\n\nfunction TempScroller({ 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\"\n\t\t>\n\t\t<div className=\"px-8 py-4 md:hidden\" style={{backgroundColor: '#bebebe'}}>\n\t\t\t<p className=\"pb-4\">By moving the pressure points around, we create tactile effects in mid-air.</p>\n\t\t\t<p>We use the pressure points to create a wide range of tactile effects – from sculpting virtual lines and shapes to forming 3D controls in mid-air.</p>\n\t\t</div>\n\t\t\t<div className=\"relative w-full h-auto\">\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=\"/haptics/HIW/Haptics_How_it_Works_1920x1080_edit.mp4\"\n\t\t\t\t\tclassName=\"relative hidden lg:block object-contain w-full\"\n\t\t\t\t/>\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=\"/haptics/HIW/Haptics_How_it_Works_MOBILE_1080x1080.mp4\"\n\t\t\t\t\tclassName=\"relative block lg:hidden object-contain w-full\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AnimateEntrance>\n\t)\n}\nTempScroller.propTypes = {\n\tid: string.isRequired\n}\n\nexport default TempScroller\n","/* eslint-disable react/no-danger */\nimport React from 'react'\nimport { string, number, func } from 'prop-types'\nimport { motion } from 'framer-motion'\nimport classNames from 'classnames'\nimport SectionHeading from '@/components/global/SectionHeading'\nimport RichText from '@/utils/RichText'\nimport AnimateEntrance from '@/utils/AnimateEntrance'\nimport { containerVariants, textVariants } from '@/utils/transitions'\n\nexport default function Section({\n\tid,\n\ttitle,\n\tsubHeading,\n\tbody,\n\tindex,\n\tclassName,\n\tonAnimationComplete\n}) {\n\treturn (\n\t\t<AnimateEntrance\n\t\t\tvariants={containerVariants}\n\t\t\tid={id}\n\t\t\tclassName={classNames(className)}\n\t\t\trootMargin=\"-100px 0px\"\n\t\t\tthreshold={0.2}\n\t\t\tonAnimationComplete={onAnimationComplete}\n\t\t>\n\t\t\t<SectionHeading className=\"mb-12 text-xs text-white lg:hidden\">\n\t\t\t\t{index}. {subHeading}\n\t\t\t</SectionHeading>\n\t\t\t<div className=\"w-3/4\">\n\t\t\t\t<motion.h2\n\t\t\t\t\tvariants={textVariants}\n\t\t\t\t\tclassName=\"mb-4 leading-tight text-secondary text-h2-fluid font-museoSansBold\"\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 variants={textVariants}>\n\t\t\t\t\t<RichText className=\"text-white\" content={body} />\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</AnimateEntrance>\n\t)\n}\n\nSection.propTypes = {\n\ttitle: string.isRequired,\n\tsubHeading: string.isRequired,\n\tbody: string.isRequired,\n\tindex: number.isRequired,\n\tclassName: string,\n\tid: string.isRequired,\n\tonAnimationComplete: func.isRequired\n}\n","/* eslint-disable react/no-danger */\nimport React, { useState, useEffect, useContext } from 'react'\nimport { motion } from 'framer-motion'\nimport { InView } from 'react-intersection-observer'\nimport classNames from 'classnames'\n// import { fade } from '@/utils/transitions'\nimport useMediaQuery from '@/hooks/useMediaQuery'\nimport Hero from '@/components/hiw/Hero'\nimport PageMenu from '@/components/hiw/PageMenu'\nimport PurpleRow from '@/components/hiw/PurpleRow'\nimport WhiteRow from '@/components/hiw/WhiteRow'\nimport TempScroller from '@/components/hiw/TempScroller'\nimport Section from '@/components/hiw/Section'\nimport ContactForm from '@/components/hiw/ContactForm'\nimport { HeroShouter } from '@/components/HeroShouter'\nimport { StickyNavContext } from '@/container/StickyNavContext'\n\nexport const variants = {\n\tinitial: { opacity: 0, y: -250 },\n\treveal: { opacity: 1, y: -250, transition: { duration: 0.1 } },\n\tplace: { opacity: 1, y: 0, transition: { duration: 1.2 } }\n}\n\n// { pageContext: { blocks } }\nfunction HowItWorks() {\n\tconst [screen, setScreen] = useState()\n\tconst { isStickyNav, setStickyNav } = useContext(StickyNavContext)\n\tconst [animate, setAnimate] = useState('initial')\n\tconst [hasAnimateDone, setAnimateDone] = useState()\n\tconst isMobile = useMediaQuery('(max-width: 64em)')\n\tuseEffect(() => {\n\t\tif(isMobile) {\n\t\t\tsetAnimateDone(true)\n\t\t\tsetAnimate('place')\n\t\t}\n\t}, [isMobile])\n\tuseEffect(() => {\n\t\tif (screen === 6 && isStickyNav) {\n\t\t\tsetStickyNav(false)\n\n\t\t\treturn\n\t\t}\n\n\t\tif (screen !== 6 && !isStickyNav) {\n\t\t\tsetStickyNav(true)\n\t\t}\n\t}, [isStickyNav, screen, setStickyNav])\n\n\treturn (\n\t\t<div id=\"how-it-works\">\n\t\t\t<div className=\"relative\">\n\t\t\t\t<PageMenu className={classNames('hidden 2xl:block')} screen={screen} />\n\n\t\t\t\t<div className=\"relative w-full overflow-hidden bg-easing-b-how\">\n\t\t\t\t\t<InView\n\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\tthreshold={0.5}\n\t\t\t\t\t\trootMargin=\"0px 0px\"\n\t\t\t\t\t\tonChange={inView => inView && setScreen(0)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Hero setScreen={setScreen} index={0} />\n\t\t\t\t\t</InView>\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"how-works-continue\"\n\t\t\t\t\t\tclassName=\"relative lg:site-grid grid-dense\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute inset-y-0 right-0 flex items-center justify-end\">\n\t\t\t\t\t\t\t<div className=\"relative w-1/2 mt-16 vsm:mt-32 sm:mt-64 lg:mt-0\">\n\t\t\t\t\t\t\t\t<img src=\"/haptics/HIW/hiw-product.png\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tclassName=\"absolute z-30 lg:block\"\n\t\t\t\t\t\t\t\t\tstyle={{ width: '6.289%', top: '29.2%', left: '32.3%' }}\n\t\t\t\t\t\t\t\t\tvariants={variants}\n\t\t\t\t\t\t\t\t\tanimate={animate}\n\t\t\t\t\t\t\t\t\tinitial=\"initial\"\n\t\t\t\t\t\t\t\t\tonAnimationComplete={() => {\n\t\t\t\t\t\t\t\t\t\tif (animate === 'place') {\n\t\t\t\t\t\t\t\t\t\t\tsetAnimateDone(true)\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>\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t\t\t\t\tblock: !hasAnimateDone,\n\t\t\t\t\t\t\t\t\t\t\thidden: hasAnimateDone\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\tsrc=\"/haptics/HIW/plug.png\"\n\t\t\t\t\t\t\t\t\t\talt=\"Haptics Sensor Plug\"\n\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc=\"/haptics/HIW/plug-end.png\"\n\t\t\t\t\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t\t\t\t\tblock: hasAnimateDone,\n\t\t\t\t\t\t\t\t\t\t\thidden: !hasAnimateDone\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\talt=\"Haptics Senor Plug End\"\n\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<InView\n\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\tthreshold={1}\n\t\t\t\t\t\t\trootMargin=\"-50px 0px\"\n\t\t\t\t\t\t\tonChange={inView => inView && setScreen(1)}\n\t\t\t\t\t\t\tclassName=\"relative z-10 max-w-xl px-8 mb-32 ml-auto md:px-12 lg:mb-16 lg:px-0 lg:column-6/5 2xl:mb-32 2xl:column-7/5 lg:max-w-full\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Section\n\t\t\t\t\t\t\t\tid=\"ultrasound-speaker\"\n\t\t\t\t\t\t\t\tonAnimationComplete={() => !isMobile && setAnimate('reveal')}\n\t\t\t\t\t\t\t\tindex={1}\n\t\t\t\t\t\t\t\tsubHeading=\"Ultrasound speaker\"\n\t\t\t\t\t\t\t\ttitle=\"It all starts with one small ultrasound speaker.\"\n\t\t\t\t\t\t\t\tbody=\"This small speaker emits ultrasound waves, which are too high a frequency for you to hear.\"\n\t\t\t\t\t\t\t\tclassName=\"g:mb-0\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</InView>\n\t\t\t\t\t\t<InView\n\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\tthreshold={1}\n\t\t\t\t\t\t\trootMargin=\"-50px 0px\"\n\t\t\t\t\t\t\tonChange={inView => inView && setScreen(2)}\n\t\t\t\t\t\t\tclassName=\"relative z-10 max-w-xl px-8 mb-32 mr-auto lg:mb-56 lg:mt-32 md:px-12 lg:px-0 lg:column-5/5 lg:max-w-full\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Section\n\t\t\t\t\t\t\t\tid=\"array\"\n\t\t\t\t\t\t\t\tindex={2}\n\t\t\t\t\t\t\t\tonAnimationComplete={() => setAnimate('place')}\n\t\t\t\t\t\t\t\tsubHeading=\"Array\"\n\t\t\t\t\t\t\t\ttitle=\"We put lots of these speakers together to create an array.\"\n\t\t\t\t\t\t\t\tbody=\"Every ultrasound speaker in the array can be individually controlled.\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</InView>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<HeroShouter\n\t\t\t\t\tclassName=\"py-24 md:py-48 xl:py-64 text-secondary\"\n\t\t\t\t\tkey_word=\"endless <br />possibilities\"\n\t\t\t\t\tkey_copy=\"Multiple <br />ultrasound <br />speakers\"\n\t\t\t\t/>\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(3)}\n\t\t\t\t\tclassName=\"relative mb-32 lg:mb-56\"\n\t\t\t\t>\n\t\t\t\t\t<PurpleRow\n\t\t\t\t\t\tid=\"algorithms\"\n\t\t\t\t\t\tsetScreen={setScreen}\n\t\t\t\t\t\tindex={3}\n\t\t\t\t\t\tsubHeading=\"Algorithms\"\n\t\t\t\t\t\ttitle=\"Each individual speaker is triggered at a different time.\"\n\t\t\t\t\t\tbody=\"<p>Using our patented algorithms, the ultrasound speakers are triggered with very specific time differences. These time differences mean the ultrasound waves arrive at the same point in space, at the same time.</p>\"\n\t\t\t\t\t\timage=\"/haptics/HIW/transducers.gif\"\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(4)}\n\t\t\t\t\tclassName=\"relative mb-32 lg:mb-56\"\n\t\t\t\t>\n\t\t\t\t\t<WhiteRow\n\t\t\t\t\t\tid=\"the-focal-point\"\n\t\t\t\t\t\tsetScreen={setScreen}\n\t\t\t\t\t\tindex={4}\n\t\t\t\t\t\tsubHeading=\"The focal point\"\n\t\t\t\t\t\ttitle=\"The place where all the ultrasound waves coincide is called the focal point.\"\n\t\t\t\t\t\tbody=\"<p class='mb-4'>Where the focal point is positioned in 3D space is programmable in real time. It can change position from instant to instant.</p><p>We use a <a href='/product/'>hand tracking device</a> to track the exact position of your hand and position the focal point at a spot on it.</p>\"\n\t\t\t\t\t\timage=\"/haptics/HIW/Focal-point_v4.gif\"\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<PurpleRow\n\t\t\t\t\t\tid=\"pressure-point\"\n\t\t\t\t\t\tsetScreen={setScreen}\n\t\t\t\t\t\tindex={5}\n\t\t\t\t\t\tsubHeading=\"Pressure point\"\n\t\t\t\t\t\ttitle=\"From focal point to pressure point. Feel virtual touch come to life.\"\n\t\t\t\t\t\tbody=\"<p>The combined ultrasound waves have enough force to create a tiny dent in your skin. We use this pressure point to create a vibration that touch sensors in your hands can detect. </p>\"\n\t\t\t\t\t\timage=\"/haptics/HIW/pressure-point.jpg\"\n\t\t\t\t\t/>\n\t\t\t\t</InView>\n\t\t\t\t<HeroShouter\n\t\t\t\t\tclassName=\"py-24 md:py-48 xl:py-64 text-secondary\"\n\t\t\t\t\tkey_word=\"virtual touch\"\n\t\t\t\t\tkey_copy=\"Now <br />it's wow <br />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=\"-100px 0px\"\n\t\t\t\t\tonChange={inView => inView && setScreen(6)}\n\t\t\t\t\tclassName=\"relative bg-easing-b-how\"\n\t\t\t\t>\n\t\t\t\t\t<TempScroller id=\"virtual-touch\" />\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\nexport default HowItWorks\n","/* eslint-disable react/prop-types */\nimport React from 'react'\nimport { shape } from 'prop-types'\nimport { graphql } from 'gatsby'\nimport SEO from '@/components/Seo'\nimport Blocks from '@/utils/Blocks'\nimport HowItWorks from '@/templates/technology/HowItWorks'\nimport { cleanProps } from '@/utils'\nimport useConstant from '@/hooks/useConstant'\nimport * as T from '@/types'\n\nfunction Haptics({ \n\tpageContext: { media, wordpress_id },\n\tdata: {\n\t\tpage: { blocks, yoast, featured_media }\n\t}\n}) {\n\tconst 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<HowItWorks />\n\t\t</>\n\t)\n}\n\nHaptics.propTypes = {\n\tpageContext: T.pageContext.isRequired,\n\tdata: shape({\n\t\tpage: T.page.isRequired\n\t})\n}\n\nexport const query = graphql`\n\tquery hapticsPageQuery($path: String!) {\n\t\tpage: wordpressPage(path: { eq: $path }) {\n\t\t\t...pageQuery\n\t\t}\n\t}\n`\n\nexport default Haptics\n","var React = require('react');\n\nfunction DownArrow (props) {\n    return React.createElement(\"svg\",props,[React.createElement(\"path\",{\"d\":\"M26 52a26 26 0 1126-26 26 26 0 01-26 26zm0-50a24 24 0 1024 24A24 24 0 0026 2z\",\"key\":0}),React.createElement(\"path\",{\"d\":\"M26 36.78L11.86 22.64l1.41-1.41L26 33.96l12.73-12.73 1.41 1.41L26 36.78z\",\"key\":1})]);\n}\n\nDownArrow.defaultProps = {\"id\":\"bee4d3fb-854f-4f29-9e67-60975b3ed763\",\"data-name\":\"Layer 1\",\"viewBox\":\"0 0 52 52\"};\n\nmodule.exports = DownArrow;\n\nDownArrow.default = DownArrow;\n","import {\n\tshape,\n\tbool,\n\tstring,\n\tnumber,\n\tobject,\n\tarrayOf,\n\toneOfType\n} from 'prop-types'\n\nexport const pageContext = shape({\n\tmedia: string.isRequired\n})\n\nexport const page = shape({\n\ttitle: string.isRequired,\n\tcontent: string,\n\tid: string.isRequired,\n\twordpress_id: number.isRequired,\n\tblocks: arrayOf(\n\t\tshape({\n\t\t\tattrs: shape({\n\t\t\t\tname: string,\n\t\t\t\twordpress_id: oneOfType([string, number]),\n\t\t\t\tdata: object\n\t\t\t})\n\t\t})\n\t)\n})\n\nexport const post = shape({\n\ttitle: string.isRequired,\n\tcontent: string,\n\tid: string.isRequired,\n\tfeatured_image_url: shape({\n\t\twordpress_id: number.isRequired\n\t}),\n\tblocks: arrayOf(\n\t\tshape({\n\t\t\tattrs: shape({\n\t\t\t\tname: string,\n\t\t\t\twordpress_id: oneOfType([string, number]),\n\t\t\t\tdata: object\n\t\t\t})\n\t\t})\n\t)\n})\n\nexport const caseStudies = shape({\n\tnodes: arrayOf(page)\n})\n\nexport const posts = shape({\n\tnodes: arrayOf(page)\n})\n\nexport const quotes = shape({\n\tnodes: arrayOf(\n\t\tshape({\n\t\t\tcontent: string.isRequired,\n\t\t\ttitle: string.isRequired,\n\t\t\twordpress_id: number.isRequired\n\t\t})\n\t)\n})\n\nexport const people = shape({\n\tnodes: arrayOf(\n\t\tshape({\n\t\t\ttitle: string.isRequired,\n\t\t\tdepartment: arrayOf(number),\n\t\t\tfeatured_media: object,\n\t\t\twordpress_id: number.isRequired,\n\t\t\tid: string.isRequired\n\t\t})\n\t)\n})\n\nexport const departments = shape({\n\tnodes: arrayOf(\n\t\tshape({\n\t\t\tname: string.isRequired,\n\t\t\twordpress_id: number.isRequired,\n\t\t\tid: string.isRequired\n\t\t})\n\t)\n})\n\nexport const news = shape({\n\tmedia: string.isRequired,\n\tcategories: arrayOf(\n\t\tshape({\n\t\t\ttitle: string.isRequired,\n\t\t\turl: string.isRequired\n\t\t})\n\t),\n\tentries: arrayOf(\n\t\tshape({\n\t\t\ttitle: string.isRequired,\n\t\t\tcategory: string,\n\t\t\tpath: string.isRequired,\n\t\t\tid: string.isRequired,\n\t\t\tfeatured_image_url: shape({\n\t\t\t\twordpress_id: number.isRequired\n\t\t\t})\n\t\t})\n\t),\n\tprev: oneOfType([string, bool]),\n\tnext: oneOfType([string, bool])\n})\n"],"sourceRoot":""}