filip(fix): add new rive file with initial animation values and apply…

… further QA feedback
input-output-hk · Oct 17, 2024 · 9ad3df4 · 9ad3df4
1 parent 04e46fc
commit 9ad3df4
Show file tree

Hide file tree

Showing 13 changed files with 198 additions and 88 deletions.
diff --git a/src/components/Homepage/DocumentationWebsites/GridSectionEntry.tsx b/src/components/Homepage/DocumentationWebsites/GridSectionEntry.tsx
@@ -28,8 +28,18 @@ const StyledEntry = styled(motion.div)`
   }
 `
 
+const BrandText = styled.span`
+  color: #fff;
+  font-family: 'Inter';
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`
+
 type Props = {
-  imgSrc: string
+  imgSrc?: string
+  text?: string
   color?: string
   theme?: string
   url: string
@@ -38,6 +48,7 @@ type Props = {
 
 export const GridSectionEntry: React.FC<Props> = ({
   imgSrc,
+  text,
   color,
   theme,
   url,
@@ -56,7 +67,8 @@ export const GridSectionEntry: React.FC<Props> = ({
         hidden: { opacity: 0, y: 100 },
       }}
     >
-      <img src={useBaseUrl(imgSrc)} />
+      {imgSrc && <img src={useBaseUrl(imgSrc)} />}
+      {text && <BrandText>{text}</BrandText>}
     </StyledEntry>
   </Link>
 )

diff --git a/src/components/Homepage/DocumentationWebsites/WebsitesGrid.tsx b/src/components/Homepage/DocumentationWebsites/WebsitesGrid.tsx
@@ -17,7 +17,7 @@ const StyledGrid = styled.div`
     row-gap: 3rem;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     grid-template-columns: 1fr;
     row-gap: 1.5rem;
   }
@@ -28,7 +28,7 @@ const GridSection = styled.div`
   flex-direction: column;
   gap: 0.5rem;
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     :nth-child(3) {
       padding-top: 1.5rem;
     }
@@ -113,7 +113,7 @@ const WebsitesGrid = () => (
       <GridSectionHeading>Sustainability:</GridSectionHeading>
       <GridSectionEntry
         color={'#0128AA'}
-        imgSrc={'assets/websites-grid/intersect.svg'}
+        text={'Intersect'}
         url={''}
         index={3}
       />

diff --git a/src/components/Homepage/FloatingRadials/BackgroundFloatingRadials.tsx b/src/components/Homepage/FloatingRadials/BackgroundFloatingRadials.tsx
@@ -75,7 +75,7 @@ const floating2 = keyframes`
   `
 
 const TabletUpFloatingRadial = styled(FloatingRadial)`
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     display: none;
   }
 `

diff --git a/src/components/Homepage/Hero.tsx b/src/components/Homepage/Hero.tsx
@@ -23,36 +23,38 @@ const StyledHero = styled.div`
   }
 
   .site-hero {
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       margin: 9.625rem -0.5rem -3.75rem -0.5rem;
     }
     .heading-msg {
       width: 50%;
       text-align: left;
       color: #fff;
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         width: 100%;
       }
       h1 {
         margin-bottom: 1rem;
         font-size: 2.25rem;
         font-weight: 600;
         line-height: normal;
+        z-index: 1;
       }
       h2 {
         font-size: 1rem;
         line-height: 1.5rem;
         font-weight: 400;
         margin-bottom: 1rem;
+        z-index: 1;
       }
       p {
         font-weight: 400;
         font-size: 1rem;
         line-height: 1.4;
         margin-bottom: 2.5rem;
 
-        @media (max-width: 768px) {
+        @media (max-width: 767px) {
           margin-bottom: 0;
         }
       }
@@ -74,16 +76,17 @@ const RiveContainer = styled.div`
   flex-direction: column;
   align-items: center;
   margin: auto 0;
-  right: -500px;
+  right: -300px;
   top: 0;
 
   @media (max-width: 1024px) {
-    right: -300px;
+    top: 0px;
+    right: -200px;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     top: -100px;
-    right: -45%;
+    right: -25%;
   }
 `
 

diff --git a/src/components/Homepage/RiveArtboard.tsx b/src/components/Homepage/RiveArtboard.tsx
@@ -5,91 +5,105 @@ import {
   Alignment,
   useStateMachineInput,
 } from '@rive-app/react-webgl'
+import { useReduceMotion } from '@site/src/hooks/useReduceMotion'
 import { useSpring } from 'framer-motion'
-import { FC, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef } from 'react'
 
 const RiveArtboard: FC<{
   src: string
   artboard: string
   layourFit?: string
 }> = ({ src, artboard }) => {
   const ref = useRef<HTMLDivElement>(null)
+  const reduceMotion = useReduceMotion()
   const { rive, RiveComponent } = useRive({
     src: src,
+    stateMachines: 'State Machine 1',
     artboard: artboard,
-    stateMachines: ['State Machine 1'], // Replace with your actual state machine name
     layout: new Layout({
       fit: Fit.Cover,
       alignment: Alignment.Center,
     }),
-    autoplay: true,
+    autoplay: false,
+    useOffscreenRenderer: true,
   })
-
-  // Inputs for controlling the position of each part
-  const half1X = useStateMachineInput(rive, 'State Machine 1', 'half1X')
-  const half1Y = useStateMachineInput(rive, 'State Machine 1', 'half1Y')
-  const half2X = useStateMachineInput(rive, 'State Machine 1', 'half2X')
-  const half2Y = useStateMachineInput(rive, 'State Machine 1', 'half2Y')
-
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+  const x = useStateMachineInput(rive, 'State Machine 1', 'X')
+  const y = useStateMachineInput(rive, 'State Machine 1', 'Y')
 
   const xSpring = useSpring(0, { stiffness: 300, damping: 70 })
   const ySpring = useSpring(0, { stiffness: 300, damping: 70 })
 
   useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY })
+    if (reduceMotion) {
+      rive?.pause()
+    } else {
+      rive?.play()
     }
+  }, [rive, reduceMotion])
 
-    window.addEventListener('mousemove', handleMouseMove)
+  useEffect(() => {
+    if (!ref.current) return
 
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+    let active = true
+    let context: any = window
 
-  useEffect(() => {
-    // Normalize the mouse position relative to the viewport size (0 to 1)
-    const normalizedX = mousePosition.x / window.innerWidth
-    const normalizedY = mousePosition.y / window.innerHeight
+    if (!context) return
 
-    // Convert normalized values to a range suitable for Rive, e.g., -100 to 100
-    const xValue = normalizedX * 200 - 100
-    const yValue = normalizedY * 200 - 100
+    if (!x || !y) return
+    x.value = 0
+    y.value = 0
 
-    xSpring.set(xValue)
-    ySpring.set(yValue)
-  }, [mousePosition])
+    let mouseListener = (e: MouseEvent) => {
+      const rect = ref.current?.getBoundingClientRect()
 
-  useEffect(() => {
-    if (!half1X || !half1Y || !half2X || !half2Y) {
-      console.error('One or more inputs are not found:', {
-        half1X,
-        half1Y,
-        half2X,
-        half2Y,
-      })
-      return
+      const normalizedX = ((e.clientX - rect!.left) / rect!.width) * 0.5
+      const normalizedY = ((e.clientY - rect!.top) / rect!.height) * 0.5
+
+      const xValue = Math.min(1, Math.max(0, normalizedX))
+      const yValue = Math.min(1, Math.max(0, normalizedY))
+
+      const xValueNormalized = xValue * 250 - 99
+      const yValueNormalized = yValue * 250 - 99
+
+      if (x && x.value !== undefined) {
+        xSpring.set(xValueNormalized)
+      }
+      if (y && y.value !== undefined) {
+        ySpring.set(yValueNormalized)
+      }
     }
 
     xSpring.on('change', (value) => {
-      if (half1X) half1X.value = value
-      if (half2X) half2X.value = value
+      if (active && x && x.value !== undefined) {
+        x.value = value
+      }
     })
 
     ySpring.on('change', (value) => {
-      if (half1Y) half1Y.value = value
-      if (half2Y) half2Y.value = value
+      if (active && y && y.value !== undefined) {
+        y.value = value
+      }
     })
-  }, [xSpring, ySpring, half1X, half1Y, half2X, half2Y])
+
+    context.addEventListener('mousemove', mouseListener)
+
+    return () => {
+      active = false
+      context.removeEventListener('mousemove', mouseListener)
+    }
+  }, [ref, x, y])
 
   return (
     <div
       ref={ref}
-      style={{ width: '100%', height: '380px', overflow: 'hidden' }}
+      style={{ width: '100%', height: '450px', overflow: 'visible' }}
     >
       <RiveComponent
-        style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+        style={{
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+        }}
       />
     </div>
   )

diff --git a/src/components/Homepage/Section.tsx b/src/components/Homepage/Section.tsx
@@ -18,7 +18,7 @@ export const PaddingWrapper = styled('div')`
     padding: 4rem 0;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     padding: 3.5rem 0;
   }
 `

diff --git a/src/components/Homepage/Tile.tsx b/src/components/Homepage/Tile.tsx
@@ -32,7 +32,7 @@ const StyledTile = styled(motion.div)<{ bannerTile; boxedTile }>`
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     max-width: 289px;
     height: 390px;
   }
@@ -49,7 +49,7 @@ const StyledTile = styled(motion.div)<{ bannerTile; boxedTile }>`
     padding-top: 1.75rem;
     margin-top: auto;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       justify-self: flex-end;
     }
   }
@@ -129,7 +129,7 @@ const IconWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     min-height: 75px;
   }
 `
@@ -157,7 +157,6 @@ const Tile: React.FC<Props> = ({
   btn,
   index,
 }) => {
-  const isTabletUp = useMediaQuery('(min-width: 768px)')
   return (
     <Link href={ctalink}>
       <StyledTile

diff --git a/src/components/icons/Close.svg b/src/components/icons/Close.svg