Smooth Caret Input

Forms 1

About

A text input with a custom spring-animated caret that smoothly tracks cursor position instead of using the native browser caret, including support for password fields.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Smooth Caret Input to your project and fits it to your theme.

Code

How Smooth Caret Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Input, SmoothInput } from "@/components/ui/smooth-caret-input";

export default function SmoothCaretInputDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="space-y-4 text-2xl">
        <SmoothInput
          placeholder="smooth input"
          aria-label="Smooth caret input"
        />
        <Input
          placeholder="normal input"
          className="caret-primary"
          aria-label="Normal input"
        />
      </div>
    </div>
  );
}