Glow Input

focus x glow

A text input with an accent focus glow and an animated ring.

focusringform

Code

glow-input.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-black/40 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.”