diff --git a/src/App.jsx b/src/App.jsx
index a83dc923..bd030250 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,16 @@
+import { useEffect } from "react";
+import IntroSection from "./introSection";
+
 function App() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    history.scrollRestoration = "manual";
+  }, []);
+
   return (
-    <div className="text-5xl graphic-gradient">
-      <div className="flex flex-col">
-        <span>다람쥐 헌 쳇바퀴에 타고파</span>
-        <span>Hyundai Sans Text Office</span>
-        <span className="font-ds-digital">0123456789</span>
-      </div>
-    </div>
+    <>
+      <IntroSection />
+    </>
   );
 }
 
diff --git a/src/introSection/car-spin.mp4 b/src/introSection/car-spin.mp4
new file mode 100644
index 00000000..eb5a4c41
Binary files /dev/null and b/src/introSection/car-spin.mp4 differ
diff --git a/src/introSection/index.jsx b/src/introSection/index.jsx
index c01262ec..75cb1f54 100644
--- a/src/introSection/index.jsx
+++ b/src/introSection/index.jsx
@@ -1,6 +1,11 @@
 import useScrollTransition from "@/common/useScrollTransition.js";
+import vector from "./vector.svg";
+import style from "./index.module.css";
+import SpinningCarVideo from "./car-spin.mp4";
+import { useEffect, useRef } from "react";
 
 function IntroSection() {
+  const videoRef = useRef(null);
   const titleOpacity = useScrollTransition({
     scrollStart: 0,
     scrollEnd: 500,
@@ -12,14 +17,42 @@ function IntroSection() {
     opacity: titleOpacity,
   };
 
+  const videoTimeline = useScrollTransition({
+    scrollStart: 500,
+    scrollEnd: 1300,
+    valueStart: 0,
+    valueEnd: 2,
+  });
+
+  useEffect(() => {
+    videoRef.current.currentTime = videoTimeline;
+  }, [videoTimeline]);
+
   return (
     <div className="h-[2160px]">
-      <h1
-        className="text-8xl w-full flex items-center justify-center absolute top-[500px]"
-        style={titleStyle}
-      >
-        The new IONIQ 5
-      </h1>
+      <div className="z-50 fixed w-full flex justify-center top-[500px] -translate-y-1/2">
+        <h1
+          className={`${style.openTitle} ease-in text-8xl font-bold z-50`}
+          style={titleStyle}
+        >
+          The new IONIQ 5
+        </h1>
+
+        <div
+          className="absolute top-[66px] z-0 overflow-hidden"
+          style={titleStyle}
+        >
+          <img src={vector} />
+
+          <div
+            className={`${style.openVector} w-full h-full bg-white absolute top-0`}
+          />
+        </div>
+      </div>
+
+      <div className="mt-[800px] flex justify-center items-center overflow-hidden z-0">
+        <video src={SpinningCarVideo} ref={videoRef} className="scale-125" />
+      </div>
     </div>
   );
 }
diff --git a/src/introSection/index.module.css b/src/introSection/index.module.css
new file mode 100644
index 00000000..57d30697
--- /dev/null
+++ b/src/introSection/index.module.css
@@ -0,0 +1,27 @@
+.openTitle {
+  animation: open-title 0.5s ease-in-out;
+}
+
+@keyframes open-title {
+  from {
+    transform: translateY(80px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+
+.openVector {
+  animation: open-vector 0.3s ease-in-out 0.3s forwards;
+}
+
+@keyframes open-vector {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
\ No newline at end of file
diff --git a/src/introSection/vector.svg b/src/introSection/vector.svg
new file mode 100644
index 00000000..17133f94
--- /dev/null
+++ b/src/introSection/vector.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="808" height="47" viewBox="0 0 808 47" fill="none">
+  <path d="M10.3035 36.014C16.8072 35.8761 23.0392 35.0956 29.423 34.3444C72.8649 29.233 116.318 24.8301 160.561 23.0018C202.39 21.2733 244.061 18.73 285.855 16.7248C336.338 14.3026 386.656 13.6948 437.181 13.2858C481.317 12.9285 525.453 11.411 569.59 10.8226C612.985 10.2441 656.203 10.6204 699.472 11.6882C724.41 12.3037 748.936 14.2539 773.784 15.1688C781.807 15.4642 789.751 16.3816 797.831 16.2103" stroke="url(#paint0_linear_4220_1683)" stroke-width="20" stroke-linecap="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_4220_1683" x1="10.1518" y1="28.8581" x2="797.745" y2="12.1558" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3ED7BE"/>
+      <stop offset="1" stop-color="#069AF8"/>
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/tailwind.redefine.js b/tailwind.redefine.js
index b86db9b6..753b1b59 100644
--- a/tailwind.redefine.js
+++ b/tailwind.redefine.js
@@ -69,6 +69,6 @@ export default {
     "title-l": ["32px", "44px"],
     "head-s": ["36px", "52px"],
     "head-m": ["45px", "64px"],
-    "head-l": ["57px", "80px"]
-  }
+    "head-l": ["57px", "80px"],
+  },
 };