React Animated Placeholder Input Component
Create a React component that has a text input field. When the user clicks inside the input field, the placeholder text should animate and move up to the border of the input field. The placeholder text should remain at the top border of the input field as the user types into the field. The component should have the following features: A text input field with a placeholder When the user clicks inside the input field, the placeholder text should animate and move up to the top border of the input field The placeholder text should remain at the top border of the input field as the user types into the field The component should use React hooks to manage the state and handle the animation The animation should be smooth and visually appealing The component should be reusable and customizable with props for the placeholder text, input field size, and animation duration The component should be well documented with comments explaining the functionality and usage The component should be styled using CSS or a CSS in JS library like styled components. The animation should be implemented using CSS animations or a library like Framer Motion.
