Glow Input

focus x glow

Text input with accent focus glow and animated ring. From Website OS.

inputglowfocusnative

Code

input-glow.tsx

export function GlowInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <div className="group relative w-64">
      <div className="pointer-events-none absolute -inset-px rounded-xl bg-brand/40 opacity-0 blur transition-opacity duration-300 group-focus-within:opacity-100" />
      <input {...props} className="relative w-full rounded-xl border border-border bg-surface px-4 py-3 text-sm outline-none focus:border-brand/60" />
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Glow Input component and wire it to my accent.”