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

359

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

Full page sign-In form

Author:
Anonymous

1 year ago

3k
Appointment booking form

Author:
Leif99

2 years ago

17.3k
Simple contact us form

Author:
Lukas Müller

2 years ago

11.3k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.9k
Feedback Form with rating input
take users feedback with this simple form

Author:
Nour Haider

2 years ago

10.5k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

16.3k
Responsive Registration Form with Tailwind CSS
A clean, mobile-friendly user registration form built using Tailwind CSS. It includes fields for full name, email, password, terms agreement, and styled components with hover and focus transitions.

Author:
Sudip chaudhary

2 months ago

305
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.7k
Sign-In Form with Tailwind CSS
Elegant sign in form

Author:
Carlos

10 months ago

1.3k
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

9 months ago

1.6k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

4 months ago

588
Simple Form 3

Author:
Mr Robot

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components