Bouncy Input Nova

1"use client";
2 
3import React, { useState, useEffect } from "react";
4import { motion, useAnimation } from "motion/react";
5 
6const BouncyInput = () => {
7  const [value, setValue] = useState("");
8  const controls = useAnimation();
9 
10  // re-trigger bounce whenever value changes
11  useEffect(() => {
12    controls.start({
13      scaleX: [1, 1.01, 1],
14      scaleY: [1, 1.1, 1],
15      transition: { duration: 0.2, ease: "easeInOut" },
16    });
17  }, [value, controls]);
18 
19  return (
20    <div className="relative justify-center items-center w-full">
21      <motion.div
22        animate={controls}
23        className="h-full w-full max-w-md flex items-center justify-center text-black overflow-hidden border-[0.6px] box-border border-gray-300 rounded-md px-3 py-2 absolute bg-transparent z-10"
24      ></motion.div>
25      <input
26        placeholder="Type something..."
27        type="text"
28        className="w-full text-white focus:outline-none px-3 py-2 z-20 relative bg-transparent"
29        value={value}
30        onChange={(e) => setValue(e.target.value)}
31      />
32    </div>
33  );
34};
35 
36export default BouncyInput