From c145037aad121bb9f6fd6e9068ff3cf77fb86a48 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Wed, 8 Jul 2026 18:25:03 +0100
Subject: [PATCH] feat(desktop): flapping bee on the setup loading screen
 (#1631)

Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: klopez4212 <klopez4212@gmail.com>
Co-authored-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 desktop/index.html                            |  42 ++-
 desktop/playwright.config.ts                  |   1 +
 desktop/src-tauri/tauri.conf.json             |   2 +-
 desktop/src/app/App.tsx                       | 123 +++++++-
 desktop/src/app/ThemeGrainientBackground.tsx  |  12 +
 .../src/shared/styles/globals/animations.css  | 277 ++++++++++++++++++
 .../src/shared/ui/buzz-logo/FlappingBee.tsx   | 117 ++++++++
 desktop/tests/e2e/boot-splash.spec.ts         |  57 ++++
 desktop/tests/e2e/onboarding.spec.ts          |  54 ++--
 9 files changed, 651 insertions(+), 34 deletions(-)
 create mode 100644 desktop/src/app/ThemeGrainientBackground.tsx
 create mode 100644 desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
 create mode 100644 desktop/tests/e2e/boot-splash.spec.ts

diff --git a/desktop/index.html b/desktop/index.html
index 31d90dc4d..c219f214d 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -6,18 +6,48 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
     <!--
-      Boot background: the document must be black from its very first paint,
-      before the app bundle (and its stylesheets) load, so cold boot never
-      flashes white ahead of the loading gate. The window itself is also
-      black pre-document via `backgroundColor` in tauri.conf.json. The body
-      paints its own themed background once the app CSS loads, so this never
-      shows through after boot.
+      Boot background: the document must be painted before the app bundle (and
+      its stylesheets) load so cold boot never flashes ahead of the loading
+      gate. The window itself is also painted pre-document via `backgroundColor`
+      in tauri.conf.json. The body paints its own themed background once the app
+      CSS loads, so this never shows through after boot.
+
+      The inline script below reads the cached theme background (same
+      `buzz-theme-cache` entry ThemeProvider writes) and applies it synchronously
+      so the boot color matches the themed loading gate — no black flash on light
+      themes. On the first-ever launch (no cache yet) it seeds the `dark` class
+      synchronously so the setup gate reads the dark `:root` vars instead of the
+      light Catppuccin-Latte default, matching the dark `houston` theme
+      ThemeProvider applies moments later — no light flash before it loads.
     -->
     <style>
       html {
         background-color: #000;
       }
     </style>
+    <script>
+      (() => {
+        var cached, bg, parsed;
+        try {
+          cached = window.localStorage.getItem("buzz-theme-cache");
+          if (!cached) {
+            // No stored theme: the default theme (`houston`) is dark, so seed
+            // the `dark` class now. Otherwise the setup gate would paint from
+            // the light `:root` vars until ThemeProvider loads asynchronously.
+            document.documentElement.classList.add("dark");
+            return;
+          }
+          parsed = JSON.parse(cached);
+          bg = parsed.vars["--background"];
+          if (bg) document.documentElement.style.backgroundColor = `hsl(${bg})`;
+          // Match the cached light/dark class so themed vars resolve correctly
+          // before ThemeProvider mounts.
+          document.documentElement.classList.add(parsed.isDark ? "dark" : "light");
+        } catch {
+          /* fall back to the black default above */
+        }
+      })();
+    </script>
   </head>
 
   <body>
diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 178cd47c3..440d8fac5 100644
--- a/desktop/playwright.config.ts
+++ b/desktop/playwright.config.ts
@@ -61,6 +61,7 @@ export default defineConfig({
         "**/top-chrome-zoom-clearance.spec.ts",
         "**/thread-unread.spec.ts",
         "**/workspace-rail.spec.ts",
+        "**/boot-splash.spec.ts",
         "**/thread-reply-anchor-roleplay.spec.ts",
         "**/threadpane-ultrawide.spec.ts",
         "**/animated-avatar.spec.ts",
diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index c33f3443b..7bcc434f7 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -20,7 +20,7 @@
         "width": 800,
         "height": 600,
         "maximized": true,
-        "visible": false,
+        "visible": true,
         "backgroundColor": "#000000",
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
diff --git a/desktop/src/app/App.tsx b/desktop/src/app/App.tsx
index c3624af24..a830cfd2e 100644
--- a/desktop/src/app/App.tsx
+++ b/desktop/src/app/App.tsx
@@ -12,6 +12,7 @@ import {
 } from "react";
 
 import { router } from "@/app/router";
+import { ThemeGrainientBackground } from "@/app/ThemeGrainientBackground";
 import { useReloadShortcut } from "@/app/useReloadShortcut";
 import { useAppOnboardingState } from "@/features/onboarding/hooks";
 import { OnboardingSlideTransition } from "@/features/onboarding/ui/OnboardingSlideTransition";
@@ -25,27 +26,108 @@ import { createBuzzQueryClient } from "@/shared/api/queryClient";
 import { isSharedIdentity as isSharedIdentityCmd } from "@/shared/api/tauri";
 import { listenForDeepLinks } from "@/shared/deep-link";
 import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { BuzzMark } from "@/shared/ui/buzz-logo/BuzzMark";
-import { Spinner } from "@/shared/ui/spinner";
+import { FlappingBee } from "@/shared/ui/buzz-logo/FlappingBee";
+import { FuzzyLogo } from "@/shared/ui/buzz-logo/FuzzyLogo";
 import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 import { StepProgress } from "@/shared/ui/step-progress";
 
 const LOADING_TEXT = "Setting up your workspace...";
 
-// Cold boot gate: a plain static Buzz mark (#D7D72E) on solid black. No
-// animation machinery, no gradient — the mark must paint complete on the very
-// first frame, even in webviews that render before scripting or SMIL start.
+// Minimum time the cold-boot splash stays on screen. A real boot resolves the
+// workspace in well under 100ms, and the hidden Tauri window (visible:false
+// until getCurrentWindow().show()) takes longer than that to put its first
+// frame on screen — without a hold, the bee is unmounted before it is ever
+// visible. The hold runs as an overlay above the already-mounted app, so
+// time-to-interactive is unchanged; only the reveal waits.
+const BOOT_SPLASH_MIN_VISIBLE_MS = 1_200;
+const BOOT_SPLASH_FADE_MS = 200;
+
+type BootSplashPhase = "holding" | "fading" | "done";
+
+// E2E runs skip the hold (it would slow every spec's boot and block pointer
+// actionability); a spec can opt back in via __BUZZ_E2E__.bootSplashHoldMs.
+function bootSplashHoldMs(): number {
+  const e2e = (
+    window as Window & {
+      __BUZZ_E2E__?: { bootSplashHoldMs?: number };
+    }
+  ).__BUZZ_E2E__;
+  if (e2e) {
+    return e2e.bootSplashHoldMs ?? 0;
+  }
+  return BOOT_SPLASH_MIN_VISIBLE_MS;
+}
+
+function useBootSplashHold(): BootSplashPhase {
+  const [phase, setPhase] = useState<BootSplashPhase>(() =>
+    bootSplashHoldMs() > 0 ? "holding" : "done",
+  );
+
+  useEffect(() => {
+    const holdMs = bootSplashHoldMs();
+    if (holdMs <= 0) {
+      return;
+    }
+    const fadeTimer = window.setTimeout(() => setPhase("fading"), holdMs);
+    const doneTimer = window.setTimeout(
+      () => setPhase("done"),
+      holdMs + BOOT_SPLASH_FADE_MS,
+    );
+    return () => {
+      window.clearTimeout(fadeTimer);
+      window.clearTimeout(doneTimer);
+    };
+  }, []);
+
+  return phase;
+}
+
+// Animated Buzz mark for the loading gates. The static BuzzMark renders in
+// normal flow and sizes the box — it's plain SVG (no JS/SMIL), so it paints on
+// the very first frame even before scripting starts, avoiding a blank flash on
+// hard reload. The animated FuzzyLogo is layered on top and takes over once it
+// begins playing.
+function BeeLoader({
+  ariaLabel,
+  className,
+  tintClassName = "text-foreground",
+}: {
+  ariaLabel: string;
+  className?: string;
+  tintClassName?: string;
+}) {
+  return (
+    <div className={cn("relative", tintClassName, className)}>
+      <BuzzMark className="block h-auto w-full" />
+      <FuzzyLogo
+        ariaLabel={ariaLabel}
+        className="absolute inset-0 h-full! w-full! [&>svg]:h-full [&>svg]:w-full [&>svg]:max-w-full"
+        fuzz
+        loop
+        loopRestSeconds={0}
+      />
+    </div>
+  );
+}
+
+// Cold boot gate: the theme-adaptive grainient background with a single
+// centered Buzz bee flying over it — the same static mark as before, now with
+// its wings flapping (ported from the Buzz website's wing-flap). Replaces the
+// old "Setting up your workspace" text, which stays as an sr-only caption.
 function AppLoadingGate() {
   return (
     <div
-      className="flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-black px-6 py-10 text-[#d7d72e]"
+      className="buzz-setup-loading-shell flex min-h-dvh flex-col items-center justify-center overflow-hidden px-6 py-10"
       data-testid="app-loading-gate"
       role="status"
     >
       <StartupWindowDragRegion />
+      <ThemeGrainientBackground />
       <span className="sr-only">{LOADING_TEXT}</span>
-      <BuzzMark className="h-auto w-28" />
+      <FlappingBee className="relative z-10 h-auto w-28" />
     </div>
   );
 }
@@ -69,7 +151,11 @@ function WorkspaceSwitchGate() {
       <StartupWindowDragRegion />
       <span className="sr-only">Switching workspace…</span>
       {showSpinner ? (
-        <Spinner aria-hidden="true" className="text-muted-foreground" />
+        <BeeLoader
+          ariaLabel="Switching workspace…"
+          className="h-auto w-20"
+          tintClassName="text-muted-foreground"
+        />
       ) : null}
     </div>
   );
@@ -313,6 +399,8 @@ export function App() {
     setIsCompletingFirstRunWorkspace(false);
   }, []);
 
+  const bootSplashPhase = useBootSplashHold();
+
   // Wait for the shared-identity IPC call to resolve before rendering
   // anything that depends on it. Without this gate, children briefly see
   // isSharedIdentity=false and may flash WelcomeSetup or the onboarding flow.
@@ -343,6 +431,14 @@ export function App() {
     return isWorkspaceSwitch ? <WorkspaceSwitchGate /> : <AppLoadingGate />;
   }
 
+  // The app mounts (and starts loading data) beneath the splash overlay; the
+  // overlay just keeps the bee on screen long enough to be seen, then fades.
+  // Workspace switches and first-run completion keep their quiet gates.
+  const showBootSplashOverlay =
+    bootSplashPhase !== "done" &&
+    !isWorkspaceSwitch &&
+    !isCompletingFirstRunWorkspace;
+
   return (
     <WorkspaceQueryProvider key={workspaceKey}>
       <AppReady
@@ -354,6 +450,19 @@ export function App() {
         onFirstRunWorkspaceSettled={handleFirstRunWorkspaceSettled}
         onBackToWorkspaceSetup={handleBackToWorkspaceSetup}
       />
+      {showBootSplashOverlay ? (
+        <div
+          aria-hidden="true"
+          className={cn(
+            "fixed inset-0 z-50 transition-opacity",
+            bootSplashPhase === "fading" ? "opacity-0" : "opacity-100",
+          )}
+          data-testid="boot-splash-overlay"
+          style={{ transitionDuration: `${BOOT_SPLASH_FADE_MS}ms` }}
+        >
+          <AppLoadingGate />
+        </div>
+      ) : null}
     </WorkspaceQueryProvider>
   );
 }
diff --git a/desktop/src/app/ThemeGrainientBackground.tsx b/desktop/src/app/ThemeGrainientBackground.tsx
new file mode 100644
index 000000000..f9a81ef4b
--- /dev/null
+++ b/desktop/src/app/ThemeGrainientBackground.tsx
@@ -0,0 +1,12 @@
+export function ThemeGrainientBackground() {
+  return (
+    <div
+      aria-hidden="true"
+      className="buzz-setup-grainient"
+      data-testid="setup-grainient-background"
+    >
+      <div className="buzz-setup-grainient__wash" />
+      <div className="buzz-setup-grainient__veil" />
+    </div>
+  );
+}
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index a057a55c5..7ee44cde1 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -567,3 +567,280 @@
 }
 
 /* ── Tiptap rich-text composer ──────────────────────────────────────── */
+
+/* ── Setup / cold-boot loading screen ───────────────────────────────────
+   Theme-adaptive grainient background for the "setting up your workspace"
+   gate. Restored from pre-#1570; the animated Buzz mark is the hero (see
+   AppLoadingGate in app/App.tsx). */
+
+@property --buzz-grainient-x-0 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 85%;
+}
+
+@property --buzz-grainient-y-0 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 80%;
+}
+
+@property --buzz-grainient-x-1 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 60%;
+}
+
+@property --buzz-grainient-y-1 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 24%;
+}
+
+@property --buzz-grainient-x-2 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 13%;
+}
+
+@property --buzz-grainient-y-2 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 82%;
+}
+
+@property --buzz-grainient-x-3 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 24%;
+}
+
+@property --buzz-grainient-y-3 {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 7%;
+}
+
+.buzz-setup-loading-shell {
+  --buzz-grainient-alpha-strong: 0.46;
+  --buzz-grainient-alpha-medium: 0.34;
+  --buzz-grainient-alpha-soft: 0.24;
+  --buzz-grainient-color-0: hsl(
+    var(--chart-5) /
+    var(--buzz-grainient-alpha-strong)
+  );
+  --buzz-grainient-color-1: hsl(
+    var(--chart-3) /
+    var(--buzz-grainient-alpha-strong)
+  );
+  --buzz-grainient-color-2: hsl(
+    var(--primary) /
+    var(--buzz-grainient-alpha-medium)
+  );
+  --buzz-grainient-color-3: hsl(
+    var(--chart-2) /
+    var(--buzz-grainient-alpha-strong)
+  );
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  isolation: isolate;
+  position: relative;
+}
+
+.dark .buzz-setup-loading-shell {
+  --buzz-grainient-alpha-strong: 0.68;
+  --buzz-grainient-alpha-medium: 0.5;
+  --buzz-grainient-alpha-soft: 0.34;
+}
+
+.buzz-setup-grainient {
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.buzz-setup-grainient__wash,
+.buzz-setup-grainient__veil {
+  inset: 0;
+  position: absolute;
+}
+
+.buzz-setup-grainient__wash {
+  --buzz-grainient-s-start-0: 9%;
+  --buzz-grainient-s-end-0: 55%;
+  --buzz-grainient-s-start-1: 5%;
+  --buzz-grainient-s-end-1: 72%;
+  --buzz-grainient-s-start-2: 5%;
+  --buzz-grainient-s-end-2: 52%;
+  --buzz-grainient-s-start-3: 13%;
+  --buzz-grainient-s-end-3: 68%;
+  --buzz-grainient-x-0: 85%;
+  --buzz-grainient-y-0: 80%;
+  --buzz-grainient-x-1: 60%;
+  --buzz-grainient-y-1: 24%;
+  --buzz-grainient-x-2: 13%;
+  --buzz-grainient-y-2: 82%;
+  --buzz-grainient-x-3: 24%;
+  --buzz-grainient-y-3: 7%;
+  animation: buzz-grainient-orbit 10s linear infinite alternate;
+  background-color: hsl(var(--background));
+  background-image:
+    radial-gradient(
+      circle at var(--buzz-grainient-x-0) var(--buzz-grainient-y-0),
+      var(--buzz-grainient-color-0) var(--buzz-grainient-s-start-0),
+      transparent var(--buzz-grainient-s-end-0)
+    ),
+    radial-gradient(
+      circle at var(--buzz-grainient-x-1) var(--buzz-grainient-y-1),
+      var(--buzz-grainient-color-1) var(--buzz-grainient-s-start-1),
+      transparent var(--buzz-grainient-s-end-1)
+    ),
+    radial-gradient(
+      circle at var(--buzz-grainient-x-2) var(--buzz-grainient-y-2),
+      var(--buzz-grainient-color-2) var(--buzz-grainient-s-start-2),
+      transparent var(--buzz-grainient-s-end-2)
+    ),
+    radial-gradient(
+      circle at var(--buzz-grainient-x-3) var(--buzz-grainient-y-3),
+      var(--buzz-grainient-color-3) var(--buzz-grainient-s-start-3),
+      transparent var(--buzz-grainient-s-end-3)
+    );
+  background-blend-mode: normal, normal, normal, normal;
+  contain: paint;
+  filter: saturate(1.08);
+  transform: translateZ(0);
+  will-change: transform, opacity;
+}
+
+.buzz-setup-grainient__veil {
+  background:
+    radial-gradient(
+      ellipse 74% 54% at 50% 52%,
+      transparent 0%,
+      hsl(var(--background) / 0.04) 72%,
+      hsl(var(--background) / 0.16) 100%
+    ),
+    linear-gradient(
+      180deg,
+      hsl(var(--background) / 0.04),
+      hsl(var(--background) / 0.12)
+    );
+}
+
+@keyframes buzz-grainient-orbit {
+  0% {
+    --buzz-grainient-x-0: 85%;
+    --buzz-grainient-y-0: 80%;
+    --buzz-grainient-x-1: 60%;
+    --buzz-grainient-y-1: 24%;
+    --buzz-grainient-x-2: 13%;
+    --buzz-grainient-y-2: 82%;
+    --buzz-grainient-x-3: 24%;
+    --buzz-grainient-y-3: 7%;
+  }
+
+  100% {
+    --buzz-grainient-x-0: 31%;
+    --buzz-grainient-y-0: 94%;
+    --buzz-grainient-x-1: 2%;
+    --buzz-grainient-y-1: 25%;
+    --buzz-grainient-x-2: 98%;
+    --buzz-grainient-y-2: 20%;
+    --buzz-grainient-x-3: 95%;
+    --buzz-grainient-y-3: 92%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .buzz-setup-grainient__wash {
+    animation: none;
+  }
+}
+
+/* Buzz bee wing-flap (ported from the Buzz website's BeeField, tuned for a
+   single hero bee). The two wing lobes beat continuously — a fast in/out scale
+   so the bee reads as actively flapping on the loading gate rather than resting
+   most of the cycle (the website staggers many bees, so it could afford long
+   rests; one bee cannot).
+
+   The animated elements are HTML-level <svg> wings (see FlappingBee.tsx), not
+   SVG children: WebKit paints SVG children on the main thread, so their
+   animations freeze while boot work hogs the thread — exactly when the loading
+   gate is visible. HTML-level transforms run on the compositor and keep
+   flapping. Translation is in percentages of the wing's own 183.4-unit box
+   (30/183.4 = 16.3577%) so the beat is identical at any rendered size.
+
+   The loading gate can be short-lived on a warm refresh, so the flap starts
+   mid-stroke (negative animation-delay, quarter beat in) — the bee is never
+   caught frozen at the rest pose on first paint, and a one-frame flash shows
+   wings visibly mid-beat rather than at the squished full-tuck extreme. The
+   optional --flap-delay custom property can still stagger multiple bees. */
+.bee-sprite .bee-wing {
+  animation-delay: var(--flap-delay, -0.07s);
+  animation-duration: 0.28s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  will-change: transform;
+}
+
+.bee-sprite .bee-wing-left {
+  animation-name: bee-wing-left-flap;
+}
+
+.bee-sprite .bee-wing-right {
+  animation-name: bee-wing-right-flap;
+}
+
+/* Static cutout masks over the wing layers. In the single-SVG mark, the slot
+   cutouts punch through body AND wings (the wings tuck behind the body far
+   enough to sit under the slots' left ends). The wing layers reproduce those
+   holes with a static CSS mask on the non-animated wrapper, so the holes stay
+   fixed while the wing beats beneath them — matching the masked single-SVG
+   rendering. Rect coordinates are the mark's slot cutouts translated into each
+   wing's local 183.4x183.4 box (left wing box starts at x=0, y=62.8; right
+   wing box at x=282.6, y=62.8). The eye cutouts never intersect the wing
+   circles, so they are omitted. */
+.bee-wing-layer {
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.bee-wing-layer-left {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM171.3,94.4H298.2A5,5 0 0 1 303.2,99.4V127.7A5,5 0 0 1 298.2,132.7H171.3A5,5 0 0 1 166.3,127.7V99.4A5,5 0 0 1 171.3,94.4ZM171.9,172.3H298.1A5,5 0 0 1 303.1,177.3V204.9A5,5 0 0 1 298.1,209.9H171.9A5,5 0 0 1 166.9,204.9V177.3A5,5 0 0 1 171.9,172.3Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM171.3,94.4H298.2A5,5 0 0 1 303.2,99.4V127.7A5,5 0 0 1 298.2,132.7H171.3A5,5 0 0 1 166.3,127.7V99.4A5,5 0 0 1 171.3,94.4ZM171.9,172.3H298.1A5,5 0 0 1 303.1,177.3V204.9A5,5 0 0 1 298.1,209.9H171.9A5,5 0 0 1 166.9,204.9V177.3A5,5 0 0 1 171.9,172.3Z'/%3E%3C/svg%3E");
+}
+
+.bee-wing-layer-right {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM-111.3,94.4H15.6A5,5 0 0 1 20.6,99.4V127.7A5,5 0 0 1 15.6,132.7H-111.3A5,5 0 0 1 -116.3,127.7V99.4A5,5 0 0 1 -111.3,94.4ZM-110.7,172.3H15.5A5,5 0 0 1 20.5,177.3V204.9A5,5 0 0 1 15.5,209.9H-110.7A5,5 0 0 1 -115.7,204.9V177.3A5,5 0 0 1 -110.7,172.3Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183.4 183.4'%3E%3Cpath fill-rule='evenodd' d='M0,0H183.4V183.4H0ZM-111.3,94.4H15.6A5,5 0 0 1 20.6,99.4V127.7A5,5 0 0 1 15.6,132.7H-111.3A5,5 0 0 1 -116.3,127.7V99.4A5,5 0 0 1 -111.3,94.4ZM-110.7,172.3H15.5A5,5 0 0 1 20.5,177.3V204.9A5,5 0 0 1 15.5,209.9H-110.7A5,5 0 0 1 -115.7,204.9V177.3A5,5 0 0 1 -110.7,172.3Z'/%3E%3C/svg%3E");
+}
+
+@keyframes bee-wing-left-flap {
+  0%,
+  100% {
+    transform: translateX(0) scaleX(1);
+  }
+  50% {
+    transform: translateX(16.3577%) scaleX(0.62);
+  }
+}
+
+@keyframes bee-wing-right-flap {
+  0%,
+  100% {
+    transform: translateX(0) scaleX(1);
+  }
+  50% {
+    transform: translateX(-16.3577%) scaleX(0.62);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bee-sprite .bee-wing {
+    animation: none;
+  }
+}
diff --git a/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx b/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
new file mode 100644
index 000000000..3cc7ee9e3
--- /dev/null
+++ b/desktop/src/shared/ui/buzz-logo/FlappingBee.tsx
@@ -0,0 +1,117 @@
+import { useId } from "react";
+
+/**
+ * The Buzz bee mark with flapping wings. Geometry is identical to the static
+ * {@link BuzzMark} (v8 final keyframe) — the same silhouette, rendered in
+ * `currentColor` so it tints per-theme — with the wing-flap keyframes (ported
+ * from the Buzz website) beating the wings on an infinite loop.
+ *
+ * Unlike the static mark's single `<svg>`, each wing here is its own
+ * HTML-level `<svg>` layer and the flap animates those elements' CSS
+ * transforms. This is deliberate: WebKit paints SVG *children* on the main
+ * thread, so a transform animation on a `<circle>` freezes for as long as boot
+ * work (bundle eval, first React render of the app tree) hogs the thread —
+ * exactly the window in which the loading gate is on screen. Transforms on
+ * HTML-level elements run on the compositor (Core Animation in WKWebView) and
+ * keep flapping regardless. The `bee-wing-layer` masks reproduce the slot
+ * cutouts over the wings so the layered build stays pixel-identical to the
+ * masked single-SVG mark (see animations.css).
+ *
+ * Everything is plain SVG + CSS (no JS/SMIL), so it paints on the very first
+ * frame and the flap starts as soon as styles load. Reduced motion falls back
+ * to the static silhouette via the CSS media query.
+ */
+export function FlappingBee({ className }: { className?: string }) {
+  const maskId = `flapping-bee-cutouts-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+
+  // Wing geometry from the 466x309 mark: circles r=91.7 at (91.7, 154.5) and
+  // (374.3, 154.5). Each wing layer is the circle's bounding box, positioned
+  // as percentages of the mark: top 62.8/309, size 183.4/466 x 183.4/309.
+  const wingLayer =
+    "bee-wing-layer absolute top-[20.3236%] h-[59.3528%] w-[39.3562%]";
+  const wingSvg = "bee-wing block h-full w-full";
+
+  return (
+    <div
+      aria-hidden="true"
+      className={[
+        "buzz-mark",
+        "bee-sprite",
+        "relative",
+        "aspect-[466/309]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className={`${wingLayer} bee-wing-layer-left left-0`}>
+        <svg
+          aria-hidden="true"
+          className={`${wingSvg} bee-wing-left`}
+          viewBox="0 0 183.4 183.4"
+          fill="currentColor"
+        >
+          <circle cx="91.7" cy="91.7" r="91.7" />
+        </svg>
+      </div>
+      <div className={`${wingLayer} bee-wing-layer-right right-0`}>
+        <svg
+          aria-hidden="true"
+          className={`${wingSvg} bee-wing-right`}
+          viewBox="0 0 183.4 183.4"
+          fill="currentColor"
+        >
+          <circle cx="91.7" cy="91.7" r="91.7" />
+        </svg>
+      </div>
+      {/* Body last in DOM order and positioned, so it paints over the wings —
+          matching the single-SVG mark where the body rect draws on top. */}
+      <svg
+        aria-hidden="true"
+        className="relative block h-full w-full"
+        viewBox="0 0 466 309"
+        fill="currentColor"
+      >
+        <defs>
+          <mask
+            id={maskId}
+            x="-80"
+            y="-80"
+            width="626"
+            height="469"
+            maskUnits="userSpaceOnUse"
+            maskContentUnits="userSpaceOnUse"
+          >
+            <rect x="-80" y="-80" width="626" height="469" fill="#fff" />
+            <ellipse cx="193.3" cy="84.4" rx="27" ry="27" fill="#000" />
+            <ellipse cx="276" cy="84.4" rx="27" ry="27" fill="#000" />
+            <rect
+              x="166.3"
+              y="157.2"
+              width="136.9"
+              height="38.3"
+              rx="5"
+              fill="#000"
+            />
+            <rect
+              x="166.9"
+              y="235.1"
+              width="136.2"
+              height="37.6"
+              rx="5"
+              fill="#000"
+            />
+          </mask>
+        </defs>
+        <rect
+          x="128"
+          y="0"
+          width="210"
+          height="309"
+          rx="34"
+          mask={`url(#${maskId})`}
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/desktop/tests/e2e/boot-splash.spec.ts b/desktop/tests/e2e/boot-splash.spec.ts
new file mode 100644
index 000000000..231475b26
--- /dev/null
+++ b/desktop/tests/e2e/boot-splash.spec.ts
@@ -0,0 +1,57 @@
+import { expect, test } from "@playwright/test";
+import { installMockBridge } from "../helpers/bridge";
+
+// Cold-boot splash hold: on a real boot the workspace resolves in well under
+// 100ms — before the hidden Tauri window ever puts a frame on screen — so the
+// loading gate keeps the flapping bee up as an overlay above the already
+// mounted app for a minimum visible duration, then fades out. E2E runs skip
+// the hold by default (it would slow every spec's boot and block pointer
+// actionability); this spec opts back in via __BUZZ_E2E__.bootSplashHoldMs.
+
+test("boot splash overlay holds with a flapping bee, then dismisses", async ({
+  page,
+}) => {
+  await installMockBridge(page);
+  // Registered after installMockBridge so it runs after the bridge's init
+  // script and can extend the config it assigns.
+  await page.addInitScript(() => {
+    const testWindow = window as Window & {
+      __BUZZ_E2E__?: { bootSplashHoldMs?: number };
+    };
+    testWindow.__BUZZ_E2E__ = {
+      ...(testWindow.__BUZZ_E2E__ ?? {}),
+      bootSplashHoldMs: 1_500,
+    };
+  });
+  await page.goto("/");
+
+  const overlay = page.getByTestId("boot-splash-overlay");
+  await expect(overlay).toBeVisible();
+
+  // The bee is actually animating while the overlay holds — pure CSS, no SMIL.
+  const wingState = await overlay.locator(".bee-wing-left").evaluate((wing) => {
+    const animation = wing.getAnimations()[0];
+    return {
+      name: getComputedStyle(wing).animationName,
+      state: animation?.playState,
+    };
+  });
+  expect(wingState).toEqual({ name: "bee-wing-left-flap", state: "running" });
+
+  // The app mounts and loads beneath the overlay — boot is not delayed.
+  await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+
+  // After the hold elapses the overlay fades out and unmounts.
+  await expect(overlay).toHaveCount(0, { timeout: 6_000 });
+  await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+});
+
+test("boot splash overlay is skipped when the hold is zero (e2e default)", async ({
+  page,
+}) => {
+  await installMockBridge(page);
+  await page.goto("/");
+
+  await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+  await expect(page.getByTestId("boot-splash-overlay")).toHaveCount(0);
+});
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 6b5eb2cb2..cfc7e428c 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1068,38 +1068,52 @@ test("first-run onboarding shows setup loading until Welcome bootstrap completes
   await expect(loadingGate).toBeVisible();
   await expect(loadingGate).toContainText("Setting up your workspace...");
 
-  // The boot gate is deliberately static: a plain Buzz mark in the brand
-  // yellow (#D7D72E) over solid black. The mark must paint complete on the
-  // FIRST frame — a blank gate reads as "nothing is loading" — so nothing
-  // about it may depend on SMIL/scripted animation, and the background must
-  // be a flat color rather than the animated gradient wash.
+  // The boot gate is the theme-adaptive grainient with the flapping Buzz bee
+  // as its hero. The mark must paint complete on the FIRST frame — a blank
+  // gate reads as "nothing is loading" — so nothing about it may depend on
+  // SMIL/scripted animation (<animate> count stays 0); the wing flap is pure
+  // CSS on HTML-level wing layers so it keeps running on the compositor even
+  // while boot work hogs the main thread.
+  await expect(
+    loadingGate.getByTestId("setup-grainient-background"),
+  ).toBeVisible();
   const mark = loadingGate.locator(".buzz-mark");
   await expect(mark).toBeVisible();
   const gateTreatment = await loadingGate.evaluate((element) => {
-    const shellStyles = window.getComputedStyle(element);
-    const markSvg = element.querySelector(".buzz-mark");
-    const markStyles =
-      markSvg instanceof SVGElement ? window.getComputedStyle(markSvg) : null;
+    const markElement = element.querySelector(".buzz-mark");
+    const markSvgs = markElement
+      ? Array.from(markElement.querySelectorAll("svg"))
+      : [];
+    const wing = element.querySelector(".bee-wing");
+    const wingStyles =
+      wing instanceof SVGElement ? window.getComputedStyle(wing) : null;
+    const wash = element.querySelector(".buzz-setup-grainient__wash");
+    const washStyles =
+      wash instanceof HTMLElement ? window.getComputedStyle(wash) : null;
     return {
       animateElementCount: element.querySelectorAll("animate").length,
-      backgroundColor: shellStyles.backgroundColor,
-      backgroundImage: shellStyles.backgroundImage,
-      // The document itself must also be black (inline <style> in
-      // index.html) so the pre-React/pre-CSS first paint can't flash white
-      // before the gate mounts.
+      // The document itself must not flash white before the gate mounts
+      // (inline <style> in index.html; black fallback when no cached theme).
       documentBackgroundColor: window.getComputedStyle(document.documentElement)
         .backgroundColor,
-      markColor: markStyles?.color,
-      markUsesCurrentColor: markSvg?.getAttribute("fill") === "currentColor",
+      grainientAnimation: washStyles?.animationName,
+      grainientUsesRadialGradients:
+        washStyles?.backgroundImage.includes("radial-gradient"),
+      markSvgsUseCurrentColor:
+        markSvgs.length > 0 &&
+        markSvgs.every((svg) => svg.getAttribute("fill") === "currentColor"),
+      wingFlapAnimation: wingStyles?.animationName,
+      wingFlapRunning: wingStyles?.animationPlayState,
     };
   });
   expect(gateTreatment).toEqual({
     animateElementCount: 0,
-    backgroundColor: "rgb(0, 0, 0)",
-    backgroundImage: "none",
     documentBackgroundColor: "rgb(0, 0, 0)",
-    markColor: "rgb(215, 215, 46)", // #d7d72e
-    markUsesCurrentColor: true,
+    grainientAnimation: "buzz-grainient-orbit",
+    grainientUsesRadialGradients: true,
+    markSvgsUseCurrentColor: true,
+    wingFlapAnimation: "bee-wing-left-flap",
+    wingFlapRunning: "running",
   });
   await expect(loadingGate).not.toHaveClass(/buzz-onboarding-neutral-theme/);
   await expectShellHidden(page);