From 89ce1530fc28686350d202dbf6f1149518867ce5 Mon Sep 17 00:00:00 2001
From: chris ha <chris.ha@thetradedesk.com>
Date: Thu, 5 Nov 2026 14:13:11 +0000
Subject: [PATCH] Staggered fade-up on first preview page load (420ms, 70ms
 steps)

Motion item W4: header, snapshot row, and workspace compose top-down once on
mount with a 420ms ease-out rise of 10px, staggered 70ms apart. Reconnects and
restarts never replay it (it is a mount-time CSS animation only), and
prefers-reduced-motion disables it.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
---
 preview/style.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/preview/style.css b/preview/style.css
index e42059d..2d90cab 100644
--- a/preview/style.css
+++ b/preview/style.css
@@ -34,6 +34,7 @@ header {
   gap: 24px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--rule);
+  animation: rise 420ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
 }
 .identity {
   display: flex;
@@ -87,6 +88,7 @@ a {
   font-size: 12px;
   line-height: 1.5;
   font-variant-numeric: tabular-nums;
+  animation: rise 420ms cubic-bezier(0.23, 1, 0.32, 1) 70ms backwards;
 }
 main {
   display: grid;
@@ -96,6 +98,13 @@ main {
   overflow: hidden;
   background: var(--surface);
   transition: grid-template-columns 340ms cubic-bezier(0.32, 0.72, 0, 1);
+  animation: rise 420ms cubic-bezier(0.23, 1, 0.32, 1) 140ms backwards;
+}
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
 }
 main.reading {
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
@@ -373,4 +382,9 @@ button:active,
   #status .st.in {
     animation: none;
   }
+  header,
+  .snapshot,
+  main {
+    animation: none;
+  }
 }