메인 타이밍

src/css/common.css

@@ -23,10 +23,9 @@ body{overflow-x:hidden;}
 .main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
 
 .main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
-/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
+.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:transform,opacity,filter;}
-.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
+.main-bg-hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,20,.18) 0%,rgba(3,8,20,.28) 35%,rgba(3,8,20,.42) 100%),rgba(0,0,0,.18);pointer-events:none;}
-.hero-video{width:100%;height:100%;object-fit:cover;}
+.hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06) saturate(.96);transform:scale(1.02);}
-.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
 
 .main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
 .main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
@@ -44,17 +43,14 @@ body{overflow-x:hidden;}
 .main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
 
 .main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
-
 .main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
 
 .text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
-
 .text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
 
 .main-text .text-change{opacity:0;}
 
 .main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
-
 .main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
 
 .main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}

src/pages/MainPage.jsx

@@ -8,30 +8,27 @@ function MainPage() {
   const sectionRef = useRef(null);
   const bgRef = useRef(null);
   const hero2Ref = useRef(null);
-  const hero3Ref = useRef(null);
+  const videoRef = useRef(null);
   const text1Ref = useRef(null);
   const text2Ref = useRef(null);
-  const text3Ref = useRef(null);
   const progressBarRef = useRef(null);
 
   useEffect(() => {
     const ctx = gsap.context(() => {
-      gsap.set(hero2Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" });
+      const videoEl = videoRef.current;
-      gsap.set(hero3Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" });
 
-      gsap.set(text2Ref.current, {
+      if (videoEl) {
-        opacity: 0,
+        videoEl.pause();
-        y: 48,
+        videoEl.currentTime = 0;
-        x: 0,
+      }
-        scale: 0.96,
+
-        filter: "blur(10px)",
+      gsap.set(hero2Ref.current, { opacity: 0, scale: 1.12, filter: "blur(12px)" });
-      });
 
-      gsap.set(text3Ref.current, {
+      gsap.set(text2Ref.current, {
         opacity: 0,
-        y: 48,
+        y: 54,
         x: 0,
-        scale: 0.96,
+        scale: 0.965,
         filter: "blur(10px)",
       });
 
@@ -41,42 +38,56 @@ function MainPage() {
       const darkHeroTrigger = ScrollTrigger.create({
         trigger: sectionRef.current,
         start: "top top",
-        end: "+=2600",
+        end: "+=3000",
         onEnter: () => document.body.classList.add("is-dark-hero"),
         onEnterBack: () => document.body.classList.add("is-dark-hero"),
         onLeave: () => document.body.classList.remove("is-dark-hero"),
         onLeaveBack: () => document.body.classList.remove("is-dark-hero"),
       });
 
+      let hero2Started = false;
+
       const tl = gsap.timeline({
         scrollTrigger: {
           trigger: sectionRef.current,
           start: "top top",
-          end: "+=2600",
+          end: "+=3000",
-          scrub: 1.2,
+          scrub: 1.15,
           pin: true,
           anticipatePin: 1,
+          onUpdate: (self) => {
+            if (!videoEl) return;
+
+            if (self.progress >= 0.42 && !hero2Started) {
+              hero2Started = true;
+              videoEl.currentTime = 0;
+              videoEl.play().catch(() => {});
+            }
+
+            if (self.progress < 0.42 && hero2Started) {
+              hero2Started = false;
+              videoEl.pause();
+              videoEl.currentTime = 0;
+            }
+          },
         },
       });
 
       tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "none" }, 0)
         .to(bgRef.current, { scale: 1.08, ease: "none" }, 0)
         .to(progressBarRef.current, { width: "100%", ease: "none" }, 0)
-        .to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.12, duration: 1.2 }, 0.08)
+        .to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.14, duration: 1.35 }, 0.1)
-
-        .to(text1Ref.current, { opacity: 0, y: -40, filter: "blur(8px)", ease: "none" }, 1.35)
-
-        .to(hero2Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 1.15)
-        .to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.24)
-
-        .to(hero2Ref.current, { scale: 1.1, ease: "none" }, 1.72)
-        .to(text2Ref.current, { opacity: 0, y: -28, scale: 0.98, filter: "blur(8px)", ease: "none" }, 2.02);
 
-      // .to(hero3Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 2.14)
+        .to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.55)
-      // .to(text3Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 2.28)
+        .to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.78)
-      // .to(hero3Ref.current, { scale: 1.08, ease: "none" }, 2.82);
+        .to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.95)
+        .to(hero2Ref.current, { scale: 1.095, ease: "none" }, 2.5);
 
       return () => {
+        if (videoEl) {
+          videoEl.pause();
+          videoEl.currentTime = 0;
+        }
         darkHeroTrigger.kill();
         document.body.classList.remove("is-dark-hero");
       };
@@ -91,10 +102,10 @@ function MainPage() {
         <div className="main-bg-wrap">
           <div className="main-bg" ref={bgRef}>
             <div className="main-bg-hero1"></div>
+
             <div className="main-bg-hero2" ref={hero2Ref}>
-              <video className="hero-video" src="./images/test.mp4" autoPlay muted loop playsInline />
+              <video ref={videoRef} className="hero-video" src="./images/test.mp4" muted loop playsInline preload="auto" />
             </div>
-            {/* <div className="main-bg-hero3" ref={hero3Ref}></div> */}
 
             <div className="main-visible-atmo main-visible-atmo1"></div>
             <div className="main-visible-atmo main-visible-atmo2"></div>
@@ -116,12 +127,6 @@ function MainPage() {
                 <br />
                 안전한 하늘길을 설계합니다
               </div>
-
-              {/* <div className="text text-change text-center-hero" ref={text3Ref}>
-                공역관리와 드론 교통관리(UTM)를 기반으로
-                <br />
-                실제 운영 가능한 항공 시스템을 구축합니다
-              </div> */}
             </div>
 
             <div className="main-progress">