Browse Source

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
handoff-20260429-1057
Claude 4 months ago
parent
commit
8872ab2e55
Failed to extract signature
  1. 2
      src/components/FloatingActionBar.tsx
  2. 2
      src/components/ProjectSetupModal.tsx
  3. 2
      src/components/nodes/ControlPanel.tsx
  4. 2
      src/components/nodes/GenerateImageNode.tsx
  5. 2
      src/components/nodes/GenerateVideoNode.tsx
  6. 2
      src/components/nodes/PromptConstructorNode.tsx
  7. 2
      src/components/nodes/PromptNode.tsx
  8. 2
      src/components/nodes/SplitGridNode.tsx
  9. 2
      src/components/quickstart/WelcomeModal.tsx

2
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 />

2
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();
}}

2
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

2
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}

2
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}

2
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>

2
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"

2
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>

2
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}
>

Loading…
Cancel
Save