Bouncy Input Retro

1"use client";
2 
3import React, { useState, useEffect } from "react";
4import { motion, useAnimation } from "motion/react";
5 
6export function BouncyInputRetro() {
7  const [value, setValue] = useState("");
8  const [isFocused, setIsFocused] = useState(false);
9  const controls = useAnimation();
10 
11  useEffect(() => {
12    if (value.length > 0) {
13        controls.start({
14            x: [0, 2, -2, 0],
15            transition: { duration: 0.1 }
16        });
17    }
18  }, [value, controls]);
19 
20  return (
21    <div className="relative w-full max-w-md bg-white">
22        <div className={`absolute top-0 left-0 w-full h-full border-2 border-black shadow-[4px_4px_0px_0px_#000000] bg-white transition-all duration-200 ${isFocused ? 'translate-x-[2px] translate-y-[2px] shadow-none' : ''}`}></div>
23        
24        <div className="relative z-10 flex items-center px-4 py-3 font-mono text-black">
25            <span className="mr-2 font-bold text-lg select-none">{">"}</span>
26            <input
27                type="text"
28                value={value}
29                onChange={(e) => setValue(e.target.value)}
30                onFocus={() => setIsFocused(true)}
31                onBlur={() => setIsFocused(false)}
32                className="w-full bg-transparent border-none outline-none text-lg font-bold placeholder-gray-500 uppercase tracking-wider"
33                placeholder="ENTER_COMMAND..."
34                autoComplete="off"
35                spellCheck="false"
36            />
37            <motion.div
38                animate={controls} 
39                className={`w-3 h-6 bg-black ml-1 ${isFocused ? 'animate-pulse' : 'opacity-0'}`}
40            ></motion.div>
41        </div>
42        
43        <div className="absolute -top-3 left-4 bg-white text-black px-2 border-2 border-black text-xs font-bold uppercase tracking-widest z-20">
44            INPUT_TERMINAL
45        </div>
46    </div>
47    
48  );
49}