diff --git a/preview/app.js b/preview/app.js
index ed08fc2..696c7c8 100644
--- a/preview/app.js
+++ b/preview/app.js
@@ -110,6 +110,7 @@
     snapshot = undefined;
     $('capture').textContent = 'Loading snapshot…';
     term.reset();
+    $('terminal').classList.add('boot');
     ready = false;
     state('Starting preview…');
     $('restart').hidden = true;
@@ -156,6 +157,7 @@
           for (const data of pending) term.write(new Uint8Array(data));
           pending.length = 0;
           ready = true;
+          $('terminal').classList.remove('boot');
           state('Ready');
           if (matchMedia('(pointer:fine)').matches) term.focus();
         } catch (error) {
diff --git a/preview/index.html b/preview/index.html
index b6c8295..6a1abbd 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -41,7 +41,7 @@ <h1>hn.</h1>
             ><button id="restart" hidden>Restart preview</button>
           </div>
         </div>
-        <div id="terminal"></div>
+        <div id="terminal" class="boot"></div>
         <p class="hint">Click or tap the terminal to type. Press <kbd>?</kbd> for keys.</p>
       </section>
       <section id="article-panel" class="article-panel" aria-label="Article browser" hidden>
diff --git a/preview/style.css b/preview/style.css
index 2d90cab..c67c974 100644
--- a/preview/style.css
+++ b/preview/style.css
@@ -177,6 +177,13 @@ main.reading {
   height: clamp(420px, calc(100svh - 300px), 820px);
   margin: 14px 14px 0;
   overflow: hidden;
+  transition:
+    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
+    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+#terminal.boot {
+  opacity: 0;
+  transform: translateY(6px);
 }
 .hint {
   margin: 12px 16px 16px;
@@ -387,4 +394,11 @@ button:active,
   main {
     animation: none;
   }
+  #terminal {
+    transition: none;
+  }
+  #terminal.boot {
+    opacity: 1;
+    transform: none;
+  }
 }