Back

Glow Typing Input

Component Code (Next.js)

Use Copy Code to load the current local source for the Glow Typing Input component.

Claude / Codex Prompt

Create a reusable glowing typing input inspired by the shared image:
- Large dark pill surface with a muted plus icon on the left.
- Real editable input where the user can type.
- Hide the native caret and render a custom gradient caret with warm top, white center, violet bottom glow, and soft bloom under the caret.
- The custom caret should follow the input selection/cursor position while typing or clicking in the text.
- Support controlled and uncontrolled value usage, accessible label, focus/hover states, mobile sizing, and reduced-motion-safe CSS.