Interactive next level Login form | HTML, CSS & JavaScript

<div class="glow-sphere glow-1"></div>
    <div class="glow-sphere glow-2"></div>

<div class="login-container" id="loginCard">
        
        
        <div class="success-overlay">
            <div class="success-checkmark">
                <i class="fa-solid fa-check"></i>
            </div>
            <h2 style="margin-top: 20px;">Welcome Back!</h2>
            <p style="color: var(--text-dim);">Logging you in...</p>
        </div>

<div class="avatar-area">
            <div class="face">
                <div class="eye"><div class="pupil"></div></div>
                <div class="eye"><div class="pupil"></div></div>
            </div>
        </div>

<h2>Account Login</h2>

<form id="loginForm" onsubmit="handleLogin(event)">
            
            <div class="input-group">
                <i class="fa-solid fa-envelope input-icon"></i>
                <input type="email" id="email" placeholder=" " required autocomplete="off">
                <label for="email">Email Address</label>
            </div>

<div class="input-group">
                <i class="fa-solid fa-lock input-icon"></i>
                <input type="password" id="password" placeholder=" " required>
                <label for="password">Password</label>
                <i class="fa-solid fa-eye toggle-password" id="passwordToggle"></i>
            </div>

<div class="utils">
                <label class="remember-me">
                    <input type="checkbox"> Remember me
                </label>
                <a href="#" class="forgot-pass">Forgot Password?</a>
            </div>

<button type="submit" class="submit-btn" id="submitBtn">
                Sign In
            </button>
        </form>
    </div>

:root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --bg-grad: linear-gradient(135deg, #0f0c20 0%, #15102a 100%);
            --glass: rgba(255, 255, 255, 0.03);
            --border: rgba(255, 255, 255, 0.08);
            --text: #ffffff;
            --text-dim: #a0a0b0;
        }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

body {
            background: var(--bg-grad);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            perspective: 1000px;
        }

/* Ambient Background Glows */
        .glow-sphere {
            position: absolute;
            border-radius: 50%;
            filter: blur(120px);
            z-index: 0;
            opacity: 0.6;
            animation: float 8s ease-in-out infinite alternate;
        }
        .glow-1 {
            width: 400px;
            height: 400px;
            background: var(--primary);
            top: -10%;
            left: 10%;
        }
        .glow-2 {
            width: 500px;
            height: 500px;
            background: #fd79a8;
            bottom: -10%;
            right: 10%;
            animation-delay: -4s;
        }

@keyframes float {
            0% { transform: translateY(0) scale(1); }
            100% { transform: translateY(40px) scale(1.1); }
        }

/* Login Container with 3D Tilt Effect */
        .login-container {
            position: relative;
            width: 400px;
            padding: 40px;
            background: var(--glass);
            border: 1px solid var(--border);
            border-radius: 24px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            z-index: 10;
            transform-style: preserve-3d;
            transition: transform 0.1s ease, box-shadow 0.3s ease;
        }

.login-container:hover {
            box-shadow: 0 30px 60px rgba(108, 92, 231, 0.15);
        }

/* Avatar Container & Interactive Eye Tracking */
        .avatar-area {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            position: relative;
        }

.face {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--border);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            transition: all 0.3s ease;
        }

.eye {
            width: 14px;
            height: 14px;
            background: #fff;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: height 0.1s ease;
        }

.pupil {
            width: 6px;
            height: 6px;
            background: var(--primary);
            border-radius: 50%;
            position: absolute;
        }

/* Shy/Blindfolded state when entering password */
        .login-container.hide-password .eye {
            height: 2px;
            background: var(--text-dim);
        }
        .login-container.hide-password .pupil {
            display: none;
        }

h2 {
            color: var(--text);
            text-align: center;
            margin-bottom: 30px;
            font-weight: 600;
            letter-spacing: 1px;
        }

/* Input Styling & Interactions */
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }

.input-group i.input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-dim);
            transition: color 0.3s ease;
            pointer-events: none;
        }

.input-group input {
            width: 100%;
            padding: 15px 15px 15px 45px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border);
            border-radius: 12px;
            outline: none;
            color: var(--text);
            font-size: 16px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.input-group label {
            position: absolute;
            left: 45px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-dim);
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

/* Floating Label & Focus States */
        .input-group input:focus,
        .input-group input:not(:placeholder-shown) {
            border-color: var(--primary);
            background: rgba(108, 92, 231, 0.05);
            box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
        }

.input-group input:focus ~ label,
        .input-group input:not(:placeholder-shown) ~ label {
            top: -12px;
            left: 12px;
            font-size: 12px;
            color: var(--secondary);
            padding: 0 8px;
            background: #120e24; /* Matches localized background behind text */
            border-radius: 4px;
        }

.input-group input:focus ~ i.input-icon {
            color: var(--secondary);
        }

/* Password Visibility Toggle */
        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-dim);
            cursor: pointer;
            transition: color 0.3s ease;
        }
        .toggle-password:hover {
            color: var(--text);
        }

/* Extra utilities */
        .utils {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 30px;
        }

.remember-me {
            display: flex;
            align-items: center;
            color: var(--text-dim);
            cursor: pointer;
        }

.remember-me input {
            margin-right: 8px;
            accent-color: var(--primary);
        }

.forgot-pass {
            color: var(--secondary);
            text-decoration: none;
            transition: opacity 0.3s;
        }
        .forgot-pass:hover {
            text-decoration: underline;
        }

/* Interactive Button with Particle Spark */
        .submit-btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(90deg, var(--primary), #8e44ad);
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
        }

.submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(108, 92, 231, 0.4);
        }

.submit-btn:active {
            transform: translateY(1px);
        }

/* Ripple effect on click */
        .ripple {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple-effect 0.6s linear;
            pointer-events: none;
        }

@keyframes ripple-effect {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

/* Form Success Animation State */
        .success-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #110d26;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
            z-index: 20;
        }

.login-container.success .success-overlay {
            opacity: 1;
            pointer-events: all;
        }

.success-checkmark {
            width: 80px;
            height: 80px;
            background: #00b894;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            color: white;
            transform: scale(0);
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
        }

.login-container.success .success-checkmark {
            transform: scale(1);
        }

const card = document.getElementById('loginCard');
        const pupils = document.querySelectorAll('.pupil');
        const passwordInput = document.getElementById('password');
        const passwordToggle = document.getElementById('passwordToggle');
        const loginForm = document.getElementById('loginForm');

// --- 1. Dynamic 3D Card Tilt Effect ---
        document.addEventListener('mousemove', (e) => {
            const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
            const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
            card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
        });

// Reset card tilt when mouse leaves window
        document.addEventListener('mouseleave', () => {
            card.style.transform = `rotateY(0deg) rotateX(0deg)`;
        });

// --- 2. Interactive Eye Pupil Tracking ---
        document.addEventListener('mousemove', (e) => {
            // Do not track if user is interacting with hidden password state
            if(card.classList.contains('hide-password')) return;

pupils.forEach(pupil => {
                const rect = pupil.getBoundingClientRect();
                const eyeX = rect.left + rect.width / 2;
                const eyeY = rect.top + rect.height / 2;
                
                // Angle and distance calculus
                const angle = Math.atan2(e.pageY - eyeY, e.pageX - eyeX);
                const distance = Math.min(4, Math.hypot(e.pageX - eyeX, e.pageY - eyeY) / 30); 
                
                const moveX = Math.cos(angle) * distance;
                const moveY = Math.sin(angle) * distance;
                
                pupil.style.transform = `translate(${moveX}px, ${moveY}px)`;
            });
        });

// --- 3. Password "Shy" Animation Trigger ---
        passwordInput.addEventListener('focus', () => {
            if(passwordInput.type === 'password') {
                card.classList.add('hide-password');
            }
        });

passwordInput.addEventListener('blur', () => {
            card.classList.remove('hide-password');
        });

// --- 4. Password Toggle Visibility Switcher ---
        passwordToggle.addEventListener('click', () => {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordToggle.classList.replace('fa-eye', 'fa-eye-slash');
                card.classList.remove('hide-password'); // look back at user
            } else {
                passwordInput.type = 'password';
                passwordToggle.classList.replace('fa-eye-slash', 'fa-eye');
                if(document.activeElement === passwordInput) {
                    card.classList.add('hide-password'); // hide eyes if still typing
                }
            }
        });

// --- 5. Button Click Ripple & Form Submission ---
        function handleLogin(e) {
            e.preventDefault();
            
            // Trigger Success State Animation
            card.classList.add('success');
            
            // Optional: simulate redirect/reset after animation loops
            setTimeout(() => {
                alert('Form Authenticated! Redirecting system...');
                card.classList.remove('success');
                loginForm.reset();
                pupils.forEach(p => p.style.transform = 'translate(0,0)');
            }, 2500);
        }

// Button Ripple Effect injection
        const btn = document.getElementById('submitBtn');
        btn.addEventListener('click', function(e) {
            let x = e.clientX - e.target.getBoundingClientRect().left;
            let y = e.clientY - e.target.getBoundingClientRect().top;
            let ripple = document.createElement('span');
            ripple.classList.add('ripple');
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            this.appendChild(ripple);
            setTimeout(() => { ripple.remove() }, 600);
        });

- Interactive next level Login form

Live Preview