# Spotlight search

> A ⌘K command palette in glass: results cascade in as you type and you move through them with the arrow keys.

- Category: [Liquid Glass](https://library.aimran.es/components/liquid-glass)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/lg-spotlight
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

A command palette is the fastest way around a tool with lots of pages: an admin dashboard, the docs of an API or a project management app. This one opens with ⌘K or Ctrl+K, filters apps, files and actions as you type and blurs the page behind so the search gets all the attention.

Keep the default list short, five to eight results, and put recent or popular items first. Labels like App, File or Action on the right help people scan. Esc closes it, so nobody feels trapped.

## Code

### React (Motion)

```tsx
import { useEffect, useMemo, useState, type KeyboardEvent as ReactKeyboardEvent, type CSSProperties, type MouseEvent, type ReactNode } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Airplay, Calendar, Compass, FileText, Folder, Image as ImageIcon, Moon, Music2, Search, Settings, type LucideIcon } from "lucide-react";

type Wallpaper = "aurora" | "sunset" | "ocean" | "light";

const spring = { type: "spring" as const, stiffness: 400, damping: 30 };

const walls: Record<Wallpaper, { base: string; blobs: string[] }> = {
  aurora: { base: "#0b0b1a", blobs: ["#5b21b6", "#2563eb", "#ec4899"] },
  sunset: { base: "#1a0b14", blobs: ["#f97316", "#f43f5e", "#8b5cf6"] },
  ocean: { base: "#031a1f", blobs: ["#06b6d4", "#3b82f6", "#10b981"] },
  light: { base: "#f8fafc", blobs: ["#fed7aa", "#ddd6fe", "#bae6fd"] },
};

const blobPositions = [
  ["-10%", "-15%"],
  ["45%", "5%"],
  ["5%", "50%"],
];

const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const glassCss = `
.lg-font {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--lg-a, 0.12));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Borde de luz */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.4));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflejo que sigue al cursor (--x / --y los pone track()) */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover, 0);
  transition: opacity 0.3s;
  background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, var(--lg-shine, 0.25)), transparent 70%);
}
.lg-glass:hover {
  --lg-hover: 1;
}
.lg-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lg-light .lg-text {
  color: #1d1d1f;
  text-shadow: none;
}
@keyframes lg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.12); }
  66% { transform: translate(-6%, 7%) scale(0.94); }
}
`;

// Guarda la posición del cursor para el reflejo de .lg-glass::after
function track(e: MouseEvent<HTMLElement>) {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--x", `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty("--y", `${e.clientY - r.top}px`);
}

interface StageProps {
  bg: Wallpaper;
  blur: number;
  opacity: number;
  shine: number;
  className?: string;
  children: ReactNode;
}

// Fondo de degradado animado sobre el que se ve el cristal
function Stage({
  bg,
  blur,
  opacity,
  shine,
  className = "relative h-[560px] w-full",
  children,
}: StageProps) {
  const light = bg === "light";
  const wall = walls[bg] ?? walls.aurora;
  const vars = {
    "--lg-blur": `${blur}px`,
    "--lg-a": light ? Math.min(0.6, opacity / 100 + 0.23) : opacity / 100,
    "--lg-shine": shine / 100,
  } as CSSProperties;

  return (
    <div
      className={`lg-font overflow-hidden rounded-[22px] ${className} ${light ? "lg-light" : ""}`}
      style={vars}
    >
      <style>{glassCss}</style>
      <div className="absolute inset-0 overflow-hidden" style={{ background: wall.base }}>
        <div className="absolute inset-0" style={{ filter: "blur(60px)" }}>
          {wall.blobs.map((color, i) => (
            <div
              key={i}
              className="absolute h-[75%] w-[75%] rounded-full"
              style={{
                left: blobPositions[i]?.[0],
                top: blobPositions[i]?.[1],
                background: `radial-gradient(circle, ${color} 0%, transparent 68%)`,
                opacity: light ? 1 : 0.9,
                animation: `lg-drift 20s ease-in-out ${-i * 6}s infinite`,
              }}
            />
          ))}
        </div>
        <div
          className="absolute inset-0"
          style={{ backgroundImage: grain, opacity: 0.04, mixBlendMode: "overlay" }}
        />
      </div>
      <div className="relative grid h-full w-full grid-cols-[100%] place-items-center p-4">{children}</div>
    </div>
  );
}

const items: { t: string; k: string; icon: LucideIcon; bg: string }[] = [
  { t: "Settings", k: "App", icon: Settings, bg: "linear-gradient(#a1a1aa,#52525b)" },
  { t: "Calendar", k: "App", icon: Calendar, bg: "linear-gradient(#ff7a6b,#f2493a)" },
  { t: "Browser", k: "App", icon: Compass, bg: "linear-gradient(#5ab8ff,#1a7cf5)" },
  { t: "Music", k: "App", icon: Music2, bg: "linear-gradient(#ff6b93,#f3344f)" },
  { t: "Budget 2026.pdf", k: "File", icon: FileText, bg: "linear-gradient(#ffb36b,#f97316)" },
  { t: "Projects", k: "Folder", icon: Folder, bg: "linear-gradient(#7cc4ff,#3b82f6)" },
  { t: "Travel photos", k: "File", icon: ImageIcon, bg: "linear-gradient(#ffd66b,#ff9f0a)" },
  { t: "Turn on Dark Mode", k: "Action", icon: Moon, bg: "linear-gradient(#6b7280,#1f2937)" },
  { t: "Share screen", k: "Action", icon: Airplay, bg: "linear-gradient(#5ef079,#27c24c)" },
];

interface SpotlightProps {
  label?: string;
  bg?: Wallpaper;
  blur?: number;
  opacity?: number;
  shine?: number;
}

export default function Spotlight({
  label = "Search apps, files, actions…",
  bg = "aurora",
  blur = 20,
  opacity = 12,
  shine = 25,
}: SpotlightProps) {
  const glass = { bg, blur, opacity, shine };
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);

  const results = useMemo(() => {
    if (!query) return items.slice(0, 5);
    const q = query.toLowerCase();
    return items.filter((i) => i.t.toLowerCase().includes(q) || i.k.toLowerCase().includes(q));
  }, [query]);

  // ⌘K / Ctrl+K abre y cierra; Escape cierra
  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      } else if (e.key === "Escape") {
        setOpen(false);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  useEffect(() => {
    setActive(0);
  }, [query]);

  const onKey = (e: ReactKeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((x) => Math.min(results.length - 1, x + 1));
    }
    if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((x) => Math.max(0, x - 1));
    }
    if (e.key === "Enter") setOpen(false);
  };

  return (
    <Stage {...glass}>
      <motion.div
        animate={{ filter: open ? "blur(6px)" : "blur(0px)", scale: open ? 0.97 : 1 }}
        transition={spring}
        className="flex flex-col items-center gap-3"
      >
        <motion.button
          type="button"
          onMouseMove={track}
          whileTap={{ scale: 0.95 }}
          transition={spring}
          onClick={() => setOpen(true)}
          className="lg-glass lg-text flex h-12 items-center gap-2.5 rounded-full px-5 text-[15px] font-medium"
        >
          <Search className="relative z-[3] h-4 w-4" strokeWidth={1.75} />
          <span className="relative z-[3]">Search</span>
          <kbd className="relative z-[3] ml-2 rounded-md bg-white/20 px-1.5 text-[12px]">⌘K</kbd>
        </motion.button>
      </motion.div>

      <AnimatePresence>
        {open && (
          <>
            <motion.div
              className="absolute inset-0 z-10 bg-black/20"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setOpen(false)}
            />
            <motion.div
              className="absolute inset-x-4 top-[14%] z-20 mx-auto max-w-[560px]"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              transition={spring}
            >
              <div onMouseMove={track} className="lg-glass lg-text rounded-[26px] p-2">
                <div className="relative z-[3] flex h-12 items-center gap-3 px-3">
                  <Search className="h-6 w-6 opacity-70" strokeWidth={1.75} />
                  <input
                    autoFocus
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    onKeyDown={onKey}
                    placeholder={label}
                    aria-label={label}
                    className="w-full bg-transparent text-[22px] font-light outline-none placeholder:text-current placeholder:opacity-50"
                  />
                </div>
                {results.length > 0 && (
                  <div className="relative z-[3] mt-1 border-t border-white/20 pt-2">
                    {results.map((r, i) => (
                      <motion.button
                        key={r.t}
                        type="button"
                        onMouseEnter={() => setActive(i)}
                        onClick={() => setOpen(false)}
                        initial={{ opacity: 0, y: 8 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ ...spring, delay: i * 0.035 }}
                        className="relative flex w-full items-center gap-3 rounded-[14px] px-3 py-2 text-left"
                      >
                        {active === i && (
                          <motion.span
                            layoutId="lg-spot"
                            transition={spring}
                            className="absolute inset-0 rounded-[14px]"
                            style={{ background: "rgba(255,255,255,.25)", boxShadow: "inset 0 1px 0 rgba(255,255,255,.5)" }}
                          />
                        )}
                        <span
                          className="relative grid h-8 w-8 place-items-center rounded-[9px]"
                          style={{ background: r.bg }}
                        >
                          <r.icon className="h-[18px] w-[18px] text-white" strokeWidth={1.75} />
                        </span>
                        <span className="relative flex-1 text-[15px]">{r.t}</span>
                        <span className="relative text-[12px] opacity-60">{r.k}</span>
                      </motion.button>
                    ))}
                  </div>
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </Stage>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Spotlight search” block (Liquid Glass) from AIMRAN Library to my project.

## What it is
A ⌘K command palette in glass: results cascade in as you type and you move through them with the arrow keys.

## Chosen settings
- Text: "Search apps, files, actions…"
- Background: Aurora (other options: Sunset, Ocean, Light)
- Blur: 20px (from 4 to 40px)
- Glass opacity: 12% (from 4 to 40%)
- Shine: 25% (from 0 to 60%)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import { useEffect, useMemo, useState, type KeyboardEvent as ReactKeyboardEvent, type CSSProperties, type MouseEvent, type ReactNode } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Airplay, Calendar, Compass, FileText, Folder, Image as ImageIcon, Moon, Music2, Search, Settings, type LucideIcon } from "lucide-react";

type Wallpaper = "aurora" | "sunset" | "ocean" | "light";

const spring = { type: "spring" as const, stiffness: 400, damping: 30 };

const walls: Record<Wallpaper, { base: string; blobs: string[] }> = {
  aurora: { base: "#0b0b1a", blobs: ["#5b21b6", "#2563eb", "#ec4899"] },
  sunset: { base: "#1a0b14", blobs: ["#f97316", "#f43f5e", "#8b5cf6"] },
  ocean: { base: "#031a1f", blobs: ["#06b6d4", "#3b82f6", "#10b981"] },
  light: { base: "#f8fafc", blobs: ["#fed7aa", "#ddd6fe", "#bae6fd"] },
};

const blobPositions = [
  ["-10%", "-15%"],
  ["45%", "5%"],
  ["5%", "50%"],
];

const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const glassCss = `
.lg-font {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--lg-a, 0.12));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Borde de luz */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.4));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflejo que sigue al cursor (--x / --y los pone track()) */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover, 0);
  transition: opacity 0.3s;
  background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, var(--lg-shine, 0.25)), transparent 70%);
}
.lg-glass:hover {
  --lg-hover: 1;
}
.lg-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lg-light .lg-text {
  color: #1d1d1f;
  text-shadow: none;
}
@keyframes lg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.12); }
  66% { transform: translate(-6%, 7%) scale(0.94); }
}
`;

// Guarda la posición del cursor para el reflejo de .lg-glass::after
function track(e: MouseEvent<HTMLElement>) {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--x", `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty("--y", `${e.clientY - r.top}px`);
}

interface StageProps {
  bg: Wallpaper;
  blur: number;
  opacity: number;
  shine: number;
  className?: string;
  children: ReactNode;
}

// Fondo de degradado animado sobre el que se ve el cristal
function Stage({
  bg,
  blur,
  opacity,
  shine,
  className = "relative h-[560px] w-full",
  children,
}: StageProps) {
  const light = bg === "light";
  const wall = walls[bg] ?? walls.aurora;
  const vars = {
    "--lg-blur": `${blur}px`,
    "--lg-a": light ? Math.min(0.6, opacity / 100 + 0.23) : opacity / 100,
    "--lg-shine": shine / 100,
  } as CSSProperties;

  return (
    <div
      className={`lg-font overflow-hidden rounded-[22px] ${className} ${light ? "lg-light" : ""}`}
      style={vars}
    >
      <style>{glassCss}</style>
      <div className="absolute inset-0 overflow-hidden" style={{ background: wall.base }}>
        <div className="absolute inset-0" style={{ filter: "blur(60px)" }}>
          {wall.blobs.map((color, i) => (
            <div
              key={i}
              className="absolute h-[75%] w-[75%] rounded-full"
              style={{
                left: blobPositions[i]?.[0],
                top: blobPositions[i]?.[1],
                background: `radial-gradient(circle, ${color} 0%, transparent 68%)`,
                opacity: light ? 1 : 0.9,
                animation: `lg-drift 20s ease-in-out ${-i * 6}s infinite`,
              }}
            />
          ))}
        </div>
        <div
          className="absolute inset-0"
          style={{ backgroundImage: grain, opacity: 0.04, mixBlendMode: "overlay" }}
        />
      </div>
      <div className="relative grid h-full w-full grid-cols-[100%] place-items-center p-4">{children}</div>
    </div>
  );
}

const items: { t: string; k: string; icon: LucideIcon; bg: string }[] = [
  { t: "Settings", k: "App", icon: Settings, bg: "linear-gradient(#a1a1aa,#52525b)" },
  { t: "Calendar", k: "App", icon: Calendar, bg: "linear-gradient(#ff7a6b,#f2493a)" },
  { t: "Browser", k: "App", icon: Compass, bg: "linear-gradient(#5ab8ff,#1a7cf5)" },
  { t: "Music", k: "App", icon: Music2, bg: "linear-gradient(#ff6b93,#f3344f)" },
  { t: "Budget 2026.pdf", k: "File", icon: FileText, bg: "linear-gradient(#ffb36b,#f97316)" },
  { t: "Projects", k: "Folder", icon: Folder, bg: "linear-gradient(#7cc4ff,#3b82f6)" },
  { t: "Travel photos", k: "File", icon: ImageIcon, bg: "linear-gradient(#ffd66b,#ff9f0a)" },
  { t: "Turn on Dark Mode", k: "Action", icon: Moon, bg: "linear-gradient(#6b7280,#1f2937)" },
  { t: "Share screen", k: "Action", icon: Airplay, bg: "linear-gradient(#5ef079,#27c24c)" },
];

interface SpotlightProps {
  label?: string;
  bg?: Wallpaper;
  blur?: number;
  opacity?: number;
  shine?: number;
}

export default function Spotlight({
  label = "Search apps, files, actions…",
  bg = "aurora",
  blur = 20,
  opacity = 12,
  shine = 25,
}: SpotlightProps) {
  const glass = { bg, blur, opacity, shine };
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);

  const results = useMemo(() => {
    if (!query) return items.slice(0, 5);
    const q = query.toLowerCase();
    return items.filter((i) => i.t.toLowerCase().includes(q) || i.k.toLowerCase().includes(q));
  }, [query]);

  // ⌘K / Ctrl+K abre y cierra; Escape cierra
  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      } else if (e.key === "Escape") {
        setOpen(false);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  useEffect(() => {
    setActive(0);
  }, [query]);

  const onKey = (e: ReactKeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((x) => Math.min(results.length - 1, x + 1));
    }
    if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((x) => Math.max(0, x - 1));
    }
    if (e.key === "Enter") setOpen(false);
  };

  return (
    <Stage {...glass}>
      <motion.div
        animate={{ filter: open ? "blur(6px)" : "blur(0px)", scale: open ? 0.97 : 1 }}
        transition={spring}
        className="flex flex-col items-center gap-3"
      >
        <motion.button
          type="button"
          onMouseMove={track}
          whileTap={{ scale: 0.95 }}
          transition={spring}
          onClick={() => setOpen(true)}
          className="lg-glass lg-text flex h-12 items-center gap-2.5 rounded-full px-5 text-[15px] font-medium"
        >
          <Search className="relative z-[3] h-4 w-4" strokeWidth={1.75} />
          <span className="relative z-[3]">Search</span>
          <kbd className="relative z-[3] ml-2 rounded-md bg-white/20 px-1.5 text-[12px]">⌘K</kbd>
        </motion.button>
      </motion.div>

      <AnimatePresence>
        {open && (
          <>
            <motion.div
              className="absolute inset-0 z-10 bg-black/20"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setOpen(false)}
            />
            <motion.div
              className="absolute inset-x-4 top-[14%] z-20 mx-auto max-w-[560px]"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              transition={spring}
            >
              <div onMouseMove={track} className="lg-glass lg-text rounded-[26px] p-2">
                <div className="relative z-[3] flex h-12 items-center gap-3 px-3">
                  <Search className="h-6 w-6 opacity-70" strokeWidth={1.75} />
                  <input
                    autoFocus
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    onKeyDown={onKey}
                    placeholder={label}
                    aria-label={label}
                    className="w-full bg-transparent text-[22px] font-light outline-none placeholder:text-current placeholder:opacity-50"
                  />
                </div>
                {results.length > 0 && (
                  <div className="relative z-[3] mt-1 border-t border-white/20 pt-2">
                    {results.map((r, i) => (
                      <motion.button
                        key={r.t}
                        type="button"
                        onMouseEnter={() => setActive(i)}
                        onClick={() => setOpen(false)}
                        initial={{ opacity: 0, y: 8 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ ...spring, delay: i * 0.035 }}
                        className="relative flex w-full items-center gap-3 rounded-[14px] px-3 py-2 text-left"
                      >
                        {active === i && (
                          <motion.span
                            layoutId="lg-spot"
                            transition={spring}
                            className="absolute inset-0 rounded-[14px]"
                            style={{ background: "rgba(255,255,255,.25)", boxShadow: "inset 0 1px 0 rgba(255,255,255,.5)" }}
                          />
                        )}
                        <span
                          className="relative grid h-8 w-8 place-items-center rounded-[9px]"
                          style={{ background: r.bg }}
                        >
                          <r.icon className="h-[18px] w-[18px] text-white" strokeWidth={1.75} />
                        </span>
                        <span className="relative flex-1 text-[15px]">{r.t}</span>
                        <span className="relative text-[12px] opacity-60">{r.k}</span>
                      </motion.button>
                    ))}
                  </div>
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </Stage>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````