Added GridHelper, added smooth text fade transition

main.css

@@ -4,6 +4,7 @@ body, html {
   overflow: hidden; /* Prevents scrollbars */
   width: 100vw;
   height: 100vh;
+  background-color: #e6e6e6;
 }
 
 @media (max-width: 600px) {
@@ -59,9 +60,10 @@ body, html {
 	user-select: none;
 	pointer-events: none;
 	z-index: 1; /* TODO Solve this in HTML */
-    font-family: 'SF Pro Medium';
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'SF Pro Medium';
+  font-weight: normal;
+  font-style: normal;
+  display: none;
 
 }
 
@@ -78,10 +80,10 @@ body, html {
 	user-select: none;
 	pointer-events: none;
 	z-index: 1; /* TODO Solve this in HTML */
-    font-family: 'Blender Pro Bold';
-    font-weight: normal;
-    font-style: normal;
-
+  font-family: 'Blender Pro Bold';
+  font-weight: normal;
+  font-style: normal;
+  display: none;
 }
 
 h1 {

main.js

@@ -22,6 +22,13 @@ fetch('model-index.json')
     startApp();
   });
 
+  //Add grid
+const size = 50;
+const divisions = 200;
+const centerlinecolor = 0xcccccc;
+const linecolor = 0xe0e0e0;
+const gridHelper = new THREE.GridHelper(size, divisions, centerlinecolor, linecolor);
+scene.add(gridHelper);
 
 //RENDERER
 const renderer = new THREE.WebGLRenderer({antialias:true});
@@ -82,6 +89,7 @@ function updateNameText(name) {
     const trimmedstart = name.slice(11);
     titleElement.textContent = trimmedstart;
     titleElement.style.fontStyle = "italic"; //italicize scientific name
+
 }
 
 
@@ -210,4 +218,31 @@ function animate( time ) {
 
   controls.update();
   renderer.render( scene, camera );
-}
+}
+
+//Show Info div after 5 seconds after initial load
+setTimeout(() => {
+    const infoElement = document.getElementById('info');
+    const mabuligheaderElement = document.getElementById('mabuligheader');
+
+    infoElement.style.display = 'block';
+    mabuligheaderElement.style.display = 'block';
+
+    infoElement.animate([
+        { opacity: 0 },
+        { opacity: 1 }
+    ], {
+        duration: 500, // Duration in milliseconds (500ms = 0.5s)
+        easing: 'ease-in-out',
+        fill: 'forwards' // Keeps the final state (opacity: 1) when the animation ends
+    });
+
+    mabuligheaderElement.animate([
+        { opacity: 0 },
+        { opacity: 1 }
+    ], {
+        duration: 500,
+        easing: 'ease-in-out',
+        fill: 'forwards'
+    });
+}, 750);