Animated Input

<script setup lang="ts">
import { AnimatedInput } from '@/components/ui/animated-input'
</script>

<template>
  <div class="w-full max-w-sm space-y-4">
    <div class="flex flex-col gap-2">
      <label class="text-sm font-medium">Username</label>
      <AnimatedInput placeholder="johndoe" />
    </div>

    <div class="flex flex-col gap-2">
      <label class="text-sm font-medium">Email</label>
      <AnimatedInput placeholder="john@example.com" type="email" />
    </div>
  </div>
</template>