From d0af845a1d489ab3fce6a73adbb0e82ebb4b0fa1 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Tue, 4 Aug 2026 15:14:09 +0100
Subject: [PATCH] Remove blur from Welcome composer guidance (#4691)

## Summary
- Keep the Welcome composer prompt above the dock blur so it stays
readable.
- Remove blur from the prompt and persona-motion paths.
- Cover the crisp, correctly layered banner in the onboarding browser
test.

## Validation
- `pnpm -C desktop exec biome check
src/features/channels/ui/WelcomeComposerBanner.tsx
tests/e2e/onboarding.spec.ts`
- `pnpm -C desktop build:e2e`
- `pnpm -C desktop exec playwright test tests/e2e/onboarding.spec.ts
--grep "finishing onboarding creates starter channels and focuses
welcome-everyone for a new member" --project=integration`

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../channels/ui/WelcomeComposerBanner.tsx        | 13 ++-----------
 desktop/tests/e2e/onboarding.spec.ts             | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/desktop/src/features/channels/ui/WelcomeComposerBanner.tsx b/desktop/src/features/channels/ui/WelcomeComposerBanner.tsx
index 2d5782b28d..8d492c9181 100644
--- a/desktop/src/features/channels/ui/WelcomeComposerBanner.tsx
+++ b/desktop/src/features/channels/ui/WelcomeComposerBanner.tsx
@@ -13,14 +13,12 @@ const WELCOME_PERSONA_EXIT_DURATION_SECONDS = 0.432;
 const WELCOME_PERSONA_ENTER_STAGGER_SECONDS = 0.018;
 const WELCOME_PERSONA_EXIT_STAGGER_SECONDS = 0.011;
 const WELCOME_PERSONA_Y_OFFSET_PX = 9;
-const WELCOME_PERSONA_BLUR_PX = 6;
 const WELCOME_COMPOSER_BANNER_CONTENT_EXIT_DURATION_SECONDS = 0.18;
 const WELCOME_COMPOSER_BANNER_CONTENT_Y_OFFSET_PX = 4;
 const WELCOME_COMPOSER_BANNER_SUCCESS_ENTER_DURATION_SECONDS = 0.32;
 const WELCOME_COMPOSER_BANNER_SUCCESS_COPY_DELAY_SECONDS = 0.06;
 const WELCOME_COMPOSER_BANNER_SUCCESS_Y_OFFSET_PX = 6;
 export const WELCOME_COMPOSER_BANNER_DISMISS_DURATION_SECONDS = 0.25;
-const WELCOME_COMPOSER_BANNER_DISMISS_BLUR_PX = 3;
 export const WELCOME_COMPOSER_BANNER_HIDE_BUFFER_MS = 50;
 const WELCOME_COMPOSER_BANNER_DISMISS_Y_OFFSET_PX = 48;
 export const WELCOME_COMPOSER_BANNER_SUCCESS_SETTLE_MS = Math.round(
@@ -52,7 +50,6 @@ const welcomePersonaPhraseVariants = {
 
 const welcomePersonaCharacterVariants = {
   animate: {
-    filter: "blur(0px)",
     opacity: 1,
     transition: {
       duration: WELCOME_PERSONA_ENTER_DURATION_SECONDS,
@@ -61,7 +58,6 @@ const welcomePersonaCharacterVariants = {
     y: 0,
   },
   exit: {
-    filter: `blur(${WELCOME_PERSONA_BLUR_PX}px)`,
     opacity: 0,
     transition: {
       duration: WELCOME_PERSONA_EXIT_DURATION_SECONDS,
@@ -70,7 +66,6 @@ const welcomePersonaCharacterVariants = {
     y: -WELCOME_PERSONA_Y_OFFSET_PX,
   },
   initial: {
-    filter: `blur(${WELCOME_PERSONA_BLUR_PX}px)`,
     opacity: 0,
     y: WELCOME_PERSONA_Y_OFFSET_PX,
   },
@@ -272,7 +267,7 @@ function WelcomeComposerPersonaMention() {
         >
           {activeMentionCharacters.map(({ character, key }) => (
             <motion.span
-              className="inline-block whitespace-pre [backface-visibility:hidden] [transform-origin:50%_55%] will-change-[transform,opacity,filter]"
+              className="inline-block whitespace-pre [backface-visibility:hidden] [transform-origin:50%_55%] will-change-[transform,opacity]"
               data-testid="welcome-composer-persona-character"
               key={`${activeMention}-${key}`}
               variants={welcomePersonaCharacterVariants}
@@ -323,10 +318,6 @@ export function WelcomeComposerBanner({
       >
         <motion.div
           animate={{
-            filter:
-              state === "dismissing"
-                ? `blur(${WELCOME_COMPOSER_BANNER_DISMISS_BLUR_PX}px)`
-                : "blur(0px)",
             opacity: 1,
             y:
               state === "dismissing"
@@ -334,7 +325,7 @@ export function WelcomeComposerBanner({
                 : 0,
           }}
           className={cn(
-            "relative z-0 mx-5 -mb-3 flex transform-gpu items-center gap-2 rounded-t-2xl border border-b-0 px-4 pb-5 pt-2.5 text-sm leading-5 backdrop-blur-sm transition-colors will-change-[filter,transform]",
+            "relative z-[1] mx-5 -mb-3 flex items-center gap-2 rounded-t-2xl border border-b-0 px-4 pb-5 pt-2.5 text-sm leading-5 transition-colors",
             state !== "prompt"
               ? "border-emerald-500/30 bg-emerald-500/15 text-foreground"
               : "border-border/60 bg-muted/55 text-muted-foreground",
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 0c98cb411e..57e812091c 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -216,16 +216,26 @@ async function expectWelcomeComposerBannerLayout(page: Page) {
   const radii = await banner.evaluate((element) => {
     const styles = window.getComputedStyle(element);
     return {
+      backdropFilter: styles.backdropFilter,
       bottomLeft: styles.borderBottomLeftRadius,
       bottomRight: styles.borderBottomRightRadius,
+      filter: styles.filter,
+      zIndex: styles.zIndex,
       topLeft: styles.borderTopLeftRadius,
       topRight: styles.borderTopRightRadius,
+      transform: styles.transform,
+      willChange: styles.willChange,
     };
   });
 
   expect(radii.topLeft).toBe(radii.topRight);
   expect(radii.bottomLeft).toBe("0px");
   expect(radii.bottomRight).toBe("0px");
+  expect(radii.backdropFilter).toBe("none");
+  expect(radii.filter).toBe("none");
+  expect(radii.transform).toBe("none");
+  expect(radii.willChange).toBe("auto");
+  expect(radii.zIndex).toBe("1");
   expect(personaMentionBox.width).toBeGreaterThan(0);
 }
 
@@ -250,6 +260,12 @@ async function expectWelcomePersonaMention(page: Page) {
       .getByTestId("welcome-composer-persona-character")
       .count(),
   ).toBeGreaterThanOrEqual(4);
+  expect(
+    await personaMention
+      .getByTestId("welcome-composer-persona-character")
+      .first()
+      .evaluate((element) => window.getComputedStyle(element).filter),
+  ).toBe("none");
 
   const transition = await personaMention.evaluate((element) => {
     const styles = window.getComputedStyle(element);