Sign In

The SignInCard is a sophisticated, standalone sign-in component featuring advanced interactive elements and polished visual effects. It implements a modern 3D card design with mouse-tracking rotation, parallax depth effects, and an animated background blob that follows cursor movement. The component offers seamless dark/light mode switching with smooth transitions between themes. Users can sign in with email and password (featuring animated input fields with focus states) or choose from social login options. Additional UI enhancements include custom cursor effects, animated button states, and a success screen with animations. The component is fully self-contained with inline styles and dynamically injected keyframes, making it highly portable while delivering a premium, app-like authentication experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sign In to your project and fits it to your theme.

// demo.tsx
import * as React from "react"
import { SignInCard } from "@/components/ui/sign-in-1"

function DemoSignIn() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-muted">
      <SignInCard />
    </div>
  )
}

export { DemoSignIn }