diff --git a/components/effects/EffectBrowser.tsx b/components/effects/EffectBrowser.tsx
index a4a7fa8..2cc3a44 100644
--- a/components/effects/EffectBrowser.tsx
+++ b/components/effects/EffectBrowser.tsx
@@ -26,8 +26,6 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
   const [search, setSearch] = React.useState('');
   const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
 
-  if (!open) return null;
-
   const handleSelectEffect = (effectType: EffectType) => {
     onSelectEffect(effectType);
     onClose();
@@ -53,6 +51,8 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
     return filtered;
   }, [search]);
 
+  if (!open) return null;
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
       <div