diff --git a/components/Header.tsx b/components/Header.tsx
index 04b7567b..e7b417b5 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -5,7 +5,6 @@ import React from "react";
 import SignIn from "~/components/SignIn";
 import { BASE_DOMAIN } from "~/utils/constants";
 import Github from "../components/GitHub";
-
 const poppins = Poppins({ weight: "800", subsets: ["latin"] });
 
 export default function Header() {
diff --git a/package-lock.json b/package-lock.json
index 602ffa0c..630c2c1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hot-toast": "^2.4.0",
+        "react-type-animation": "^2.1.2",
         "react-use": "^17.4.0",
         "react-use-measure": "^2.1.1",
         "tailwind-merge": "^1.10.0",
@@ -3703,6 +3704,16 @@
         }
       }
     },
+    "node_modules/react-type-animation": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-2.1.2.tgz",
+      "integrity": "sha512-6/t4Whl87sLR0c8kzvJngTrCV6OVy3jEeUZoe2svVu9VaYr951VD7OeUie1rIyeD8JfpBIqZGYrPFHZQ04XHrw==",
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": ">= 15.0.0",
+        "react-dom": ">= 15.0.0"
+      }
+    },
     "node_modules/react-universal-interface": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
@@ -6943,6 +6954,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "react-type-animation": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-2.1.2.tgz",
+      "integrity": "sha512-6/t4Whl87sLR0c8kzvJngTrCV6OVy3jEeUZoe2svVu9VaYr951VD7OeUie1rIyeD8JfpBIqZGYrPFHZQ04XHrw==",
+      "requires": {}
+    },
     "react-universal-interface": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
diff --git a/package.json b/package.json
index 4377f902..9b7e1fd5 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.0",
+    "react-type-animation": "^2.1.2",
     "react-use": "^17.4.0",
     "react-use-measure": "^2.1.1",
     "tailwind-merge": "^1.10.0",
diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index f585e624..cdc57a9a 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -7,9 +7,10 @@ import { useLocalStorage } from "react-use";
 import { useToast } from "~/hooks/use-toast";
 import Sentence from "../components/Sentence";
 import SquigglyLines from "../components/SquigglyLines";
-import { useSummarize } from "../hooks/useSummarize";
-import { CHECKOUT_URL } from "../utils/constants";
-import { extractTimestamp } from "../utils/extractTimestamp";
+import { useSummarize } from "~/hooks/useSummarize";
+import { CHECKOUT_URL } from "~/utils/constants";
+import { extractTimestamp } from "~/utils/extractTimestamp";
+import { TypeAnimation } from "react-type-animation";
 
 let isSecureContext = false;
 
@@ -139,9 +140,27 @@ export const Home: NextPage = () => {
       </a>
       <h1 className="max-w-5xl text-center text-4xl font-bold sm:text-7xl">
         一键总结{" "}
-        <span className="relative whitespace-nowrap text-[#3290EE]">
+        <span className="relative whitespace-nowrap	text-pink-400">
           <SquigglyLines />
-          <span className="relative text-pink-400	">哔哩哔哩</span>
+          <TypeAnimation
+            sequence={[
+              "哔哩哔哩",
+              2000,
+              "YouTube",
+              2000,
+              "播客",
+              2000,
+              "会议",
+              3000,
+              () => {
+                console.log("Done typing!"); // Place optional callbacks anywhere in the array
+              },
+            ]}
+            wrapper="span"
+            cursor={true}
+            repeat={Infinity}
+            className="relative text-pink-400	"
+          />
         </span>{" "}
         视频内容 <br />
         <div className="mt-4">Powered by GPT-3.5 AI</div>