Home
Nicole Shalom
Amazing 3D Login and Registiration Aniamation Form

Amazing 3D Login and Registiration Aniamation Form

create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

This tailwind example is contributed by Nicole Shalom, on 25-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in,Transitions

Form Login Form Progress Bar Animation

Author Nicole Shalom

162

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Authentication Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
        }

.auth-container {
            perspective: 1200px;
            transform-style: preserve-3d;
        }

.form-card {
            transform-style: preserve-3d;
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            backface-visibility: hidden;
        }

.form-card.flipped {
            transform: rotateY(180deg);
        }

.form-side {
            backface-visibility: hidden;
            transition: all 0.6s ease;
        }

.form-back {
            transform: rotateY(180deg);
        }

.floating-shapes {
            animation: float 8s ease-in-out infinite;
        }

.floating-shapes:nth-child(2) {
            animation-delay: -2s;
        }

.floating-shapes:nth-child(3) {
            animation-delay: -4s;
        }

.floating-shapes:nth-child(4) {
            animation-delay: -6s;
        }

@keyframes float {
            0%, 100% { 
                transform: translateY(0px) translateX(0px) rotate(0deg); 
                opacity: 0.7;
            }
            25% { 
                transform: translateY(-20px) translateX(10px) rotate(90deg); 
                opacity: 0.8;
            }
            50% { 
                transform: translateY(-10px) translateX(-10px) rotate(180deg); 
                opacity: 0.6;
            }
            75% { 
                transform: translateY(-30px) translateX(5px) rotate(270deg); 
                opacity: 0.9;
            }
        }

.particle {
            animation: particleFloat 6s linear infinite;
        }

@keyframes particleFloat {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

.input-group {
            position: relative;
        }

.input-group input:focus + label,
        .input-group input:not(:placeholder-shown) + label {
            transform: translateY(-28px) scale(0.8);
            color: #8b5cf6;
        }

.input-group label {
            transition: all 0.3s ease;
            transform-origin: left top;
        }

.glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.gradient-border {
            background: linear-gradient(45deg, #8b5cf6, #06b6d4, #10b981, #f59e0b);
            padding: 2px;
            border-radius: 16px;
        }

.gradient-border-inner {
            background: rgba(17, 24, 39, 0.95);
            border-radius: 14px;
        }

.social-btn {
            transition: all 0.3s ease;
            transform: translateY(0);
        }

.social-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

.ripple-effect {
            position: relative;
            overflow: hidden;
        }

.ripple-effect:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

.ripple-effect:active:before {
            width: 300px;
            height: 300px;
        }

.pulse {
            animation: pulse 2s infinite;
        }

@keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
            }
        }

.slide-in {
            animation: slideIn 0.6s ease-out forwards;
        }

@keyframes slideIn {
            0% {
                transform: translateY(30px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

.glow-effect {
            box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
        }

.loading {
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900 min-h-screen overflow-hidden relative">
    
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        
        <div class="floating-shapes absolute top-20 left-10 w-20 h-20 bg-gradient-to-r from-purple-500/30 to-pink-500/30 rounded-full blur-xl"></div>
        <div class="floating-shapes absolute top-40 right-20 w-32 h-32 bg-gradient-to-r from-blue-500/30 to-cyan-500/30 rounded-lg blur-xl"></div>
        <div class="floating-shapes absolute bottom-32 left-1/4 w-24 h-24 bg-gradient-to-r from-green-500/30 to-emerald-500/30 rounded-full blur-xl"></div>
        <div class="floating-shapes absolute top-1/2 right-10 w-16 h-16 bg-gradient-to-r from-yellow-500/30 to-orange-500/30 rounded-lg blur-xl"></div>
        
        
        <div id="particles-container" class="absolute inset-0"></div>
    </div>

<div class="min-h-screen flex items-center justify-center p-4">
        <div class="auth-container w-full max-w-md">
            
            <div id="formCard" class="form-card relative">
                
                <div class="form-side form-front absolute inset-0">
                    <div class="gradient-border glow-effect">
                        <div class="gradient-border-inner p-8">
                            
                            <div class="text-center mb-8 slide-in">
                                <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4 pulse">
                                    <i class="fas fa-lock text-white text-2xl"></i>
                                </div>
                                <h2 class="text-3xl font-bold text-white mb-2">Welcome Back</h2>
                                <p class="text-gray-400">Sign in to your account</p>
                            </div>

<div class="mb-6 slide-in" style="animation-delay: 0.1s;">
                                <div class="grid grid-cols-3 gap-3 mb-4">
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-google text-red-400 text-xl group-hover:scale-110 transition-transform"></i>
                                    </button>
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-github text-gray-300 text-xl group-hover:scale-110 transition-transform"></i>
                                    </button>
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-facebook text-blue-400 text-xl group-hover:scale-110 transition-transform"></i>
                                    </button>
                                </div>
                                <div class="relative">
                                    <div class="absolute inset-0 flex items-center">
                                        <div class="w-full border-t border-gray-600"></div>
                                    </div>
                                    <div class="relative flex justify-center text-sm">
                                        <span class="px-2 bg-gray-900 text-gray-400">or continue with email</span>
                                    </div>
                                </div>
                            </div>

<form id="loginForm" class="space-y-6">
                                <div class="input-group slide-in" style="animation-delay: 0.2s;">
                                    <input type="email" id="loginEmail" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-purple-500 focus:bg-white/15 transition-all duration-300" required>
                                    <label for="loginEmail" class="absolute left-4 top-3 text-gray-400 pointer-events-none">Email Address</label>
                                </div>

<div class="input-group slide-in" style="animation-delay: 0.3s;">
                                    <input type="password" id="loginPassword" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-purple-500 focus:bg-white/15 transition-all duration-300" required>
                                    <label for="loginPassword" class="absolute left-4 top-3 text-gray-400 pointer-events-none">Password</label>
                                    <button type="button" class="absolute right-3 top-3 text-gray-400 hover:text-white transition-colors" onclick="togglePassword('loginPassword')">
                                        <i class="fas fa-eye" id="loginPasswordIcon"></i>
                                    </button>
                                </div>

<div class="flex items-center justify-between slide-in" style="animation-delay: 0.4s;">
                                    <label class="flex items-center text-sm text-gray-400">
                                        <input type="checkbox" class="mr-2 rounded border-gray-600 bg-gray-800 text-purple-500 focus:ring-purple-500">
                                        Remember me
                                    </label>
                                    <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">Forgot password?</a>
                                </div>

<div class="text-center mt-6 slide-in" style="animation-delay: 0.6s;">
                                <p class="text-gray-400">Don't have an account? 
                                    <button onclick="flipCard()" class="text-purple-400 hover:text-purple-300 transition-colors font-semibold">Sign up</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="form-side form-back absolute inset-0">
                    <div class="gradient-border glow-effect">
                        <div class="gradient-border-inner p-8">
                            
                            <div class="text-center mb-8">
                                <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4 pulse">
                                    <i class="fas fa-user-plus text-white text-2xl"></i>
                                </div>
                                <h2 class="text-3xl font-bold text-white mb-2">Create Account</h2>
                                <p class="text-gray-400">Join us today</p>
                            </div>

<div class="mb-6">
                                <div class="grid grid-cols-4 gap-3 mb-4">
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-google text-red-400 text-lg group-hover:scale-110 transition-transform"></i>
                                    </button>
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-github text-gray-300 text-lg group-hover:scale-110 transition-transform"></i>
                                    </button>
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-facebook text-blue-400 text-lg group-hover:scale-110 transition-transform"></i>
                                    </button>
                                    <button class="social-btn glass-effect p-3 rounded-lg hover:bg-white/20 group">
                                        <i class="fab fa-twitter text-sky-400 text-lg group-hover:scale-110 transition-transform"></i>
                                    </button>
                                </div>
                                <div class="relative">
                                    <div class="absolute inset-0 flex items-center">
                                        <div class="w-full border-t border-gray-600"></div>
                                    </div>
                                    <div class="relative flex justify-center text-sm">
                                        <span class="px-2 bg-gray-900 text-gray-400">or register with email</span>
                                    </div>
                                </div>
                            </div>

<form id="registerForm" class="space-y-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="input-group">
                                        <input type="text" id="firstName" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-blue-500 focus:bg-white/15 transition-all duration-300" required>
                                        <label for="firstName" class="absolute left-4 top-3 text-gray-400 pointer-events-none">First Name</label>
                                    </div>
                                    <div class="input-group">
                                        <input type="text" id="lastName" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-blue-500 focus:bg-white/15 transition-all duration-300" required>
                                        <label for="lastName" class="absolute left-4 top-3 text-gray-400 pointer-events-none">Last Name</label>
                                    </div>
                                </div>

<div class="input-group">
                                    <input type="email" id="registerEmail" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-blue-500 focus:bg-white/15 transition-all duration-300" required>
                                    <label for="registerEmail" class="absolute left-4 top-3 text-gray-400 pointer-events-none">Email Address</label>
                                </div>

<div class="input-group">
                                    <input type="password" id="registerPassword" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-blue-500 focus:bg-white/15 transition-all duration-300" required>
                                    <label for="registerPassword" class="absolute left-4 top-3 text-gray-400 pointer-events-none">Password</label>
                                    <button type="button" class="absolute right-3 top-3 text-gray-400 hover:text-white transition-colors" onclick="togglePassword('registerPassword')">
                                        <i class="fas fa-eye" id="registerPasswordIcon"></i>
                                    </button>
                                </div>

<div class="input-group">
                                    <input type="password" id="confirmPassword" placeholder=" " class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-transparent focus:outline-none focus:border-blue-500 focus:bg-white/15 transition-all duration-300" required>
                                    <label for="confirmPassword" class="absolute left-4 top-3 text-gray-400 pointer-events-none">Confirm Password</label>
                                </div>

<label class="flex items-center text-sm text-gray-400">
                                    <input type="checkbox" class="mr-2 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500" required>
                                    I agree to the <a href="#" class="text-blue-400 hover:text-blue-300">Terms of Service</a> and <a href="#" class="text-blue-400 hover:text-blue-300">Privacy Policy</a>
                                </label>

<button type="submit" class="ripple-effect w-full py-3 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105">
                                    <span class="flex items-center justify-center">
                                        <i class="fas fa-user-plus mr-2"></i>
                                        Create Account
                                    </span>
                                </button>
                            </form>

<div class="text-center mt-6">
                                <p class="text-gray-400">Already have an account? 
                                    <button onclick="flipCard()" class="text-blue-400 hover:text-blue-300 transition-colors font-semibold">Sign in</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="messageContainer" class="fixed top-4 right-4 z-50"></div>

init() {
                this.bindEvents();
                this.startParticleAnimation();
            }

bindEvents() {
                document.getElementById('loginForm').addEventListener('submit', this.handleLogin.bind(this));
                document.getElementById('registerForm').addEventListener('submit', this.handleRegister.bind(this));
                
                // Add social login handlers
                document.querySelectorAll('.social-btn').forEach(btn => {
                    btn.addEventListener('click', this.handleSocialLogin.bind(this));
                });
            }

async handleLogin(e) {
                e.preventDefault();
                const formData = new FormData(e.target);
                const email = document.getElementById('loginEmail').value;
                const password = document.getElementById('loginPassword').value;

this.showLoading(e.target.querySelector('button[type="submit"]'));

try {
                    // Simulate API call
                    await this.simulateApiCall();
                    this.showMessage('Login successful! Welcome back.', 'success');
                } catch (error) {
                    this.showMessage('Login failed. Please check your credentials.', 'error');
                } finally {
                    this.hideLoading(e.target.querySelector('button[type="submit"]'));
                }
            }

async handleRegister(e) {
                e.preventDefault();
                const password = document.getElementById('registerPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;

if (password !== confirmPassword) {
                    this.showMessage('Passwords do not match!', 'error');
                    return;
                }

this.showLoading(e.target.querySelector('button[type="submit"]'));

try {
                    // Simulate API call
                    await this.simulateApiCall();
                    this.showMessage('Account created successfully! Please verify your email.', 'success');
                } catch (error) {
                    this.showMessage('Registration failed. Please try again.', 'error');
                } finally {
                    this.hideLoading(e.target.querySelector('button[type="submit"]'));
                }
            }

handleSocialLogin(e) {
                const platform = this.getSocialPlatform(e.currentTarget);
                this.showMessage(`Redirecting to ${platform}...`, 'info');
                
                // Simulate social login redirect
                setTimeout(() => {
                    this.showMessage(`${platform} login completed!`, 'success');
                }, 2000);
            }

getSocialPlatform(button) {
                const icon = button.querySelector('i');
                if (icon.classList.contains('fa-google')) return 'Google';
                if (icon.classList.contains('fa-github')) return 'GitHub';
                if (icon.classList.contains('fa-facebook')) return 'Facebook';
                if (icon.classList.contains('fa-twitter')) return 'Twitter';
                return 'Social Platform';
            }

showLoading(button) {
                const originalContent = button.innerHTML;
                button.innerHTML = '<i class="fas fa-spinner loading mr-2"></i>Processing...';
                button.disabled = true;
                button.dataset.originalContent = originalContent;
            }

hideLoading(button) {
                button.innerHTML = button.dataset.originalContent;
                button.disabled = false;
            }

simulateApiCall() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        Math.random() > 0.2 ? resolve() : reject();
                    }, 1500);
                });
            }

showMessage(message, type) {
                const messageEl = document.createElement('div');
                messageEl.className = `p-4 rounded-lg mb-4 text-white slide-in ${
                    type === 'success' ? 'bg-green-600' : 
                    type === 'error' ? 'bg-red-600' : 'bg-blue-600'
                }`;
                messageEl.innerHTML = `
                    <div class="flex items-center">
                        <i class="fas ${
                            type === 'success' ? 'fa-check-circle' : 
                            type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'
                        } mr-2"></i>
                        ${message}
                    </div>
                `;

document.getElementById('messageContainer').appendChild(messageEl);

setTimeout(() => {
                    messageEl.remove();
                }, 5000);
            }

createParticles() {
                const container = document.getElementById('particles-container');
                
                setInterval(() => {
                    const particle = document.createElement('div');
                    particle.className = 'particle absolute w-1 h-1 bg-white/30 rounded-full';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.animationDelay = Math.random() * 2 + 's';
                    
                    container.appendChild(particle);
                    
                    setTimeout(() => {
                        particle.remove();
                    }, 6000);
                }, 300);
            }

startParticleAnimation() {
                // Additional particle effects can be added here
            }
        }

// Global functions
        function flipCard() {
            const formCard = document.getElementById('formCard');
            formCard.classList.toggle('flipped');
        }

// Initialize the form when DOM is loaded
        document.addEventListener('DOMContentLoaded', () => {
            new AuthForm();
        });

// Add some interactive effects
        document.addEventListener('mousemove', (e) => {
            const mouseX = e.clientX / window.innerWidth;
            const mouseY = e.clientY / window.innerHeight;
            
            document.querySelectorAll('.floating-shapes').forEach((shape, index) => {
                const speed = (index + 1) * 0.01;
                const x = (mouseX - 0.5) * speed * 100;
                const y = (mouseY - 0.5) * speed * 100;
                
                shape.style.transform = `translate(${x}px, ${y}px)`;
            });
        });
    </script>
</body>
</html>

Related Examples