Close Menu
    JavaScript

    How to make Animated Hacker Login/Signup Form using HTML, CSS & JavaScript

    Coding StellaBy Updated:No Comments9 Mins Read

    Let’s create a modern Animated Hacker Login/Signup Form using HTML, CSS, and JavaScript. It will have a dark hacker-style design, glowing effects, smooth animations, and an interactive login/signup experience.

    We’ll use:

    • HTML to create the login/signup form, input fields, buttons, and UI elements.
    • CSS to create the hacker-style theme, glowing effects, animations, colors, and responsive design.
    • JavaScript to make the form interactive, switch between Login and Signup, validate the inputs, and handle smooth transitions.

    You can switch between the Login and Signup forms, enter your details, and interact with the animated elements to experience the full UI.

    This project is a simple way to learn how HTML, CSS, and JavaScript work together to create a modern, interactive, and animated authentication interface.

    HTML :

    HTML creates the basic structure of the hacker login page, including the Matrix background, terminal window, login/signup forms, input fields, buttons, and creator watermark. It also connects the CSS and JavaScript files.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Hacker login Form | Officially by @coding.stella</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Matrix Rain Background -->
    <canvas id="matrix-bg"></canvas>

    <!-- Terminal Window -->
    <div class="terminal-window">
        <!-- Fake OS Header -->
        <div class="terminal-header">
            <span>root@mainframe: ~/auth_module</span>
            <div class="terminal-controls">
                <span>_</span><span>[]</span><span>X</span>
            </div>
        </div>

        <div class="terminal-body">

            <!-- Login Section -->
            <div id="login-section" class="slide-in-right">
                <div class="terminal-text" id="login-title"></div>

                <form id="login-form">
                    <div class="terminal-input-group">
                        <span class="terminal-prompt">usr@mail:~$</span>
                        <input type="email" class="terminal-input" placeholder="enter_email" required autocomplete="off"
                            spellcheck="false">
                    </div>
                    <div class="terminal-input-group">
                        <span class="terminal-prompt">usr@pass:~$</span>
                        <input type="password" class="terminal-input" placeholder="enter_password" required
                            autocomplete="off" spellcheck="false">
                    </div>
                    <button type="submit" class="terminal-btn">[ EXECUTE_LOGIN ]</button>
                </form>

                <div style="margin-top: 2rem; font-size: 0.875rem;">
                    <span style="color: var(--text-muted);">No clearance?</span>
                    <button id="to-signup" class="terminal-link">INITIATE_SIGNUP</button>
                </div>
            </div>

            <!-- Signup Section (Hidden by Default) -->
            <div id="signup-section" class="hidden">
                <div class="terminal-text" id="signup-title"></div>

                <form id="signup-form">
                    <div class="terminal-input-group">
                        <span class="terminal-prompt">sys@alias:~$</span>
                        <input type="text" class="terminal-input" placeholder="enter_alias" required autocomplete="off"
                            spellcheck="false">
                    </div>
                    <div class="terminal-input-group">
                        <span class="terminal-prompt">sys@mail:~$</span>
                        <input type="email" class="terminal-input" placeholder="enter_email" required autocomplete="off"
                            spellcheck="false">
                    </div>
                    <div class="terminal-input-group">
                        <span class="terminal-prompt">sys@pass:~$</span>
                        <input type="password" class="terminal-input" placeholder="enter_password" required
                            autocomplete="off" spellcheck="false">
                    </div>
                    <button type="submit" class="terminal-btn">[ EXECUTE_SIGNUP ]</button>
                </form>

                <div style="margin-top: 2rem; font-size: 0.875rem;">
                    <span style="color: var(--text-muted);">Have clearance?</span>
                    <button id="to-login" class="terminal-link">EXECUTE_LOGIN</button>
                </div>
            </div>

        </div>
    </div>

    <!-- Custom Toast Alert -->
    <div id="toast" class="terminal-toast hidden"></div>

    <!-- Officially Created by @coding.stella -->
    <div class="watermark">
        <span>sys.creator >></span>
        <a href="https://instagram.com/coding.stella" target="_blank" rel="noopener noreferrer">@coding.stella</a>
    </div>

    <script src="script.js"></script>
</body>

</html>

    CSS :

    CSS gives the page its hacker-style look using a dark background, neon green colors, glowing effects, terminal design, animations, hover effects, slide transitions, and responsive styling for mobile devices.

    @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
    --bg-main: #020502;
    --term-bg: rgba(2, 10, 2, 0.85);
    --term-border: #004400;
    --accent: #00ff41;
    --accent-glow: rgba(0, 255, 65, 0.4);
    --text-muted: #008822;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Share Tech Mono', monospace;
    background: var(--bg-main);
    color: var(--accent);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* CRT Scanline Overlay */
body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* Matrix Background */
canvas#matrix-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

/* Terminal Window */
.terminal-window {
    position: relative;
    width: 650px;
    background: var(--term-bg);
    border: 1px solid var(--accent);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.1), inset 0 0 20px rgba(0, 255, 65, 0.05);
    border-radius: 4px;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.terminal-header {
    background: var(--accent);
    color: #000;
    padding: 6px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
}

.terminal-controls span {
    margin-left: 12px;
    cursor: pointer;
}

.terminal-body {
    padding: 50px;
    position: relative;
}

/* Typography */
.terminal-text {
    text-shadow: 0 0 5px var(--accent-glow);
    letter-spacing: 1px;
    font-size: 1.25rem;
    margin-bottom: 2rem;
    min-height: 1.5rem;
    /* Prevents layout shift during glitch typing */
}

/* Terminal Inputs */
.terminal-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px dashed var(--term-border);
    padding-bottom: 8px;
    transition: all 0.2s;
}

.terminal-input-group.focused {
    border-bottom: 1px solid var(--accent);
}

.terminal-prompt {
    margin-right: 15px;
    color: var(--text-muted);
    font-weight: bold;
}

.terminal-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--accent);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    flex: 1;
    text-shadow: 0 0 5px var(--accent-glow);
}

.terminal-input::placeholder {
    color: #003300;
}

.blinking-cursor {
    display: inline-block;
    width: 12px;
    height: 1.2rem;
    background: var(--accent);
    margin-left: 5px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Buttons */
.terminal-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.2rem;
    padding: 12px 0;
    width: 100%;
    margin-top: 30px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 2px;
}

.terminal-btn:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
}

.terminal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.terminal-link {
    background: transparent;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: text-shadow 0.2s;
    margin-left: 1rem;
}

.terminal-link:hover {
    text-shadow: 0 0 10px var(--accent-glow);
}

/* Transitions & Utility Classes */
.hidden {
    display: none !important;
}

.slide-in-right {
    animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-left {
    animation: slideInLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-out-left {
    animation: slideOutLeft 0.25s ease-in forwards;
}

.slide-out-right {
    animation: slideOutRight 0.25s ease-in forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes slideOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* Custom Terminal Toast */
.terminal-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #000;
    border: 1px solid var(--accent);
    padding: 15px 25px;
    color: var(--accent);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
    animation: toastIn 0.3s ease forwards;
}

@keyframes toastIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Creator Watermark */
.watermark {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: var(--text-muted);
    z-index: 1000;
    letter-spacing: 1px;
}

.watermark a {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease;
}

.watermark a:hover {
    text-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-glow);
    color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
    .terminal-window {
        width: 95%;
    }

    .terminal-body {
        padding: 30px 20px;
    }

    .watermark {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.85rem;
        width: max-content;
    }
}

    JavaScript:

    JavaScript makes the page interactive by creating the Matrix rain effect, adding glitch text animations, switching between Login and Signup forms, showing blinking input cursors, and displaying a success toast when a form is submitted.

    //

// --- MATRIX RAIN BACKGROUND ---
const canvas = document.getElementById('matrix-bg');
const ctx = canvas.getContext('2d');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

// Hacker characters
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789cod@#ing$%^&*()steｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
const fontSize = 16;
let columns = Math.floor(width / fontSize);
let drops = Array(columns).fill(1);

function drawMatrix() {
    // Translucent black background creates the fading trail effect
    ctx.fillStyle = 'rgba(0, 5, 0, 0.05)';
    ctx.fillRect(0, 0, width, height);

    ctx.fillStyle = '#0f0'; // Classic Matrix Green
    ctx.font = `${fontSize}px monospace`;

    for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        // Reset drop randomly after it crosses the screen
        if (drops[i] * fontSize > height && Math.random() > 0.975) {
            drops[i] = 0;
        }
        drops[i]++;
    }
}

setInterval(drawMatrix, 33);

window.addEventListener('resize', () => {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    columns = Math.floor(width / fontSize);
    drops = Array(columns).fill(1);
});


// --- TEXT GLITCH DECRYPTION EFFECT ---
function runGlitchText(element, finalString) {
    const chars = '01#$*!<>-_\\/[]{}—=+^?';
    let i = 0;
    element.innerText = '';

    if (element.glitchInterval) clearInterval(element.glitchInterval);

    element.glitchInterval = setInterval(() => {
        if (i >= finalString.length) {
            clearInterval(element.glitchInterval);
            element.innerText = finalString;
        } else {
            element.innerText = finalString.substring(0, i) + chars[Math.floor(Math.random() * chars.length)];
            i++;
        }
    }, 40);
}


// --- FORM SWITCHING LOGIC ---
const loginSection = document.getElementById('login-section');
const signupSection = document.getElementById('signup-section');
const toSignupBtn = document.getElementById('to-signup');
const toLoginBtn = document.getElementById('to-login');
const loginTitle = document.getElementById('login-title');
const signupTitle = document.getElementById('signup-title');

let isSwitching = false;

function switchForm(hideEl, showEl, titleEl, titleText, direction) {
    if (isSwitching) return;
    isSwitching = true;

    // Slide out the old form in the correct direction
    hideEl.classList.remove('slide-in-right', 'slide-in-left');
    hideEl.classList.add(direction === 'right' ? 'slide-out-left' : 'slide-out-right');

    // Add a satisfying delay before the new form slides in
    setTimeout(() => {
        hideEl.classList.add('hidden');
        hideEl.classList.remove('slide-out-left', 'slide-out-right');

        // Show new form with a smooth slide-in
        showEl.classList.remove('hidden', 'slide-in-right', 'slide-in-left', 'slide-out-left', 'slide-out-right');
        showEl.classList.add(direction === 'right' ? 'slide-in-right' : 'slide-in-left');

        runGlitchText(titleEl, titleText);

        setTimeout(() => {
            isSwitching = false;
        }, 450);
    }, 250); // The delay gap between out and in
}

toSignupBtn.addEventListener('click', () => {
    switchForm(loginSection, signupSection, signupTitle, '> NEW ENTITY DETECTED. GENERATING PROFILE...', 'right');
});

toLoginBtn.addEventListener('click', () => {
    switchForm(signupSection, loginSection, loginTitle, '> ACCESS RESTRICTED. IDENTIFY YOURSELF.', 'left');
});

// Run initial glitch effect on load
runGlitchText(loginTitle, '> ACCESS RESTRICTED. IDENTIFY YOURSELF.');


// --- INPUT FOCUS (BLINKING CURSOR) LOGIC ---
const inputs = document.querySelectorAll('.terminal-input');
inputs.forEach(input => {
    const group = input.parentElement;
    const cursor = document.createElement('span');
    cursor.className = 'blinking-cursor';

    input.addEventListener('focus', () => {
        group.classList.add('focused');
        group.appendChild(cursor);
    });

    input.addEventListener('blur', () => {
        group.classList.remove('focused');
        if (group.contains(cursor)) {
            group.removeChild(cursor);
        }
    });
});


// --- FORM SUBMISSION (FAKE LOADING & TOAST) ---
const forms = document.querySelectorAll('form');
const toast = document.getElementById('toast');

function showToast(msg) {
    toast.innerHTML = `<span class="toast-prefix">[ SUCCESS ]</span> ${msg}`;
    toast.classList.remove('hidden');

    // Hide toast after 3 seconds
    setTimeout(() => {
        toast.classList.add('hidden');
    }, 3000);
}

forms.forEach(form => {
    form.addEventListener('submit', (e) => {
        e.preventDefault();

        const btn = form.querySelector('.terminal-btn');
        const originalText = btn.innerText;

        // Simulating terminal execution
        btn.innerText = '[ EXECUTING... ]';
        btn.disabled = true;

        setTimeout(() => {
            btn.innerText = originalText;
            btn.disabled = false;

            // Show toast based on which form was submitted
            const successMsg = form.id === 'login-form'
                ? 'SYSTEM BREACHED. WELCOME.'
                : 'ENTITY REGISTERED. WELCOME.';

            showToast(successMsg);
        }, 1500);
    });
});

    In this project, we created a modern Animated Hacker Login/Signup Form using HTML, CSS, and JavaScript. HTML built the structure, CSS added the glowing hacker-style design and animations, and JavaScript made the form interactive with login/signup switching and validation.

    This project is a simple and practical way to understand how HTML, CSS, and JavaScript work together to create an interactive and visually engaging web interface.

    If you face any issues with your project, don’t worry! You can grab the source code for this project by clicking the Download button. Ready to kick off your coding journey? Happy coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply