diff --git a/index.html b/index.html
index 63a9553..61499e8 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
 </head>
 
 <body>
+    <script type="module" src="/src/main.ts"></script>
     <div id="app">
         <div class="text">
             <h1>hi! i'm august. or kline. </h1>
@@ -29,7 +30,6 @@
         <div id="background">
         </div>
     </div>
-    <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
diff --git a/src/main.ts b/src/main.ts
index 587d205..8554705 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -170,6 +170,10 @@ const onMove = (ev: MouseEvent) => {
   root.style.setProperty("--rotate-y", rotateY);
 };
 
+window.addEventListener("load", () => {
+  background.setAttribute("loaded", "");
+  console.log(background);
+});
 document.addEventListener("mousemove", onMove);
 
 setImages();
diff --git a/style.css b/style.css
index 3ceba07..91f5289 100644
--- a/style.css
+++ b/style.css
@@ -69,7 +69,8 @@ a:hover {
 
 img {
     transform: translate(-50%, -50%) translateZ(var(--translate-z));
-    transition: transform 1s;
+    transition: opacity 0.3s;
+    opacity: 0;
     position: absolute;
     inline-size: 10%;
     z-index: -1;
@@ -90,6 +91,10 @@ img {
     block-size: 100%;
     z-index: -1;
     position: absolute;
+
+    &[loaded] img {
+        opacity: 1 !important;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {
