Magical Show/Hide Password Animation

AI Overview: Magical Show/Hide Password Animation

This project is an interactive login form that features a "flashlight" animation to reveal a hidden password. Instead of a simple text toggle, it creates an immersive experience where clicking the eye icon switches the page to a dark theme and activates a yellow beam of light. This beam follows the user's mouse cursor, simulating a searchlight effect that "illuminates" the password field.

The project is built using a combination of CSS variables for theming and JavaScript for mathematical calculations. The "beam" itself is a wide div shaped into a triangle using the clip-path property. When the user moves their mouse, JavaScript calculates the angle between the cursor and the eye icon, then updates a CSS variable to rotate the beam in real-time.

Key Code Highlights

1. The HTML Structure
The password field is wrapped in a container that includes both the input and a specific div for the light beam.

<div class="input-wrapper">
  <input type="password" id="password" />
  <button type="button" id="eyeball"><div class="eye"></div></button>
  <div id="beam"></div>
</div>

This structure allows the beam and the eye icon to be positioned precisely relative to the password input.

2. Creating the Flashlight Shape
CSS is used to turn a standard rectangular box into a triangular beam using a polygon mask.

[id=beam] {
  clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
  transform-origin: 100% 50%;
  transform: translateY(-50%) rotate(var(--beamDegrees, 0));
}

The clip-path creates the triangular shape, while transform-origin ensures the beam rotates from the "eye" position rather than its own center.

3. Toggling the Visibility
When the eye icon is clicked, JavaScript toggles a CSS class on the body and changes the input type to reveal the characters.

eye.addEventListener('click', e => {
  document.body.classList.toggle('show-password');
  passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
});

This single function handles both the visual theme change (dark mode) and the functional password reveal.

4. Dynamic Rotation Logic
To make the beam follow the mouse, the script calculates the trigonometry required to find the correct rotation angle in degrees.

let rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY);
let degrees = (rad * (20 / Math.PI) * -1) - 350;

root.style.setProperty('--beamDegrees', `${degrees}deg`);

This snippet captures the mouse coordinates and converts them into a degree value that is passed back to the CSS variable.