Nice glow effect

Author: matt-aitken

apps/webapp/app/components/runs/v3/AIFilterInput.tsx

@@ -86,7 +86,7 @@ export function AIFilterInput() {
             stiffness: 300,
             damping: 30,
           }}
-          className="relative"
+          className="relative h-6 min-w-44"
         >
           <AnimatePresence>
             {isFocused && (
@@ -95,60 +95,62 @@ export function AIFilterInput() {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2, ease: "linear" }}
-                className="animated-gradient-glow pointer-events-none absolute inset-0"
+                className="animated-gradient-glow-small pointer-events-none absolute inset-0 h-6"
               />
             )}
           </AnimatePresence>
-          <Input
-            type="text"
-            name="text"
-            variant="secondary-small"
-            placeholder="Describe your filters…"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            disabled={isLoading}
-            fullWidth
-            ref={inputRef}
-            className={cn(
-              "disabled:text-text-dimmed/50",
-              isFocused && "placeholder:text-text-dimmed"
-            )}
-            containerClassName="has-[:disabled]:opacity-100"
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && text.trim() && !isLoading) {
-                e.preventDefault();
-                const form = e.currentTarget.closest("form");
-                if (form) {
-                  form.requestSubmit();
+          <div className="absolute inset-0 left-0 top-0 h-6">
+            <Input
+              type="text"
+              name="text"
+              variant="secondary-small"
+              placeholder="Describe your filters…"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              disabled={isLoading}
+              fullWidth
+              ref={inputRef}
+              className={cn(
+                "disabled:text-text-dimmed/50",
+                isFocused && "placeholder:text-text-dimmed"
+              )}
+              containerClassName="has-[:disabled]:opacity-100"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && text.trim() && !isLoading) {
+                  e.preventDefault();
+                  const form = e.currentTarget.closest("form");
+                  if (form) {
+                    form.requestSubmit();
+                  }
                 }
+              }}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => {
+                // Only blur if the text is empty or we're not loading
+                if (text.length === 0 || !isLoading) {
+                  setIsFocused(false);
+                }
+              }}
+              icon={<AISparkleIcon className="size-4" />}
+              accessory={
+                isLoading ? (
+                  <Spinner
+                    color={{
+                      background: "rgba(99, 102, 241, 1)",
+                      foreground: "rgba(217, 70, 239, 1)",
+                    }}
+                    className="size-4 opacity-80"
+                  />
+                ) : text.length > 0 ? (
+                  <ShortcutKey
+                    shortcut={{ key: "enter" }}
+                    variant="small"
+                    className={cn("transition-opacity", text.length === 0 && "opacity-0")}
+                  />
+                ) : undefined
               }
-            }}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => {
-              // Only blur if the text is empty or we're not loading
-              if (text.length === 0 || !isLoading) {
-                setIsFocused(false);
-              }
-            }}
-            icon={<AISparkleIcon className="size-4" />}
-            accessory={
-              isLoading ? (
-                <Spinner
-                  color={{
-                    background: "rgba(99, 102, 241, 1)",
-                    foreground: "rgba(217, 70, 239, 1)",
-                  }}
-                  className="size-4"
-                />
-              ) : text.length > 0 ? (
-                <ShortcutKey
-                  shortcut={{ key: "enter" }}
-                  variant="small"
-                  className={cn("transition-opacity", text.length === 0 && "opacity-0")}
-                />
-              ) : undefined
-            }
-          />
+            />
+          </div>
         </motion.div>
       </ErrorPopover>
     </fetcher.Form>

apps/webapp/app/tailwind.css

@@ -71,6 +71,31 @@
     filter: blur(0.5rem);
     opacity: 0.1;
   }
+
+  .animated-gradient-glow-small {
+    position: relative;
+    overflow: visible;
+  }
+
+  .animated-gradient-glow-small::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    z-index: -1;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      rgb(99 102 241),
+      rgb(245 158 11),
+      rgb(236 72 153),
+      rgb(245 158 11),
+      rgb(99 102 241)
+    );
+    border-radius: inherit;
+    animation: gradient-rotation 3s linear infinite;
+    pointer-events: none;
+    filter: blur(0.2rem);
+    opacity: 0.3;
+  }
 }
 
 @keyframes gradient-rotation {