From 6ad0451a793ebcdd56f372b158077f7619462c94 Mon Sep 17 00:00:00 2001
From: chris ha <chris.ha@thetradedesk.com>
Date: Thu, 5 Nov 2026 15:41:26 +0000
Subject: [PATCH] Fade the preview terminal in when the session becomes ready
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first TUI frame used to pop in instantly when the snapshot session
reported ready. #terminal now starts in a .boot state (opacity 0, 6px down)
and eases to full visibility over 300ms ease-out when the first frame is
written — on initial load and on every restart. prefers-reduced-motion shows
the terminal instantly.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
---
 preview/app.js     |  2 ++
 preview/index.html |  2 +-
 preview/style.css  | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

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;
+  }
 }