Animated Input

August 1, 2026

A text input with per-character motion and a custom cursor that springs between typing and selection states.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

animate-text-input-typing.tsx

Usage

import { AnimatedInput } from "@/components/unlumen-ui/animate-text-input-typing";

export default function Example() {
  return (
    <AnimatedInput
      inputVariant="default"
      charAnimation="spring"
      cursorVariant="line"
      placeholder="Type something…"
      className="w-full max-w-sm"
    />
  );
}

API Reference

AnimatedInput

Prop	Type	Default	Description
`color?`	`string`	`"hsl(220, 100%, 60%)"`	Color of the cursor caret and selection highlight.
`caretWidth?`	`number`	`2`	Width of the caret line in pixels.
`radius?`	`number`	`2`	Border radius of the caret and selection rects in pixels.
`cursorVariant?`	`"line" \| "block" \| "underline" \| "glow"`	`"line"`	Visual style of the cursor. One of: `"line"` (thin vertical bar), `"block"` (full-height block), `"underline"` (bar beneath the char), `"glow"` (line with a blurred halo).
`blinkSpeed?`	`number`	`530`	Caret blink interval in milliseconds.
`charAnimation?`	`"spring" \| "bounce" \| "fade" \| "slide" \| "wave" \| "typewriter"`	`"spring"`	Per-character entrance/exit animation preset. One of: `"spring"`, `"bounce"`, `"fade"`, `"slide"`, `"wave"`, `"typewriter"`.
`inputVariant?`	`"default" \| "ghost" \| "outline" \| "filled" \| "terminal" \| "minimal" \| "pill"`	-	Pre-built visual style for the input field. One of: `"default"`, `"ghost"`, `"outline"`, `"filled"`, `"terminal"`, `"minimal"`, `"pill"`.
`className?`	`string`	-	Additional classes applied to the outer wrapper element.
`fieldClassName?`	`string`	-	Additional classes applied to the visible field layer and mirrored onto the native field for matching text metrics.
`multiline?`	`boolean`	`false`	When true, renders a `<textarea>` instead of an `<input>` and enables line-wrapping.
`limitToWidth?`	`boolean`	`true`	Prevents single-line text from exceeding the field's available width by measuring each rendered character.
`value?`	`string`	-	Controlled value. When provided the component is fully controlled.
`defaultValue?`	`string`	`""`	Uncontrolled initial value.
`onChange?`	`(value: string) => void`	-	Callback fired with the current string value on every change.
`placeholder?`	`string`	-	Placeholder text shown when the field is empty.

Notes

AnimatedInput supports both controlled (value + onChange) and uncontrolled (defaultValue) usage.
Standard input attributes such as id, name, disabled, required, autoComplete, and ARIA attributes are forwarded to the native field.
The named AnimatedInput export is the recommended public API. TextCursorTypingInput and the default export remain available for backwards compatibility.
Set multiline to render a textarea while keeping the same character and cursor animations.
Single-line inputs measure each character independently so proportional fonts stay aligned. Set limitToWidth={false} to disable the automatic width cap.

Credits

Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.