Funny Animated Login Page with Moving Eyes & Emojis | Free Code

Create a funny animated login page with eye-tracking effects, floating emojis, and a modern glassmorphism design! ?? Get the free source code, step-by-step guide, and demo now! ?

Saturday, March 22, 2025
Funny Animated Login Page with Moving Eyes & Emojis | Free Code

Funny Animated Login Page with Moving Eyes and Emojis – Free Source Code

Are you looking for a fun and interactive login page for your website? This animated login page comes with eye-tracking animation, floating emojis, and a modern glassmorphism design to make user interaction more engaging.

In this tutorial, we’ll walk you through the features, code, and implementation of this exciting login page. Plus, you can download the complete source code for free!

Why Choose This Animated Login Page?

A boring login page can make users feel disengaged. By adding interactive animations, we can make the experience more fun and memorable! This JavaScript-powered login page includes:

✅ Eye-tracking animation – The eyes follow the cursor for a playful effect.
✅ Funny floating emojis – Random emojis appear in the background.
✅ Modern glassmorphism design – Semi-transparent login box for a stylish look.
✅ Fully responsive layout – Works perfectly on mobile, tablet, and desktop.
✅ Easy customization – Modify the emojis, styles, or animations as needed.

This design is perfect for websites, portfolio projects, or creative login pages where you want to add some extra personality.


How the Animation Works

This login page is created using HTML, CSS, and JavaScript, with the following key effects:

? Floating Emojis: Random emojis float upwards using CSS animations.
? Eye Movement: JavaScript detects the mouse position and moves the pupils accordingly.
? Glassmorphism UI: The login form has a modern, blurred background effect.

Complete Source Code

Below is the complete HTML, CSS, and JavaScript code for this funny animated login page. You can copy and paste this into your project or modify it to match your design.


Live Demo and Preview

? View Demo – Click here to see this fun login page in action!

Final Thoughts

This funny animated login page is an exciting way to engage users while keeping your website professional. You can customize the background, animations, or even add sound effects to make it even more entertaining!

? Got questions? Need help? Drop a comment below!

? Don’t forget to share this page with fellow developers!

? Happy Coding! ?

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="background_contianer">
        <div class="eye">
            <div class="pupil"></div>
        </div>
        <div class="eye">
            <div class="pupil"></div>
        </div>
    </div>
    <div class="animation-container"></div>
<!-- From Uiverse.io by Priyanshu02020 --> 
<div class="container">
    <div class="login-box">
      <form class="form">
        <div class="logo"></div>
        <span class="header">Welcome Back!</span>
        <input type="email" placeholder="Email" class="input" />
        <input type="password" placeholder="Password" class="input" />
        <button type="submit" class="button sign-in">Sign In</button>
        <button class="button google-sign-in">
          <svg
            class="icon"
            viewBox="-3 0 262 262"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid"
            fill="#000000"
          >
            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
            <g
              id="SVGRepo_tracerCarrier"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></g>
            <g id="SVGRepo_iconCarrier">
              <path
                d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
                fill="#4285F4"
              ></path>
              <path
                d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
                fill="#34A853"
              ></path>
              <path
                d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
                fill="#FBBC05"
              ></path>
              <path
                d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
                fill="#EB4335"
              ></path>
            </g>
          </svg>
          <span class="span two"> Sign in with Google </span>
        </button>
  
        <p class="footer">
          Don't have an account?
          <a href="" class="link">Sign up, it's free!</a>
          <br />
          <a href="" class="link">Forgot password?</a>
        </p>
      </form>
    </div>
  </div>
  
    
    <script src="script.js">
    </script>
</body>
</html>

CSS Code

/* From Uiverse.io by Priyanshu02020 
https://uiverse.io/Priyanshu02020/fluffy-treefrog-31*/ 
* {
    box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #282c34;
  text-align: center;
}
.animation-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.emoji {
  position: absolute;
  font-size: 2rem;
  animation: floatAnimation 5s linear infinite;
}
@keyframes floatAnimation {
  from {
      transform: translateY(100vh) rotate(0deg);
      opacity: 1;
  }
  to {
      transform: translateY(-10vh) rotate(360deg);
      opacity: 0;
  }
}
.login-container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 320px;
  text-align: center;
  z-index: 1;
}
.eye {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.pupil {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  transition: 0.1s linear;
}
@media (max-width: 500px) {
  .container {
      gap: 20px;
  }
  .eye {
      width: 50px;
      height: 50px;
  }
  .pupil {
      width: 15px;
      height: 15px;
  }
}

.background_contianer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
}

body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333333;
}

.container {
    --form-width: 315px;
    --aspect-ratio: 1.33;
    --input-color: #3a3a3a;
    --button-color: #373737;
    --footer-color: rgba(237, 7, 7, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--login-box-color);
    border-radius: 24px;
    width: calc(var(--form-width) + 1px);
    height: calc(var(--form-width) * var(--aspect-ratio) + 1px);
    z-index: 8;
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.2),
      0 8px 16px rgba(0, 0, 0, 0.2),
      0 0 8px rgba(255, 255, 255, 0.1),
      0 0 16px rgba(255, 255, 255, 0.08);
  }
  
  .container::before {
    content: "";
    position: absolute;
    inset: -50px;
    z-index: -2;
    background: conic-gradient(
      from 45deg,
      transparent 75%,
      #fff,
      transparent 100%
    );
    animation: spin 4s ease-in-out infinite;
  }
  
  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }
  
  .login-box {
    background: var(--login-box-color);
    border-radius: 24px;
    padding: 28px;
    width: var(--form-width);
    height: calc(var(--form-width) * var(--aspect-ratio));
    position: absolute;
    z-index: 10;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow:
      inset 0 40px 60px -8px rgba(255, 255, 255, 0.12),
      inset 4px 0 12px -6px rgba(255, 255, 255, 0.12),
      inset 0 0 12px -4px rgba(255, 255, 255, 0.12);
  }
  
  .form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }
  
  .logo {
    width: 65px;
    height: 65px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2),
      rgba(0, 0, 0, 0.2)
    );
    box-shadow:
      8px 8px 16px rgba(0, 0, 0, 0.2),
      -8px -8px 16px rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .logo::before {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 50%;
    height: 20%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 2.5px solid #fff;
  }
  
  .logo::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    border: 2.5px solid #fff;
  }
  
  .user {
    position: absolute;
    height: 50px;
    color: #fff;
  }
  
  .header {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 6px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: var(--input-color);
    color: white;
    outline: none;
    font-size: 14px;
  }
  
  .input:focus {
    border: 1px solid #fff;
  }
  
  .button {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: grid;
    place-content: center;
    gap: 10px;
    background: var(--button-color);
    color: white;
    transition: 0.3s;
    box-shadow:
      inset 0px 3px 6px -4px rgba(255, 255, 255, 0.6),
      inset 0px -3px 6px -2px rgba(0, 0, 0, 0.8);
  }
  .sign-in {
    margin-top: 5px;
  }
  
  .google-sign-in {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .button:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow:
      inset 0px 3px 6px rgba(255, 255, 255, 0.6),
      inset 0px -3px 6px rgba(0, 0, 0, 0.8),
      0px 0px 8px rgba(255, 255, 255, 0.05);
  }
  
  .icon {
    height: 16px;
  }
  
  .footer {
    width: 100%;
    text-align: left;
    color: var(--footer-color);
    font-size: 12px;
  }
  
  .footer .link {
    position: relative;
    color: var(--footer-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .footer .link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    border-radius: 6px;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
  }
  
  .footer .link:hover {
    color: #fff;
  }
  
  .footer .link:hover::after {
    width: 100%;
  }

JavaScript Code

const emojis = ['?', '?', '?', '?', '?', '?', '?', '?'];
const animationContainer = document.querySelector('.animation-container');

function createEmoji() {
    const emoji = document.createElement('div');
    emoji.classList.add('emoji');
    emoji.innerText = emojis[Math.floor(Math.random() * emojis.length)];
    emoji.style.left = Math.random() * 100 + 'vw';
    emoji.style.animationDuration = (Math.random() * 3 + 2) + 's';
    animationContainer.appendChild(emoji);
    
    setTimeout(() => {
        emoji.remove();
    }, 5000);
}

setInterval(createEmoji, 500);
document.addEventListener("mousemove", (event) => {
    const eyes = document.querySelectorAll(".eye .pupil");
    eyes.forEach((pupil) => {
        let eye = pupil.parentElement.getBoundingClientRect();
        let x = eye.left + eye.width / 2;
        let y = eye.top + eye.height / 2;
        let deltaX = event.clientX - x;
        let deltaY = event.clientY - y;
        let angle = Math.atan2(deltaY, deltaX);
        let moveX = Math.cos(angle) * 10;
        let moveY = Math.sin(angle) * 10;
        pupil.style.transform = `translate(${moveX}px, ${moveY}px)`;
    });
});

PHP Code

NO Need
Show Result

 Frequently Asked Questions (FAQ)

❓ How does the moving eye animation work in the login page?

The eye-tracking animation follows the cursor using JavaScript event listeners that calculate the angle and position of the user's mouse relative to the eyes. This effect makes the eyes appear to follow the user.

❓ Can I customize the floating emojis?

Yes! You can easily change the emoji set in the JavaScript file. Just modify the emojis array with your preferred emojis or icons. ?

❓ Is this login page mobile-friendly?

Absolutely! ? The design is fully responsive, ensuring a smooth experience on desktop, tablet, and mobile devices.

❓ Can I add a password strength checker?

Yes! You can integrate a password validation script using JavaScript to check for uppercase letters, numbers, and special characters.

❓ How do I download the source code?

You can copy the full source code from the blog post or download the files by clicking the link provided in the tutorial. ?

? My Final Thoughts (SEO Tips & Comments) ?

? This animated login page isn’t just fun—it boosts user engagement and makes sign-in interactive! Adding creative UI/UX features can improve retention rates and make websites more memorable.

? SEO Tip:

  • Use internal linking (e.g., "Check out our other CSS animations!")

  • Share on Reddit, Twitter, and forums for fast indexing

  • Embed a YouTube demo video (Google ranks multimedia content higher)

? What do you think? Drop a comment below & let’s make the web more fun! ???






Leave a Comment: 👇