Animated Input

1import { motion, useReducedMotion } from "motion/react";
2import { useId, useRef, useState } from "react";
3 
4const EASE_IN_OUT_CUBIC_X1 = 0.4;
5const EASE_IN_OUT_CUBIC_Y1 = 0;
6const EASE_IN_OUT_CUBIC_X2 = 0.2;
7const EASE_IN_OUT_CUBIC_Y2 = 1;
8 
9const LABEL_TRANSITION = {
10  duration: 0.28,
11  ease: [
12    EASE_IN_OUT_CUBIC_X1,
13    EASE_IN_OUT_CUBIC_Y1,
14    EASE_IN_OUT_CUBIC_X2,
15    EASE_IN_OUT_CUBIC_Y2,
16  ] as [number, number, number, number], // cubic-bezier tuple
17};
18 
19export interface AnimatedInputProps {
20  className?: string;
21  defaultValue?: string;
22  disabled?: boolean;
23  icon?: React.ReactNode;
24  inputClassName?: string;
25  label: string;
26  labelClassName?: string;
27  onChange?: (value: string) => void;
28  placeholder?: string;
29  value?: string;
30}
31 
32export default function AnimatedInput({
33  value,
34  defaultValue = "",
35  onChange,
36  label,
37  placeholder = "",
38  disabled = false,
39  className = "",
40  inputClassName = "",
41  labelClassName = "",
42  icon,
43}: AnimatedInputProps) {
44  const [internalValue, setInternalValue] = useState(defaultValue);
45  const isControlled = value !== undefined;
46  const val = isControlled ? value : internalValue;
47  const inputRef = useRef<HTMLInputElement>(null);
48  const [isFocused, setIsFocused] = useState(false);
49  const isFloating = !!val || isFocused;
50  const shouldReduceMotion = useReducedMotion();
51  const reactId = useId();
52  const inputId = `animated-input-${reactId.replace(/:/g, "")}`;
53 
54  const getLabelAnimation = () => {
55    if (shouldReduceMotion) {
56      return {};
57    }
58    if (isFloating) {
59      return {
60        borderColor: "var(--color-brand)",
61        color: "var(--color-brand)",
62        scale: 0.85,
63        y: -24,
64      };
65    }
66    return { color: "#6b7280", scale: 1, y: 0 };
67  };
68 
69  const getLabelStyle = () => {
70    if (!shouldReduceMotion) {
71      return {};
72    }
73    if (isFloating) {
74      return {
75        borderColor: "var(--color-brand)",
76        color: "var(--color-brand)",
77        transform: "translateY(-24px) scale(0.85)",
78      };
79    }
80    return {
81      color: "#6b7280",
82      transform: "translateY(0) scale(1)",
83    };
84  };
85 
86  return (
87    <div className={`relative flex items-center ${className}`}>
88      {icon ? (
89        <span
90          aria-hidden="true"
91          className="absolute top-1/2 left-3 -translate-y-1/2"
92        >
93          {icon}
94        </span>
95      ) : null}
96      <input
97        aria-label={label}
98// … truncated