Added GridHelper, added smooth text fade transition

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);