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
Failed to extract signature
9 changed files with
9 additions and
9 deletions
src/components/FloatingActionBar.tsx
src/components/ProjectSetupModal.tsx
src/components/nodes/ControlPanel.tsx
src/components/nodes/GenerateImageNode.tsx
src/components/nodes/GenerateVideoNode.tsx
src/components/nodes/PromptConstructorNode.tsx
src/components/nodes/PromptNode.tsx
src/components/nodes/SplitGridNode.tsx
src/components/quickstart/WelcomeModal.tsx
@ -414,7 +414,7 @@ export function FloatingActionBar() {
return (
return (
< div className = "fixed bottom-5 left-1/2 -translate-x-1/2 z-50" >
< 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 = "imageInput" label = "Image" / >
< NodeButton type = "prompt" label = "Prompt" / >
< NodeButton type = "prompt" label = "Prompt" / >
< GenerateComboButton / >
< GenerateComboButton / >
@ -382,7 +382,7 @@ export function ProjectSetupModal({
return (
return (
< div
< 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 ) = > {
onClick = { ( e ) = > {
if ( e . target === e . currentTarget ) onClose ( ) ;
if ( e . target === e . currentTarget ) onClose ( ) ;
} }
} }
@ -969,7 +969,7 @@ function EaseCurveControls({ node }: { node: Node }) {
return (
return (
< div className = "space-y-3 relative" >
< div className = "space-y-3 relative" >
{ isInherited && (
{ 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-sm text-neutral-200 font-medium" > Settings inherited < / p >
< p className = "text-[11px] text-neutral-400 mt-1" > Break connection to edit manually < / p >
< p className = "text-[11px] text-neutral-400 mt-1" > Break connection to edit manually < / p >
< button
< button
@ -767,7 +767,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
{ /* Carousel controls - overlaid on image bottom */ }
{ /* Carousel controls - overlaid on image bottom */ }
{ hasCarouselImages && (
{ 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
< button
onClick = { handleCarouselPrevious }
onClick = { handleCarouselPrevious }
disabled = { isLoadingCarouselImage }
disabled = { isLoadingCarouselImage }
@ -710,7 +710,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
{ /* Carousel controls - overlaid on video bottom */ }
{ /* Carousel controls - overlaid on video bottom */ }
{ hasCarouselVideos && (
{ 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
< button
onClick = { handleCarouselPrevious }
onClick = { handleCarouselPrevious }
disabled = { isLoadingCarouselVideo }
disabled = { isLoadingCarouselVideo }
@ -257,7 +257,7 @@ export function PromptConstructorNode({ id, data, selected }: NodeProps<PromptCo
{ /* Footer - available vars + unresolved warning */ }
{ /* Footer - available vars + unresolved warning */ }
{ ( availableVariables . length > 0 || unresolvedVars . length > 0 ) && (
{ ( 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" >
< span className = "text-neutral-500 truncate" >
{ availableVariables . length > 0 ? ` Available: ${ availableVariables . map ( v = > ` @ ${ v . name } ` ) . join ( ', ' ) } ` : '' }
{ availableVariables . length > 0 ? ` Available: ${ availableVariables . map ( v = > ` @ ${ v . name } ` ) . join ( ', ' ) } ` : '' }
< / span >
< / span >
@ -112,7 +112,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
placeholder = { hasIncomingTextConnection ? "Text from connected node (editable)..." : "Describe what to generate..." }
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"
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
< button
onClick = { ( ) = > setShowVarDialog ( true ) }
onClick = { ( ) = > setShowVarDialog ( true ) }
className = "nodrag nopan text-[10px] text-blue-400 hover:text-blue-300 transition-colors"
className = "nodrag nopan text-[10px] text-blue-400 hover:text-blue-300 transition-colors"
@ -122,7 +122,7 @@ export function SplitGridNode({ id, data, selected }: NodeProps<SplitGridNodeTyp
) }
) }
{ /* Controls overlay pinned at bottom */ }
{ /* 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 */ }
{ /* Config summary */ }
< div className = "flex items-center justify-between text-[10px] text-neutral-400" >
< div className = "flex items-center justify-between text-[10px] text-neutral-400" >
< span > { nodeData . gridRows } x { nodeData . gridCols } grid ( { nodeData . targetCount } images ) < / span >
< span > { nodeData . gridRows } x { nodeData . gridCols } grid ( { nodeData . targetCount } images ) < / span >
@ -82,7 +82,7 @@ export function WelcomeModal({
return (
return (
< div
< 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 ( ) }
onWheelCapture = { ( e ) = > e . stopPropagation ( ) }
onClick = { onClose }
onClick = { onClose }
>
>