fix: hand orbit

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

@@ -220,8 +220,8 @@
   }
 
   position: absolute;
-  width: tovw(270px, 'default', 270px);
-  height: tovw(270px, 'default', 270px);
+  width: tovw(270px, 'default', 240px);
+  height: tovw(270px, 'default', 240px);
   background-color: var(--color-white);
   box-shadow: 0px 4px 115px 15px #0000f4, 0px 0px 70px 20px #0a33ff,
     inset -39px -20px 100px rgb(0 0 244 / 0.73);
@@ -229,8 +229,17 @@
   overflow: hidden;
   top: 39.2%;
   left: 20.7%;
-  z-index: -1;
+  z-index: -2;
   mix-blend-mode: screen;
+
+  &__line {
+    position: absolute;
+    visibility: hidden;
+    top: 41.2%;
+    left: 22.7%;
+    width: tovw(1065px, 'default', 270px);
+    height: tovw(746px, 'default', 270px);
+  }
 }
 
 [data-theme='light'] {

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

@@ -101,10 +101,9 @@ const Benefits = ({ data }: Props) => {
       ease: 'power2.inOut',
       overwrite: true,
       motionPath: {
-        path: `M3.99988.5S35.5 437.5 456.999 457C895.558 477.289 ${vw * 45} ${
-          vw * 30
-        } ${vw * 45} ${vw * 30}`,
-        align: 'self'
+        path: '#ballLine',
+        align: '#ballLine',
+        alignOrigin: [0.5, 0.5]
       },
       scrollTrigger: {
         trigger: gridRef.current,
@@ -126,6 +125,18 @@ const Benefits = ({ data }: Props) => {
           {data?.benefitsHeading}
         </Heading>
         <div className={s['grid']}>
+          <svg
+            className={s['ball__line']}
+            viewBox="0 0 1065 746"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              id="ballLine"
+              d="M23.346,80.525 C23.346,111.498 114.301,356.382 467.081,368.991 687.763,376.878 979.263,443.612 1059.428,735.994"
+              stroke="none"
+            />
+          </svg>
           <div className={s['ball']} ref={ballRef} />
           <div className={s['icon']}>
             <Arrow />

src/lib/gsap/index.tsx

@@ -8,14 +8,13 @@ import { SplitText } from 'gsap/dist/SplitText'
 
 gsap.registerPlugin(
   CustomEase,
+  MotionPathPlugin,
   Observer,
   ScrollSmoother,
   ScrollTrigger,
   SplitText
 )
 
-gsap.registerPlugin(MotionPathPlugin)
-
 const GOLDEN_RATIO = (1 + Math.sqrt(5)) / 2
 const RECIPROCAL_GR = 1 / GOLDEN_RATIO
 const DURATION = RECIPROCAL_GR * 0.85
@@ -34,6 +33,8 @@ gsap.config({
   nullTargetWarn: false
 })
 
+gsap.ticker.lagSmoothing(50, 100)
+
 gsap.defaults({
   ease: 'EaseIn',
   duration: DURATION