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

1.1k

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

Records Form - HPower
records survey form

Author:
Anonymous

1 year ago

1.3k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

8 months ago

1.1k
Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Author:
Arya

3 years ago

12.8k
Modern and Fully Responsive Login Form with Social Media Authentication and Floating Label Inputs
This sleek, fully responsive login form is designed with usability and aesthetics in mind. It features a clean, minimalistic design with smooth transitions and modern UI elements. The form includes: Email and Password Inputs: Both fields feature floating labels that animate seamlessly when focused or filled, ensuring a visually appealing user experience. Input validation is built-in, and placeholders are hidden for a clean look. Social Media Login Buttons: Integrated Google and Facebook sign-in buttons, allowing users to authenticate easily using their social media accounts. These buttons are styled to match the platform’s branding and include an intuitive hover effect to enhance interactivity. “Forgot Password?” & “Remember Me” Options: The form allows users to easily reset their password or opt to remain logged in. These options are aligned neatly, and the labels are clear and concise for accessibility. Custom Styling: Built with Tailwind CSS, ensuring a responsive, mobile-first design that adapts seamlessly to any screen size. The form's design utilizes smooth hover effects, rounded corners, subtle shadow effects, and modern color schemes for an enhanced visual appeal. Easy Integration: This component can be easily integrated into any web application. Whether you're building a dashboard, a website, or a SaaS product, this login form is a perfect fit for any modern application that needs secure user authentication. Features: Fully responsive: Looks great on mobile, tablet, and desktop. Floating labels: Clear input fields with animated labels that enhance the user interface. Social Media Integration: Includes Google and Facebook login options for quick authentication. Password Reset: A "Forgot Password?" link allows for easy password recovery. Remember Me: A checkbox for staying logged in. Customizable Design: Built using Tailwind CSS, easy to adapt to match any branding. Smooth Interactivity: Subtle hover effects and animations for a modern user experience. This login form not only provides the essential features needed for user authentication but also elevates the user experience with its modern design and smooth animations.

Author:
Jay Dee

1 year ago

1.2k
Login with google provider
Login with google provider

Author:
Aman kumar

11 months ago

1.4k
Responsive Projects Section

Author:
ariaw

11 months ago

1k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

5 months ago

355
User registration form

Author:
Laurits

3 years ago

11.7k
Simple progress bar component

Author:
Prajwal Hallale

2 years ago

7.7k
Elevated Buton
On hover merge shadow

Author:
Anonymous

1 year ago

2.6k
chating
chating all social media

Author:
Nirere Esther

9 months ago

463
Login form #1
login form design

Author:
QQ-VVN

10 months ago

165

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components