From 8872ab2e55bea6a35f1232a193d04330042bbf8a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 11 Mar 2026 23:37:45 +0000
Subject: [PATCH] Remove backdrop-blur-sm to improve Windows rendering
 performance

backdrop-filter: blur() causes significant frame rate drops on Windows
due to DWM compositor contention and Chrome's GPU layer management.
Replaced with higher-opacity semi-transparent backgrounds that maintain
visual contrast without the GPU-intensive blur compositing.

https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
---
 src/components/FloatingActionBar.tsx           | 2 +-
 src/components/ProjectSetupModal.tsx           | 2 +-
 src/components/nodes/ControlPanel.tsx          | 2 +-
 src/components/nodes/GenerateImageNode.tsx     | 2 +-
 src/components/nodes/GenerateVideoNode.tsx     | 2 +-
 src/components/nodes/PromptConstructorNode.tsx | 2 +-
 src/components/nodes/PromptNode.tsx            | 2 +-
 src/components/nodes/SplitGridNode.tsx         | 2 +-
 src/components/quickstart/WelcomeModal.tsx     | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/FloatingActionBar.tsx b/src/components/FloatingActionBar.tsx
index 3eef6b65..cd25efae 100644
--- a/src/components/FloatingActionBar.tsx
+++ b/src/components/FloatingActionBar.tsx
@@ -414,7 +414,7 @@ export function FloatingActionBar() {
 
   return (
     <div className="fixed bottom-5 left-1/2 -translate-x-1/2 z-50">
-      <div className="flex items-center gap-0.5 bg-neutral-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-neutral-700/80 px-1.5 py-1">
+      <div className="flex items-center gap-0.5 bg-neutral-800/95 rounded-lg shadow-lg border border-neutral-700/80 px-1.5 py-1">
         <NodeButton type="imageInput" label="Image" />
         <NodeButton type="prompt" label="Prompt" />
         <GenerateComboButton />
diff --git a/src/components/ProjectSetupModal.tsx b/src/components/ProjectSetupModal.tsx
index 2aa64262..0d4de0a0 100644
--- a/src/components/ProjectSetupModal.tsx
+++ b/src/components/ProjectSetupModal.tsx
@@ -382,7 +382,7 @@ export function ProjectSetupModal({
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60"
       onClick={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
diff --git a/src/components/nodes/ControlPanel.tsx b/src/components/nodes/ControlPanel.tsx
index 370ac04e..d25ba565 100644
--- a/src/components/nodes/ControlPanel.tsx
+++ b/src/components/nodes/ControlPanel.tsx
@@ -969,7 +969,7 @@ function EaseCurveControls({ node }: { node: Node }) {
   return (
     <div className="space-y-3 relative">
       {isInherited && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center bg-neutral-900/80 backdrop-blur-sm rounded z-10">
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-neutral-900/90 rounded z-10">
           <p className="text-sm text-neutral-200 font-medium">Settings inherited</p>
           <p className="text-[11px] text-neutral-400 mt-1">Break connection to edit manually</p>
           <button
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index ecf46775..bb52d5c1 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -767,7 +767,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
 
             {/* Carousel controls - overlaid on image bottom */}
             {hasCarouselImages && (
-              <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center gap-2 py-1.5 bg-neutral-900/60 backdrop-blur-sm">
+              <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center gap-2 py-1.5 bg-neutral-900/80">
                 <button
                   onClick={handleCarouselPrevious}
                   disabled={isLoadingCarouselImage}
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index b7b2bf1c..23acccd4 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -710,7 +710,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
 
             {/* Carousel controls - overlaid on video bottom */}
             {hasCarouselVideos && (
-              <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center gap-2 py-1.5 bg-neutral-900/60 backdrop-blur-sm">
+              <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center gap-2 py-1.5 bg-neutral-900/80">
                 <button
                   onClick={handleCarouselPrevious}
                   disabled={isLoadingCarouselVideo}
diff --git a/src/components/nodes/PromptConstructorNode.tsx b/src/components/nodes/PromptConstructorNode.tsx
index 91f299cb..eaf7676d 100644
--- a/src/components/nodes/PromptConstructorNode.tsx
+++ b/src/components/nodes/PromptConstructorNode.tsx
@@ -257,7 +257,7 @@ export function PromptConstructorNode({ id, data, selected }: NodeProps<PromptCo
 
         {/* Footer - available vars + unresolved warning */}
         {(availableVariables.length > 0 || unresolvedVars.length > 0) && (
-          <div className="absolute bottom-0 left-0 right-0 z-10 px-3 py-1.5 bg-neutral-900/80 backdrop-blur-sm rounded-b-lg text-[10px] pointer-events-none flex items-center justify-between gap-2">
+          <div className="absolute bottom-0 left-0 right-0 z-10 px-3 py-1.5 bg-neutral-900/90 rounded-b-lg text-[10px] pointer-events-none flex items-center justify-between gap-2">
             <span className="text-neutral-500 truncate">
               {availableVariables.length > 0 ? `Available: ${availableVariables.map(v => `@${v.name}`).join(', ')}` : ''}
             </span>
diff --git a/src/components/nodes/PromptNode.tsx b/src/components/nodes/PromptNode.tsx
index 13faeec8..8fa2b38d 100644
--- a/src/components/nodes/PromptNode.tsx
+++ b/src/components/nodes/PromptNode.tsx
@@ -112,7 +112,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
           placeholder={hasIncomingTextConnection ? "Text from connected node (editable)..." : "Describe what to generate..."}
           className="nodrag nopan nowheel w-full h-full p-3 pb-7 text-xs leading-relaxed text-neutral-100 bg-neutral-800 rounded-t-lg resize-none focus:outline-none placeholder:text-neutral-500"
         />
-        <div className="absolute bottom-0 left-0 right-0 z-10 px-3 py-1.5 bg-neutral-900/80 backdrop-blur-sm rounded-b-lg">
+        <div className="absolute bottom-0 left-0 right-0 z-10 px-3 py-1.5 bg-neutral-900/90 rounded-b-lg">
           <button
             onClick={() => setShowVarDialog(true)}
             className="nodrag nopan text-[10px] text-blue-400 hover:text-blue-300 transition-colors"
diff --git a/src/components/nodes/SplitGridNode.tsx b/src/components/nodes/SplitGridNode.tsx
index 46c8b5b1..96fda3a9 100644
--- a/src/components/nodes/SplitGridNode.tsx
+++ b/src/components/nodes/SplitGridNode.tsx
@@ -122,7 +122,7 @@ export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeTyp
         )}
 
         {/* Controls overlay pinned at bottom */}
-        <div className="absolute bottom-0 left-0 right-0 z-10 px-3 py-2 bg-neutral-900/80 backdrop-blur-sm rounded-b-lg space-y-1">
+        <div className="absolute bottom-0 left-0 right-0 z-10 px-3 py-2 bg-neutral-900/90 rounded-b-lg space-y-1">
           {/* Config summary */}
           <div className="flex items-center justify-between text-[10px] text-neutral-400">
             <span>{nodeData.gridRows}x{nodeData.gridCols} grid ({nodeData.targetCount} images)</span>
diff --git a/src/components/quickstart/WelcomeModal.tsx b/src/components/quickstart/WelcomeModal.tsx
index 6359a8d6..47df63c8 100644
--- a/src/components/quickstart/WelcomeModal.tsx
+++ b/src/components/quickstart/WelcomeModal.tsx
@@ -82,7 +82,7 @@ export function WelcomeModal({
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60"
       onWheelCapture={(e) => e.stopPropagation()}
       onClick={onClose}
     >