add post-boot frame structure

www/index.html

@@ -20,8 +20,8 @@
     <canvas id="bg-canvas"></canvas>
 
     <!-- Psuedo-Pseudo-Terminal -->
-    <div class="centered heading">
+    <div class="centered-container">
-      <div class="ppty" id="boot-ppty">
+      <div class="ppty centered cryframe" id="boot-ppty">
     
         <div class="ppty-block">
           <div class="ppty-prompt">
@@ -63,5 +63,20 @@
       </div>
     </div>
 
+    <main>
+      <audio autoplay>
+        <!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> -->
+        <source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg">
+        Your browser does not support the audio element.
+      </audio>
+    
+      <div class="centered-container">
+        <div class="centered cryframe" style="display: flex; flex-direction: row; gap: 20px;">
+          <img src="baked/avatar.png" loading="eager" height="150">
+          <p>hi!! i'm cry (they/them)</p>
+        </div>
+      </div>
+    </main>
+
   </body>
 </html>

www/js/main.js

@@ -24,7 +24,21 @@ function endBoot(root) {
     }
   );
 
-  fade.onfinish = () => root.remove();
+  fade.onfinish = () => {
+    root.remove();
+    document
+      .querySelector("main")
+      .animate(
+        [
+          { visibility: "visible" },
+          { visibility: "visible", opacity: 1 }
+        ],
+        {
+          duration: 400,
+          fill: "forwards",
+        }
+      );
+  }
 }
 
 function main() {