Register animations

src/components/auth/ContinueWith.tsx

@@ -15,12 +15,12 @@ export default function ContinueWith() {
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-3 animate-fade-in stagger-4">
         <Button variant="outline">
           <Github className="h-4 w-4" />
           GitHub
         </Button>
-        <Button variant="outline">
+        <Button variant="outline" className="animate-fade-in stagger-5">
           <Mail className="h-4 w-4" />
           Google
         </Button>

src/components/auth/RegisterPage.tsx

@@ -28,32 +28,37 @@ export function RegisterPage() {
 
       <Card className="w-full max-w-md relative">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center animate-fade-in">
             <UserPlus className="h-6 w-6 text-primary" />
           </div>
-          <CardTitle className="text-2xl">Create your account</CardTitle>
+          <CardTitle className="text-2xl animate-fade-in stagger-1">
-          <CardDescription>
+            Create your account
+          </CardTitle>
+          <CardDescription className="animate-fade-in stagger-2">
             Join the grind. Track runs, set records, compete globally.
           </CardDescription>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <div className="space-y-4">
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in">
               <Label htmlFor="username">Username</Label>
               <Input id="username" placeholder="speedrunner67" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-1">
               <Label htmlFor="email">Email</Label>
               <Input id="email" type="email" placeholder="[email protected]" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-2">
               <Label htmlFor="password">Password</Label>
               <Input id="password" type="password" placeholder="••••••••" />
             </div>
           </div>
 
-          <Button className="w-full" variant="secondary">
+          <Button
+            className="w-full animate-fade-in stagger-3"
+            variant="secondary"
+          >
             Create Account
           </Button>