diff --git a/_includes/nav.html b/_includes/nav.html
index b9d0c45..f0a4fa5 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,3 +1,22 @@
+<div class="vtuber-top">
+	<div class="vtuber-brand">
+		<picture>
+			<source srcset="/static/img/vtuber-dark.png 1x" media="(prefers-color-scheme: dark)"></source>
+			<img src="/static/img/vtuber-light.png"></img>
+		</picture>
+		<div class="vtuber-title">
+			清华大学开源软件镜像站
+		</div>
+	</div>
+
+	<div class="vtuber-backdrops">
+		<div class="vtuber-backdrop-1"></div>
+		<div class="vtuber-backdrop-2"></div>
+		<div class="vtuber-backdrop-3"></div>
+		<div class="vtuber-backdrop-4"></div>
+	</div>
+</div>
+
 <div class="navbar navbar-expand-lg navbar-default mt-3" role="navigation">
   <div class="container-fluid container-xl">
     <div class="navbar-header">
diff --git a/_layouts/index.html b/_layouts/index.html
index c0bf3e3..49c12ab 100644
--- a/_layouts/index.html
+++ b/_layouts/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html {% if site.issue %}class="index-issue"{% endif %} lang="zh-Hans">
+<html {% if site.issue %}class="index-issue"{% endif %} lang="zh-Hans" style="--scroll-top: 0">
 	{% include head.html notArticle=true %}
 	<body>
 		{% unless page.legacy or site.issue %}
diff --git a/_src/entrypoints/app.ts b/_src/entrypoints/app.ts
index c57ad01..8b735dd 100644
--- a/_src/entrypoints/app.ts
+++ b/_src/entrypoints/app.ts
@@ -21,3 +21,7 @@ createApp(IsoModal, {
 }).mount(isoModalEl);
 
 createApp(MainMirrorList).mount("#mirror-list");
+
+window.addEventListener('scroll', (e) => {
+  document.body.style.setProperty('--scroll-top', (window.scrollY / window.innerHeight).toString());
+});
\ No newline at end of file
diff --git a/_src/styles/global.scss b/_src/styles/global.scss
index dbc6f06..c665465 100644
--- a/_src/styles/global.scss
+++ b/_src/styles/global.scss
@@ -205,3 +205,74 @@ a {
     margin-right: 5px;
   }
 }
+
+.vtuber-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+
+  .vtuber-brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    picture, img {
+      width: 50vw;
+    }
+
+    .vtuber-title {
+      margin-top: 10px;
+      font-size: 42px;
+      font-weight: 700;
+
+      text-align: center;
+      letter-spacing: 0.2em;
+    }
+  }
+}
+
+.vtuber-backdrops {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  height: 100vh;
+
+  z-index: -1;
+  overflow: hidden;
+}
+
+.vtuber-backdrop-1 {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  background-color: var(--bs-body-bg);
+}
+
+.vtuber-backdrop-2 {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  background-color: blue;
+}
+
+.vtuber-backdrop-3 {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  background-color: green;
+}
+
+.vtuber-backdrop-4 {
+  position: absolute;
+  height: 100vh;
+  width: 200vw;
+  background-color: red;
+
+  box-shadow: rgba(0,0,0,.7) 0 -2px 6px;
+
+  transform: rotate(calc(var(--scroll-top) * 20deg + 10deg)) translateX(calc(var(--scroll-top) * 100vh - 10px))
+}
\ No newline at end of file
diff --git a/static/img/vtuber-dark.png b/static/img/vtuber-dark.png
new file mode 100644
index 0000000..14cf0aa
Binary files /dev/null and b/static/img/vtuber-dark.png differ
diff --git a/static/img/vtuber-light.png b/static/img/vtuber-light.png
new file mode 100644
index 0000000..5149398
Binary files /dev/null and b/static/img/vtuber-light.png differ
