Animated Input

1"use client";
2 
3import React, {
4  useCallback,
5  useEffect,
6  useRef,
7  useState,
8  forwardRef,
9} from "react";
10import {
11  motion,
12  MotionConfig,
13  AnimatePresence,
14  type TargetAndTransition,
15  type Transition,
16} from "motion/react";
17 
18type CharAnimDef = {
19  initial: TargetAndTransition;
20  animate: TargetAndTransition;
21  exit: TargetAndTransition;
22  transition: Transition;
23};
24import { cn } from "@/lib/utils";
25 
26// ---------------------------------------------------------------------------
27// Types
28// ---------------------------------------------------------------------------
29 
30interface CursorRect {
31  x: number;
32  y: number;
33  width: number;
34  height: number;
35}
36 
37type CursorState =
38  | { type: "hidden" }
39  | { type: "caret"; rect: CursorRect }
40  | { type: "selection"; rects: CursorRect[] };
41 
42/**
43 * Character entrance/exit animation preset.
44 *
45 * - `spring`     — scale + fade with a springy bounce (default)
46 * - `bounce`     — exaggerated spring overshoot
47 * - `fade`       — simple opacity only
48 * - `slide`      — slides up from below
49 * - `wave`       — per-char cascading slide (uses CSS delay via index)
50 * - `typewriter` — instant appear/disappear, no animation
51 */
52export type CharAnimation =
53  | "spring"
54  | "bounce"
55  | "fade"
56  | "slide"
57  | "wave"
58  | "typewriter";
59 
60/**
61 * Visual style of the cursor caret.
62 *
63 * - `line`       — thin vertical bar (default)
64 * - `block`      — full-height filled block behind the char
65 * - `underline`  — thin horizontal bar beneath the char
66 * - `glow`       — line with a blurred glow halo
67 */
68export type CursorVariant = "line" | "block" | "underline" | "glow";
69 
70/**
71 * Pre-built visual preset for the input field itself.
72 * Applies a `fieldClassName` baseline that can be overridden.
73 *
74 * - `default`    — rounded border on dark bg
75 * - `ghost`      — no border, subtle bg
76 * - `outline`    — border only, transparent bg
77 * - `filled`     — solid neutral fill, no border
78 * - `terminal`   — monospace, dark green on near-black
79 * - `minimal`    — bottom border only (underline style)
80 * - `pill`       — heavily rounded, soft bg
81 */
82export type InputVariant =
83  | "default"
84  | "ghost"
85  | "outline"
86  | "filled"
87  | "terminal"
88  | "minimal"
89  | "pill";
90 
91// ---------------------------------------------------------------------------
92// Preset maps
93// ---------------------------------------------------------------------------
94 
95const CHAR_ANIMATION_MAP: Record<CharAnimation, CharAnimDef> = {
96// … truncated