Mouse track (#24)

src/components/common/mouse/index.tsx

@@ -0,0 +1,54 @@
+import { useRouter } from 'next/router'
+import * as React from 'react'
+
+import Flag from '~/components/icons/flag'
+
+import s from './mouse.module.scss'
+
+const Mouse = () => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 })
+  const [page, setPage] = React.useState('Home')
+  const router = useRouter()
+
+  React.useEffect(() => {
+    const url = router.pathname.split('/').filter(Boolean).join('/')
+    if (url === '') {
+      setPage('Home')
+    } else {
+      setPage(url)
+    }
+  }, [router])
+
+  React.useEffect(() => {
+    const setFromEvent = (e: { clientX: any; clientY: any }) =>
+      setPosition({ x: e.clientX, y: e.clientY })
+    window.addEventListener('mousemove', setFromEvent, { passive: true })
+
+    return () => {
+      window.removeEventListener('mousemove', setFromEvent)
+    }
+  }, [])
+  return (
+    <div className={s['scroll']}>
+      <div>
+        <p>C:</p>
+        <Flag className={s['flag']} />
+      </div>
+      <div className="hide-on-mobile">
+        <p>{page}</p>
+        <ul>
+          <li>
+            H:
+            <span>{position.x} PX</span>
+          </li>
+          <li>
+            V:
+            <span>{position.y} PX</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Mouse

src/components/common/mouse/mouse.module.scss

@@ -0,0 +1,66 @@
+@import '~/css/helpers';
+
+.scroll {
+  position: fixed;
+  z-index: 20;
+  bottom: 5%;
+  left: tovw(56px, 'default', 16px);
+  display: grid;
+  align-items: flex-end;
+  width: calc(100% - (tovw(56px, 'default', 16px) * 2));
+  user-select: none;
+  pointer-events: none;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  mix-blend-mode: difference;
+
+  @media screen and (max-width: 800px) {
+    display: none;
+  }
+
+  .flag {
+    width: tovw(36px, 'default', 36px);
+    height: tovw(20px, 'default', 20px);
+    margin: 0 auto 0 tovw(8px, 'default', 6px);
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  p,
+  li {
+    font-family: var(--font-dm-mono);
+    font-size: tovw(12px, 'default', 11px);
+    line-height: 1.7;
+    width: 100%;
+    margin: 0;
+    text-align: right;
+    text-transform: uppercase;
+    font-variant-numeric: tabular-nums;
+  }
+
+  > div {
+    &:first-of-type {
+      display: flex;
+      align-items: flex-end;
+      justify-self: flex-start;
+
+      @media screen and (max-width: 800px) {
+        display: none;
+      }
+    }
+
+    &:last-of-type {
+      text-align: right;
+      justify-self: flex-end;
+
+      span {
+        display: inline-block;
+        width: tovw(60px, 'default', 55px);
+      }
+    }
+  }
+}

src/components/sections/homepage/hero/hero.module.scss

@@ -82,9 +82,9 @@
     bottom: 11%;
     left: tovw(56px, 'default', 16px);
     display: grid;
-    align-items: flex-end;
+    align-items: center;
     width: calc(100% - (tovw(56px, 'default', 16px) * 2));
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(1, 1fr);
     grid-template-rows: 1fr;
 
     @media screen and (max-width: 800px) {
@@ -96,12 +96,6 @@
       bottom: 0;
     }
 
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-
     p,
     li {
       font-family: var(--font-dm-mono);
@@ -114,24 +108,13 @@
     }
 
     > div {
-      &:first-of-type {
-        display: flex;
-        justify-self: flex-start;
-        align-items: flex-end;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
 
-        @media screen and (max-width: 800px) {
-          display: none;
-        }
-      }
-
-      &:last-of-type {
-        text-align: right;
-        justify-self: flex-end;
-
-        span {
-          display: inline-block;
-          width: tovw(60px, 'default', 55px);
-        }
+      span {
+        display: block;
       }
     }
   }

src/components/sections/homepage/hero/index.tsx

@@ -1,8 +1,6 @@
 import clsx from 'clsx'
-import { useEffect, useState } from 'react'
 
 import { ArrowDotted } from '~/components/icons/arrow'
-import Flag from '~/components/icons/flag'
 import Line from '~/components/icons/line'
 import Section from '~/components/layout/section'
 import { Button } from '~/components/primitives/button'
@@ -12,18 +10,6 @@ import HighlightedText from '~/components/primitives/highlighted-text'
 import s from './hero.module.scss'
 
 const Hero = () => {
-  const [position, setPosition] = useState({ x: 0, y: 0 })
-
-  useEffect(() => {
-    const setFromEvent = (e: { clientX: any; clientY: any }) =>
-      setPosition({ x: e.clientX, y: e.clientY })
-    window.addEventListener('mousemove', setFromEvent)
-
-    return () => {
-      window.removeEventListener('mousemove', setFromEvent)
-    }
-  }, [])
-
   return (
     <Section className={s['section']}>
       <video
@@ -53,10 +39,6 @@ const Hero = () => {
         Get Started
       </Button>
       <div className={s['scroll']}>
-        <div>
-          <p>C:</p>
-          <Flag className={s['flag']} />
-        </div>
         <div>
           <Heading
             as="span"
@@ -69,19 +51,6 @@ const Hero = () => {
           </Heading>
           <ArrowDotted className={s['arrow']} />
         </div>
-        <div className="hide-on-mobile">
-          <p>Home</p>
-          <ul>
-            <li>
-              H:
-              <span>{position.x} PX</span>
-            </li>
-            <li>
-              V:
-              <span>{position.y} PX</span>
-            </li>
-          </ul>
-        </div>
       </div>
     </Section>
   )

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import * as React from 'react'
 
 import { Footer } from '~/components/common/footer'
 import { Header } from '~/components/common/header'
+import Mouse from '~/components/common/mouse'
 import { AnimationContextProvider } from '~/context/animation'
 import { basementLog, isProd } from '~/lib/constants'
 import { FontsReadyScript } from '~/lib/font-scripts'
@@ -59,6 +60,7 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
         {/* <GAScripts /> */}
         <FontsReadyScript />
         <Header />
+        <Mouse />
         {getLayout({ Component, pageProps, ...rest })}
         <Footer />
       </AnimationContextProvider>