Tsiklic1/explore work title fix

src/app/globals.css

@@ -90,17 +90,19 @@ video::-webkit-media-controls-start-playback-button {
 
 @keyframes scrolling-left1 {
   0% {
-    transform: translateX(200%);
+    transform: translateX(180vw);
   }
   100% {
-    transform: translateX(-200%);
+    transform: translateX(-180vw);
   }
-}
+} 
 @keyframes scrolling-left2 {
   0% {
-    transform: translateX(100%);
+    transform: translateX(120vw);
+    opacity: 100%;
   }
   100% {
-    transform: translateX(-300%);
+    transform: translateX(-240vw);
+    opacity: 100%;
   }
 }

src/common/StarContainer/StarContainer.tsx

@@ -112,15 +112,15 @@ const StarContainer: React.FC<Readonly<StarContainerProps>> = ({
   }, []);
 
   const updateStarsByProximity = useCallback(
-    ({ x, y }: Position) => {
+    ({ x, y, pageY }: PointerEvent) => {
       pointerPositionRef.current = { x, y };
 
       if (!starsRef.current) {
         return;
       }
 
       starsRef.current.forEach((star) => {
-        const distance = Math.sqrt(Math.pow(star.x - x, 2) + Math.pow(star.y - y, 2));
+        const distance = Math.sqrt(Math.pow(star.x - x, 2) + Math.pow(star.y - y - pageY / 9, 2));
         const scale = scaleMapperRef.current!(Math.min(distance, vminRef.current! * proximityRatio));
         const alpha = alphaMapperRef.current!(Math.min(distance, vminRef.current! * proximityRatio));
 

src/features/Projects/ProjectCard.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import projectsContent from '@/content/projects.json';
 import { cn } from '@/utils/classNames';
@@ -48,14 +48,19 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ name, image, background, xHan
               &nbsp;&nbsp;&nbsp;{name}
             </h1>
             <h1
+              id='1'
               className={cn(
                 'inline-block',
                 'h1 mix-blend-soft-light mb-6 text-[55px] leading-[44px]',
                 'md:text-[100px] md:leading-[86px]',
                 'lg:text-[170px] lg:leading-[166px] lg:h-[320px]',
                 '2xl:text-[257px] 2xl:leading-[214px] 2xl:h-[428px]',
+                'opacity-0',
               )}
-              style={{ animation: 'scrolling-left2 20s linear infinite', animationDelay: '10s' }}
+              style={{
+                animation: 'scrolling-left2 20s linear infinite',
+                animationDelay: '7s',
+              }}
             >
               &nbsp;&nbsp;&nbsp;{name}
             </h1>

src/features/Projects/ProjectSwiper.tsx

@@ -36,23 +36,25 @@ const ProjectSwiper = () => {
         effect='fade'
         rewind
       >
-        {projectsContent.PROJECTS.map(({ NAME, IMAGE, BACKGROUND, XHANDLE, YEAR, CLIENT, TAGS, XURL }) => (
-          <SwiperSlide
-            key={NAME}
-            className='!w-screen'
-          >
-            <ProjectCard
-              name={NAME}
-              image={IMAGE}
-              background={BACKGROUND}
-              xHandle={XHANDLE}
-              year={YEAR}
-              client={CLIENT}
-              tags={TAGS}
-              xUrl={XURL}
-            />
-          </SwiperSlide>
-        ))}
+        {projectsContent.PROJECTS.map(({ NAME, IMAGE, BACKGROUND, XHANDLE, YEAR, CLIENT, TAGS, XURL }) => {
+          return (
+            <SwiperSlide
+              key={NAME}
+              className='!w-screen'
+            >
+              <ProjectCard
+                name={NAME}
+                image={IMAGE}
+                background={BACKGROUND}
+                xHandle={XHANDLE}
+                year={YEAR}
+                client={CLIENT}
+                tags={TAGS}
+                xUrl={XURL}
+              />
+            </SwiperSlide>
+          );
+        })}
       </Swiper>
     </>
   );