Refresh homepage discovery experience#6

@@ -0,0 +1,61 @@
+import React from "react"
+import { Slot } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const rainbowButtonVariants = cva(
+  cn(
+    "relative cursor-pointer group transition-all animate-rainbow",

@@ -79,87 +66,101 @@ function HeroLibraryLogos() {
 
 export function LibraryExplorer() {
   const [query, setQuery] = useState("");
+  const [shaderTheme, setShaderTheme] = useState<ShaderTheme>("dark");
+  const [webgpuUnavailable, setWebgpuUnavailable] = useState(false);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const syncTheme = () => setShaderTheme(root.classList.contains("light") ? "light" : "dark");
+    const observer = new MutationObserver(syncTheme);
+    syncTheme();
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
 
   const openLibrary = (search: string) => {
     const queryString = search.trim();
     window.location.assign(queryString ? `/libraries?q=${encodeURIComponent(queryString)}` : "/libraries");
   };
 
+  const stats = [
+    { value: `${libraries.length}`, label: "Curated libraries", Icon: BookOpen },
+    { value: `${CATEGORIES.length}`, label: "Categories", Icon: LayoutGrid },
+    { value: `${STACKS.length}`, label: "Tech stacks", Icon: Layers3 },
+    { value: "100%", label: "Open source", Icon: GitFork },
+  ];
+
   return (
-    <>
-      <section className="hero-wash relative h-svh overflow-hidden border-b border-white/[0.08]">
-        <div className="hero-registers" aria-hidden />
-        <HeroLibraryLogos />
-        <div className="relative z-10 mx-auto flex h-full max-w-7xl flex-col items-center justify-center px-5 pt-14 pb-24 text-center sm:px-8">
-          <div className="animate-fade-up mb-7 inline-flex items-center gap-3 text-[11px] font-semibold tracking-[0.16em] text-white uppercase">
-            <span className="size-1.5 rounded-full bg-[var(--col-green)]" aria-hidden />
-            <span>Open source</span>
-            <span className="h-px w-7 bg-white/35" aria-hidden />
-            <span>Community maintained</span>
-          </div>
-          <h1 data-trail-safe className="font-display animate-fade-up max-w-6xl text-[clamp(3rem,5.35vw,5rem)] leading-[0.98] font-semibold tracking-[-0.04em] text-white">
-            <span className="block">We curate all the best libraries,</span>
-            <span className="hero-accent-text block">so you don&apos;t have to.</span>
+    <section className="hero-wash relative h-svh min-h-[760px] overflow-hidden">
+      <div className="pointer-events-none absolute inset-0 z-0" aria-hidden>
+        {webgpuUnavailable ? (
+          <ScreenShader theme={shaderTheme} background={{ dark: "#000000", light: "#f7f7f5" }} />
+        ) : (
+          <ScreendevShader
+            theme={shaderTheme}
+            background={{ dark: "#000000", light: "#f7f7f5" }}
+            onError={() => setWebgpuUnavailable(true)}
+          />
+        )}
+      </div>
+      <div className="hero-registers pointer-events-none" aria-hidden />
+      <HeroLibraryLogos />
+
+      <div className="relative z-10 mx-auto grid h-full w-full items-center px-6 pt-24 pb-36 sm:px-8 xl:px-[clamp(2rem,8vw,9rem)] 2xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)] xl:pt-24 xl:pb-36">
+        <div data-trail-safe className="hero-copy animate-fade-up mx-auto w-full max-w-[720px] xl:mx-0 2xl:-translate-y-12">
+          <h1 className="font-display hero-headline max-w-[660px] text-[clamp(3rem,4vw,4.5rem)] leading-[1.01] font-semibold tracking-[-0.045em]">
+            the libraries that developers love, <span className="hero-accent-text">all in one place</span>
           </h1>
-          <div data-trail-safe className="animate-fade-up delay-1 mt-10 flex w-full justify-center">
+          <p className="hero-description mt-5 max-w-[560px] text-base leading-[1.55] sm:text-[17px]">
+            Discover, explore, and use the best open source libraries, components, and tools in one place. Curated by developers for developers.
+          </p>
+          <div className="animate-fade-up delay-1 mt-8 flex w-full justify-start">
             <SearchBar
               value={query}
               onChange={setQuery}
               onSubmit={() => openLibrary(query)}
             />
           </div>
-          <div data-trail-safe className="animate-fade-up delay-2 mt-5 flex max-w-3xl flex-wrap items-center justify-center gap-2 text-sm">
-            <span className="font-pixel mr-2 text-xs tracking-[0.08em] text-white uppercase">Popular</span>
+          <div className="animate-fade-up delay-2 mt-5 flex max-w-3xl flex-wrap items-center justify-start gap-2 text-sm">
+            <span className="hero-popular mr-2 font-pixel text-xs tracking-[0.08em] uppercase">Popular</span>
             {(["React", "Animation", "Tailwind", "Components", "Icons", "3D"] as const).map((filter) => (
               <Button
                 key={filter}
                 type="button"
                 variant="outline"
                 size="sm"
                 onClick={() => openLibrary(filter)}
-                className="popular-filter-button rounded-full px-4 text-xs shadow-none"
+                className="popular-filter-button h-8 rounded-full px-4 text-xs shadow-none"
               >
                 {filter}
               </Button>
             ))}
           </div>
         </div>
-        <div data-trail-safe className="absolute inset-x-0 bottom-8 z-10 hidden justify-center md:flex">
-          <div className="grid w-[min(900px,calc(100%-3rem))] grid-cols-4 gap-2">
-            {[
-              { value: `${libraries.length}`, label: "Curated libraries", Icon: BookOpen },
-              { value: `${CATEGORIES.length}`, label: "Categories", Icon: LayoutGrid },
-              { value: `${STACKS.length}`, label: "Tech stacks", Icon: Layers3 },
-              { value: "100%", label: "Open source", Icon: GitFork },
-            ].map(({ value, label, Icon }) => (
-              <GlareHover
-                key={label}
-                width="100%"
-                height="92px"
-                background="#050505"
-                borderColor="rgba(255,255,255,0.13)"
-                borderRadius="14px"
-                glareColor="#ffffff"
-                glareOpacity={0.12}
-                glareSize={180}
-                transitionDuration={700}
-                className="hero-stat cursor-default"
-              >
-                <div className="relative z-10 flex w-full items-center gap-4 px-5 text-left">
-                  <span className="grid size-9 shrink-0 place-items-center rounded-xl border border-white/12 bg-white/[0.035]">
-                    <Icon className="size-4 text-white" aria-hidden />
-                  </span>
-                  <span>
-                    <strong className="block text-2xl font-semibold tracking-[-0.03em] text-white tabular-nums">{value}</strong>
-                    <span className="mt-0.5 block text-[10px] leading-4 font-semibold tracking-[0.08em] text-white uppercase">{label}</span>
-                  </span>
-                </div>
-              </GlareHover>
-            ))}
+      </div>
+
+      <div data-trail-safe className="hero-stats absolute bottom-10 left-1/2 z-10 hidden w-[min(1408px,calc(100%-3rem))] -translate-x-1/2 grid-cols-2 md:grid md:grid-cols-4">
+        {stats.map(({ value, label, Icon }, index) => (
+          <div key={label} className={`hero-stat flex items-center gap-4 px-5 py-2 ${index > 0 ? "border-l" : ""}`}>
+            <span className="hero-stat-icon grid size-12 shrink-0 place-items-center rounded-xl border">
+              <Icon className="size-5" aria-hidden />
+            </span>
+            <span>
+              <strong className="hero-stat-value block text-2xl font-semibold tracking-[-0.03em] tabular-nums">{value}</strong>
+              <span className="hero-stat-label mt-0.5 block text-[10px] leading-4 font-semibold tracking-[0.08em] uppercase">{label}</span>
+            </span>
           </div>
-        </div>
-      </section>
+        ))}
+      </div>
 
-    </>
+      <a
+        href="https://openshaders.com/@screendev"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="hero-shader-credit absolute bottom-4 right-5 z-10 text-[10px] tracking-[0.02em] sm:right-8"
+      >
+        Background shader by @screendev on OpenShaders
+      </a>

@@ -132,46 +133,48 @@ export function GooeyInput({
       </svg>
 
       <div
-        className="gooey-filter-layer relative flex h-14 w-full items-center justify-center"
+        className="gooey-filter-layer relative flex h-14 w-full items-center justify-start"
         style={{ filter: `url(#${filterId})` }}
       >
-        <motion.div
-          initial="collapsed"
-          animate={open ? "expanded" : "collapsed"}
-          variants={buttonVariants}
-          transition={transition}
-          className="gooey-surface flex h-14 max-w-full items-center overflow-hidden rounded-[20px]"
-          onClick={() => setExpanded(true)}
-        >
-          {!open && (
-            <span className="ml-5">
-              <SearchIcon layoutId={iconLayoutId} />
-            </span>
-          )}
-          <motion.input
-            ref={inputRef}
-            layout
-            type="search"
-            enterKeyHint="search"
-            autoComplete="off"
-            value={searchValue}
-            disabled={disabled}
-            placeholder={placeholder}
-            aria-label="Search UI libraries"
-            onChange={handleChange}
-            onFocus={() => setExpanded(true)}
-            onBlur={() => {
-              if (!searchValue) setExpanded(false);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") onSubmit?.();
-            }}
-            className="gooey-input-text h-full min-w-0 flex-1 bg-transparent px-4 text-[15px] outline-none placeholder:opacity-55 [&::-webkit-search-cancel-button]:hidden"
-          />
-          <kbd className="gooey-key mr-4 hidden shrink-0 rounded-md border px-2 py-1 font-mono text-[10px] tracking-wide sm:block">
-            ⌘ K
-          </kbd>
-        </motion.div>
+        <StarBorder color="var(--col-blue)" speed="4s" id="hero-search" className="w-fit max-w-full cursor-text">

@@ -1,33 +1,74 @@
-import { BorderBeam } from "@/components/ui/border-beam-search";
-import { GooeyInput } from "@/components/ui/gooey-input";
+"use client";
+
+import { useEffect, useRef, type FormEvent } from "react";
+import { ArrowRight, Search } from "lucide-react";
 
 interface SearchBarProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: () => void;
 }
 
+const hints = [
+  "Find UI libraries for dashboards",
+  "Explore React animation tools",
+  "Browse accessible interface libraries",
+];
+
 export function SearchBar({ value, onChange, onSubmit }: SearchBarProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleShortcut = (event: KeyboardEvent) => {
+      const isTyping = event.target instanceof HTMLElement && (
+        event.target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName)
+      );
+      const slashShortcut = event.key === "/" && !isTyping;
+      const commandShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k";
+
+      if (!slashShortcut && !commandShortcut) return;
+      event.preventDefault();
+      inputRef.current?.focus();
+    };
+
+    window.addEventListener("keydown", handleShortcut);
+    return () => window.removeEventListener("keydown", handleShortcut);
+  }, []);
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit();
+  };
+
   return (
-    <BorderBeam
-      size="md"
-      colorVariant="mono"
-      staticColors
-      duration={3.1}
-      borderRadius={20}
-      brightness={0.8}
-      strength={0.32}
+    <form
       id="hero-search"
-      className="w-full max-w-[48rem]"
+      role="search"
+      onSubmit={submit}
+      className="hero-search relative flex h-14 w-full max-w-[44rem] items-center gap-3 rounded-xl border px-4"

@@ -79,87 +66,101 @@ function HeroLibraryLogos() {
 
 export function LibraryExplorer() {
   const [query, setQuery] = useState("");
+  const [shaderTheme, setShaderTheme] = useState<ShaderTheme>("dark");
+  const [webgpuUnavailable, setWebgpuUnavailable] = useState(false);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const syncTheme = () => setShaderTheme(root.classList.contains("light") ? "light" : "dark");
+    const observer = new MutationObserver(syncTheme);
+    syncTheme();
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);

@@ -141,18 +193,212 @@ html.light .gooey-surface {
   color: #111;
   box-shadow: inset 0 0 0 1px rgba(17,17,17,.16);
 }
+html.light .hero-search-surface { box-shadow: none; }
 html.light .gooey-input-text { color: #111; }
 html.light .gooey-key { border-color: rgba(17,17,17,.14); color: rgba(17,17,17,.65); }
-html.light .hero-stat { background: #fff !important; border-color: rgba(17,17,17,.14) !important; }
+html.light .hero-stat { background: transparent !important; border-color: rgba(17,17,17,.14) !important; }
+
+.hero-search { border-color: rgba(255,255,255,.15); background: #090909; color: #fff; }
+.hero-search-icon { color: rgba(255,255,255,.72); transition: transform 220ms ease; }
+.hero-search:focus-within .hero-search-icon { transform: translateX(2px); }
+.hero-search-input { color: #fff; }
+.hero-search-hints { position: absolute; left: 3.25rem; right: 8.5rem; top: 50%; height: 1.5rem; overflow: hidden; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,.48); }
+.hero-search-hint { position: absolute; inset: 0 auto auto 0; overflow: hidden; max-width: 100%; opacity: 0; text-overflow: ellipsis; white-space: nowrap; animation: hero-search-hint-cycle 9s ease-in-out infinite; }
+.hero-search-hint:nth-child(2) { animation-delay: 3s; }
+.hero-search-hint:nth-child(3) { animation-delay: 6s; }
+.hero-search:focus-within .hero-search-hints { visibility: hidden; }

@@ -0,0 +1,409 @@
+/* Background shader by @screen on OpenShaders: https://openshaders.com/@screen */
+"use client";
+
+import { type CSSProperties, useEffect, useRef } from "react";
+
+const VERTEX_SHADER = `#version 300 es
+void main() {
+  vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+
+const FIELD_SHADER = `#version 300 es
+precision highp float;
+
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uLightMode;
+uniform vec3 uDarkBackground;
+uniform vec3 uLightBackground;
+out vec4 fragColor;
+
+const float HUE = 0.0247616936;
+const float HUE_SPREAD = 0.00896027964;
+const float HUE_TRAVEL = 1.61191618;
+const float CHROMA = 0.0828986764;
+const float LIGHTNESS = 0.566419363;
+const float COLOUR_CYCLE = 0.210922211;
+const float THETA = 2.11860061;
+const float SHEAR = 0.955188811;
+const float SHRINK = 0.958665013;
+const float LAYERS = 72.0;
+const float WARP_FREQ_X = 0.595242977;
+const float WARP_FREQ_Y = 2.40765452;
+const float WARP_AMP_X = 0.104781911;
+const float WARP_AMP_Y = 0.0273131337;
+const float ASPECT_X = 2.19655395;
+const float ASPECT_Y = 0.187779561;
+const float OFFSET_X = 0.391835809;
+const float OFFSET_Y = -0.0259866789;
+const float TILT = 1.37964761;
+const float ZOOM = 1.16922402;
+const float CENTRE_X = -0.606007397;
+const float CENTRE_Y = -0.400004715;
+const float GLOW_SIZE = 0.00274323416;
+const float FALLOFF = 0.303328395;
+const float VIGNETTE = 0.0613339283;
+const float FLOW_SPEED = 0.518149257;
+const float FLOW_DIRECTION = -1.0;
+const float BREATH_RATE = 0.471057415;
+const float BREATH_AMOUNT = 0.0587214343;
+const float PHASE = 78.3789444;
+const float ECHO = 0.0;
+const float ECHO_SHIFT = -0.127812564;
+const float SOFTNESS = 0.00230249879;
+const float LIGHT_SWING = 0.2629686;
+
+const float TAU = 6.28318530718;
+
+vec3 oklchToLinear(float L, float C, float h) {
+  float a = C * cos(h), b = C * sin(h);
+  float l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  float m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  float s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+  vec3 lms = vec3(l_, m_, s_);
+  lms = lms * lms * lms;
+  return mat3(4.0767416621, -1.2684380046, -0.0041960863,
+              -3.3077115913, 2.6097574011, -0.7034186147,
+              0.2309699292, -0.3413193965, 1.7076147010) * lms;
+}
+
+float blueNoise(vec2 p, float frame) {
+  p += 5.588238 * mod(frame, 64.0);
+  return fract(52.9829189 * fract(0.06711056 * p.x + 0.00583715 * p.y));
+}
+
+void main() {
+  vec2 R = iResolution.xy;
+  vec2 pos = (gl_FragCoord.xy - 0.5 * R) / R.y;
+  float t = iTime * FLOW_SPEED * FLOW_DIRECTION + PHASE;
+  float breath = (-sin(iTime * BREATH_RATE * 1.5) + sin(iTime * BREATH_RATE + 1.0)) * 0.25 + 0.5;
+
+  vec2 u = (pos - vec2(CENTRE_X, CENTRE_Y)) * (ZOOM - breath * BREATH_AMOUNT);
+  float ct = cos(TILT), st = sin(TILT);
+  u = mat2(ct, st, -st, ct) * u;
+
+  mat2 fold = mat2(cos(THETA), sin(THETA), -SHEAR, cos(THETA));
+
+  float hue0 = HUE * TAU;
+  float hue1 = hue0 + HUE_SPREAD * TAU;
+  vec3 color = vec3(0.0);
+
+  for (float i = 1.0; i <= 96.0; i += 1.0) {
+    if (i > LAYERS) break;
+    u.x += -sin(u.y * WARP_FREQ_X + t + i * 0.007) * WARP_AMP_X;
+    u.y += -sin(u.x * WARP_FREQ_Y - t + i * 0.02) * WARP_AMP_Y;
+    u = fold * u * SHRINK;
+
+    vec2 q = u - vec2(OFFSET_X + breath * 0.1, OFFSET_Y);
+    vec2 s = vec2(q.x * ASPECT_X, q.y * ASPECT_Y);
+    float glow = GLOW_SIZE / (dot(s, s) + SOFTNESS);
+#ifndef SKIP_ECHO
+    vec2 e = vec2((q.x - ECHO_SHIFT) * ASPECT_X, s.y);
+    glow += ECHO * GLOW_SIZE / (dot(e, e) + SOFTNESS);
+#endif
+    glow *= 0.25 + breath * 0.4;
+
+    float r = length(u);
+    float k = sin(i * COLOUR_CYCLE + t * 1.2 + r * HUE_TRAVEL) * 0.5 + 0.5;
+    vec3 tint = clamp(oklchToLinear(LIGHTNESS + LIGHT_SWING * k, CHROMA * (0.75 + 0.35 * k), mix(hue0, hue1, k)), 0.0, 1.0);
+    color += glow * tint * exp2(-r * FALLOFF);
+  }
+
+  vec3 x = max(color, 0.0);
+  color = (x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14);
+  color = pow(clamp(color, 0.0, 1.0), vec3(0.85, 0.92, 0.98));
+
+  float edge = smoothstep(0.5, 1.6, length(pos));
+  color *= 1.0 - edge * VIGNETTE;
+
+  vec3 dark = uDarkBackground + color * (1.0 - uDarkBackground);
+  float strength = max(color.r, max(color.g, color.b));
+  vec3 light = uLightBackground * (1.0 - strength) + color * 0.96;
+  color = mix(dark, light, uLightMode);
+
+  color += (blueNoise(gl_FragCoord.xy, floor(iTime * 24.0)) - 0.5) / 255.0;
+  fragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`;
+
+export type ShaderTheme = "dark" | "light";
+
+type ShaderOptions = {
+  theme?: ShaderTheme;
+  background?: { dark?: string; light?: string };
+  autoplay?: boolean;
+  signal?: AbortSignal;
+  onError?: (error: Error) => void;
+};
+
+type ShaderHandle = {
+  setTheme(theme: ShaderTheme): void;
+  render(time: number): void;
+  destroy(): void;
+};
+
+type ScreenShaderProps = {
+  theme?: ShaderTheme;
+  background?: { dark?: string; light?: string };
+  time?: number;
+  onError?: (error: Error) => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function ScreenShader({ theme = "dark", background, time, onError, className, style }: ScreenShaderProps) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const shader = useRef<ShaderHandle | null>(null);
+  const latestTheme = useRef(theme);
+  const latestTime = useRef(time);
+  const latestOnError = useRef(onError);
+  const dark = background?.dark ?? "#090909";
+  const light = background?.light ?? "#ffffff";
+  const animated = time === undefined;
+
+  useEffect(() => {
+    latestTheme.current = theme;
+    shader.current?.setTheme(theme);
+  }, [theme]);
+
+  useEffect(() => {
+    latestTime.current = time;
+    if (time !== undefined) shader.current?.render(time);
+  }, [time]);
+
+  useEffect(() => {
+    latestOnError.current = onError;
+  }, [onError]);
+
+  useEffect(() => {
+    const element = canvas.current;
+    if (!element) return;
+    let handle: ShaderHandle | null = null;
+    const controller = new AbortController();
+    const options: ShaderOptions = {
+      theme: latestTheme.current,
+      background: { dark, light },
+      autoplay: animated,
+      signal: controller.signal,
+      onError: (error) => {
+        if (controller.signal.aborted) return;
+        if (latestOnError.current) latestOnError.current(error);
+        else console.error(error);
+      },
+    };
+    try {
+      handle = createShader(element, options);
+      shader.current = handle;
+      if (latestTime.current !== undefined) handle.render(latestTime.current);
+    } catch (error) {
+      options.onError?.(error instanceof Error ? error : new Error(String(error)));
+    }
+    return () => {
+      controller.abort();
+      handle?.destroy();
+      shader.current = null;
+    };
+  }, [dark, light, animated]);
+
+  return <canvas ref={canvas} className={className} style={{ display: "block", width: "100%", height: "100%", ...style }} aria-hidden="true" />;
+}
+
+const MAX_PIXELS = 600_000;
+const THEME_EASE = 7;
+const FRAME_INTERVAL = 1000 / 80;
+
+function parseHex(hex: string): [number, number, number] {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) throw new Error(`Background colours must be #rrggbb, got "${hex}".`);
+  return [0, 2, 4].map((i) => parseInt(match[1].slice(i, i + 2), 16) / 255) as [number, number, number];
+}
+
+function animate(options: ShaderOptions, draw: (time: number, theme: number, pixelRatio: number) => void, canvas: HTMLCanvasElement, release: () => void, maxDimension = Infinity): ShaderHandle {
+  const autoplay = options.autoplay !== false;
+  const stillness = window.matchMedia("(prefers-reduced-motion: reduce)");
+  let resolution = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`);
+  let deviceRatio = window.devicePixelRatio || 1;
+  let width = canvas.clientWidth, height = canvas.clientHeight;
+  let visible = true;
+  let disposed = false;
+  let targetTheme = options.theme === "light" ? 1 : 0;
+  let theme = targetTheme;
+  let frame = 0;
+  let elapsed = 0;
+  let lastTime = 0;
+  let previous: number | null = null;
+
+  function canDraw() {
+    return !disposed && !document.hidden && visible && width > 0 && height > 0;
+  }
+
+  function fitCanvas() {
+    const scale = Math.min(deviceRatio, 2, Math.sqrt(MAX_PIXELS / (width * height)), maxDimension / width, maxDimension / height);
+    const w = Math.max(1, Math.floor(width * scale));
+    const h = Math.max(1, Math.floor(height * scale));
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    return w / width;
+  }
+
+  function render(time: number) {
+    if (disposed) return;
+    lastTime = time;
+    if (!canDraw()) return;
+    try {
+      draw(time, theme, fitCanvas());
+    } catch (error) {
+      destroy();
+      const failure = error instanceof Error ? error : new Error(String(error));
+      if (options.onError) options.onError(failure);
+      else console.error(failure);
+    }
+  }
+
+  function schedule() {
+    if (!frame && canDraw()) frame = requestAnimationFrame(tick);
+  }
+
+  function refresh() {
+    if (!canDraw()) {
+      cancelAnimationFrame(frame);
+      frame = 0;
+      previous = null;
+    } else schedule();
+  }
+
+  function tick(now: number) {
+    frame = 0;
+    if (!canDraw()) { previous = null; return; }
+    if (autoplay && !stillness.matches && previous !== null && now - previous < FRAME_INTERVAL) {
+      schedule();
+      return;
+    }
+    const delta = previous === null ? 0 : Math.min((now - previous) / 1000, 0.1);
+    previous = now;
+    if (autoplay) {
+      if (!stillness.matches) elapsed += delta;
+      theme += (targetTheme - theme) * (1 - Math.exp(-delta * THEME_EASE));
+      if (Math.abs(targetTheme - theme) < 0.002) theme = targetTheme;
+    }
+    render(autoplay ? elapsed : lastTime);
+    if (autoplay && (!stillness.matches || theme !== targetTheme)) schedule();
+    else previous = null;
+  }
+
+  function pixelRatioChanged() {
+    if (disposed) return;
+    const next = window.devicePixelRatio || 1;
+    if (deviceRatio === next) return;
+    deviceRatio = next;
+    resolution.removeEventListener("change", pixelRatioChanged);
+    resolution = window.matchMedia(`(resolution: ${next}dppx)`);
+    resolution.addEventListener("change", pixelRatioChanged);
+    refresh();
+  }
+
+  const observer = new ResizeObserver(([entry]) => {
+    if (disposed || !entry) return;
+    const next = entry.contentRect;
+    if (width === next.width && height === next.height) return;
+    width = next.width;
+    height = next.height;
+    refresh();
+  });
+  const intersection = new IntersectionObserver(([entry]) => {
+    if (disposed || !entry || visible === entry.isIntersecting) return;
+    visible = entry.isIntersecting;
+    refresh();
+  });
+
+  function destroy() {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(frame);
+    frame = 0;
+    observer.disconnect();
+    intersection.disconnect();
+    resolution.removeEventListener("change", pixelRatioChanged);
+    stillness.removeEventListener("change", refresh);
+    document.removeEventListener("visibilitychange", refresh);
+    window.removeEventListener("resize", pixelRatioChanged);
+    options.signal?.removeEventListener("abort", destroy);
+    release();
+  }
+
+  observer.observe(canvas);
+  intersection.observe(canvas);
+  resolution.addEventListener("change", pixelRatioChanged);
+  stillness.addEventListener("change", refresh);
+  document.addEventListener("visibilitychange", refresh);
+  window.addEventListener("resize", pixelRatioChanged);
+  options.signal?.addEventListener("abort", destroy, { once: true });
+  if (options.signal?.aborted) destroy();
+  else schedule();
+
+  return {
+    setTheme(next: ShaderTheme) {
+      if (disposed) return;
+      targetTheme = next === "light" ? 1 : 0;
+      if (autoplay) refresh();
+      else { theme = targetTheme; render(lastTime); }
+    },
+    render,
+    destroy,
+  };
+}

@@ -1,94 +1,161 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { GitFork, Search, Star } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { Menu, Search, X } from "lucide-react";
+import { RainbowButton } from "@/components/ui/rainbow-button";
 import { ThemeToggle } from "./ThemeToggle";
 
 const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const links = [
+  ["Libraries", "/libraries"],
+  ["Docs", "/docs"],
+  ["Sponsors", "/#sponsors"],
+] as const;
 
 export function Header() {
+  const pathname = usePathname();
   const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const [stars, setStars] = useState<number | null>(null);
+  const linksRef = useRef<HTMLElement>(null);
+  const highlightRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
-    const update = () => setScrolled(window.scrollY > 32);
+    const update = () => setScrolled(window.scrollY > 50);
     update();
     window.addEventListener("scroll", update, { passive: true });
     return () => window.removeEventListener("scroll", update);
   }, []);
 
   useEffect(() => {
-    const controller = new AbortController();
+    setMenuOpen(false);
+  }, [pathname]);
 
+  useEffect(() => {
+    const controller = new AbortController();
     fetch("https://api.github.com/repos/screen-gd/Col", { signal: controller.signal })
       .then((response) => (response.ok ? response.json() : Promise.reject()))
       .then((repository: { stargazers_count?: number }) => {
-        if (typeof repository.stargazers_count === "number") {
-          setStars(repository.stargazers_count);
-        }
+        if (typeof repository.stargazers_count === "number") setStars(repository.stargazers_count);
       })
       .catch(() => {});
-
     return () => controller.abort();
   }, []);
 
+  const positionHighlight = useCallback((link: HTMLAnchorElement | null) => {
+    const container = linksRef.current;
+    const highlight = highlightRef.current;
+    if (!container || !highlight || !link) return;
+
+    const linkRect = link.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    highlight.style.width = `${linkRect.width}px`;
+    highlight.style.height = `${linkRect.height}px`;
+    highlight.style.transform = `translateX(${linkRect.left - containerRect.left}px)`;
+    highlight.style.opacity = "1";
+  }, []);
+
+  const getActiveLink = useCallback(
+    () => linksRef.current?.querySelector<HTMLAnchorElement>('[aria-current="page"]') ?? null,
+    [],
+  );
+
+  const restoreActiveHighlight = useCallback(() => {
+    const activeLink = getActiveLink();
+    if (activeLink) positionHighlight(activeLink);
+    else if (highlightRef.current) highlightRef.current.style.opacity = "0";
+  }, [getActiveLink, positionHighlight]);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(restoreActiveHighlight);
+    window.addEventListener("resize", restoreActiveHighlight);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", restoreActiveHighlight);
+    };
+  }, [pathname, restoreActiveHighlight]);
+
+  const landing = pathname === "/";
+  const headerClass = `site-header${landing ? "" : " site-header--docs"}${scrolled ? " site-header--scrolled" : ""}`;
+
   return (
-    <header
-      className={`site-header fixed left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 border transition-[top,max-width,background-color,border-color,box-shadow,border-radius,backdrop-filter] duration-500 ease-[cubic-bezier(.16,1,.3,1)] sm:w-[calc(100%-4rem)] ${
-        scrolled
-          ? "site-header-scrolled top-3 max-w-6xl rounded-2xl border-white/10 bg-black/90 backdrop-blur-xl"
-          : "top-2 max-w-[1450px] rounded-none border-transparent bg-transparent shadow-none backdrop-blur-none"
-      }`}
-    >
-      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 sm:px-8">
-        <a
-          href="/"
-          aria-label="Col — Collection of Libraries"
-          title="Collection of Libraries"
-          className="flex items-center gap-2.5 text-white"
-        >
-          <Image src="/brand/col-mark.png" alt="" width={28} height={28} className="brand-mark size-7 object-contain" priority />
-          <span className="brand-wordmark text-base font-bold tracking-[-0.03em]">Col</span>
-        </a>
-        <nav aria-label="Primary" className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-7 text-sm text-white lg:flex">
-          <a href="/libraries">Libraries</a>
-          <a href="/docs">Docs</a>
-          <a href="/contributors">Contributors</a>
-        </nav>
-        <nav aria-label="Actions" className="flex items-center gap-4 sm:gap-5">
-          <div className="flex items-center gap-4 text-sm text-white lg:hidden">
-            <a href="/docs">Docs</a>
-            <a href="/contributors">People</a>
-          </div>
-          <ThemeToggle />
-          <a href="/#hero-search" aria-label="Search libraries" className="hidden text-white sm:block">
-            <Search className="size-4" aria-hidden />
+    <header className={headerClass}>
+      <div className="site-header-inner">
+        <div className="site-header-left">
+          <a href="/" aria-label="Col, Collection of Libraries" className="site-header-brand">
+            <Image src="/brand/col-mark.png" alt="" width={24} height={24} className="brand-mark" priority />
+            <span>Col</span>
           </a>
-          <a
-            href="https://github.com/screen-gd/Col/issues/new"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hidden text-sm text-white md:block"
+          <span className="site-header-divider" aria-hidden="true">/</span>
+          <nav
+            ref={linksRef}
+            aria-label="Primary"
+            className="site-header-links"
+            onMouseLeave={restoreActiveHighlight}
+            onBlur={(event) => {
+              if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+                restoreActiveHighlight();
+              }
+            }}
           >
-            Submit
+            <span ref={highlightRef} className="site-header-link-highlight" aria-hidden="true" />
+            {links.map(([label, href]) => {
+              const active = pathname === href || pathname.startsWith(`${href}/`);
+              return (
+                <a
+                  key={href}
+                  href={href}
+                  aria-current={active ? "page" : undefined}
+                  className="site-header-link"
+                  onMouseEnter={(event) => positionHighlight(event.currentTarget)}
+                  onFocus={(event) => positionHighlight(event.currentTarget)}
+                >
+                  {label}
+                </a>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div className="site-header-actions">
+          {!landing && (
+            <a href="/#hero-search" className="site-header-search" aria-label="Search libraries">
+              <Search size={14} aria-hidden="true" />
+              <span>Search...</span>
+              <kbd>/</kbd>
+            </a>

@@ -1,94 +1,161 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { GitFork, Search, Star } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { Menu, Search, X } from "lucide-react";
+import { RainbowButton } from "@/components/ui/rainbow-button";
 import { ThemeToggle } from "./ThemeToggle";
 
 const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const links = [
+  ["Libraries", "/libraries"],
+  ["Docs", "/docs"],
+  ["Sponsors", "/#sponsors"],
+] as const;
 
 export function Header() {
+  const pathname = usePathname();
   const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const [stars, setStars] = useState<number | null>(null);
+  const linksRef = useRef<HTMLElement>(null);
+  const highlightRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
-    const update = () => setScrolled(window.scrollY > 32);
+    const update = () => setScrolled(window.scrollY > 50);
     update();
     window.addEventListener("scroll", update, { passive: true });
     return () => window.removeEventListener("scroll", update);
   }, []);
 
   useEffect(() => {
-    const controller = new AbortController();
+    setMenuOpen(false);
+  }, [pathname]);
 
+  useEffect(() => {
+    const controller = new AbortController();
     fetch("https://api.github.com/repos/screen-gd/Col", { signal: controller.signal })
       .then((response) => (response.ok ? response.json() : Promise.reject()))
       .then((repository: { stargazers_count?: number }) => {
-        if (typeof repository.stargazers_count === "number") {
-          setStars(repository.stargazers_count);
-        }
+        if (typeof repository.stargazers_count === "number") setStars(repository.stargazers_count);
       })
       .catch(() => {});
-
     return () => controller.abort();
   }, []);
 
+  const positionHighlight = useCallback((link: HTMLAnchorElement | null) => {
+    const container = linksRef.current;
+    const highlight = highlightRef.current;
+    if (!container || !highlight || !link) return;
+
+    const linkRect = link.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    highlight.style.width = `${linkRect.width}px`;
+    highlight.style.height = `${linkRect.height}px`;
+    highlight.style.transform = `translateX(${linkRect.left - containerRect.left}px)`;
+    highlight.style.opacity = "1";
+  }, []);
+
+  const getActiveLink = useCallback(
+    () => linksRef.current?.querySelector<HTMLAnchorElement>('[aria-current="page"]') ?? null,
+    [],
+  );
+
+  const restoreActiveHighlight = useCallback(() => {
+    const activeLink = getActiveLink();
+    if (activeLink) positionHighlight(activeLink);
+    else if (highlightRef.current) highlightRef.current.style.opacity = "0";
+  }, [getActiveLink, positionHighlight]);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(restoreActiveHighlight);
+    window.addEventListener("resize", restoreActiveHighlight);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", restoreActiveHighlight);
+    };
+  }, [pathname, restoreActiveHighlight]);
+
+  const landing = pathname === "/";
+  const headerClass = `site-header${landing ? "" : " site-header--docs"}${scrolled ? " site-header--scrolled" : ""}`;
+
   return (
-    <header
-      className={`site-header fixed left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 border transition-[top,max-width,background-color,border-color,box-shadow,border-radius,backdrop-filter] duration-500 ease-[cubic-bezier(.16,1,.3,1)] sm:w-[calc(100%-4rem)] ${
-        scrolled
-          ? "site-header-scrolled top-3 max-w-6xl rounded-2xl border-white/10 bg-black/90 backdrop-blur-xl"
-          : "top-2 max-w-[1450px] rounded-none border-transparent bg-transparent shadow-none backdrop-blur-none"
-      }`}
-    >
-      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 sm:px-8">
-        <a
-          href="/"
-          aria-label="Col — Collection of Libraries"
-          title="Collection of Libraries"
-          className="flex items-center gap-2.5 text-white"
-        >
-          <Image src="/brand/col-mark.png" alt="" width={28} height={28} className="brand-mark size-7 object-contain" priority />
-          <span className="brand-wordmark text-base font-bold tracking-[-0.03em]">Col</span>
-        </a>
-        <nav aria-label="Primary" className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-7 text-sm text-white lg:flex">
-          <a href="/libraries">Libraries</a>
-          <a href="/docs">Docs</a>
-          <a href="/contributors">Contributors</a>
-        </nav>
-        <nav aria-label="Actions" className="flex items-center gap-4 sm:gap-5">
-          <div className="flex items-center gap-4 text-sm text-white lg:hidden">
-            <a href="/docs">Docs</a>
-            <a href="/contributors">People</a>
-          </div>
-          <ThemeToggle />
-          <a href="/#hero-search" aria-label="Search libraries" className="hidden text-white sm:block">
-            <Search className="size-4" aria-hidden />
+    <header className={headerClass}>
+      <div className="site-header-inner">
+        <div className="site-header-left">
+          <a href="/" aria-label="Col, Collection of Libraries" className="site-header-brand">
+            <Image src="/brand/col-mark.png" alt="" width={24} height={24} className="brand-mark" priority />
+            <span>Col</span>
           </a>
-          <a
-            href="https://github.com/screen-gd/Col/issues/new"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hidden text-sm text-white md:block"
+          <span className="site-header-divider" aria-hidden="true">/</span>
+          <nav
+            ref={linksRef}
+            aria-label="Primary"
+            className="site-header-links"
+            onMouseLeave={restoreActiveHighlight}
+            onBlur={(event) => {
+              if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+                restoreActiveHighlight();
+              }
+            }}
           >
-            Submit
+            <span ref={highlightRef} className="site-header-link-highlight" aria-hidden="true" />
+            {links.map(([label, href]) => {
+              const active = pathname === href || pathname.startsWith(`${href}/`);
+              return (
+                <a
+                  key={href}
+                  href={href}
+                  aria-current={active ? "page" : undefined}
+                  className="site-header-link"
+                  onMouseEnter={(event) => positionHighlight(event.currentTarget)}
+                  onFocus={(event) => positionHighlight(event.currentTarget)}
+                >
+                  {label}
+                </a>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div className="site-header-actions">
+          {!landing && (
+            <a href="/#hero-search" className="site-header-search" aria-label="Search libraries">
+              <Search size={14} aria-hidden="true" />
+              <span>Search...</span>
+              <kbd>/</kbd>
+            </a>
+          )}
+          <ThemeToggle />
+          <a href="https://github.com/screen-gd/Col" target="_blank" rel="noopener noreferrer" className="site-header-github" aria-label={`Col on GitHub${stars === null ? "" : `, ${stars} stars`}`}>
+            <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" /></svg>
+            <span>{stars === null ? "..." : compactNumber.format(stars)}</span>
           </a>
-          <a
-            href="https://github.com/screen-gd/Col"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={`Contribute on GitHub${stars === null ? "" : `, ${stars} stars`}`}
-            className="hidden items-center gap-2 rounded-xl border border-white/15 px-4 py-2 text-sm text-white transition-colors hover:border-white/30 md:flex"
+          <RainbowButton
+            asChild
+            className="h-9 rounded-[10px] px-[19px] text-xs text-white dark:text-black max-[760px]:h-[34px] max-[760px]:rounded-[9px] max-[760px]:px-3"
           >
-            <GitFork className="size-4" aria-hidden />
-            <span>Contribute</span>
-            <span className="h-4 w-px bg-white/15" aria-hidden />
-            <span className="flex items-center gap-1.5 font-medium tabular-nums">
-              <Star className="size-3.5" aria-hidden />
-              {stars === null ? "—" : compactNumber.format(stars)}
-            </span>
-          </a>
-        </nav>
+            <a href="https://github.com/screen-gd/Col/issues/new" target="_blank" rel="noopener noreferrer">Submit</a>
+          </RainbowButton>
+          <button
+            type="button"
+            className="site-header-menu"
+            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            aria-expanded={menuOpen}
+            aria-controls="site-header-mobile-menu"
+            onClick={() => setMenuOpen((open) => !open)}
+          >
+            {menuOpen ? <X size={17} aria-hidden="true" /> : <Menu size={17} aria-hidden="true" />}
+          </button>
+        </div>
+
+        {menuOpen && (
+          <nav id="site-header-mobile-menu" aria-label="Mobile primary" className="site-header-mobile-menu">
+            {links.map(([label, href]) => <a key={href} href={href} aria-current={pathname === href ? "page" : undefined}>{label}</a>)}